From 1c418f632b998b15b233c35b1fb1fe14cd9dd2d9 Mon Sep 17 00:00:00 2001
From: Akuoko Daniel Jnr <danielakuokojnr@gmail.com>
Date: Fri, 12 Mar 2021 00:23:43 +0000
Subject: [PATCH] fix: tag style

---
 common/constants.js                 |  1 +
 components/core/ScenePageHeader.js  | 17 ++++++----
 components/system/components/Tag.js | 52 +++++++++--------------------
 3 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/common/constants.js b/common/constants.js
index 908edea1..52d46008 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -37,6 +37,7 @@ export const system = {
   yellow: "#FAB413",
   red: "#C71313",
   black: "#0F0E12",
+  newBlack: "#000000",
   bgGrayLight: "#F8F8F8",
   bgGray: "#F2F2F2",
   bgBlue: "#C0D8EE",
diff --git a/components/core/ScenePageHeader.js b/components/core/ScenePageHeader.js
index 433d5259..a3ace3da 100644
--- a/components/core/ScenePageHeader.js
+++ b/components/core/ScenePageHeader.js
@@ -95,18 +95,21 @@ const STYLES_LIST = css`
 const STYLES_TAG = css`
   list-style-type: none;
   border-radius: 4px;
-  background: ${Constants.system.white};
-  color: ${Constants.system.black};
+  background: ${Constants.system.bgGray};
+  color: ${Constants.system.newBlack};
   display: flex;
   align-items: center;
-  font-family: ${Constants.font.medium};
-  padding: 10px;
-  box-shadow: 0 0 0 1px ${Constants.system.gray30} inset;
+  font-family: ${Constants.font.text};
+  padding: 2px 8px;
   margin: 8px 8px 0 0;
 
   span {
-    line-height: 1;
-    font-size: 0.875rem;
+    line-height: 1.5;
+    font-size: 14px;
+  }
+
+  &:hover {
+    background: ${Constants.system.gray30};
   }
 `;
 
diff --git a/components/system/components/Tag.js b/components/system/components/Tag.js
index 9a4c3cf4..74bfaee9 100644
--- a/components/system/components/Tag.js
+++ b/components/system/components/Tag.js
@@ -33,39 +33,27 @@ const STYLES_LIST = css`
   display: inline-flex;
   flex-wrap: wrap;
   margin: 0;
-  width: 100%;
   border-radius: 4px;
-
-  li {
-    &:last-child {
-      list-style-type: none;
-      padding: 2px;
-      flex: 1;
-    }
-  }
 `;
 
 const STYLES_TAG = css`
   list-style-type: none;
   border-radius: 4px;
-  background: ${Constants.system.white};
-  color: ${Constants.system.black};
+  background: ${Constants.system.bgGray};
+  color: ${Constants.system.newBlack};
   display: flex;
   align-items: center;
-  font-family: ${Constants.font.medium};
-  padding: 10px;
-  box-shadow: 0 0 0 1px ${Constants.system.gray30} inset;
-  margin: 0 8px 8px 0;
+  font-family: ${Constants.font.text};
+  padding: 2px 8px;
+  margin: 8px 8px 0 0;
 
   span {
-    line-height: 0;
-    font-size: 0.875rem;
+    line-height: 1.5;
+    font-size: 14px;
   }
 
   &:hover {
-    span {
-      opacity: 1;
-    }
+    background: ${Constants.system.gray30};
   }
 `;
 
@@ -139,30 +127,20 @@ export const Tag = (props) => {
 
   return (
     <div css={STYLES_INPUT_CONTAINER} style={{ ...props.style }}>
+      <input
+        ref={inputEl}
+        type="text"
+        css={STYLES_INPUT}
+        onKeyDown={handleInputKeyDown}
+        placeholder={props.placeholder}
+      />
       <ul css={STYLES_LIST}>
         {props.value &&
           props.value.map((tag, i) => (
             <li key={tag} css={STYLES_TAG}>
               <span>{tag}</span>
-              <span
-                css={STYLES_REMOVE_BUTTON}
-                onClick={() => {
-                  removeTag(i);
-                }}
-              >
-                <SVG.Dismiss height="12px" />
-              </span>
             </li>
           ))}
-        <li>
-          <input
-            ref={inputEl}
-            type="text"
-            css={STYLES_INPUT}
-            onKeyDown={handleInputKeyDown}
-            placeholder={props.placeholder}
-          />
-        </li>
       </ul>
     </div>
   );