From da65191cd829eae36c50061769bb1c30b23db8fc Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Fri, 12 Jul 2024 15:18:13 -0500
Subject: [PATCH] refine comment padding

---
 components/comment.module.css | 12 ++++++++----
 components/item.module.css    |  2 +-
 components/reply.js           |  2 +-
 components/reply.module.css   | 10 +++++++---
 components/upvote.module.css  |  2 +-
 styles/globals.scss           |  2 +-
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/comment.module.css b/components/comment.module.css
index 14744fb5..6f24ab61 100644
--- a/components/comment.module.css
+++ b/components/comment.module.css
@@ -6,7 +6,7 @@
 
 .upvote {
     margin-top: 9px;
-    margin-right: 0rem;
+    padding-right: 0.2rem;
 }
 
 .pin {
@@ -64,7 +64,7 @@
 
 .children {
     margin-top: 0;
-    margin-left: 30px;
+    margin-left: 27px;
 }
 
 .comments {
@@ -108,7 +108,7 @@
 .comment {
     border-radius: .4rem;
     padding-top: .5rem;
-    padding-left: .2rem;
+    padding-left: .7rem;
     background-color: var(--theme-commentBg);
 }
 
@@ -128,7 +128,11 @@
 }
 
 .comment:not(:first-of-type) {
-    padding-top: .25rem;
+    padding-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+}
+
+.comment:has(.comment) + .comment{
+    padding-top: .5rem;
 }
\ No newline at end of file
diff --git a/components/item.module.css b/components/item.module.css
index c3d191da..30da4227 100644
--- a/components/item.module.css
+++ b/components/item.module.css
@@ -169,7 +169,7 @@ a.link:visited {
 }
 
 .children {
-    margin-left: 28px;
+    margin-left: 27px;
     padding-top: .5rem;
 }
 
diff --git a/components/reply.js b/components/reply.js
index a338b9e1..4590fe74 100644
--- a/components/reply.js
+++ b/components/reply.js
@@ -113,7 +113,7 @@ export default forwardRef(function Reply ({
   return (
     <div>
       {replyOpen
-        ? <div className={styles.replyButtons} />
+        ? <div className='p-3' />
         : (
           <div className={styles.replyButtons}>
             <div
diff --git a/components/reply.module.css b/components/reply.module.css
index 3aa645b5..8b962271 100644
--- a/components/reply.module.css
+++ b/components/reply.module.css
@@ -5,17 +5,21 @@
 }
 
 .replyButtons {
-    font-size: 75%;
+    font-size: 80%;
     color: var(--theme-grey);
     font-weight: bold;
     display: flex;
     align-items: center;
-    cursor: pointer;
-    padding: .25rem 0 .8rem 0;
     line-height: 1rem;
     vertical-align: middle;
 }
 
+.replyButtons > * {
+    padding-top: .4rem;
+    padding-bottom: .8rem;
+    cursor: pointer;
+}
+
 .skeleton .input {
     background-color: var(--theme-grey);
     width: 100%;
diff --git a/components/upvote.module.css b/components/upvote.module.css
index 4a2b85ae..a7126c88 100644
--- a/components/upvote.module.css
+++ b/components/upvote.module.css
@@ -7,7 +7,7 @@
 
 .upvoteWrapper {
     position: relative;
-    margin-right: .2rem;
+    padding-right: .2rem;
     padding-left: .2rem;
     margin-left: -.4rem;
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index 79043fab..2cd90cb1 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -177,7 +177,7 @@ $zindex-sticky: 900;
   --theme-quoteColor: rgb(141, 144, 150);
   --theme-linkHover: #007cbe;
   --theme-linkVisited: #56798E;
-  --theme-note-reply: rgba(255, 255, 255, 0.06);
+  --theme-note-reply: rgba(255, 255, 255, 0.05);
   --theme-note-fresh: rgba(0, 124, 190, 0.75);
 }