From 57094a93205977a39d5bca77c4db7b4b547fad3e Mon Sep 17 00:00:00 2001
From: "j. mccann" <info@mrsdizzie.com>
Date: Fri, 15 Nov 2019 15:17:13 -0500
Subject: [PATCH] Update display of reactions to issues and comments

Modify display of reactions to issues to remove spaces and make them
feel more apart of the reactions bar rather than separate items within.
---
 public/css/index.css          |  9 +++++----
 web_src/less/_repository.less | 21 +++++++++++++++++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 100870c1b24bf..7fc962796e1af 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -789,11 +789,12 @@ i.icon.centerlock{top:1.5em}
 .repository .segment.reactions.dropdown .menu>.header,.repository .select-reaction.dropdown .menu>.header{margin:.75rem 0 .5rem}
 .repository .segment.reactions.dropdown .menu>.item,.repository .select-reaction.dropdown .menu>.item{float:left;padding:.5rem .5rem!important}
 .repository .segment.reactions.dropdown .menu>.item img.emoji,.repository .select-reaction.dropdown .menu>.item img.emoji{margin-right:0}
-.repository .segment.reactions{padding:.3em 1em}
-.repository .segment.reactions .ui.label{padding:.4em}
-.repository .segment.reactions .ui.label.disabled{cursor:default}
+.repository .segment.reactions{padding:0;display:flex}
+.repository .segment.reactions .ui.label{padding:.4em;padding-right:1em;padding-left:1em;border:0;border-right:1px solid;border-radius:0;margin:0;font-size:14px;border-color:inherit!important}
+.repository .segment.reactions .ui.label.disabled{cursor:default;opacity:.5}
 .repository .segment.reactions .ui.label>img{height:1.5em!important}
-.repository .segment.reactions .select-reaction{float:none}
+.repository .segment.reactions .ui.label.basic.blue{background-color:#f1f8ff!important;border-color:inherit!important}
+.repository .segment.reactions .select-reaction{float:left;padding:.5em;padding-left:1em}
 .repository .segment.reactions .select-reaction:not(.active) a{display:none}
 .repository .segment.reactions:hover .select-reaction a{display:block}
 .repository .ui.fluid.action.input .ui.search.action.input{flex:auto}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 974dd571ccd86..14bb5e9003d46 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1910,13 +1910,23 @@
     }
 
     .segment.reactions {
-        padding: 0.3em 1em;
+        padding: 0;
+        display: flex;
 
         .ui.label {
             padding: 0.4em;
+            padding-right: 1em;
+            padding-left: 1em;
+            border: 0;
+            border-right: 1px solid;
+            border-radius: 0;
+            margin: 0;
+            font-size: 14px;
+            border-color: inherit !important;
 
             &.disabled {
                 cursor: default;
+                opacity: 0.5;
             }
 
             > img {
@@ -1924,8 +1934,15 @@
             }
         }
 
+        .ui.label.basic.blue {
+            background-color: #f1f8ff !important;
+            border-color: inherit !important;
+        }
+
         .select-reaction {
-            float: none;
+            float: left;
+            padding: 0.5em;
+            padding-left: 1em;
 
             &:not(.active) a {
                 display: none;