From 0c0f049d09dfcdaaf43029ff853a838c02efc79e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 24 Aug 2020 00:45:21 +0200
Subject: [PATCH] Reaction picker display improvements (#12576)

- Remove overly thin font-width on counter
- Add hover effect on reaction picker
- Change colors on arc-green to green to match the theme

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>
---
 web_src/less/_repository.less            | 25 +++++++++++++++++-------
 web_src/less/themes/theme-arc-green.less | 10 ++++++++++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index eb316ee71..0d994c565 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2345,9 +2345,10 @@
 
             > .item {
                 float: left;
-                padding: .5rem !important;
+                padding: .25rem !important;
+                margin: .25rem;
                 font-size: 1.5em;
-                width: 45px;
+                width: 39px;
                 left: 13px;
 
                 img.emoji {
@@ -2361,10 +2362,9 @@
         padding: 0;
         display: flex;
 
-        .ui.label,
-        .ui.label.visible {
+        .ui.label {
             max-height: 40px;
-            padding: .4rem .8rem;
+            padding: 7px 18px;
             display: flex !important;
             align-items: center;
             border: 0;
@@ -2372,7 +2372,7 @@
             border-radius: 0;
             margin: 0;
             font-size: 14px;
-            font-weight: 100;
+            font-weight: normal;
             border-color: inherit !important;
 
             &.disabled {
@@ -2393,11 +2393,22 @@
         .select-reaction {
             display: flex;
             align-items: center;
-            padding: 0 .5rem;
+            padding: 0 14px;
 
             &:not(.active) a {
                 display: none;
             }
+
+            .item {
+                border-radius: 6px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .item:hover {
+                background: #4183c4;
+            }
         }
 
         &:hover .select-reaction a {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index f9b643e96..bf7d2e116 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -704,6 +704,16 @@ a.ui.basic.green.label:hover {
     border-color: #26577b !important;
 }
 
+.repository .segment.reactions .ui.label.basic.blue {
+    color: #a0cc75 !important;
+    background: #305020 !important;
+    border-color: #404552 !important;
+}
+
+.repository .segment.reactions .select-reaction .item:hover {
+    background: #305020;
+}
+
 .ui.menu .item > .label {
     background: #565454;
 }