3 files changed, 54 insertions, 41 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css
index a6576a4fe9..21de3c8268 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -165,8 +165,8 @@
   --color-light: #00000006;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000001d;
-  --color-hover: #0000000c;
-  --color-active: #00000014;
+  --color-hover: #00000014;
+  --color-active: #0000001e;
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markup-table-row: #00000008;
@@ -184,7 +184,8 @@
   --color-project-board-light-label: #a6aab5;
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
-  --color-reaction-active-bg: var(--color-primary-alpha-20);
+  --color-reaction-hover-bg: var(--color-primary-light-5);
+  --color-reaction-active-bg: var(--color-primary-light-6);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
   --color-header-bar: #ffffff;
@@ -894,6 +895,11 @@ a.label,
   background: var(--color-hover);
 }
 
+.ui.dropdown .menu > .item:active {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
 .ui.dropdown .menu .active.item {
   color: var(--color-text);
   background: var(--color-active);
@@ -1059,10 +1065,15 @@ a.label,
 }
 
 .ui.pointing.dropdown > .menu:not(.hidden)::after {
-  background: var(--color-box-body);
+  background: var(--color-menu);
   box-shadow: -1px -1px 0 0 var(--color-secondary);
 }
 
+.ui.pointing.upward.dropdown .menu::after,
+.ui.top.pointing.upward.dropdown .menu::after {
+  box-shadow: 1px 1px 0 0 var(--color-secondary);
+}
+
 .ui.comments .comment .text {
   margin: 0;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 069bf014b8..daca98bb51 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1085,7 +1085,7 @@
 
 .repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
   border: 1px solid;
-  padding: 6px 10px !important;
+  padding: 5px 8px !important;
   margin: 0 2px;
   border-radius: var(--border-radius);
   border-color: var(--color-secondary-dark-1) !important;
@@ -1096,6 +1096,11 @@
   border-color: var(--color-primary-alpha-80) !important;
 }
 
+.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
+  background-color: var(--color-reaction-hover-bg) !important;
+  border-color: var(--color-primary-alpha-80) !important;
+}
+
 .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
   margin: 0;
 }
@@ -2133,7 +2138,7 @@
 .repository .select-reaction.dropdown .menu {
   right: 0 !important;
   left: auto !important;
-  min-width: 15em;
+  min-width: 170px;
 }
 
 .repository .segment.reactions.dropdown .menu > .header,
@@ -2144,25 +2149,15 @@
 .repository .segment.reactions.dropdown .menu > .item,
 .repository .select-reaction.dropdown .menu > .item {
   float: left;
-  padding: 0.25rem !important;
-  margin: 0.25rem;
-  font-size: 1.5em;
-  width: 39px;
-  left: 13px;
+  margin: 4px;
+  font-size: 20px;
+  width: 34px;
+  height: 34px;
+  min-height: 0 !important;
   border-radius: 6px;
-  display: flex;
-  justify-content: center;
+  display: flex !important;
   align-items: center;
-}
-
-.repository .segment.reactions.dropdown .menu > .item img.emoji,
-.repository .select-reaction.dropdown .menu > .item img.emoji {
-  margin-right: 0;
-}
-
-.repository .segment.reactions.dropdown .menu > .item:hover,
-.repository .select-reaction.dropdown .menu > .item:hover {
-  background: var(--color-primary);
+  justify-content: center;
 }
 
 .repository .segment.reactions {
@@ -2173,35 +2168,41 @@
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .repository .segment.reactions .ui.label {
   max-height: 40px;
-  padding: 10px 18px !important;
+  padding: 8px 16px !important;
   display: flex !important;
   align-items: center;
   border: 0;
   border-right: 1px solid;
   border-radius: 0;
   margin: 0;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: var(--font-weight-normal);
   border-color: var(--color-secondary) !important;
   background: var(--color-reaction-bg);
 }
 
+.repository .segment.reactions .ui.label:first-of-type {
+  border-bottom-left-radius: 3px;
+}
+
 .repository .segment.reactions .ui.label.disabled {
   cursor: default;
   opacity: 1;
 }
 
-.repository .segment.reactions .ui.label.basic {
+.repository .segment.reactions .ui.label.basic.primary {
   color: var(--color-primary) !important;
+  background-color: var(--color-reaction-active-bg) !important;
+  border-color: var(--color-secondary-dark-1) !important;
 }
 
-.repository .segment.reactions .ui.label.basic.primary {
-  background-color: var(--color-reaction-active-bg) !important;
-  border-color: var(--color-secondary) !important;
+.repository .segment.reactions .ui.label.basic:hover {
+  background-color: var(--color-reaction-hover-bg) !important;
 }
 
 .repository .segment.reactions .reaction-count {
@@ -2211,6 +2212,9 @@
 .repository .segment.reactions .select-reaction {
   display: flex;
   align-items: center;
+}
+
+.repository .segment.reactions .select-reaction a {
   padding: 0 14px;
 }
 
@@ -2469,7 +2473,7 @@
   padding: 0.5rem 1rem;
   margin: 0 !important;
   position: relative;
-  color: var(--color-text-light-2);
+  color: var(--color-text);
   min-height: 41px;
   background-color: var(--color-box-header);
   display: flex;
@@ -2516,14 +2520,6 @@
   left: 7px;
 }
 
-.comment-header a {
-  color: var(--color-text);
-}
-
-.comment-header a:hover {
-  color: var(--color-primary);
-}
-
 .comment-header .actions a {
   margin-right: 0 !important;
   padding: 0.5rem !important;
@@ -2534,6 +2530,11 @@
   margin-left: 0.25rem;
 }
 
+.content-history-menu .octicon-triangle-down {
+  position: relative;
+  top: 1.5px;
+}
+
 .comment-body {
   background: var(--color-box-body);
   border: none !important;
diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css
index 5f2b329457..88dbe10d97 100644
--- a/web_src/css/themes/theme-arc-green.css
+++ b/web_src/css/themes/theme-arc-green.css
@@ -152,8 +152,8 @@
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #ffffff28;
-  --color-hover: #ffffff10;
-  --color-active: #ffffff16;
+  --color-hover: #ffffff19;
+  --color-active: #ffffff24;
   --color-menu: #2e323e;
   --color-card: #2e323e;
   --color-markup-table-row: #ffffff06;
@@ -170,7 +170,8 @@
   --color-project-board-bg: var(--color-secondary-light-2);
   --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
   --color-reaction-bg: #ffffff12;
-  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-reaction-hover-bg: var(--color-primary-light-4);
+  --color-reaction-active-bg: var(--color-primary-light-5);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
   --color-header-bar: #2e323e;