From aec317e5e621a10129c41664ea80ee3bdc478bd3 Mon Sep 17 00:00:00 2001
From: taitus <sebastia.roig@gmail.com>
Date: Fri, 22 Jul 2022 10:52:53 +0200
Subject: [PATCH] Unify annotations comment icon to new structure

Apply new structure in the section that shows the comments icon together
with the number of comments so that it is easier to unify them into one
component.

Please note that we updated the comment-number class to comments-count
in order to simplify the css in the new component in the next commit.
---
 app/assets/stylesheets/layout.scss                   | 12 ++++++++++++
 app/assets/stylesheets/legislation_process.scss      | 10 ----------
 .../legislation/annotations/_comment_header.html.erb |  9 +++------
 app/views/legislation/annotations/_form.html.erb     |  3 +--
 app/views/legislation/annotations/comments.js.erb    |  4 ++--
 .../draft_versions/_comments_panel.html.erb          |  3 +--
 6 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ffb7f07f9..4fd3010a4 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2080,6 +2080,18 @@ table {
   }
 }
 
+.comment-header {
+
+  .comments-count {
+    @include has-fa-icon(comment, solid);
+
+    &::before {
+      margin-right: 0.3rem;
+      color: #838383;
+    }
+  }
+}
+
 // 16. Flags
 // ---------
 
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 68557d2b5..2592c59e3 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -603,20 +603,10 @@
         }
 
         .comment-header {
-          color: #838383;
           padding-bottom: rem-calc(8);
           margin-bottom: rem-calc(16);
           border-bottom: 1px solid $border;
 
-          .comment-number {
-            color: $text;
-            display: inline-block;
-          }
-
-          .icon-comment {
-            margin-right: rem-calc(8);
-          }
-
           a .icon-expand {
             color: #838383;
             font-size: $small-font-size;
diff --git a/app/views/legislation/annotations/_comment_header.html.erb b/app/views/legislation/annotations/_comment_header.html.erb
index 12a386206..c3ee785ec 100644
--- a/app/views/legislation/annotations/_comment_header.html.erb
+++ b/app/views/legislation/annotations/_comment_header.html.erb
@@ -1,9 +1,6 @@
-<span class="icon-comment" aria-hidden="true"></span>
-
-<div class="comment-number">
-  <%= t("legislation.annotations.comments.comments_count",
-      count: annotation.comments.roots.count) %>
-</div>
+<span class="comments-count">
+  <%= t("legislation.annotations.comments.comments_count", count: annotation.comments.roots.count) %>
+</span>
 
 <span id="annotation-link" data-sub-annotation-ids="8">
   <%= render "annotation_link", annotation: annotation %>
diff --git a/app/views/legislation/annotations/_form.html.erb b/app/views/legislation/annotations/_form.html.erb
index c843141f2..f71606283 100644
--- a/app/views/legislation/annotations/_form.html.erb
+++ b/app/views/legislation/annotations/_form.html.erb
@@ -1,7 +1,6 @@
 <div class="comment-box">
   <div class="comment-header">
-    <span class="icon-comment" aria-hidden="true"></span>
-    <div class="comment-number"><%= t("legislation.annotations.comments.comments_count", count: 0) %></div>
+    <span class="comments-count"><%= t("legislation.annotations.comments.comments_count", count: 0) %></span>
   </div>
 
   <div class="comments-wrapper">
diff --git a/app/views/legislation/annotations/comments.js.erb b/app/views/legislation/annotations/comments.js.erb
index 4e5a676c7..1e0985217 100644
--- a/app/views/legislation/annotations/comments.js.erb
+++ b/app/views/legislation/annotations/comments.js.erb
@@ -14,11 +14,11 @@ if ($(".comment").length == 0) {
 
   $("#annotation-link a").attr("href", new_annotation_link)
 
-  var current_comment_text = $(".comment-number").text()
+  var current_comment_text = $(".comments-count").text()
   var current_comment_count = current_comment_text.match(/\d+/)[0]
   var new_comment_count = parseInt(current_comment_count) + parseInt(<%= @annotation.comments.roots.count %>)
   var new_comment_count_text = current_comment_text.replace(/(\d+)/, new_comment_count);
-  $(".comment-number").text(new_comment_count_text)
+  $(".comments-count").text(new_comment_count_text)
 }
 
 <%= render "comments_box_form", comment: @comment, annotation: @annotation %>
diff --git a/app/views/legislation/draft_versions/_comments_panel.html.erb b/app/views/legislation/draft_versions/_comments_panel.html.erb
index 178fca4e3..d7187359e 100644
--- a/app/views/legislation/draft_versions/_comments_panel.html.erb
+++ b/app/views/legislation/draft_versions/_comments_panel.html.erb
@@ -7,8 +7,7 @@
   <div id="comments-box" class="comments-box-container" style="display: none;">
     <div class="comment-box">
       <div class="comment-header">
-        <span class="icon-comment" aria-hidden="true"></span>
-        <div class="comment-number"><%= t("legislation.draft_versions.show.loading_comments") %></div>
+        <span class="comments-count"><%= t("legislation.draft_versions.show.loading_comments") %></span>
       </div>
     </div>
   </div>