Color clean up (#749)

* Define all colors from product with new names * Use new color name for identical colors in app * Replace similar colors with new color names * Clean up colors in general * Adjust gradients to figma design and improve button gradients * Delete unused component TutorialSteps * Clean up grey shades * Add shadow to balance on hover * Fix theme color choice in ValidationStatus * Fix Balance hover effect console error
CirclesUBI · Oct 10, 2023 · cc38307 · cc38307
1 parent 1601fb4
commit cc38307
Show file tree

Hide file tree

Showing 49 changed files with 302 additions and 362 deletions.
diff --git a/src/App.js b/src/App.js
@@ -32,19 +32,19 @@ const useStyles = makeStyles((theme) => {
       },
 
       '&.notistack-MuiContent-success': {
-        background: theme.custom.colors.fountainBlue,
-        boxShadow: theme.custom.shadows.grayBottomRight,
+        background: theme.custom.colors.blue100,
+        boxShadow: theme.custom.shadows.greyBottomRight,
       },
       '&.notistack-MuiContent-error': {
-        background: theme.custom.colors.lividBrown,
+        background: theme.custom.colors.purple50,
         boxShadow: theme.custom.shadows.lightGray,
       },
       '&.notistack-MuiContent-warning': {
-        background: theme.custom.colors.whiteAlmost,
-        border: `2px solid ${theme.custom.colors.deepBlush}`,
+        background: theme.custom.colors.white,
+        border: `2px solid ${theme.custom.colors.pink300}`,
         borderRadius: '8px',
         boxShadow: theme.custom.shadows.lightGray,
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
         textAlign: 'center',
         '& div': {
           paddingLeft: '0px',

diff --git a/src/components/ActivityStreamItem.js b/src/components/ActivityStreamItem.js
@@ -32,16 +32,16 @@ const useStyles = makeStyles((theme) => ({
   cardContainer: {
     boxShadow: theme.custom.shadows.navigationFloating,
     '&:hover': {
-      background: theme.custom.colors.blackSqueeze,
+      background: theme.custom.colors.blue600,
 
       '& .MuiCardHeader-root': {
-        background: theme.custom.colors.blackSqueeze,
+        background: theme.custom.colors.blue600,
       },
     },
   },
   cardHeader: {
     cursor: 'pointer',
-    background: theme.custom.colors.whiteAlmost,
+    background: theme.custom.colors.white,
   },
   cardHeaderUnseen: {
     position: 'relative',
@@ -54,7 +54,7 @@ const useStyles = makeStyles((theme) => ({
       borderRadius: '50%',
       width: '13px',
       height: '13px',
-      background: theme.custom.gradients.purple,
+      background: theme.custom.gradients.pinkToPurple,
     },
   },
   cardHeaderAction: {
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
   cardContent: {
     padding: '15px 0 15px',
     margin: '5px 15px 0 15px',
-    borderTop: `1px solid ${theme.custom.colors.oldLavender}`,
+    borderTop: `1px solid ${theme.custom.colors.purple200}`,
     ' &.MuiCardContent-root': {
       paddingBottom: `${theme.spacing(1.5)}`,
     },

diff --git a/src/components/AppNote.js b/src/components/AppNote.js
@@ -7,8 +7,8 @@ import theme, { colors } from '../styles/theme';
 
 import HumbleAlert from '~/components/HumbleAlert';
 
-const DEFAULT_ALERT_COLOR = theme.custom.colors.fountainBlue;
-const DEFAULT_ICON_COLOR = colors.whiteAlmost;
+const DEFAULT_ALERT_COLOR = theme.custom.colors.blue100;
+const DEFAULT_ICON_COLOR = colors.white;
 const DEFAULT_ICON = 'IconBrowser';
 
 const useStyles = makeStyles(() => ({

diff --git a/src/components/Avatar.js b/src/components/Avatar.js
@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
   },
   circleGrey: {
     background: theme.custom.colors.greyHover,
-    border: `2px solid ${theme.custom.colors.fountainBlue}`,
+    border: `2px solid ${theme.custom.colors.blue100}`,
     position: 'absolute',
     left: '-1px',
     top: '-1px',

diff --git a/src/components/BackgroundCurved.js b/src/components/BackgroundCurved.js
@@ -23,14 +23,14 @@ const useStyles = makeStyles((theme) => {
         ) {
           switch (props.gradient) {
             case 'turquoise':
-              return theme.custom.gradients.greenBlue;
+              return theme.custom.gradients.greenBlueCurved;
             case 'violet':
               return theme.custom.gradients.violetCurved;
           }
         } else {
           switch (props.gradient) {
             case 'turquoise':
-              return theme.custom.gradients.greenBlue;
+              return theme.custom.gradients.greenBlueCurved;
             case 'violet':
               return theme.custom.gradients.violetCurved;
           }

diff --git a/src/components/BadgeTab.js b/src/components/BadgeTab.js
@@ -7,11 +7,11 @@ import React from 'react';
 const useStyles = makeStyles((theme) => ({
   iconActive: {
     '& path': {
-      fill: theme.custom.colors.violet,
+      fill: theme.custom.colors.purple100,
     },
   },
   badgeContainer: {
-    backgroundColor: theme.custom.colors.fountainBlue,
+    backgroundColor: theme.custom.colors.blue100,
     right: '-9px',
   },
 }));

diff --git a/src/components/BalanceDisplay.js b/src/components/BalanceDisplay.js
@@ -30,10 +30,11 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(0.5),
     fontSize: '2.3rem',
   },
-  balanceUnderline: {
+  balanceHover: {
     '&:hover': {
       textDecoration: 'underline',
-      textDecorationColor: theme.custom.colors.violet,
+      textDecorationColor: theme.custom.colors.purple100,
+      textShadow: theme.custom.shadows.grey,
     },
   },
 }));
@@ -66,7 +67,7 @@ const BalanceDisplay = ({ underlineAtHover = true }) => {
           <CircularProgress />
         ) : (
           <Typography
-            className={underlineAtHover && classes.balanceUnderline}
+            className={underlineAtHover ? classes.balanceHover : ''}
             variant="balance1"
           >
             <Link to={TOKENS_PATH}>

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -14,32 +14,32 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'none',
     borderRadius: 30,
     zIndex: theme.zIndex.layer2,
-    background: theme.custom.gradients.purple,
-    color: theme.palette.common.white,
+    background: theme.custom.gradients.pinkToPurple,
+    color: theme.custom.colors.white,
     height: '40px',
     '&:hover': {
-      background: theme.custom.gradients.purpleHover,
+      background: theme.custom.gradients.lightPinkToPurple,
     },
     '&.Mui-disabled': {
-      background: theme.custom.colors.lola,
+      background: theme.custom.colors.purple500,
       borderRadius: '30px',
-      color: theme.custom.colors.lily,
+      color: theme.custom.colors.purple400,
       'pointer-events': 'visible',
 
       '&:hover': {
-        background: theme.custom.colors.lola,
+        background: theme.custom.colors.purple500,
       },
     },
   },
   buttonOutline: {
     color: theme.palette.primary.main,
-    background: `linear-gradient(${theme.custom.colors.whiteAlmost}, ${theme.custom.colors.whiteAlmost}) padding-box,
+    background: `linear-gradient(${theme.custom.colors.white}, ${theme.custom.colors.white}) padding-box,
     ${theme.custom.gradients.pinkToPurple} border-box`,
     position: 'relative',
     border: '1px solid transparent',
     borderRadius: '30px',
     '&:hover': {
-      background: `linear-gradient(${theme.custom.colors.whiteAlmost}, ${theme.custom.colors.whiteAlmost}) padding-box,
+      background: `linear-gradient(${theme.custom.colors.white}, ${theme.custom.colors.white}) padding-box,
       ${theme.custom.gradients.lightPinkToPurple} border-box`,
       '& .MuiTouchRipple-root': {
         background: theme.custom.gradients.lightPinkToPurple,
@@ -50,12 +50,12 @@ const useStyles = makeStyles((theme) => ({
       },
     },
     '&.Mui-disabled': {
-      background: theme.custom.colors.whiteAlmost,
-      borderColor: theme.custom.colors.lola,
+      background: theme.custom.colors.white,
+      borderColor: theme.custom.colors.purple500,
       '& .MuiTouchRipple-root': {
         background: 'none',
-        color: theme.custom.colors.lola,
-        '-webkit-text-fill-color': theme.custom.colors.lola,
+        color: theme.custom.colors.purple500,
+        '-webkit-text-fill-color': theme.custom.colors.purple500,
         textFillColor: 'transparent',
       },
     },
@@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({
   },
   buttonText: {
     border: 0,
-    background: theme.custom.gradients.purple,
+    background: theme.custom.gradients.pinkToPurple,
     color: 'transparent',
     '-webkit-background-clip': 'text',
     '-webkit-text-fill-color': 'transparent',
@@ -102,10 +102,9 @@ const useStyles = makeStyles((theme) => ({
     },
     '&.Mui-disabled': {
       background: 'transparent',
-      color: theme.custom.colors.lily,
-      '-webkit-text-fill-color': theme.custom.colors.lily,
-      textFillColor: theme.custom.colors.lily,
-
+      color: theme.custom.colors.purple400,
+      '-webkit-text-fill-color': theme.custom.colors.purple400,
+      textFillColor: theme.custom.colors.purple400,
       '&:hover': {
         cursor: 'not-allowed',
         'pointer-events': 'visible',

diff --git a/src/components/ButtonAction.js b/src/components/ButtonAction.js
@@ -18,10 +18,10 @@ const useStyles = makeStyles((theme) => ({
 
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.cannonPink,
+        stopColor: theme.custom.colors.pinkHoverLight,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.cranberry,
+        stopColor: theme.custom.colors.pink200,
       },
     },
   },
@@ -41,17 +41,17 @@ const useStyles = makeStyles((theme) => ({
   },
   buttonDisabled: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.lola,
+        stopColor: theme.custom.colors.purple500,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.lola,
+        stopColor: theme.custom.colors.purple500,
       },
     },
   },

diff --git a/src/components/ButtonDouble.js b/src/components/ButtonDouble.js
@@ -33,9 +33,9 @@ const useStyles = makeStyles((theme) => ({
   },
 
   buttonGradientOpposite: {
-    background: theme.custom.gradients.purpleOpposite,
+    background: theme.custom.gradients.purpleToPink,
     '&:hover': {
-      background: theme.custom.gradients.purpleOppositeHover,
+      background: theme.custom.gradients.purpleToLightPink,
     },
   },
 }));

diff --git a/src/components/ButtonIcon.js b/src/components/ButtonIcon.js
@@ -11,14 +11,14 @@ const useStyles = makeStyles((theme) => ({
   button: {
     fontWeight: fontWeightRegular,
     fontSize: fontSizeSmaller,
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
     textTransform: 'none',
     '&:hover': {
       background: 'transparent',
-      color: theme.custom.colors.purple,
+      color: theme.custom.colors.pink100,
 
       '& path': {
-        fill: theme.custom.colors.purple,
+        fill: theme.custom.colors.pink100,
       },
     },
   },

diff --git a/src/components/ButtonSend.js b/src/components/ButtonSend.js
@@ -10,7 +10,7 @@ import { IconSend } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
   buttonActionSendIcon: {
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     left: -2,
     position: 'relative',
     top: 1,

diff --git a/src/components/ButtonTrust.js b/src/components/ButtonTrust.js
@@ -15,63 +15,63 @@ import {
 const useStyles = makeStyles((theme) => ({
   trustButton: {
     background: 'transparent',
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     padding: '0',
   },
   trustButtonNoTrust: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.purpleDark,
+      stopColor: theme.custom.gradients.pinkToPurple,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.purple,
+      stopColor: theme.custom.colors.pink100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.cannonPink,
+        stopColor: theme.custom.colors.pinkHoverLight,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.cranberry,
+        stopColor: theme.custom.colors.pink200,
       },
     },
   },
   trustButtonOneWay: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.violet,
+      stopColor: theme.custom.colors.purple100,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.violet,
+      stopColor: theme.custom.colors.purple100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.oldLavender,
+        stopColor: theme.custom.colors.purple200,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.oldLavender,
+        stopColor: theme.custom.colors.purple200,
       },
     },
   },
   trustButtonMutualTrust: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.fountainBlue,
+      stopColor: theme.custom.colors.blue100,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.fountainBlue,
+      stopColor: theme.custom.colors.blue100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.fountainBlueLighter,
+        stopColor: theme.custom.colors.blue200,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.fountainBlueLighter,
+        stopColor: theme.custom.colors.blue200,
       },
     },
   },
   trustButtonDisabled: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
   },
   trustButtonContainer: {