feat: add secondary color customization

lifinance · May 31, 2022 · 471cd93 · 471cd93
1 parent e390016
commit 471cd93
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx
@@ -73,6 +73,7 @@ const App = () => {
   const [borderRadius, setBorderRadius] = useState(12);
   const [borderRadiusSecondary, setBorderRadiusSecondary] = useState(6);
   const [primary, setPrimaryColor] = useState('#3F49E1');
+  const [secondary, setSecondaryColor] = useState('#F5B5FF');
   const [darkMode, setDarkMode] = useState(prefersDarkMode);
   const [systemColor, setSystemColor] = useState(true);
   const [theme, setTheme] = useState(() =>
@@ -82,6 +83,9 @@ const App = () => {
         primary: {
           main: '#3F49E1',
         },
+        secondary: {
+          main: '#F5B5FF',
+        },
         background: {
           default:
             (systemColor && prefersDarkMode) || darkMode ? '#000' : '#F4F5F6',
@@ -111,6 +115,9 @@ const App = () => {
           primary: {
             main: primary,
           },
+          secondary: {
+            main: secondary,
+          },
         },
         shape: {
           borderRadius,
@@ -129,6 +136,7 @@ const App = () => {
     fontFamily,
     prefersDarkMode,
     primary,
+    secondary,
     systemColor,
   ]);
 
@@ -140,6 +148,9 @@ const App = () => {
           primary: {
             main: primary,
           },
+          secondary: {
+            main: secondary,
+          },
           background: {
             default:
               (systemColor && prefersDarkMode) || darkMode ? '#000' : '#F4F5F6',
@@ -150,7 +161,7 @@ const App = () => {
     if (systemColor) {
       setDarkMode(systemColor && prefersDarkMode);
     }
-  }, [darkMode, prefersDarkMode, primary, systemColor]);
+  }, [darkMode, prefersDarkMode, primary, secondary, systemColor]);
 
   return (
     <ThemeProvider theme={theme}>
@@ -251,12 +262,26 @@ const App = () => {
                   size="small"
                   InputProps={{
                     sx: {
-                      width: 96,
+                      width: 128,
                     },
                   }}
                   onChange={(event) => setPrimaryColor(event.target.value)}
                 />
               </Box>
+              <Box px={1}>
+                <TextField
+                  value={secondary}
+                  label="Secondary Color"
+                  type="color"
+                  size="small"
+                  InputProps={{
+                    sx: {
+                      width: 128,
+                    },
+                  }}
+                  onChange={(event) => setSecondaryColor(event.target.value)}
+                />
+              </Box>
             </FormGroup>
           </FormControl>
         </Box>

diff --git a/packages/widget/package.json b/packages/widget/package.json
@@ -4,7 +4,12 @@
   "private": true,
   "sideEffects": false,
   "module": "src/index.ts",
-  "scripts": {},
+  "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test"
+  },
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

diff --git a/packages/widget/src/components/SwapInProgress/SwapInProgress.style.ts b/packages/widget/src/components/SwapInProgress/SwapInProgress.style.ts
@@ -1,10 +1,10 @@
 import { Avatar } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { CardContainer, CardHeader } from '../Card';
 
 export const Card = styled(CardContainer)(({ theme }) => ({
-  borderColor: theme.palette.mode === 'light' ? '#F7D4FF' : '#ee00ff47',
-  background: theme.palette.mode === 'light' ? '#FEF0FF' : '#ee00ff47',
+  borderColor: alpha(theme.palette.secondary.main, 0.48),
+  background: alpha(theme.palette.secondary.main, 0.2),
 }));
 
 export const RouteCard = styled(CardHeader)(({ theme }) => ({

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -50,7 +50,7 @@ const palette = {
   },
   secondary: {
     main: '#F5B5FF',
-    light: lighten('#F5B5FF', 0.2),
+    light: lighten('#F5B5FF', 0.5),
     dark: darken('#F5B5FF', 0.2),
   },
   success: {
@@ -82,6 +82,21 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
           0.2,
         ),
       },
+      secondary: {
+        main:
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+          palette.secondary.main,
+        light: lighten(
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+            palette.secondary.main,
+          0.5,
+        ),
+        dark: darken(
+          (theme.palette?.secondary as SimplePaletteColorOptions)?.main ??
+            palette.secondary.main,
+          0.2,
+        ),
+      },
       ...(mode === 'light'
         ? {
             text: {