tag selector restyle

dashboard/package.json

@@ -25,6 +25,7 @@
     "brace": "^0.11.1",
     "clipboard": "^2.0.8",
     "cohere-js": "^1.0.19",
+    "color": "^4.2.3",
     "core-js": "^3.16.1",
     "cron-parser": "^4.3.0",
     "cron-validator": "^1.3.1",

dashboard/src/main/home/cluster-dashboard/TagFilter.tsx

@@ -32,7 +32,7 @@ const TagFilter = ({ onSelect }: { onSelect: (tag: any) => void }) => {
   return (
     <StyledTagSelector>
       <Label>
-        <i className="material-icons">filter_alt</i>
+        <i className="material-icons">tag</i>
         Tag
       </Label>
       <Selector

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -217,8 +217,6 @@ const SettingsSection: React.FC<PropsType> = ({
 
     return (
       <>
-        <Heading>Application tags</Heading>
-        <TagSelector release={currentChart} onSave={(val) => refreshChart()} />
         {!isDeployedFromGithub(currentChart) ? (
           <>
             <Heading>Source Settings</Heading>
@@ -282,6 +280,9 @@ const SettingsSection: React.FC<PropsType> = ({
             </Webhook>
           )}
         </>
+        <Heading>Application Tags</Heading>
+        <Helper>Add tags for filtering applications.</Helper>
+        <TagSelector release={currentChart} onSave={(val) => refreshChart()} />
       </>
     );
   };
@@ -343,6 +344,12 @@ const SettingsSection: React.FC<PropsType> = ({
 
 export default SettingsSection;
 
+const DarkMatter = styled.div`
+  width: 100%;
+  height: 0;
+  margin-top: -10px;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 10px;

dashboard/src/main/home/cluster-dashboard/expanded-chart/TagSelector.tsx

@@ -6,6 +6,7 @@ import { TwitterPicker } from "react-color";
 import InputRow from "components/form-components/InputRow";
 import SaveButton from "components/SaveButton";
 import api from "shared/api";
+import Color from "color";
 import { Context } from "shared/Context";
 import { ChartType } from "shared/types";
 import Helper from "components/form-components/Helper";
@@ -99,6 +100,22 @@ const TagSelector = ({ onSave, release }: Props) => {
     return hasAddedSomething || hasDeletedSomething;
   }, [values, release]);
 
+  /*
+          <SearchSelector
+          options={availableTags}
+          dropdownLabel="Select a tag"
+          filterBy="name"
+          onSelect={(value) => {
+            console.log(value);
+            setAvailableTags((prev) =>
+              prev.filter((prevVal) => prevVal.name !== value.name)
+            );
+            setValues((prev) => [...prev, value]);
+          }}
+          getOptionLabel={(option) => option.name}
+          renderOptionIcon={(option) => <TagColorBox color={option.color} />}
+        ></SearchSelector>
+  */
   return (
     <>
       {openModal ? (
@@ -112,22 +129,19 @@ const TagSelector = ({ onSave, release }: Props) => {
           release={release}
         />
       ) : null}
-
       <Flex>
-        <SearchSelector
-          options={availableTags}
-          dropdownLabel="Select a tag"
-          filterBy="name"
-          onSelect={(value) => {
-            console.log(value);
-            setAvailableTags((prev) =>
-              prev.filter((prevVal) => prevVal.name !== value.name)
-            );
-            setValues((prev) => [...prev, value]);
-          }}
-          getOptionLabel={(option) => option.name}
-          renderOptionIcon={(option) => <TagColorBox color={option.color} />}
-        ></SearchSelector>
+        {values.map((val, index) => {
+          return (
+            <Tag color={val.color} key={index}>
+              <Tooltip title={val.name}>
+                <TagText>{val.name}</TagText>
+              </Tooltip>
+              <i className="material-icons" onClick={() => onDelete(index)}>
+                cancel
+              </i>
+            </Tag>
+          );
+        })}
         <Tooltip title="Create a new tag">
           <AddButton
             className="material-icons-outlined"
@@ -137,21 +151,9 @@ const TagSelector = ({ onSave, release }: Props) => {
           </AddButton>
         </Tooltip>
       </Flex>
-      {values.map((val, index) => {
-        return (
-          <Tag color={val.color} key={index}>
-            <Tooltip title={val.name}>
-              <TagText>{val.name}</TagText>
-            </Tooltip>
-            <i className="material-icons" onClick={() => onDelete(index)}>
-              delete
-            </i>
-          </Tag>
-        );
-      })}
       <Flex
         style={{
-          marginTop: "35px",
+          marginTop: "25px",
         }}
       >
         <SaveButton
@@ -164,10 +166,16 @@ const TagSelector = ({ onSave, release }: Props) => {
           disabled={!hasUnsavedChanges || buttonStatus === "loading"}
         ></SaveButton>
       </Flex>
+      <Br />
     </>
   );
 };
 
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
 const CreateTagModal = ({
   onSave,
   onClose,
@@ -280,12 +288,15 @@ const AddButton = styled.div`
   border-radius: 50%;
   border: 1px solid #ffffff11;
   padding: 5px;
+  height: 20px;
+  width: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 10px;
   background: #ffffff11;
   color: #ffffff88;
+  font-size: 18px;
   :hover {
     background: #ffffff22;
     color: #ffffff;
@@ -295,20 +306,19 @@ const AddButton = styled.div`
 
 const Tag = styled.div<{ color: string }>`
   display: inline-flex;
-  color: ${(props) => props.color || "inherit"};
+  color: ${(props) => Color(props.color).darken(0.4).string() || "inherit"};
   user-select: none;
-  border: 1px solid black;
-  border-radius: 15px;
-  padding: 5px 10px;
+  border: 1px solid ${props => Color(props.color).darken(0.4).string()};
+  border-radius: 5px;
+  padding: 4px 8px;
+  position: relative;
+  padding-right: 24px;
   text-align: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 13px;
   background-color: ${(props) => props.color || "inherit"};
-  margin-top: 15px;
-  margin-bottom: 5px;
 
   max-width: 150px;
-  min-height: 30px;
   min-width: 60px;
 
   :not(:last-child) {
@@ -316,9 +326,10 @@ const Tag = styled.div<{ color: string }>`
   }
 
   > .material-icons {
-    font-size: 20px;
-    margin-left: 5px;
-    mix-blend-mode: difference;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 16px;
     :hover {
       cursor: pointer;
     }
@@ -326,8 +337,6 @@ const Tag = styled.div<{ color: string }>`
 `;
 
 const TagText = styled.span`
-  mix-blend-mode: difference;
-
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;