From 3deba3b189bbc4112d22776aa05782bb7acfa9f3 Mon Sep 17 00:00:00 2001
From: taitus <sebastia.roig@gmail.com>
Date: Fri, 22 Jul 2022 11:38:22 +0200
Subject: [PATCH] Unify comment icon on legislation annotation index

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.

In this case we make only the text clickable and not the icon as in the
rest of the application. We're keeping the color and text-decoration so
it looks the same way it has looked until now, but we might change it
in the future.
---
 app/assets/stylesheets/layout.scss               | 15 +++++++++++++++
 app/assets/stylesheets/legislation_process.scss  |  9 ++-------
 app/views/legislation/annotations/index.html.erb | 14 +++++++-------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index a3cba7263..555c19d08 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2050,6 +2050,7 @@ table {
 .budget-investment-info,
 .debate-info,
 .investment-project-info,
+.legislation-comments,
 .proposal-info,
 .topic-info {
 
@@ -2062,6 +2063,20 @@ table {
   }
 }
 
+.legislation-comments {
+
+  .comments-count {
+
+    a {
+      text-decoration: underline;
+    }
+
+    &::before {
+      color: #999;
+    }
+  }
+}
+
 // 16. Flags
 // ---------
 
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 36a2298d1..6fe6a495d 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -806,13 +806,12 @@
   .comment {
     margin-bottom: rem-calc(48);
 
-    a {
+    .expand-context a {
       span {
         text-decoration: underline;
       }
 
-      .icon-expand,
-      .icon-comments {
+      .icon-expand {
         text-decoration: none;
         color: #999;
         line-height: 0;
@@ -822,10 +821,6 @@
         margin-left: rem-calc(4);
       }
 
-      .icon-comments {
-        margin-right: rem-calc(4);
-      }
-
       &:active,
       &:focus,
       &:hover {
diff --git a/app/views/legislation/annotations/index.html.erb b/app/views/legislation/annotations/index.html.erb
index 728da47c5..b935f6871 100644
--- a/app/views/legislation/annotations/index.html.erb
+++ b/app/views/legislation/annotations/index.html.erb
@@ -18,7 +18,7 @@
     <% @annotations.each do |annotation| %>
       <div class="comment">
         <strong><%= t("legislation.annotations.index.comments_about") %></strong>
-        <span class="float-right">
+        <span class="float-right expand-context">
           <%= link_to legislation_process_draft_version_path(@process, @draft_version, anchor: "annotation-id-#{annotation.id}") do %>
             <span><%= t("legislation.annotations.index.see_in_context") %></span>
             <span class="icon-expand" aria-hidden="true"></span>
@@ -27,12 +27,12 @@
         <div class="comment-section">
           <%= sanitize(annotation.context).presence || annotation.quote %>
         </div>
-        <%= link_to legislation_process_draft_version_annotation_path(@process, @draft_version, annotation) do %>
-          <span class="icon-comments" aria-hidden="true"></span>
-          <span>
-            <%= t("legislation.annotations.index.comments_count", count: annotation.comments_count) %>
-          </span>
-        <% end %>
+        <span class="comments-count">
+          <%= link_to t("legislation.annotations.index.comments_count", count: annotation.comments_count),
+                      legislation_process_draft_version_annotation_path(@process,
+                                                                        @draft_version,
+                                                                        annotation) %>
+        </span>
       </div>
     <% end %>