Merge pull request #133 from RafaelGB/visual-improvements

Visual improvements

Author: RafaelGB

src/components/img/TagsIcon.tsx

@@ -6,7 +6,7 @@ export default function TagsIcon() {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      strokeWidth="2"
+      strokeWidth="1.5"
       stroke="currentColor"
       fill="none"
       strokeLinecap="round"

src/components/portals/TagsPortal.tsx

@@ -103,6 +103,8 @@ const TagsPortal = (tagsProps: TagsProps) => {
           onChange={handleOnChange}
           menuPortalTarget={document.body}
           menuShouldBlockScroll={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
         />
       </div>
     );
@@ -112,27 +114,23 @@ const TagsPortal = (tagsProps: TagsProps) => {
       {showSelectTags
         ? TagsForm()
         : tagsState && (
-            <div
-              className="d-flex flex-wrap-wrap"
-              style={{
-                padding: "0.75rem",
-              }}
-              onClick={() => setShowSelectTags(true)}
-            >
-              {tagsState.map((tag: string) => (
-                <div
-                  key={`key-${tag}`}
-                  style={{ marginRight: "0.5rem", marginTop: "0.5rem" }}
-                >
-                  <Relationship
-                    key={`key-Relationship-${tag}`}
-                    value={tag}
-                    backgroundColor={getColor(tag)}
-                  />
-                </div>
-              ))}
-            </div>
-          )}
+          <div
+            className={c("tags-container") + " cell-padding d-flex flex-wrap-wrap"}
+            onClick={() => setShowSelectTags(true)}
+          >
+            {tagsState.map((tag: string) => (
+              <div
+                key={`key-${tag}`}
+              >
+                <Relationship
+                  key={`key-Relationship-${tag}`}
+                  value={tag}
+                  backgroundColor={getColor(tag)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
     </>
   );
 };

src/components/styles/TagsStyles.ts

@@ -10,19 +10,19 @@ const CustomTagsStyles: StylesConfig<any, true, GroupBase<any>> = {
         boxSizing: "border-box",
     }),
     menu: () => ({
-        position: "fixed",
-        backgroundColor: `${StyleVariables.BACKGROUND_SECONDARY}`,
+        position: "fixed"
     }),
     menuPortal: base => ({ ...base, zIndex: 9999 }),
-    control: (styles) => ({ ...styles, backgroundColor: "white" }),
+    control: (styles) => ({ ...styles, backgroundColor: "var(--background-primary)" }),
     option: (styles, { data }) => ({
         ...styles,
-        backgroundColor: data.color,
+        backgroundColor: data.color + " !important",
+        color: "rgb(66, 66, 66) !important"
     }),
     multiValue: (styles, { data }) => {
         return {
             ...styles,
-            backgroundColor: data.color,
+            backgroundColor: data.color + " !important",
         };
     },
     multiValueLabel: (styles) => ({
@@ -33,7 +33,7 @@ const CustomTagsStyles: StylesConfig<any, true, GroupBase<any>> = {
         ...styles,
         color: "black",
         ":hover": {
-            backgroundColor: data.color,
+            backgroundColor: data.color + " !important",
             color: "white",
         },
     }),