Reaction improvements (#15836)

- Add some spacing to inline reactions
- Adjust colors and add variables

3 files changed, 17 insertions, 7 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 0499547291..e356c01cc0 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -96,7 +96,7 @@
   --color-input-border: #dedede;
   --color-input-border-hover: #cecece;
   --color-navbar: #f8f8f8;
-  --color-light: #00000004;
+  --color-light: #00000006;
   --color-light-border: #0000001d;
   --color-hover: #0000000f;
   --color-active: #00000014;
@@ -113,6 +113,8 @@
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);
   --color-caret: var(--color-text-dark);
+  --color-reaction-bg: #0000000a;
+  --color-reaction-active-bg: var(--color-primary-alpha-20);
   /* backgrounds */
   --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
   --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index c0b91451c6..a79634dd8f 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1088,12 +1088,21 @@
 
       .comment-code-cloud {
         .segment.reactions {
+          margin-top: 16px !important;
+          margin-bottom: -8px !important;
           border-top: none !important;
 
           .ui.label {
             border: 1px solid;
-            padding: 6px !important;
+            padding: 6px 10px !important;
+            margin: 0 2px;
             border-radius: var(--border-radius);
+            border-color: var(--color-secondary-dark-1) !important;
+          }
+
+          .ui.label.basic.blue {
+            background-color: var(--color-reaction-active-bg) !important;
+            border-color: var(--color-primary-alpha-80) !important;
           }
         }
 
@@ -2316,6 +2325,7 @@
       font-size: 14px;
       font-weight: normal;
       border-color: var(--color-secondary) !important;
+      background: var(--color-reaction-bg);
 
       &.disabled {
         cursor: default;
@@ -2328,7 +2338,7 @@
     }
 
     .ui.label.basic.blue {
-      background-color: var(--color-primary-alpha-20) !important;
+      background-color: var(--color-reaction-active-bg) !important;
       border-color: var(--color-secondary) !important;
     }
 
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 9e39c4bec4..93f317a371 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -109,6 +109,8 @@
   --color-editor-line-highlight: var(--color-primary-light-5);
   --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);
 }
 
 ::-webkit-calendar-picker-indicator {
@@ -119,10 +121,6 @@
   background-color: #383c4a;
 }
 
-.repository .segment.reactions .ui.label.basic.blue {
-  background: var(--color-primary-alpha-20) !important;
-}
-
 [data-tooltip]::before,
 [data-tooltip]::after {
   background: #1b1c1d !important; /* .ui.inverted.popup */