From f48df75c9c0ef44e322fe2455030fc28c44fdcad Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 20 Aug 2024 16:45:02 -0500
Subject: [PATCH] Improve comments style

---
 app/assets/stylesheets/comments.css  | 56 +++++++++-------------------
 app/views/comments/_comment.html.erb | 21 ++++++-----
 app/views/comments/_new.html.erb     | 20 +++++-----
 3 files changed, 39 insertions(+), 58 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 0cd204c34..408cd1833 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -1,52 +1,32 @@
 .comments {
-  hr {
-    block-size: 6cqi;
-    border-inline-start: 1px solid var(--splat-color);
-    display: block;
-    inline-size: 2px;
-    margin: auto;
-    overflow: initial;
-    position: relative;
 
-    &::after {
-      background: var(--color-bg);
-      border: 2px solid var(--splat-color);
-      border-radius: 50%;
-      content: "";
-      display: block;
-      height: 1cqi;
-      inline-size: 1cqi;
-      inset: auto auto -0.5cqi auto;
-      margin-inline-start: -0.5cqi;
-      position: absolute;
-    }
-
-    &::before {
-      background: var(--color-bg);
-      border: 2px solid var(--splat-color);
-      border-radius: 50%;
-      content: "";
-      display: block;
-      height: 1cqi;
-      inline-size: 1cqi;
-      inset: -0.5cqi auto auto auto;
-      margin-inline-start: -0.5cqi;
-      position: absolute;
-    }
-  }
 }
 
 .comment {
-  inline-size: 100%;
-  flex-wrap: wrap;
+  padding:
+      calc(var(--block-space) * 1.5)
+      calc(var(--inline-space) * 2)
+      calc(var(--block-space) * 2)
+      var(--inline-space);
 
   &:target {
     background-color: var(--color-selected);
   }
+
+  .avatar {
+    margin-block-start: -0.5em;
+    margin-inline-start: calc(-2.65em + var(--inline-space));
+  }
 }
 
 .comment__body {
-  p:first-child {
-    margin-block-start: 0;
+  p {
+    &:first-child {
+      margin-block-start: 0;
+    }
+
+    &:last-child {
+      margin-block-end: 0;
+    }
   }
 }
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index fe05a6288..730e88575 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -1,13 +1,14 @@
-<div class="comment flex align-start gap" id="<%= dom_id(comment) %>">
-  <div class="flex align-center gap full-width">
-    <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
-    <header class="full-width flex align-center gap">
+<div class="comment flex align-start gap fill-shade border-radius full-width" id="<%= dom_id(comment) %>">
+  <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
+  <div class="flex flex-column full-width">
+    <div class="flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
-    </header>
-  </div>
-  <div class="comment__body txt-align-start">
-    <%= simple_format comment.body %>
+      <%= link_to splat_path(@splat, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
+        <time class="txt-subtle"><%= comment.created_at.strftime("%b %d").html_safe %></time>
+      <% end %>
+    </div>
+    <div class="comment__body txt-align-start">
+      <%= simple_format comment.body %>
+    </div>
   </div>
 </div>
-
-<hr />
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb
index 19a15eefd..9f7b0eef8 100644
--- a/app/views/comments/_new.html.erb
+++ b/app/views/comments/_new.html.erb
@@ -1,18 +1,18 @@
-<div class="comment flex align-start gap">
-  <div class="flex align-center gap full-width">
-    <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></span>
-    <header class="full-width flex align-center gap">
+<div class="comment flex align-start gap fill-shade border-radius full-width">
+  <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></span>
+  <div class="flex flex-column full-width gap-half">
+    <div class="flex align-center gap-half">
       <strong><%= Current.user.name %></strong>
-    </header>
-  </div>
-  <div class="comment__body txt-align-start full-width">
-    <%= form_with model: [@splat, @splat.comments.build], class: "flex flex-column gap full-width" do | form | %>
-      <%= form.text_area :body, class: "input full-width", required: true, placeholder: "Type your comment…", rows: 4 %>
+    </div>
+    <div class="comment__body txt-align-start">
+      <%= form_with model: [@splat, @splat.comments.build], class: "flex flex-column gap full-width" do | form | %>
+      <%= form.text_area :body, class: "input", required: true, placeholder: "Type your comment…", rows: 4 %>
 
       <%= form.button class: "btn btn--reversed center" do %>
-        <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24%>
+        <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
         <span class="for-screen-reader">Save</span>
       <% end %>
     <% end %>
+    </div>
   </div>
 </div>