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 <[email protected]>
Co-authored-by: zeripath <[email protected]>

Author: 3 people

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,18 +2362,17 @@
         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;
             border-right: 1px solid;
             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 {

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;
 }