giscus · laymonage · Aug 22, 2021 · Aug 21, 2021 · Aug 21, 2021 · Aug 22, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,18 @@ writing, this is a rolling-release project without any meaningful versioning
 whatsoever. Tags/releases may be created for the sole purpose of documenting
 major updates to the project.
 
+## 2021-08-22
+
+### changed
+
+- Update upvotes and reactions UI to match GitHub's new UI
+  ([#164](https://github.com/laymonage/giscus/pull/164)). \
+  **Note:** this might be a **BREAKING** change if you use a custom CSS.
+- Scale font size to 5% of viewport width on tiny screens
+  ([#164](https://github.com/laymonage/giscus/pull/164)).
+- Project configuration fixes
+  ([#164](https://github.com/laymonage/giscus/pull/164)).
+
 ## 2021-08-13
 
 ### changed

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
@@ -78,8 +78,8 @@ export default function ReactButtons({
     ]) => (
       <button
         key={value}
-        className={`px-2 mb-1 dmd:mb-4 mr-2 border leading-[26px] color-border-primary rounded-md ${
-          viewerHasReacted ? ' color-bg-info' : ''
+        className={`gsc-direct-reaction-button gsc-social-reaction-summary-item ${
+          viewerHasReacted ? 'has-reacted' : ''
         }${!token ? ' cursor-not-allowed' : ''}`}
         disabled={!token}
         title={
@@ -91,8 +91,8 @@ export default function ReactButtons({
         }
         onClick={() => react(value as Reactions)}
       >
-        <span className="inline-block w-4 h-4 mr-2">{Reactions[value].emoji}</span>
-        <span className="text-xs color-text-link">{count}</span>
+        <span className="inline-block w-4 h-4">{Reactions[value].emoji}</span>
+        <span className="text-xs ml-[2px] px-1">{count}</span>
       </button>
     ),
     [react, token],
@@ -110,17 +110,15 @@ export default function ReactButtons({
       {variant !== 'groupsOnly' ? (
         <div ref={ref} className="gsc-reactions-menu">
           <button
-            className={`Link--secondary gsc-reactions-button${
-              variant !== 'popoverOnly'
-                ? ' popover-only color-bg-tertiary color-border-primary'
-                : ''
-            }${directReactionButtons.length > 0 ? ' mr-4' : ''}`}
+            className={`Link--secondary gsc-reactions-button gsc-social-reaction-summary-item ${
+              variant === 'popoverOnly' ? 'popover-only' : 'popover'
+            }`}
             onClick={togglePopover}
           >
-            <SmileyIcon size={18} />
+            <SmileyIcon size={16} />
           </button>
           <div
-            className={`color-border-primary color-text-secondary color-bg-overlay gsc-reactions-popover${
+            className={`color-border-primary color-text-secondary color-bg-overlay gsc-reactions-popover ${
               isOpen ? ' open' : ''
             } ${variant === 'popoverOnly' ? 'popover-only' : 'popover'}`}
           >
@@ -153,7 +151,7 @@ export default function ReactButtons({
                   onBlur={() => setCurrent('')}
                   disabled={!token}
                 >
-                  <span className="inline-block transition-transform gsc-emoji">{emoji}</span>
+                  <span className="gsc-emoji">{emoji}</span>
                 </button>
               ))}
             </div>

diff --git a/styles/base.css b/styles/base.css
@@ -13,6 +13,12 @@ a {
   color: var(--color-text-link);
 }
 
+@media screen and (max-width: 320px) {
+  html {
+    font-size: 5vw;
+  }
+}
+
 .color-text-link,
 .Link--primary:hover,
 .Link--secondary:hover {
@@ -104,10 +110,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);
 }
@@ -378,6 +380,7 @@ img.emoji {
 
 .gsc-emoji-button:focus .gsc-emoji,
 .gsc-emoji-button:hover .gsc-emoji {
+  @apply inline-block transition-transform;
   transform: scaleX(1.5) scaleY(1.5);
 }
 
@@ -404,14 +407,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 +517,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-3 py-[3px];
+  @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 rounded-md 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 mt-[2px] absolute invisible scale-50 w-[146px];
 }
 
 .gsc-reactions-popover.open {
@@ -562,6 +606,10 @@ img.emoji {
   @apply flex flex-wrap;
 }
 
+.gsc-direct-reaction-button {
+  @apply mb-1 mr-2 border dmd:mb-4;
+}
+
 .gsc-reply {
   @apply relative;
 }

diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
@@ -61,9 +61,15 @@ main {
   --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
   --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
   --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
-
+  --color-scale-gray-7: #373e47;
+  --color-scale-gray-8: #2d333b;
   --color-scale-blue-8: #143d79;
-  --color-upvote-icon-bg: var(--color-scale-blue-8);
+
+  /* Extensions from color-modes.scss */
+  --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);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {
@@ -76,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
@@ -25,13 +25,13 @@ main {
   --color-bg-info: rgba(56, 139, 253, 0.15);
   --color-state-focus-border: #1f6feb;
   --color-state-focus-shadow: 0 0 0 3px #0c2d6b;
-  --color-alert-error-text: #f85149;
+  --color-alert-error-text: #c9d1d9;
   --color-alert-error-bg: rgba(248, 81, 73, 0.15);
   --color-alert-error-border: rgba(248, 81, 73, 0.4);
   --color-counter-secondary-text: #8b949e;
   --color-counter-secondary-bg: rgba(110, 118, 129, 0.1);
   --color-box-border-info: rgba(56, 139, 253, 0.4);
-  --color-markdown-code-bg: rgba(110, 118, 129, 0.1);
+  --color-markdown-code-bg: rgba(110, 118, 129, 0.4);
   --color-hidden-text-expander-bg: rgba(110, 118, 129, 0.4);
   --color-label-border: #30363d;
   --color-input-bg: #0d1117;
@@ -60,10 +60,15 @@ main {
   --color-btn-primary-disabled-text: rgba(240, 246, 252, 0.5);
   --color-btn-primary-disabled-bg: rgba(35, 134, 54, 0.6);
   --color-btn-primary-disabled-border: rgba(240, 246, 252, 0.1);
+  --color-scale-gray-7: #21262d;
+  --color-scale-gray-8: #161b22;
   --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);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {

diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
@@ -25,13 +25,13 @@ main {
   --color-bg-info: rgba(65, 132, 228, 0.15);
   --color-state-focus-border: #316dca;
   --color-state-focus-shadow: 0 0 0 3px #143d79;
-  --color-alert-error-text: #e5534b;
+  --color-alert-error-text: #adbac7;
   --color-alert-error-bg: rgba(229, 83, 75, 0.15);
   --color-alert-error-border: rgba(229, 83, 75, 0.4);
   --color-counter-secondary-text: #768390;
   --color-counter-secondary-bg: rgba(99, 110, 123, 0.1);
   --color-box-border-info: rgba(65, 132, 228, 0.4);
-  --color-markdown-code-bg: rgba(99, 110, 123, 0.1);
+  --color-markdown-code-bg: rgba(99, 110, 123, 0.4);
   --color-hidden-text-expander-bg: rgba(99, 110, 123, 0.4);
   --color-label-border: #444c56;
   --color-input-bg: #22272e;
@@ -60,10 +60,15 @@ main {
   --color-btn-primary-disabled-text: rgba(205, 217, 229, 0.5);
   --color-btn-primary-disabled-bg: rgba(52, 125, 57, 0.6);
   --color-btn-primary-disabled-border: rgba(205, 217, 229, 0.1);
+  --color-scale-gray-7: #373e47;
+  --color-scale-gray-8: #2d333b;
   --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);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
 }
 
 main .pagination-loader-container {