[Redesign] Adding Dark theme colors and other styling fixes (wormhole…

…-foundation#2561) Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>
wormholelabs-xyz · Sep 11, 2024 · 6b8d602 · 6b8d602
1 parent 7f5a53f
commit 6b8d602
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 94 deletions.
diff --git a/wormhole-connect/src/components/v2/Button.tsx b/wormhole-connect/src/components/v2/Button.tsx
@@ -3,28 +3,24 @@ import { styled } from '@mui/material';
 import { default as MUIButton, ButtonProps } from '@mui/material/Button';
 
 const PrimaryButton = styled(MUIButton)<ButtonProps>(({ theme }) => ({
-  color: theme.palette.getContrastText('#C1BBF6'),
-  backgroundColor: '#C1BBF6',
-  '&:hover': {
-    backgroundColor: '#C1BBF6',
-  },
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+
   '&:disabled': {
-    backgroundColor: '#C1BBF6',
-    color: '#1F2935',
-    opacity: '40%',
+    backgroundColor: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    opacity: 0.4,
   },
 }));
 
 const ErrorButton = styled(MUIButton)<ButtonProps>(({ theme }) => ({
-  color: '#17171D',
-  backgroundColor: '#F16576',
-  '&:hover': {
-    backgroundColor: '#F16576',
-  },
+  backgroundColor: theme.palette.error.main,
+  color: theme.palette.error.contrastText,
+
   '&:disabled': {
-    backgroundColor: '#F16576',
-    color: '#17171D',
-    opacity: '40%',
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText,
+    opacity: 0.4,
   },
 }));
 

diff --git a/wormhole-connect/src/theme.ts b/wormhole-connect/src/theme.ts
@@ -2,11 +2,13 @@ import { createTheme } from '@mui/material/styles';
 import grey from '@mui/material/colors/grey';
 import green from '@mui/material/colors/green';
 import orange from '@mui/material/colors/orange';
+import purple from '@mui/material/colors/purple';
 import red from '@mui/material/colors/red';
 import { PaletteMode } from '@mui/material';
 import { OPACITY } from './utils/style';
 
 export type PaletteColor = {
+  25?: string;
   50: string;
   100: string;
   200: string;
@@ -17,10 +19,11 @@ export type PaletteColor = {
   700: string;
   800: string;
   900: string;
-  A100: string;
-  A200: string;
-  A400: string;
-  A700: string;
+  950?: string;
+  A100?: string;
+  A200?: string;
+  A400?: string;
+  A700?: string;
 };
 
 export type WormholeConnectPartialTheme = {
@@ -156,17 +159,50 @@ export const light: WormholeConnectTheme = {
 // wormhole styled theme
 export const dark: WormholeConnectTheme = {
   mode: 'dark',
-  primary: grey,
-  secondary: grey,
+  primary: {
+    25: '#FCFAFF',
+    50: '#F9F5FF',
+    100: '#F4EBFF',
+    200: '#E9D7FE',
+    300: '#D6BBFB',
+    400: '#B692F6',
+    500: '#9E77ED',
+    600: '#7F56D9',
+    700: '#6941C6',
+    800: '#53389E',
+    900: '#42307D',
+    950: '#2C1C5F',
+    A100: purple.A100,
+    A200: purple.A200,
+    A400: purple.A400,
+    A700: purple.A700,
+  },
+  secondary: {
+    25: '#FCFCFD',
+    50: '#F9FAFB',
+    100: '#F2F4F7',
+    200: '#E4E7EC',
+    300: '#D0D5DD',
+    400: '#98A2B3',
+    500: '#667085',
+    600: '#475467',
+    700: '#344054',
+    800: '#1D2939',
+    900: '#101828',
+    950: '#0C111D',
+    A100: grey.A100,
+    A200: grey.A200,
+    A400: grey.A400,
+    A700: grey.A700,
+  },
   divider: '#ffffff' + OPACITY[20],
   background: {
-    default: 'black',
+    default: '010101',
   },
   text: {
     primary: '#ffffff',
-    secondary: grey[500],
+    secondary: '#667085',
   },
-  error: red,
   info: {
     50: '#97a5b7',
     100: '#8293a9',
@@ -183,38 +219,59 @@ export const dark: WormholeConnectTheme = {
     A400: '#304C70',
     A700: '#304C70',
   },
-  // success: green,
+  error: {
+    25: '#FFFBFA',
+    50: '#FEF3F2',
+    100: '#FEE4E2',
+    200: '#FECDCA',
+    300: '#FDA29B',
+    400: '#F97066',
+    500: '#F04438',
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+    950: '#55160C',
+    A100: red.A100,
+    A200: red.A200,
+    A400: red.A400,
+    A700: red.A700,
+  },
   success: {
-    50: '#66d6cd',
-    100: '#4dcfc4',
-    200: '#33c8bc',
-    300: '#1ac1b4',
-    400: '#01BBAC',
-    500: '#00a89a',
-    600: '#009589',
-    700: '#008278',
-    800: '#007067',
-    900: '#005d56',
-    A100: '#00a89a',
-    A200: '#00a89a',
-    A400: '#00a89a',
-    A700: '#00a89a',
+    25: '#F6FEF9',
+    50: '#ECFDF3',
+    100: '#D1FADF',
+    200: '#A6F4C5',
+    300: '#6CE9A6',
+    400: '#32D583',
+    500: '#12B76A',
+    600: '#039855',
+    700: '#027A48',
+    800: '#05603A',
+    900: '#054F31',
+    950: '#053321',
+    A100: green.A100,
+    A200: green.A200,
+    A400: green.A400,
+    A700: green.A700,
   },
   warning: {
-    50: '#ffe3a4',
-    100: '#ffdd91',
-    200: '#ffd77f',
-    300: '#ffd26d',
-    400: '#ffcc5b',
-    500: '#FFC749',
-    600: '#e5b341',
-    700: '#cc9f3a',
-    800: '#b28b33',
-    900: '#99772b',
-    A100: '#FFC749',
-    A200: '#FFC749',
-    A400: '#FFC749',
-    A700: '#FFC749',
+    25: '#FFFCF5',
+    50: '#FFFAEB',
+    100: '#FEF0C7',
+    200: '#FEDF89',
+    300: '#FEC84B',
+    400: '#FDB022',
+    500: '#F79009',
+    600: '#DC6803',
+    700: '#B54708',
+    800: '#93370D',
+    900: '#7A2E0E',
+    950: '#4E1D09',
+    A100: orange.A100,
+    A200: orange.A200,
+    A400: orange.A400,
+    A700: orange.A700,
   },
   button: {
     primary: '#ffffff' + OPACITY[10],
@@ -240,11 +297,11 @@ export const dark: WormholeConnectTheme = {
     elevation: 'none',
   },
   modal: {
-    background: '#0F1024',
+    background: '#17171D',
   },
   font: {
     primary: '"Inter", sans-serif',
-    header: '"IBM Plex Mono", monospace',
+    header: '"Inter", sans-serif',
   },
   logo: '#ffffff',
 };

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/ChainList.tsx
@@ -34,9 +34,11 @@ const useStyles = makeStyles()((theme) => ({
   chainButton: {
     display: 'flex',
     flexDirection: 'column',
+    border: '1px solid transparent',
     borderRadius: 8,
     '&.Mui-selected': {
-      border: '1px solid #C1BBF6',
+      border: '1px solid',
+      borderColor: theme.palette.primary.main,
     },
   },
   chainItem: {

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/SearchInput.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/SearchableList/SearchInput.tsx
@@ -1,27 +1,24 @@
 import React from 'react';
-
 import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import { makeStyles } from 'tss-react/mui';
 
 import SearchIcon from 'icons/Search';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
   input: {
-    border: '1px solid #C1BBF6',
-    borderRadius: '100vh',
     '& fieldset': {
-      border: 'none',
+      borderRadius: '100vh',
     },
     '& input::placeholder': {
-      color: 'white',
+      color: theme.palette.text.primary,
       opacity: 0.2,
     },
   },
   icon: {
     height: 20,
     width: 20,
-    color: 'white',
+    color: theme.palette.text.primary,
     opacity: 0.2,
   },
 }));

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx
@@ -16,7 +16,7 @@ import type { Chain } from '@wormhole-foundation/sdk';
 import { getDisplayName, getExplorerUrl, getWrappedToken } from 'utils';
 import { getTokenBridgeWrappedTokenAddressSync } from 'utils/sdkv2';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
   tokenListItem: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -34,6 +34,8 @@ const useStyles = makeStyles()(() => ({
     marginLeft: 4,
     height: '10px',
     overflow: 'hidden',
+    color: theme.palette.text.primary,
+    opacity: 0.6,
   },
 }));
 

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx
@@ -32,6 +32,7 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%',
     cursor: 'pointer',
     maxWidth: '420px',
+    borderRadius: '8px',
   },
   cardContent: {
     display: 'flex',

diff --git a/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx b/wormhole-connect/src/views/v2/Bridge/ReviewTransaction/GasSlider.tsx
@@ -7,14 +7,13 @@ import { useTheme } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Collapse from '@mui/material/Collapse';
-import Slider, { SliderThumb } from '@mui/material/Slider';
+import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 import config from 'config';
-import TokenIcon from 'icons/TokenIcons';
 import { getDisplayName, calculateUSDPrice } from 'utils';
 import { RootState } from 'store';
 import { setToNativeToken } from 'store/relay';
@@ -51,7 +50,7 @@ type SliderProps = {
 const StyledSlider = styled(Slider, {
   shouldForwardProp: (prop) =>
     !['baseColor', 'railColor'].includes(prop.toString()),
-})<SliderProps>(({ baseColor, railColor }) => ({
+})<SliderProps>(({ baseColor, railColor, theme }) => ({
   color: baseColor,
   height: 8,
   '& .MuiSlider-rail': {
@@ -65,18 +64,18 @@ const StyledSlider = styled(Slider, {
   '& .MuiSlider-thumb': {
     height: 20,
     width: 20,
-    backgroundColor: '#C1BBF6',
+    backgroundColor: theme.palette.primary.main,
   },
 }));
 
-const StyledSwitch = styled(Switch)((props) => ({
+const StyledSwitch = styled(Switch)(({ theme }) => ({
   padding: '9px 12px',
   right: `-12px`, // reposition towards right to negate switch padding
   '& .MuiSwitch-switchBase.Mui-checked': {
-    color: '#C1BBF6',
+    color: theme.palette.primary.main,
   },
   '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-    backgroundColor: '#C1BBF6',
+    backgroundColor: theme.palette.primary.main,
   },
   '& .MuiSwitch-track': {
     height: '20px',
@@ -109,16 +108,6 @@ const GasSlider = (props: {
 
   const [debouncedPercentage] = useDebounce(percentage, 500);
 
-  const ThumbWithTokenIcon = (props: React.HTMLAttributes<unknown>) => {
-    const { children, ...other } = props;
-    return (
-      <SliderThumb {...other}>
-        {children}
-        <TokenIcon icon={nativeGasToken.icon} height={16} />
-      </SliderThumb>
-    );
-  };
-
   useEffect(() => {
     dispatch(setToNativeToken(debouncedPercentage / 100));
   }, [debouncedPercentage]);
@@ -187,11 +176,10 @@ const GasSlider = (props: {
             </Typography>
             <div>
               <StyledSlider
-                slots={{ thumb: ThumbWithTokenIcon }}
                 aria-label="Native gas conversion amount"
                 defaultValue={0}
                 value={percentage}
-                baseColor="#C1BBF6"
+                baseColor={theme.palette.primary.main}
                 railColor={theme.palette.background.default}
                 step={1}
                 min={0}

diff --git a/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx b/wormhole-connect/src/views/v2/Bridge/Routes/SingleRoute.tsx
@@ -372,9 +372,10 @@ const SingleRoute = (props: Props) => {
       <Card
         className={classes.card}
         sx={{
-          border: props.isSelected
-            ? '1px solid #C1BBF6'
-            : '1px solid transparent',
+          border: '1px solid',
+          borderColor: props.isSelected
+            ? theme.palette.primary.main
+            : 'transparent',
           cursor,
           opacity: 1,
         }}