[Crayons] Update comments card in Profile (#11199)

* Update comments card in Profile

* Remove avatar and name

app/assets/stylesheets/index-comments.scss

@@ -1,66 +0,0 @@
-@import 'variables';
-@import 'mixins';
-.index-comments {
-  text-align: left;
-  padding-bottom: calc(0.6vw + 5px);
-  margin: auto;
-  width: 100%;
-  @media screen and (min-width: 950px) {
-    margin-bottom: 12px;
-  }
-  .breadcrumb {
-    margin-top: 10px;
-    margin-left: 5px;
-    text-decoration: underline;
-    a {
-      padding: 5px 10px;
-      @include themeable(color, theme-color, $dark-gray);
-      font-weight: 500;
-      font-size: 0.85em;
-    }
-  }
-  header {
-    padding: calc(1vw + 3px) 13px 0.5vw;
-    margin: 0;
-    font-size: 17px;
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
-      monospace;
-    @media screen and (min-width: 430px) {
-      font-size: 19px;
-    }
-    h4 {
-      margin: 0;
-      font-weight: 500;
-    }
-  }
-  a {
-    color: var(--body-color);
-    display: block;
-    padding-left: 13px;
-    padding-right: 13px;
-  }
-  .single-comment {
-    padding: 3px 0px;
-    font-size: 16px;
-    &.strong-comment {
-      .comment-title {
-        font-weight: 600;
-      }
-    }
-    .comment-date {
-      font-size: 0.7em;
-      color: var(--card-color-tertiary);
-      margin-left: 5px;
-      vertical-align: 2px;
-      display: inline-block;
-    }
-    .comment-preview {
-      font-size: 0.9em;
-      color: var(--card-color-tertiary);
-    }
-    @media screen and (min-width: 430px) {
-      padding: 5px 0px;
-      font-size: 18.5px;
-    }
-  }
-}

app/assets/stylesheets/minimal.scss

@@ -2,7 +2,6 @@
 @import 'fundamentals';
 @import 'scaffolds';
 @import 'articles';
-@import 'index-comments';
 @import 'article-show';
 @import 'shared';
 @import 'dashboard';

app/assets/stylesheets/views/profile.scss

@@ -142,3 +142,29 @@
     );
   }
 }
+
+.profile-comment-card {
+  border-radius: 0;
+
+  @media screen and (min-width: $breakpoint-s) {
+    border-radius: var(--radius);
+  }
+}
+
+.profile-comment-row {
+  color: var(--base-90);
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--card-border);
+  padding: var(--su-3) var(--su-4);
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: var(--card-secondary-border);
+  }
+
+  &:last-child {
+    border-bottom: unset;
+  }
+}

app/views/users/_comments_section.html.erb

@@ -1,46 +1,57 @@
 <% cache("user-profile-comments-#{@user.last_comment_at}-#{@user.id}-#{@comments.size}", expires_in: 2.days) do %>
-  <style>
-    .index-comments header {
-      color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
-    }
-    .night-theme .index-comments header {
-      color: #cedae2;
-    }
-  </style>
-  <div class="index-comments crayons-card">
+  <div class="profile-comment-card crayons-card mt-2 m:mt-0 mb-2">
     <% if @comments.present? %>
       <% if params[:view] == "comments" %>
-        <div class="breadcrumb"><a href="<%= @user.path %>">View All Activity</a></div>
-        <header>
-          <% if @user.comments_count > 250 %>
-            <h4>Last 250 Comments</h4>
-          <% else %>
-            <h4>All <%= @user.comments_count %> Comments</h4>
-          <% end %>
-        </header>
+        <div class="crayons-card__header">
+          <h4 class="crayons-card__headline">
+            <% if @user.comments_count > 250 %>
+              Last 250 comments
+            <% else %>
+              All <%= @user.comments_count %> comments
+            <% end %>
+          </h4>
+          <div class="crayons-card__actions">
+            <a href="<%= @user.path %>" class="crayons-link--branded fs-base">
+              View all activity
+            </a>
+          </div>
+        </div>
       <% else %>
-        <header>
-          <h4>Recent Comments</h4>
-        </header>
+        <div class="crayons-card__header">
+          <h4 class="crayons-card__headline">
+            Recent comments
+          </h4>
+        </div>
       <% end %>
     <% end %>
     <% @comments.each do |comment| %>
       <% if comment.commentable.present? && comment.commentable.published && !comment.deleted %>
-        <a href="<%= comment.path %>">
-          <div class="single-comment <%= "strong-comment" if comment.ancestry.nil? %>">
-            <span class="comment-title">re: <%= comment.commentable.title %></span>
-            <span class="comment-date">
+        <a href="<%= comment.path %>" class="profile-comment-row ">
+          <h5 class="fw-bold fs-base m-0 mb-1">
+            <%= comment.commentable.title %>
+          </h5>
+          <div class="inline-flex items-center fs-s gap-2">
+            <p class="color-base-80">
+              <%= truncate(strip_tags(comment.processed_html), length: 64).html_safe %>
+            <p>
+            <small class="color-base-60 fs-s comment-date whitespace-nowrap">
               <time datetime="<%= comment.decorate.published_timestamp %>"><%= comment.readable_publish_date %></time>
-            </span>
-            <div class="comment-preview"><%= truncate(strip_tags(comment.processed_html), length: 64).html_safe %></div>
+            </small>
           </div>
         </a>
       <% end %>
     <% end %>
     <% if params[:view] != "comments" && @user.comments_count > 250 %>
-      <div class="breadcrumb"><a href="<%= @user.path %>/comments">Last 250 Comments</a></div>
+      <div class="pt-3 pl-4 pb-3 pr-4">
+        <a href="<%= @user.path %>/comments" class="fs-base">
+          View last 250 Comments
+        </a>
+      </div>
     <% elsif params[:view] != "comments" && @user.comments_count > 8 %>
-      <div class="breadcrumb"><a href="<%= @user.path %>/comments">View All <%= @user.comments_count %> Comments</a>
+      <div class="py-3 px-4">
+        <a href="<%= @user.path %>/comments" class="fs-base">
+          View all <%= @user.comments_count %> comments
+        </a>
       </div>
     <% end %>
   </div>

spec/system/user/view_user_comments_spec.rb

@@ -16,8 +16,8 @@ RSpec.describe "User comments", type: :system do
     end
 
     it "shows user's comments", js: true, stub_elasticsearch: true do
-      within("#substories div.index-comments") do
-        expect(page).to have_content("All 2 Comments")
+      within("#substories div.profile-comment-card") do
+        expect(page).to have_content("All 2 comments")
         expect(page).to have_link(nil, href: comment.path)
         expect(page).to have_link(nil, href: comment2.path)
       end

spec/system/user/view_user_index_spec.rb

@@ -43,23 +43,23 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
       end
 
       def shows_comments
-        within("#substories div.index-comments") do
-          expect(page).to have_content("Recent Comments")
+        within("#substories div.profile-comment-card") do
+          expect(page).to have_content("Recent comments")
           expect(page).to have_link(nil, href: comment.path)
         end
 
         within("#substories") do
-          expect(page).to have_selector(".index-comments", count: 1)
+          expect(page).to have_selector(".profile-comment-card", count: 1)
         end
 
-        within("#substories .index-comments .single-comment") do
+        within("#substories .profile-comment-card .profile-comment-row") do
           comment_date = comment.readable_publish_date.gsub("  ", " ")
           expect(page).to have_selector(".comment-date", text: comment_date)
         end
       end
 
       def shows_comment_timestamp
-        within("#substories .index-comments .single-comment") do
+        within("#substories .profile-comment-card .profile-comment-row") do
           ts = comment.decorate.published_timestamp
           timestamp_selector = ".comment-date time[datetime='#{ts}']"
           expect(page).to have_selector(timestamp_selector)
@@ -107,8 +107,8 @@ RSpec.describe "User index", type: :system, stub_elasticsearch: true do
     end
 
     def shows_comments
-      within("#substories div.index-comments") do
-        expect(page).to have_content("Recent Comments")
+      within("#substories div.profile-comment-card") do
+        expect(page).to have_content("Recent comments")
         expect(page).to have_link(nil, href: comment.path)
       end
     end