From 8d41b3e410012552c1d763bd4456be215471f7f2 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 13:51:46 -0600
Subject: [PATCH] Pull back comment decoration

---
 app/assets/stylesheets/comments.css               | 9 ++++-----
 app/views/comments/_comment.html.erb              | 2 +-
 app/views/comments/_new.html.erb                  | 2 +-
 app/views/event_summaries/_event_summary.html.erb | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index df2a2689c..507d12754 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -1,9 +1,9 @@
 .comments {
   --avatar-size: 2.33em;
-  --comment-padding-block: 1.2em;
-  --comment-padding-inline: 1.5em;
+  --comment-padding-block: 1lh;
+  --comment-padding-inline: 2ch;
 
-  max-inline-size: 70ch;
+  max-inline-size: 80ch;
   row-gap: var(--comment-padding-block);
 
   > :first-child {
@@ -39,7 +39,6 @@
   padding: var(--comment-padding-block) var(--comment-padding-inline);
 
   .comment--mine & {
-    background-color: var(--color-selected);
     margin-inline: var(--avatar-size) 0;
   }
 
@@ -74,7 +73,7 @@
 
 .event-summary {
   font-weight: 600;
+  gap: 0.5ch;
   margin-block: calc(var(--comment-padding-block) * -1);
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
-  gap: 0.5ch;
 }
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index c22870aaa..2bbd36475 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -3,7 +3,7 @@
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
 
-  <div class="comment__content flex flex-column full-width fill-shade border-radius">
+  <div class="comment__content flex flex-column full-width">
     <div class="comment__author flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
       <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb
index 0f7c95003..d08075ba4 100644
--- a/app/views/comments/_new.html.erb
+++ b/app/views/comments/_new.html.erb
@@ -1,7 +1,7 @@
 <div class="comment flex align-start full-width comment--mine">
   <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
 
-  <div class="comment__content flex flex-column full-width fill-shade border-radius">
+  <div class="comment__content flex flex-column full-width">
     <div class="comment__author flex align-center gap-half">
       <strong><%= Current.user.name %></strong>
     </div>
diff --git a/app/views/event_summaries/_event_summary.html.erb b/app/views/event_summaries/_event_summary.html.erb
index a702b21b1..8fa66b281 100644
--- a/app/views/event_summaries/_event_summary.html.erb
+++ b/app/views/event_summaries/_event_summary.html.erb
@@ -1,3 +1,3 @@
-<div class="event-summary flex-inline flex-wrap align-start fill-white border-radius center position-relative" data-controller="event-summary">
+<div class="event-summary flex flex-wrap align-start center" data-controller="event-summary">
   <%= event_summary.body %>
 </div>