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

@@ -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
 // ---------
 

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 {

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 %>