Update upvotes style to match GitHub's new UI

giscus · Aug 21, 2021 · 5957492 · 5957492
1 parent 6426f23
commit 5957492
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 76 deletions.
diff --git a/components/Comment.tsx b/components/Comment.tsx
@@ -58,34 +58,10 @@ export default function Comment({
     );
   }, [comment, onCommentUpdate, token]);
 
-  const hidden = comment.deletedAt || comment.isMinimized;
+  const hidden = !!comment.deletedAt || comment.isMinimized;
 
   return (
     <div className="gsc-comment">
-      {!comment.isMinimized && onCommentUpdate ? (
-        <div className="gsc-upvotes">
-          <button
-            type="button"
-            className={`gsc-upvote-button ${
-              comment.viewerHasUpvoted ? 'color-text-link' : 'color-text-secondary'
-            }`}
-            onClick={upvote}
-            disabled={!token || !comment.viewerCanUpvote}
-          >
-            <ArrowUpIcon className="transform hover:translate-y-[-10%] transition-transform ease-in-out duration-150" />
-          </button>
-          <div
-            className={`gsc-upvote-count ${
-              comment.viewerHasUpvoted
-                ? 'color-text-link color-upvote-icon-bg'
-                : 'Counter--secondary'
-            }`}
-            title={`${comment.upvoteCount} upvote${comment.upvoteCount !== 1 ? 's' : ''}`}
-          >
-            {comment.upvoteCount}
-          </div>
-        </div>
-      ) : null}
       <div
         className={`w-full min-w-0 border rounded-md color-bg-primary ${
           comment.viewerDidAuthor ? 'color-box-border-info' : 'color-border-primary'
@@ -174,6 +150,23 @@ export default function Comment({
             }${comment.replies.length > 0 ? ' rounded-b-md' : ''}`}
           >
             <div className="gsc-comment-reactions">
+              <button
+                type="button"
+                className={`gsc-upvote-button gsc-social-reaction-summary-item ${
+                  comment.viewerHasUpvoted ? 'has-reacted' : ''
+                }`}
+                onClick={upvote}
+                disabled={!token || !comment.viewerCanUpvote}
+              >
+                <ArrowUpIcon />
+
+                <span
+                  className="gsc-upvote-count"
+                  title={`${comment.upvoteCount} upvote${comment.upvoteCount !== 1 ? 's' : ''}`}
+                >
+                  {comment.upvoteCount}
+                </span>
+              </button>
               {!hidden ? (
                 <ReactButtons
                   reactionGroups={comment.reactions}
@@ -192,7 +185,7 @@ export default function Comment({
         {comment.replies.length > 0 ? (
           <div
             className={`color-bg-canvas-inset color-border-primary gsc-replies ${
-              renderReplyBox && !comment.isMinimized ? 'border-b' : 'rounded-b-md'
+              renderReplyBox && !hidden ? 'border-b' : 'rounded-b-md'
             }`}
           >
             {onReplyUpdate
@@ -210,7 +203,7 @@ export default function Comment({
             ) : null}
           </div>
         ) : null}
-        {!hidden && renderReplyBox ? renderReplyBox(incrementPage) : null}
+        {!comment.isMinimized && renderReplyBox ? renderReplyBox(incrementPage) : null}
       </div>
     </div>
   );

diff --git a/components/ReactButtons.tsx b/components/ReactButtons.tsx
@@ -111,13 +111,11 @@ export default function ReactButtons({
         <div ref={ref} className="gsc-reactions-menu">
           <button
             className={`Link--secondary gsc-reactions-button gsc-social-reaction-summary-item${
-              variant !== 'popoverOnly'
-                ? ' popover-only color-bg-tertiary color-border-primary'
-                : ''
+              variant === 'popoverOnly' ? ' popover-only' : ''
             }`}
             onClick={togglePopover}
           >
-            <SmileyIcon className="color-text-tertiary" size={18} />
+            <SmileyIcon size={16} />
           </button>
           <div
             className={`color-border-primary color-text-secondary color-bg-overlay gsc-reactions-popover${

diff --git a/styles/base.css b/styles/base.css
@@ -104,10 +104,6 @@ a {
   border-color: var(--color-label-border);
 }
 
-.color-upvote-icon-bg {
-  background-color: var(--color-upvote-icon-bg);
-}
-
 .color-box-border-info {
   border-color: var(--color-box-border-info);
 }
@@ -404,14 +400,6 @@ img.emoji {
   @apply flex flex-col;
 }
 
-.gsc-upvotes {
-  @apply flex-shrink-0 mr-2 text-center w-14;
-}
-
-.gsc-upvote-count {
-  @apply overflow-x-hidden overflow-ellipsis text-xs leading-5 min-w-[26px] w-min mx-auto rounded-full;
-}
-
 .gsc-comment {
   @apply flex my-4 text-sm;
 }
@@ -522,20 +510,69 @@ img.emoji {
   @apply flex px-4 py-2 rounded-b-md;
 }
 
+.gsc-social-reaction-summary-item {
+  @apply px-[6px] rounded-full leading-[24px] border whitespace-nowrap;
+  background-color: var(--color-social-reaction-bg);
+  border-color: var(--color-border-primary);
+  color: var(--color-text-secondary);
+}
+
+.gsc-social-reaction-summary-item:hover {
+  background-color: var(--color-social-reaction-bg-hover);
+}
+
+.gsc-social-reaction-summary-item.has-reacted {
+  background-color: var(--color-bg-info);
+  border-color: var(--color-social-reaction-border);
+  color: var(--color-text-link);
+}
+
+.gsc-social-reaction-summary-item.has-reacted:hover {
+  background-color: var(--color-social-reaction-bg-reacted-hover);
+}
+
+.gsc-social-reaction-summary-item:disabled {
+  @apply cursor-not-allowed;
+}
+
+.gsc-upvotes {
+  @apply flex-shrink-0 mr-2 text-center w-14;
+}
+
+.gsc-upvote-count {
+  @apply px-1 ml-[2px] overflow-x-hidden overflow-ellipsis text-xs leading-5 min-w-[26px] w-min mx-auto rounded-full;
+}
+
+.gsc-upvote-button {
+  @apply mr-2;
+}
+
+.gsc-upvote-button:hover svg {
+  @apply transform translate-y-[-10%] transition-transform ease-in-out duration-150;
+}
+
 .gsc-reactions-menu {
   @apply relative;
 }
 
 .gsc-reactions-button {
-  @apply px-[5px] py-[3px] mr-2 rounded-full;
+  @apply px-[5px] py-[3px] mr-2 leading-[inherit] text-xs;
+}
+
+.gsc-reactions-button:hover {
+  color: var(--color-text-tertiary);
 }
 
 .gsc-reactions-button.popover-only {
-  @apply mb-1 border dmd:mb-4;
+  @apply bg-transparent border border-none;
+}
+
+.gsc-reactions-button.popover-only:hover {
+  color: var(--color-text-link);
 }
 
 .gsc-reactions-popover {
-  @apply ease-in-out duration-100 origin-center transform transition z-20 border rounded top-10 absolute invisible scale-50 w-[146px];
+  @apply ease-in-out duration-100 origin-center transform transition z-20 border rounded top-full mt-[2px] absolute invisible scale-50 w-[146px];
 }
 
 .gsc-reactions-popover.open {
@@ -563,26 +600,7 @@ img.emoji {
 }
 
 .gsc-direct-reaction-button {
-  @apply px-[6px] mb-1 dmd:mb-4 mr-2 border leading-[24px] rounded-full;
-}
-
-.gsc-social-reaction-summary-item {
-  border-color: var(--color-border-primary);
-  background-color: var(--color-social-reaction-bg);
-  color: var(--color-text-secondary);
-}
-
-.gsc-social-reaction-summary-item:hover {
-  background-color: var(--color-social-reaction-bg-hover);
-}
-
-.gsc-social-reaction-summary-item.has-reacted {
-  background-color: var(--color-bg-info);
-  color: var(--color-text-link);
-}
-
-.gsc-social-reaction-summary-item.has-reacted:hover {
-  background-color: var(--color-social-reaction-bg-reacted-hover);
+  @apply mb-1 mr-2 border dmd:mb-4;
 }
 
 .gsc-reply {

diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
@@ -66,7 +66,6 @@ main {
   --color-scale-blue-8: #143d79;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
   --color-social-reaction-border: var(--color-scale-blue-8);
   --color-social-reaction-bg: var(--color-scale-gray-8);
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);
@@ -83,8 +82,7 @@ main {
   color-scheme: dark;
 }
 
-.gsc-reactions-count,
-.gsc-upvotes {
+.gsc-reactions-count {
   display: none;
 }
 

diff --git a/styles/themes/dark.css b/styles/themes/dark.css
@@ -65,7 +65,6 @@ main {
   --color-scale-blue-8: #0c2d6b;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
   --color-social-reaction-border: var(--color-scale-blue-8);
   --color-social-reaction-bg: var(--color-scale-gray-8);
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);

diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
@@ -65,7 +65,6 @@ main {
   --color-scale-blue-8: #143d79;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
   --color-social-reaction-border: var(--color-scale-blue-8);
   --color-social-reaction-bg: var(--color-scale-gray-8);
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);

diff --git a/styles/themes/dark_high_contrast.css b/styles/themes/dark_high_contrast.css
@@ -69,7 +69,6 @@ main {
   --color-scale-blue-8: #1e60d5;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
   --color-social-reaction-border: var(--color-scale-blue-8);
   --color-social-reaction-bg: var(--color-scale-gray-8);
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);

diff --git a/styles/themes/light.css b/styles/themes/light.css
@@ -66,7 +66,6 @@ main {
   --color-scale-blue-8: #0a3069;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-1);
   --color-social-reaction-border: var(--color-scale-blue-1);
   --color-social-reaction-bg: var(--color-scale-gray-0);
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);

diff --git a/styles/themes/preferred_color_scheme.css b/styles/themes/preferred_color_scheme.css
@@ -67,7 +67,6 @@ main {
   --color-scale-blue-8: #0a3069;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-1);
   --color-social-reaction-border: var(--color-scale-blue-1);
   --color-social-reaction-bg: var(--color-scale-gray-0);
   --color-social-reaction-bg-hover: var(--color-scale-gray-1);
@@ -150,7 +149,6 @@ main {
     --color-scale-blue-8: #0c2d6b;
 
     /* Extensions from color-modes.scss */
-    --color-upvote-icon-bg: var(--color-scale-blue-8);
     --color-social-reaction-border: var(--color-scale-blue-8);
     --color-social-reaction-bg: var(--color-scale-gray-8);
     --color-social-reaction-bg-hover: var(--color-scale-gray-7);

diff --git a/styles/themes/transparent_dark.css b/styles/themes/transparent_dark.css
@@ -64,7 +64,6 @@ main {
   --color-scale-blue-8: #143d79;
 
   /* Extensions from color-modes.scss */
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
   --color-social-reaction-border: var(--color-scale-blue-8);
   --color-social-reaction-bg: var(--color-scale-gray-8);
   --color-social-reaction-bg-hover: var(--color-scale-gray-7);