fixed tx label colors and background for all tx

CoreumFoundation · Mar 21, 2023 · 27c53d8 · 27c53d8
1 parent b2f2326
commit 27c53d8
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 22 deletions.
diff --git a/apps/web-coreum/src/chain.json b/apps/web-coreum/src/chain.json
@@ -199,7 +199,7 @@
           "twenty": "#D9C788"
         },
         "tags_bg": {
-          "six": "#F6F6F6"
+          "six": "#eaeaea"
         }
       }
     }

diff --git a/packages/ui/src/components/tag/styles.ts b/packages/ui/src/components/tag/styles.ts
@@ -19,87 +19,125 @@ const useStyles = makeStyles()((theme) => ({
   },
   zero: {
     color: theme.palette.custom.tags.zero,
-    background: Color(theme.palette.custom.tags.zero).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.zero ||
+      Color(theme.palette.custom.tags.zero).alpha(0.2).string(),
   },
   one: {
     color: theme.palette.custom.tags.one,
-    background: Color(theme.palette.custom.tags.one).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.one || Color(theme.palette.custom.tags.one).alpha(0.2).string(),
   },
   two: {
     color: theme.palette.custom.tags.two,
-    background: Color(theme.palette.custom.tags.two).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.two || Color(theme.palette.custom.tags.two).alpha(0.2).string(),
   },
   three: {
     color: theme.palette.custom.tags.three,
-    background: Color(theme.palette.custom.tags.three).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.three ||
+      Color(theme.palette.custom.tags.three).alpha(0.2).string(),
   },
   four: {
     color: theme.palette.custom.tags.four,
-    background: Color(theme.palette.custom.tags.four).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.four ||
+      Color(theme.palette.custom.tags.four).alpha(0.2).string(),
   },
   five: {
     color: theme.palette.custom.tags.five,
-    background: Color(theme.palette.custom.tags.five).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.five ||
+      Color(theme.palette.custom.tags.five).alpha(0.2).string(),
   },
   six: {
     color: theme.palette.custom.tags.six,
-    background: Color(theme.palette.custom.tags.six).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.six || Color(theme.palette.custom.tags.six).alpha(0.2).string(),
   },
   seven: {
     color: theme.palette.custom.tags.seven,
-    background: Color(theme.palette.custom.tags.seven).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.seven ||
+      Color(theme.palette.custom.tags.seven).alpha(0.2).string(),
   },
   eight: {
     color: theme.palette.custom.tags.eight,
-    background: Color(theme.palette.custom.tags.eight).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.eight ||
+      Color(theme.palette.custom.tags.eight).alpha(0.2).string(),
   },
   nine: {
     color: theme.palette.custom.tags.nine,
-    background: Color(theme.palette.custom.tags.nine).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.nine ||
+      Color(theme.palette.custom.tags.nine).alpha(0.2).string(),
   },
   ten: {
     color: theme.palette.custom.tags.ten,
-    background: Color(theme.palette.custom.tags.ten).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.ten || Color(theme.palette.custom.tags.ten).alpha(0.2).string(),
   },
   eleven: {
     color: theme.palette.custom.tags.eleven,
-    background: Color(theme.palette.custom.tags.eleven).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.eleven ||
+      Color(theme.palette.custom.tags.eleven).alpha(0.2).string(),
   },
   twelve: {
     color: theme.palette.custom.tags.twelve,
-    background: Color(theme.palette.custom.tags.twelve).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.twelve ||
+      Color(theme.palette.custom.tags.twelve).alpha(0.2).string(),
   },
   thirteen: {
     color: theme.palette.custom.tags.thirteen,
-    background: Color(theme.palette.custom.tags.thirteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.thirteen ||
+      Color(theme.palette.custom.tags.thirteen).alpha(0.2).string(),
   },
   fourteen: {
     color: theme.palette.custom.tags.fourteen,
-    background: Color(theme.palette.custom.tags.fourteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.fourteen ||
+      Color(theme.palette.custom.tags.fourteen).alpha(0.2).string(),
   },
   fifteen: {
     color: theme.palette.custom.tags.fifteen,
-    background: Color(theme.palette.custom.tags.fifteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.fifteen ||
+      Color(theme.palette.custom.tags.fifteen).alpha(0.2).string(),
   },
   sixteen: {
     color: theme.palette.custom.tags.sixteen,
-    background: Color(theme.palette.custom.tags.sixteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.sixteen ||
+      Color(theme.palette.custom.tags.sixteen).alpha(0.2).string(),
   },
   seventeen: {
     color: theme.palette.custom.tags.seventeen,
-    background: Color(theme.palette.custom.tags.seventeen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.seventeen ||
+      Color(theme.palette.custom.tags.seventeen).alpha(0.2).string(),
   },
   eighteen: {
     color: theme.palette.custom.tags.eighteen,
-    background: Color(theme.palette.custom.tags.eighteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.eighteen ||
+      Color(theme.palette.custom.tags.eighteen).alpha(0.2).string(),
   },
   nineteen: {
     color: theme.palette.custom.tags.nineteen,
-    background: Color(theme.palette.custom.tags.nineteen).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.nineteen ||
+      Color(theme.palette.custom.tags.nineteen).alpha(0.2).string(),
   },
   twenty: {
     color: theme.palette.custom.tags.twenty,
-    background: Color(theme.palette.custom.tags.twenty).alpha(0.2).string(),
+    background:
+      theme.palette.custom.tags_bg.twenty ||
+      Color(theme.palette.custom.tags.twenty).alpha(0.2).string(),
   },
 }));