diff --git a/src/App.js b/src/App.js
index f09316e2..c7d2cdcd 100644
--- 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
index 28a9d79e..39896c11 100644
--- 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
index 9fc026d1..77610d13 100644
--- 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
index afdd7c13..85eb94cd 100644
--- 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
index e2b18670..7bded21d 100644
--- 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
index 74d5ba38..0de0b5bc 100644
--- 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
index 221798ec..537387a3 100644
--- 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 }) => {
) : (
diff --git a/src/components/Button.js b/src/components/Button.js
index 4297debe..00467e37 100644
--- 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
index dad35946..9de38db2 100644
--- 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
index 56dbaa2f..4b1dd010 100644
--- 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
index eecc0728..422e42a0 100644
--- 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
index 4fef1d8c..606ddf47 100644
--- 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
index cc05490c..b5bf2975 100644
--- 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: {
diff --git a/src/components/ButtonWobbly.js b/src/components/ButtonWobbly.js
index f3d555ba..14843e27 100644
--- a/src/components/ButtonWobbly.js
+++ b/src/components/ButtonWobbly.js
@@ -10,25 +10,25 @@ import { IconWobblyCircle, iconSelector } from '~/styles/icons';
const useStyles = makeStyles((theme) => ({
buttonWobbly: {
background: 'transparent',
- color: theme.palette.common.whiteAlmost,
+ color: theme.palette.common.white,
padding: '0',
'& 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,
},
},
},
buttonWobblyDisabled: {
- background: theme.custom.gradients.gray,
+ background: theme.custom.gradients.grey,
},
buttonWobblyContainer: {
width: '55px',
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({
position: 'relative',
left: 1,
fontSize: '2.4rem',
- color: theme.custom.colors.whiteAlmost,
+ color: theme.custom.colors.white,
},
buttonWobblyIconBackground: {
width: '55px',
diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 413e0ecc..652518a3 100644
--- a/src/components/DateInput.js
+++ b/src/components/DateInput.js
@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme) => ({
'& fieldset': {
'&.MuiOutlinedInput-notchedOutline': {
borderRadius: '25px',
- borderColor: theme.custom.colors.violet,
+ borderColor: theme.custom.colors.purple100,
'& legend span': {
display: 'none',
},
@@ -18,11 +18,11 @@ const useStyles = makeStyles((theme) => ({
'& input.MuiInputBase-input': {
padding: '11.5px 14px',
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
'& label.MuiFormLabel-root': {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
fontSize: fontSizeSmaller,
transform: 'translate(28px, -6px)',
background: theme.custom.colors.white,
@@ -32,14 +32,14 @@ const useStyles = makeStyles((theme) => ({
borderRadius: '10px',
'&:has(+ .MuiOutlinedInput-root:hover)': {
- background: theme.custom.colors.cornflowerBlue,
+ background: theme.custom.purple600,
},
'&.Mui-error': {
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
'&:has(+ .MuiOutlinedInput-root:hover)': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink600,
},
'&:hover': {
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
'&:hover': {
'& input.MuiInputBase-input': {
- background: theme.custom.colors.cornflowerBlue,
+ background: theme.custom.purple600,
},
},
},
@@ -68,14 +68,14 @@ const useStyles = makeStyles((theme) => ({
},
'& .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused': {
- border: `3px solid ${theme.custom.colors.lola}`,
+ border: `3px solid ${theme.custom.colors.purple500}`,
'& fieldset.MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.violet,
+ borderColor: theme.custom.colors.purple100,
},
'& label.MuiFormLabel-root': {
- background: theme.custom.colors.lola,
+ background: theme.custom.colors.purple500,
},
},
@@ -83,41 +83,41 @@ const useStyles = makeStyles((theme) => ({
right: '2px',
'&:hover': {
- background: theme.custom.colors.cornflowerBlue,
+ background: theme.custom.purple600,
},
},
'& .Mui-error': {
'& .MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.purple,
+ borderColor: theme.custom.colors.pink100,
borderWidth: '2px',
},
'& button.MuiButtonBase-root.MuiIconButton-root': {
'&:hover': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink600,
},
},
'&.MuiInputBase-root': {
'&:hover': {
'& input.MuiInputBase-input': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink600,
},
'& +.MuiFormHelperText-root.Mui-error': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink600,
},
},
'&.MuiOutlinedInput-root.Mui-focused': {
- border: `3px solid ${theme.custom.colors.wepeep}`,
+ border: `3px solid ${theme.custom.colors.pink600}`,
'& fieldset.MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.purple,
+ borderColor: theme.custom.colors.pink100,
},
'& label.MuiFormLabel-root': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink600,
},
},
},
@@ -130,7 +130,7 @@ const useStyles = makeStyles((theme) => ({
background: theme.custom.colors.white,
lineHeight: '10px',
borderRadius: '10px',
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
},
},
diff --git a/src/components/DialogExportStatement.js b/src/components/DialogExportStatement.js
index 7584ba38..989ae8ec 100644
--- a/src/components/DialogExportStatement.js
+++ b/src/components/DialogExportStatement.js
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
margin: '16px 0 42px',
},
lineLightGrey: {
- stroke: theme.custom.colors.lily,
+ stroke: theme.custom.colors.purple400,
margin: '29px 0 42px',
},
helperDate: {
diff --git a/src/components/DialogInfo.js b/src/components/DialogInfo.js
index cc8e0f93..7a0a65db 100644
--- a/src/components/DialogInfo.js
+++ b/src/components/DialogInfo.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
dialogContainer: {
'& .MuiDialog-paper': {
borderRadius: '10px',
- boxShadow: theme.custom.shadows.gray,
+ boxShadow: theme.custom.shadows.grey,
textAlign: 'center',
},
'& .MuiBackdrop-root': {
diff --git a/src/components/DialogPurple.js b/src/components/DialogPurple.js
index eee64a37..f9d898d9 100644
--- a/src/components/DialogPurple.js
+++ b/src/components/DialogPurple.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
const useTitleStyles = makeStyles((theme) => ({
root: {
- color: theme.custom.colors.grayLightest,
+ color: theme.custom.colors.white,
},
}));
diff --git a/src/components/DialogSendConfirm.js b/src/components/DialogSendConfirm.js
index f5286e83..2d342acb 100644
--- a/src/components/DialogSendConfirm.js
+++ b/src/components/DialogSendConfirm.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
wordWrap: 'break-word',
},
sendIcon: {
- color: theme.custom.colors.disco,
+ color: theme.custom.colors.pink50,
fontSize: 'inherit',
},
iconContainer: {
diff --git a/src/components/Finder.js b/src/components/Finder.js
index 583db8d7..b8f35827 100644
--- a/src/components/Finder.js
+++ b/src/components/Finder.js
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
noSearchResultContainer: {
marginTop: '80px',
'& p': {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
},
noSearchResultIconContainer: {
diff --git a/src/components/HumbleAlert.js b/src/components/HumbleAlert.js
index 90c2ce89..343e6a36 100644
--- a/src/components/HumbleAlert.js
+++ b/src/components/HumbleAlert.js
@@ -9,21 +9,21 @@ const useStyles = makeStyles((theme) => {
return {
alert: {
backgroundColor: ({ color }) => color,
- boxShadow: theme.custom.gradients.grayAlert,
+ boxShadow: theme.custom.gradients.greyAlert,
borderRadius: '8px',
display: 'flex',
alignItems: 'center',
'& .MuiAlert-icon': {
marginRight: '20px',
'& svg': {
- color: theme.custom.colors.whiteAlmost,
+ color: theme.custom.colors.white,
},
},
},
alertHtmlChildren: {
'& a': {
textDecoration: 'none',
- color: theme.custom.colors.blueRibbon,
+ color: theme.custom.colors.white,
'&:hover': {
textDecoration: 'underline',
},
diff --git a/src/components/ImageCapture.js b/src/components/ImageCapture.js
index 30255786..4b919ba5 100644
--- a/src/components/ImageCapture.js
+++ b/src/components/ImageCapture.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
display: 'none',
},
loadingMask: {
- background: theme.custom.colors.cornflowerBlue,
+ background: theme.custom.colors.purple600,
opacity: 0.5,
position: 'relative',
},
diff --git a/src/components/Input.js b/src/components/Input.js
index aefda679..288733d0 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -16,14 +16,14 @@ import { fontSizeSmaller } from '~/styles/fonts';
const useStyles = makeStyles((theme) => {
const textColor = (isOrganization) => {
return isOrganization
- ? theme.custom.colors.violet
- : theme.custom.colors.fountainBlue;
+ ? theme.custom.colors.purple100
+ : theme.custom.colors.blue100;
};
const backgroundColor = (isOrganization) => {
return isOrganization
- ? theme.custom.colors.cornflowerBlue
- : theme.custom.colors.blackSqueeze;
+ ? theme.custom.colors.purple600
+ : theme.custom.colors.blue600;
};
return {
@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => {
},
'&.Mui-focused.Mui-error': {
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
},
'&:has(+ .MuiOutlinedInput-root:hover)': {
@@ -54,13 +54,13 @@ const useStyles = makeStyles((theme) => {
},
'&:has(+ .MuiOutlinedInput-root.Mui-error:hover)': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink500,
},
},
inputLabelError: {
'&.Mui-error': {
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
},
},
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => {
outlinedInput: {
padding: '11.5px 14px',
borderRadius: '25px',
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
outlinedInputRoot: {
@@ -97,16 +97,16 @@ const useStyles = makeStyles((theme) => {
'&.Mui-error': {
'& .MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.purple,
+ borderColor: theme.custom.colors.pink100,
},
'& .MuiOutlinedInput-input': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink500,
},
},
'& +.MuiFormHelperText-root.Mui-error': {
- background: theme.custom.colors.wepeep,
+ background: theme.custom.colors.pink500,
},
},
@@ -116,7 +116,7 @@ const useStyles = makeStyles((theme) => {
},
'& +.MuiFormHelperText-root.Mui-error': {
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
},
'& .MuiSvgIcon-root': {
@@ -129,7 +129,7 @@ const useStyles = makeStyles((theme) => {
'&.Mui-error': {
'& fieldset.MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.purple,
+ borderColor: theme.custom.colors.pink100,
},
},
},
@@ -137,18 +137,18 @@ const useStyles = makeStyles((theme) => {
outlinedInputFocused: {
border: (isOrganization) =>
isOrganization
- ? `3px solid ${theme.custom.colors.lola} `
- : `3px solid ${theme.custom.colors.swansDown}`,
+ ? `3px solid ${theme.custom.colors.purple500} `
+ : `3px solid ${theme.custom.colors.blue500}`,
borderColor: (isOrganization) =>
isOrganization
- ? theme.custom.colors.lola
- : theme.custom.colors.swansDown,
+ ? theme.custom.colors.purple500
+ : theme.custom.colors.blue500,
'& .MuiOutlinedInput-notchedOutline': {
borderColor: (isOrganization) =>
isOrganization
- ? `${theme.custom.colors.violet} !important`
- : `${theme.custom.colors.fountainBlue} !important`, // should work without important but doesn't...
+ ? `${theme.custom.colors.purple100} !important`
+ : `${theme.custom.colors.blue100} !important`, // should work without important but doesn't...
borderWidth: '2px',
},
},
@@ -157,17 +157,17 @@ const useStyles = makeStyles((theme) => {
borderColor: 'transparent',
'&.Mui-focused': {
- border: `3px solid ${theme.custom.colors.wepeep}`,
- borderColor: theme.custom.colors.wepeep,
+ border: `3px solid ${theme.custom.colors.pink500}`,
+ borderColor: theme.custom.colors.pink500,
'& .MuiOutlinedInput-notchedOutline': {
- borderColor: `${theme.custom.colors.purple} !important`, // should work without important but doesn't...
+ borderColor: `${theme.custom.colors.pink100} !important`, // should work without important but doesn't...
borderWidth: '2px',
},
},
'& .MuiOutlinedInput-notchedOutline': {
- borderColor: theme.custom.colors.purple,
+ borderColor: theme.custom.colors.pink100,
borderWidth: '2px',
},
},
diff --git a/src/components/LocaleSelector.js b/src/components/LocaleSelector.js
index 27b8975e..88291917 100644
--- a/src/components/LocaleSelector.js
+++ b/src/components/LocaleSelector.js
@@ -10,19 +10,19 @@ import { fontSizeRegular } from '~/styles/fonts';
const useStyles = makeStyles((theme) => ({
select: {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
selectInverted: {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
selectIcon: {
fill: theme.palette.primary.contrastText,
},
selectIconInverted: {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
selectInput: {
- color: theme.custom.colors.whiteAlmost,
+ color: theme.custom.colors.white,
padding: theme.spacing(1),
backgroundColor: 'transparent',
borderRadius: theme.shape.borderRadius,
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
},
selectInputInverted: {
border: 0,
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
}));
diff --git a/src/components/Mnemonic.js b/src/components/Mnemonic.js
index 80673a38..415194a0 100644
--- a/src/components/Mnemonic.js
+++ b/src/components/Mnemonic.js
@@ -11,10 +11,10 @@ const useStyles = makeStyles((theme) => ({
padding: '0 0 0 10px',
},
seedItem: {
- background: theme.custom.colors.grayLightest,
+ background: theme.custom.colors.white,
borderRadius: 4,
border: '1px solid rgba(0, 0, 0, 0.1)',
- boxShadow: theme.custom.shadows.gray,
+ boxShadow: theme.custom.shadows.grey,
display: 'inline-block',
marginBottom: 6,
marginLeft: 22,
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index d6aea925..fe988434 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
},
navigationFooter: {
padding: theme.spacing(3),
- background: theme.custom.gradients.purple,
+ background: theme.custom.gradients.pinkToPurple,
},
navigationLink: {
width: '100%',
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
paddingLeft: theme.spacing(3),
justifyContent: 'flex-start',
textTransform: 'none',
- color: theme.custom.colors.mineShaft,
+ color: theme.custom.colors.grey50,
},
navigationProfileLink: {
textDecoration: 'none',
diff --git a/src/components/NavigationFloating.js b/src/components/NavigationFloating.js
index 053f2de8..24046663 100644
--- a/src/components/NavigationFloating.js
+++ b/src/components/NavigationFloating.js
@@ -21,25 +21,25 @@ const useStyles = makeStyles((theme) => {
const backgroundTheme = (props) => {
switch (props?.color) {
case 'turquoise':
- return theme.custom.colors.fountainBlue;
- case 'violet':
- return theme.custom.colors.violet;
+ return theme.custom.colors.blue100;
+ case 'purple100':
+ return theme.custom.colors.purple100;
case 'white':
- return theme.custom.colors.whiteAlmost;
+ return theme.custom.colors.white;
default:
- return theme.custom.colors.fountainBlue;
+ return theme.custom.colors.blue100;
}
};
const backgroundHoverTheme = (props) => {
switch (props?.color) {
case 'turquoise':
- return theme.custom.colors.fountainBlueLighter;
+ return theme.custom.colors.blue200;
case 'violet':
- return theme.custom.colors.oldLavender;
+ return theme.custom.colors.purple200;
case 'white':
- return theme.custom.colors.whiteAlmost;
+ return theme.custom.colors.white;
default:
- return theme.custom.colors.fountainBlue;
+ return theme.custom.colors.blue100;
}
};
@@ -98,8 +98,8 @@ const useStyles = makeStyles((theme) => {
'& .MuiFab-label': {
color: (props) =>
props?.color === 'white'
- ? theme.custom.colors.fountainBlueLighter
- : theme.custom.colors.whiteAlmost,
+ ? theme.custom.colors.blue200
+ : theme.custom.colors.white,
},
'& stop': {
stopColor: backgroundHoverTheme,
@@ -108,8 +108,8 @@ const useStyles = makeStyles((theme) => {
'& .MuiFab-label': {
color: (props) =>
props?.color === 'white'
- ? theme.custom.colors.fountainBlue
- : theme.custom.colors.whiteAlmost,
+ ? theme.custom.colors.blue100
+ : theme.custom.colors.white,
},
},
diff --git a/src/components/NewsFeed.js b/src/components/NewsFeed.js
index 80006f38..d344ddb9 100644
--- a/src/components/NewsFeed.js
+++ b/src/components/NewsFeed.js
@@ -22,16 +22,16 @@ import { IconCloseOutline } from '~/styles/icons';
const useStyles = makeStyles((theme) => ({
newsItemContainer: {
- boxShadow: theme.custom.shadows.grayAround,
+ boxShadow: theme.custom.shadows.greyAround,
borderRadius: '5px',
- background: theme.custom.colors.whiteAlmost,
+ background: theme.custom.colors.white,
padding: '16px',
gap: '18px',
marginBottom: '12px',
cursor: 'pointer',
'&:hover': {
- background: theme.custom.colors.blackSqueeze,
+ background: theme.custom.colors.blue600,
},
},
newsItemHeader: {
@@ -42,15 +42,15 @@ const useStyles = makeStyles((theme) => ({
newsItemContentContainer: {
paddingTop: '16px',
},
- divider: { backgroundColor: theme.custom.colors.oldLavender },
+ divider: { backgroundColor: theme.custom.colors.purple200 },
content: {
paddingTop: '16px',
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
'& p:last-of-type': {
display: 'inline',
},
'& a': {
- color: theme.custom.colors.purple,
+ color: theme.custom.colors.pink100,
textDecoration: 'none',
},
},
@@ -68,19 +68,19 @@ const useStyles = makeStyles((theme) => ({
},
},
title: {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
display: 'block',
fontWeight: '500',
},
date: {
- color: theme.custom.colors.oldLavender,
+ color: theme.custom.colors.purple200,
fontSize: '12px',
},
cardContentCloseIcon: {
- color: theme.custom.colors.oldLavender,
+ color: theme.custom.colors.purple200,
'&:hover': {
- color: theme.custom.colors.mountbattenPink,
+ color: theme.custom.colors.purple300,
backgroundColor: 'transparent',
},
},
diff --git a/src/components/Notifications.js b/src/components/Notifications.js
index 55f3300c..45959213 100644
--- a/src/components/Notifications.js
+++ b/src/components/Notifications.js
@@ -55,14 +55,14 @@ const useStyles = makeStyles((theme) => ({
isSpecial: {
'& .MuiSvgIcon-root': {
'& path': {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
},
'&:hover': {
- background: theme.custom.colors.whiteAlmost,
+ background: theme.custom.colors.white,
'& .MuiSvgIcon-root': {
'& path': {
- fill: theme.custom.colors.oldLavender,
+ fill: theme.custom.colors.purple200,
},
},
},
diff --git a/src/components/Popover.js b/src/components/Popover.js
index 143d4720..a996245f 100644
--- a/src/components/Popover.js
+++ b/src/components/Popover.js
@@ -7,7 +7,7 @@ import React from 'react';
const useStyles = makeStyles((theme) => ({
popOverContainer: {
padding: '32px 32px 30px',
- background: theme.custom.colors.whiteAlmost,
+ background: theme.custom.colors.white,
borderRadius: '20px',
boxShadow: theme.custom.shadows.navigationFloating,
},
diff --git a/src/components/ProfileMini.js b/src/components/ProfileMini.js
index 8d4221f5..e5ca961c 100644
--- a/src/components/ProfileMini.js
+++ b/src/components/ProfileMini.js
@@ -32,10 +32,10 @@ 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,
},
},
},
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
borderRadius: '50%',
},
cardActionIcon: {
- color: theme.custom.colors.disco,
+ color: theme.custom.colors.pink50,
fontSize: 16,
'& path': {
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
},
mutualFriendsIcon: {
fontSize: '10px',
- color: theme.custom.colors.mountbattenPink,
+ color: theme.custom.colors.purple300,
position: 'relative',
top: '1px',
},
diff --git a/src/components/StepperHorizontal.js b/src/components/StepperHorizontal.js
index 27b754ab..26d48edc 100644
--- a/src/components/StepperHorizontal.js
+++ b/src/components/StepperHorizontal.js
@@ -15,8 +15,8 @@ import {
const useStyles = makeStyles((theme) => {
const colorTheme = (isOrganization) =>
isOrganization
- ? theme.custom.colors.violet
- : theme.custom.colors.fountainBlue;
+ ? theme.custom.colors.purple100
+ : theme.custom.colors.blue100;
return {
stepper: {
padding: '24px',
@@ -61,12 +61,12 @@ const useStyles = makeStyles((theme) => {
fontWeight: '500',
fontSize: '1.3rem',
borderRadius: '100%',
- border: `2px solid ${theme.custom.colors.grayDark}`,
+ border: `2px solid ${theme.custom.colors.grey400}`,
[theme.breakpoints.up('md')]: {
fontSize: '1.8rem',
},
'& .MuiStepIcon-text': {
- fill: theme.custom.colors.grayDark,
+ fill: theme.custom.colors.grey400,
},
'&.Mui-completed, &.Mui-active': {
@@ -82,7 +82,7 @@ const useStyles = makeStyles((theme) => {
'& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {
fontSize: fontSizeSmallest,
fontWeight: fontWeightRegular,
- color: theme.custom.colors.grayDark,
+ color: theme.custom.colors.grey400,
marginTop: '8px',
[theme.breakpoints.up('md')]: {
fontSize: fontSizeSmaller,
diff --git a/src/components/TabNavigation.js b/src/components/TabNavigation.js
index 3aa0fa51..fb0ec9cb 100644
--- a/src/components/TabNavigation.js
+++ b/src/components/TabNavigation.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
tabs: {
marginBottom: '43px',
'& .MuiTabs-indicator': {
- backgroundColor: theme.custom.colors.fountainBlue,
+ backgroundColor: theme.custom.colors.blue100,
height: '1px',
},
},
diff --git a/src/components/TabNavigationAction.js b/src/components/TabNavigationAction.js
index e3b9f88c..141bd02a 100644
--- a/src/components/TabNavigationAction.js
+++ b/src/components/TabNavigationAction.js
@@ -13,29 +13,29 @@ const useStyles = makeStyles((theme) => ({
position: 'relative',
fontWeight: theme.typography.fontWeightRegular,
fontSize: fontSizeSmaller,
- color: theme.custom.colors.lily,
+ color: theme.custom.colors.purple400,
borderBottom: '1px solid transparent',
'& g, & path': {
- fill: theme.custom.colors.lily,
+ fill: theme.custom.colors.purple400,
},
'&:hover': {
- borderBottom: `1px solid ${theme.custom.colors.oldLavender}`,
- color: theme.custom.colors.oldLavender,
+ borderBottom: `1px solid ${theme.custom.colors.purple200}`,
+ color: theme.custom.colors.purple200,
'& g, & path': {
- fill: theme.custom.colors.oldLavender,
+ fill: theme.custom.colors.purple200,
},
},
'&.Mui-selected': {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
'& g, & path': {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
'&:hover': {
'& .MuiTab-wrapper': {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
'& g, & path': {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
},
},
@@ -57,8 +57,8 @@ const useStyles = makeStyles((theme) => ({
},
itemsCounterContainer: {
position: 'absolute',
- background: theme.custom.colors.fountainBlue,
- color: theme.custom.colors.whiteAlmost,
+ background: theme.custom.colors.blue200,
+ color: theme.custom.colors.white,
top: '3px',
left: '48px',
borderRadius: '50%',
diff --git a/src/components/TransferInfoCard.js b/src/components/TransferInfoCard.js
index b6d56194..3f6254f7 100644
--- a/src/components/TransferInfoCard.js
+++ b/src/components/TransferInfoCard.js
@@ -17,7 +17,7 @@ import { fontSizeSmaller } from '~/styles/fonts';
const useStyles = makeStyles((theme) => ({
cardContainer: {
- boxShadow: theme.custom.shadows.gray,
+ boxShadow: theme.custom.shadows.grey,
},
cardHeader: {
padding: theme.spacing(1),
diff --git a/src/components/TransferInput.js b/src/components/TransferInput.js
index 9ea34aab..eab585c8 100644
--- a/src/components/TransferInput.js
+++ b/src/components/TransferInput.js
@@ -7,11 +7,11 @@ const useStyles = makeStyles((theme) => ({
input: {
padding: theme.spacing(2),
height: 66,
- boxShadow: theme.custom.shadows.grayUp,
- color: theme.custom.colors.violet,
+ boxShadow: theme.custom.shadows.greyUp,
+ color: theme.custom.colors.purple100,
'& .MuiSvgIcon-root': {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
},
inputLabel: {
@@ -20,11 +20,11 @@ const useStyles = makeStyles((theme) => ({
},
inputError: {
'&.Mui-error': {
- color: theme.custom.colors.disco,
+ color: theme.custom.colors.pink50,
},
},
inputAmountError: {
- color: theme.custom.colors.disco,
+ color: theme.custom.colors.pink50,
},
}));
diff --git a/src/components/TutorialOrganization.js b/src/components/TutorialOrganization.js
index fd7fa709..87d0d28b 100644
--- a/src/components/TutorialOrganization.js
+++ b/src/components/TutorialOrganization.js
@@ -14,7 +14,7 @@ import { IconBack, IconClose } from '~/styles/icons';
const useStyles = makeStyles((theme) => ({
wrapper: {
- background: theme.custom.gradients.violetTutorial,
+ background: theme.custom.gradients.violetCurved,
},
background: {
position: 'absolute',
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
},
btnContainer: {
'& svg': {
- color: theme.custom.colors.violet,
+ color: theme.custom.colors.purple100,
},
},
slideContainer: {
diff --git a/src/components/TutorialSteps.js b/src/components/TutorialSteps.js
deleted file mode 100644
index fd0e8ffe..00000000
--- a/src/components/TutorialSteps.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-
-import styles from '~/styles/variables';
-
-const TutorialSteps = (props) => {
- return (
-
-
-
- );
-};
-
-const TutorialStepsItems = (props) => {
- return new Array(props.total).fill(0).map((item, index) => {
- return (
-
- );
- });
-};
-
-TutorialSteps.propTypes = {
- current: PropTypes.number.isRequired,
- total: PropTypes.number.isRequired,
-};
-
-TutorialStepsItems.propTypes = {
- current: PropTypes.number.isRequired,
- total: PropTypes.number.isRequired,
-};
-
-const TutorialStepsStyle = styled.ul`
- display: flex;
-`;
-
-const TutorialStepsItemStyle = styled.li`
- width: 1rem;
- height: 1rem;
-
- margin: 0.5rem;
-
- border-radius: 50%;
-
- background-color: ${(props) => {
- return props.isCurrent
- ? styles.monochrome.black
- : styles.monochrome.grayLight;
- }};
-`;
-
-export default TutorialSteps;
diff --git a/src/components/UploadFromCamera.js b/src/components/UploadFromCamera.js
index c8eac661..5e17dc15 100644
--- a/src/components/UploadFromCamera.js
+++ b/src/components/UploadFromCamera.js
@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
margin: '0 auto',
},
loadingMask: {
- background: theme.custom.colors.cornflowerBlue,
+ background: theme.custom.colors.purple600,
opacity: 0.5,
position: 'relative',
},
diff --git a/src/components/ValidationStatus.js b/src/components/ValidationStatus.js
index 088e9c39..309abc74 100644
--- a/src/components/ValidationStatus.js
+++ b/src/components/ValidationStatus.js
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
stepAvatarChecked: {
background: theme.custom.gradients.turquoise,
border: 0,
- color: theme.palette.common.white,
+ color: theme.custom.colors.white,
},
}));
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 299a743c..24f7551b 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -22,22 +22,50 @@ import {
notoSansMedium,
} from '~/styles/fonts';
-const monochrome = {
- black: '#000',
- gray: '#ccc',
- grayDark: '#999',
- grayDarker: '#666',
- grayDarkest: '#333',
- grayLight: '#e6e6e6',
- grayLighter: '#f2f2f2',
- grayLightest: '#fafafa',
- grayLightHover: '#d9d9d9',
- whiteAlmost: '#fffcfe',
- white: '#fff',
+const foundation = {
+ //blue50: '#3A8E92',
+ blue100: '#48B2B7',
+ blue200: '#6CC1C5',
+ //blue300: '#8ED7DA',
+ //blue400: '#B6E0E2',
+ blue500: '#DAF0F1',
+ blue600: '#EDF7F8',
+ grey50: '#2F2B2E', // blackish,
+ grey100: '#585558',
+ //grey200: '#828082',
+ grey400: '#ACAAAC',
+ grey600: '#D9D9D9',
+ pink50: '#A31852',
+ pink100: '#CC1E66', //grad
+ pink200: '#D64B85',
+ pink300: '#E078A3',
+ //pink400: '#EBA5C2',
+ pink500: '#F5D2E1',
+ pink600: '#FAE9F0',
+ purple50: '#482645',
+ purple100: '#5A2F56', // grad
+ purple200: '#7B5978',
+ purple300: '#9C8299',
+ purple400: '#BDACBB',
+ purple500: '#DED5DD',
+ purple600: '#EFEAEF',
+ white: '#FFFCFE',
+ errorYellow: '#FFC834',
+ successGreen: '#05BF93',
};
+const gradientBase = {
+ pinkDark: '#660F33',
+ pinkHoverLight: '#853F5C',
+ purpleLightGrad: '#A75183',
+ springGreen: '#06FC9D',
+ green: '#45e6af',
+ turquoise: '#47cccb',
+};
+
+// should be cleaned up and use the grey palette
const rgba = {
- doveGray: 'rgb(107, 101, 101,0.5)',
+ doveGray: 'rgba(107, 101, 101, 0.5)',
dialogGray: 'rgba(0, 0, 0, 0.25)',
greyHover: 'rgba(222, 213, 221, 0.8)',
lightGrey: 'rgba(0, 0, 0, 0.04)',
@@ -45,73 +73,37 @@ const rgba = {
};
export const colors = {
- ...monochrome,
+ ...foundation,
+ ...gradientBase,
...rgba,
- red: '#cc0000',
- green: '#45e6af',
- blue: '#3ce6e1',
- orange: '#faad26',
- orangeDark: '#f14d48',
- purpleLight: '#f5dbda',
- purple: '#cc1e66',
- purpleDark: '#660f33',
- disco: '#A31852',
- turquoise: '#47cccb',
- turquoiseDark: '#369998',
- jaggedIce: '#C8E8EA',
- fountainBlue: '#48B2B7',
- fountainBlueLighter: '#6CC1C5',
- springGreen: '#06FC9D',
- pizazz: '#FF8E00',
- ceriseRed: '#D12D5F',
- pink: '#D22E60',
- blueRibbon: '#2B44FF',
- violet: '#5A2F56',
- tapestry: '#A75183',
- deepBlush: '#E078A3',
- greyHover: 'rgba(222, 213, 221, 0.8)',
- swansDown: '#DAF0F1',
- blackSqueeze: '#EDF7F8',
- wepeep: '#FAE9F0',
- lola: '#DED5DD',
- cornflowerBlue: '#efeaef80',
- lily: '#BDACBB',
- mineShaft: '#212121',
- oldLavender: '#7B5978',
- cannonPink: '#853F5C',
- cranberry: '#D64B85',
- lividBrown: '#482645',
- mountbattenPink: '#9C8299',
};
const gradients = {
- blueGreen: `linear-gradient(${colors.fountainBlue}, ${colors.springGreen}) padding-box, linear-gradient(to bottom, ${colors.fountainBlue}, ${colors.springGreen}) border-box`,
- gray: `linear-gradient(280deg, ${colors.grayDark} 0%, ${colors.gray} 100%)`,
- grayDark:
- 'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(284.04deg, rgba(0, 0, 0, 0.49) 0%, rgba(0, 0, 0, 0.12) 100%);',
- grayAlert: '1px 1px 4px rgba(204, 30, 102, 0.25)',
- purple: `linear-gradient(280deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
- purpleOpposite: `linear-gradient(104.04deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
- purpleHover: `linear-gradient(284.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
- purpleOppositeHover: `linear-gradient(104.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
- pinkToPurple: `linear-gradient(284.04deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
- lightPinkToPurple: `linear-gradient(284.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
- greenBlue: `linear-gradient(180deg, ${colors.fountainBlue} 0%, ${colors.springGreen} 100%)`,
- greenBlueHeader: `linear-gradient(207.4deg, ${colors.fountainBlue} 36.45%, ${colors.springGreen} 155.65%)`,
- pinkShade: `linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, ${colors.pink} 145%)`,
- violetCurved: `linear-gradient(180deg, ${colors.tapestry} 0%, ${colors.violet} 33.2%)`,
- violetHeader: `linear-gradient(207.4deg, ${colors.tapestry} 36.45%, ${colors.violet} 155.65%)`,
- violetTutorial: `linear-gradient(180deg, ${colors.tapestry} 0%, ${colors.violet} 100%)`,
+ // Grey
+ grey: `linear-gradient(280deg, ${colors.grey400} 0%, ${colors.grey600} 100%)`,
+ greyAlert: '1px 1px 4px rgba(204, 30, 102, 0.25)',
+ // Button gradients
+ pinkToPurple: `linear-gradient(284.04deg, ${colors.pinkDark} 0%, ${colors.pink100} 100%)`,
+ purpleToPink: `linear-gradient(104.04deg, ${colors.pinkDark} 0%, ${colors.pink100} 100%)`,
+ purpleToLightPink: `linear-gradient(104.04deg, ${colors.pinkHoverLight} 0%, ${colors.pink200} 100%)`,
+ lightPinkToPurple: `linear-gradient(284.04deg, ${colors.pinkHoverLight} 0%, ${colors.pink200} 100%)`,
+ // Headers
+ greenBlueCurved: `linear-gradient(180deg, ${colors.blue100} 0%, ${colors.springGreen} 50%)`,
+ greenBlueHeader: `linear-gradient(180deg, ${colors.blue100} 20%, ${colors.springGreen} 150%)`,
+ violetCurved: `linear-gradient(180deg, ${colors.purple100} 0%, ${colors.purpleLightGrad} 33.2%)`,
+ violetHeader: `linear-gradient(180deg, ${colors.purple100} 20%, ${colors.purpleLightGrad} 100%)`,
+ // Other
+ pinkShade: `linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, ${colors.pink100} 145%)`,
turquoise: `linear-gradient(0deg, ${colors.green} 0%, ${colors.turquoise} 100%)`,
};
const shadows = {
- gray: '0px 4px 4px rgba(0, 0, 0, 0.25)',
- grayUp: 'inset 0px 4px 4px rgba(0, 0, 0, 0.25)',
+ grey: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+ greyUp: 'inset 0px 4px 4px rgba(0, 0, 0, 0.25)',
navigationFloating: '0px 0px 4px rgba(45, 24, 43, 0.25)',
lightGray: '0px 0px 4px rgba(204, 30, 102, 0.1)', //special, warning, error, notifications
- grayBottomRight: ' 1px 1px 4px rgba(204, 30, 102, 0.25)', //success notification
- grayAround: '0px 0px 4px rgba(45, 24, 43, 0.25)',
+ greyBottomRight: ' 1px 1px 4px rgba(204, 30, 102, 0.25)', //success notification
+ greyAround: '0px 0px 4px rgba(45, 24, 43, 0.25)',
};
const fontFamily = `"${fontFamilyNotoSans}"`;
@@ -129,9 +121,9 @@ const body4Styles = {
fontWeight: fontWeightRegular,
fontSize: fontSizeSmall,
lineHeight: '19px',
- color: colors.violet,
+ color: colors.purple100,
'&.body4_white': {
- color: colors.whiteAlmost,
+ color: colors.white,
},
'&.body4_gradient_purple': {
background: gradients.lightPinkToPurple,
@@ -144,7 +136,7 @@ const body5Styles = {
fontWeight: fontWeightMediumBold,
fontSize: fontSizeSmall,
lineHeight: '19px',
- color: colors.violet,
+ color: colors.purple100,
};
export default createTheme({
@@ -160,21 +152,21 @@ export default createTheme({
},
palette: {
icons: {
- dark: colors.violet,
- light: colors.whiteAlmost,
- lightHover: colors.grayLightHover,
+ dark: colors.purple100,
+ light: colors.white,
+ lightHover: colors.grey600,
},
primary: {
- main: colors.purple,
- dark: colors.purpleDark,
- contrastText: colors.whiteAlmost,
+ main: colors.pink100,
+ dark: colors.pinkDark,
+ contrastText: colors.white,
},
secondary: {
main: colors.turquoise,
- dark: colors.turquoiseDark,
+ // dark: colors.blue50,
},
background: {
- default: colors.whiteAlmost,
+ default: colors.white,
},
},
typography: {
@@ -184,11 +176,11 @@ export default createTheme({
lineHeight: '25px',
fontSize: fontSizeLargest,
'&.h1_blue': {
- color: colors.fountainBlue,
+ color: colors.blue200,
fontWeight: fontWeightRegular,
},
'&.h1_violet': {
- color: colors.violet,
+ color: colors.purple100,
fontWeight: fontWeightRegular,
},
'&.MuiTypography-gutterBottom': {
@@ -199,37 +191,37 @@ export default createTheme({
fontWeight: fontWeightMedium,
fontSize: fontSizeLarger,
lineHeight: '160%',
- color: colors.violet,
+ color: colors.purple100,
},
h3: {
fontWeight: fontWeightRegular,
fontSize: fontSizeLarger,
lineHeight: '140%',
- color: colors.violet,
+ color: colors.purple100,
},
h4: {
fontWeight: fontWeightMedium,
fontSize: fontSizeLarge,
lineHeight: '22px',
- color: colors.violet,
+ color: colors.purple100,
'&.h4_link_white': {
lineHeight: '25px',
- color: colors.whiteAlmost,
+ color: colors.white,
},
},
h5: {
fontWeight: fontWeightMedium,
fontSize: fontSizeRegular,
lineHeight: '22px',
- color: colors.violet,
+ color: colors.purple100,
},
body1: {
fontSize: fontSizeRegular,
fontWeight: fontWeightRegular,
lineHeight: '140%',
- color: colors.violet,
+ color: colors.purple100,
'&.body1_white': {
- color: colors.whiteAlmost,
+ color: colors.white,
fontWeight: fontWeightMedium,
},
},
@@ -237,21 +229,21 @@ export default createTheme({
fontWeight: fontWeightBold,
fontSize: fontSizeRegular,
lineHeight: '120%',
- color: colors.violet,
+ color: colors.purple100,
},
body3: {
fontWeight: fontWeightMediumBold,
fontSize: fontSizeRegular,
lineHeight: '22px',
- color: colors.whiteAlmost,
+ color: colors.white,
'&.body3_link': {
textDecorationLine: 'underline',
'&:hover': {
- color: colors.mountbattenPink,
+ color: colors.purple300,
},
},
'&.body3_link_violet': {
- color: colors.violet,
+ color: colors.purple100,
},
'&.body3_link_gradient': {
lineHeight: '120%',
@@ -260,7 +252,7 @@ export default createTheme({
textFillColor: 'transparent',
textDecorationLine: 'none',
'&:hover': {
- background: gradients.purpleOppositeHover,
+ background: gradients.purpleToLightPink,
backgroundClip: 'text',
textFillColor: 'transparent',
},
@@ -276,7 +268,7 @@ export default createTheme({
backgroundClip: 'text',
textFillColor: 'transparent',
'&:hover': {
- background: gradients.purpleOppositeHover,
+ background: gradients.purpleToLightPink,
backgroundClip: 'text',
textFillColor: 'transparent',
},
@@ -286,33 +278,33 @@ export default createTheme({
fontWeight: fontWeightRegular,
fontSize: fontSizeSmaller,
lineHeight: '16px',
- color: colors.violet,
+ color: colors.purple100,
'&.body6_monochrome': {
- color: colors.violet,
+ color: colors.purple100,
opacity: 0.6,
},
'&.body6_pink': {
- color: colors.disco,
+ color: colors.pink50,
},
'&.body6_white': {
- color: colors.whiteAlmost,
+ color: colors.white,
fontWeight: fontWeightMedium,
},
'&.body6_grey': {
- color: colors.grayDarker,
+ color: colors.grey100,
},
},
body7: {
fontWeight: fontWeightRegular,
fontSize: fontSizeSmaller,
lineHeight: '140%',
- color: colors.violet,
+ color: colors.purple100,
},
body8: {
fontWeight: fontWeightRegular,
fontSize: fontSizeSmallest,
lineHeight: '14px',
- color: colors.oldLavender,
+ color: colors.purple200,
},
balance1: {
fontWeight: fontWeightRegular,
@@ -320,9 +312,9 @@ export default createTheme({
lineHeight: '65px',
background: gradients.violetCurved,
backgroundClip: 'text',
- textFillColor: 'transparent',
+ textFillColor: colors.purple100,
'& svg': {
- fill: colors.violet,
+ fill: colors.purple100,
},
'& a': {
textDecoration: 'none',
@@ -339,7 +331,7 @@ export default createTheme({
'& a': {
...body5Styles,
textDecoration: 'none',
- color: colors.purple,
+ color: colors.pink100,
},
},
components: {
diff --git a/src/views/Error.js b/src/views/Error.js
index e256e49a..74802632 100644
--- a/src/views/Error.js
+++ b/src/views/Error.js
@@ -39,9 +39,9 @@ const CriticalError = () => {
{app.errorMessage && (
({
height: '4px',
borderRadius: '50%',
left: 0,
- background: theme.custom.colors.black,
+ background: theme.custom.colors.grey50,
},
'&::marker': {
display: 'none',
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
},
CheckboxesContainer: {
'& a': {
- color: theme.custom.colors.blueRibbon,
+ color: theme.custom.colors.purple100,
},
},
dialogContentContainer: {
diff --git a/src/views/OnboardingOrganization.js b/src/views/OnboardingOrganization.js
index cc609121..73e85cb1 100644
--- a/src/views/OnboardingOrganization.js
+++ b/src/views/OnboardingOrganization.js
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
organizationStepPrefundContainer: moveUpFront(theme),
CheckboxesContainer: {
'& a': {
- color: theme.custom.colors.blueRibbon,
+ color: theme.custom.colors.purple100,
},
},
}));
diff --git a/src/views/OrganizationMembers.js b/src/views/OrganizationMembers.js
index 3a2f13bd..06b884d5 100644
--- a/src/views/OrganizationMembers.js
+++ b/src/views/OrganizationMembers.js
@@ -63,14 +63,14 @@ const useStyles = makeStyles((theme) => ({
position: 'fixed',
bottom: theme.spacing(2.25),
right: theme.spacing(2.25),
- background: theme.custom.gradients.purple,
+ background: theme.custom.gradients.pinkToPurple,
},
buttonActionTrustIcon: {
- color: theme.custom.colors.whiteAlmost,
+ color: theme.custom.colors.white,
position: 'relative',
},
paragraph: {
- color: theme.custom.colors.grayLightest,
+ color: theme.custom.colors.white,
},
}));
diff --git a/src/views/Profile.js b/src/views/Profile.js
index e51349a5..f82b0503 100644
--- a/src/views/Profile.js
+++ b/src/views/Profile.js
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({
},
iconActive: {
'& path': {
- fill: theme.custom.colors.violet,
+ fill: theme.custom.colors.purple100,
},
},
}));
diff --git a/src/views/Validation.js b/src/views/Validation.js
index 76b56100..d51055c7 100644
--- a/src/views/Validation.js
+++ b/src/views/Validation.js
@@ -149,9 +149,9 @@ const Validation = () => {