feat: add send to recipient switch, refine colors

lifinance · Jan 26, 2022 · d674546 · d674546
1 parent 7f9b3b6
commit d674546
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 31 deletions.
diff --git a/packages/widget/src/components/Header.tsx b/packages/widget/src/components/Header.tsx
@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 const HeaderAppBar = styled(AppBar)(({ theme }) => ({
-  backgroundColor: theme.palette.appBar.main,
+  backgroundColor: theme.palette.common.black,
 }));
 
 const HeaderToolbar = styled(Toolbar)({
@@ -30,7 +30,7 @@ export const WalletHeader: React.FC = () => {
         noWrap
         align="right"
         sx={{ flexGrow: 1 }}
-        color="appBarText.secondary"
+        color="grey.500"
       >
         {t(`swap.header.walletConnected`, { walletAddress: '0000000000' })}
       </Typography>

diff --git a/packages/widget/src/components/SwapChainButton.tsx b/packages/widget/src/components/SwapChainButton.tsx
@@ -3,12 +3,12 @@ import { buttonClasses } from '@mui/material/Button';
 import { alpha, styled } from '@mui/material/styles';
 
 export const SwapChainButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
+  backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[900],
   color: theme.palette.text.primary,
   borderRadius: '8px 8px 0 0',
   borderWidth: '2px 2px 1px 2px',
   borderStyle: 'solid',
-  borderColor: '#E3E7E9',
+  borderColor: theme.palette.grey[300],
   paddingRight: 14,
   textTransform: 'none',
   marginBottom: -1,
@@ -22,8 +22,8 @@ export const SwapChainButton = styled(Button)(({ theme }) => ({
     backgroundColor: `${alpha(theme.palette.primary.main, 0.02)}`,
   },
   '&:hover': {
-    backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
-    borderColor: '#E3E7E9',
+    backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[900],
+    borderColor: theme.palette.grey[300],
     borderWidth: '2px 2px 1px 2px',
     boxShadow: 'none',
   },

diff --git a/packages/widget/src/components/SwapForm.tsx b/packages/widget/src/components/SwapForm.tsx
@@ -1,14 +1,15 @@
-import { KeyboardArrowDown as KeyboardArrowDownIcon, SwapVert as SwapVertIcon } from '@mui/icons-material';
+import { HelpOutline as HelpOutlineIcon, KeyboardArrowDown as KeyboardArrowDownIcon, SwapVert as SwapVertIcon } from '@mui/icons-material';
 import { Box, FormControl, Typography } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapChainButton } from './SwapChainButton';
 import { SwapInput } from './SwapInput';
 import { SwapFromInputAdornment, SwapToInputAdornment } from './SwapInputAdornment';
+import { Switch } from './Switch';
 
 export const SwapForm: React.FC = () => {
-  const { register, reset, handleSubmit, getValues, formState: { isSubmitting } } = useFormContext();
   const { t } = useTranslation();
+  const { register, reset, handleSubmit, getValues, formState: { isSubmitting } } = useFormContext();
 
   return (
     <Box>
@@ -71,6 +72,23 @@ export const SwapForm: React.FC = () => {
           {/* <FormHelperText id="swap-to-helper-text">Text</FormHelperText> */}
         </FormControl>
       </Box>
+      <Box my={3} sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Box sx={{ display: 'flex' }}>
+          <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+          <Typography ml={2} variant="subtitle1" color="text.primary" sx={{ alignSelf: 'end' }}>
+            {t(`swap.form.sendToRecipient`)}
+          </Typography>
+        </Box>
+        <Switch />
+      </Box>
+      <Box my={3} sx={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Box sx={{ display: 'flex' }}>
+          <HelpOutlineIcon sx={{ color: 'grey.500' }} />
+          <Typography ml={2} variant="subtitle1" color="text.primary" sx={{ alignSelf: 'end' }}>
+            {t(`swap.form.routePriority`)}
+          </Typography>
+        </Box>
+      </Box>
     </Box>
   );
 };
diff --git a/packages/widget/src/components/SwapInput.tsx b/packages/widget/src/components/SwapInput.tsx
@@ -4,10 +4,10 @@ import { alpha, styled } from '@mui/material/styles';
 
 export const SwapInput = styled(InputBase)(({ theme }) => ({
   borderRadius: '0 0 8px 8px',
-  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#2b2b2b',
+  backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[900],
   borderWidth: '1px 2px 2px 2px',
   borderStyle: 'solid',
-  borderColor: '#E3E7E9',
+  borderColor: theme.palette.grey[300],
   paddingRight: '14px',
   transition: theme.transitions.create([
     'border-color',

diff --git a/packages/widget/src/components/SwapInputAdornment.tsx b/packages/widget/src/components/SwapInputAdornment.tsx
@@ -2,11 +2,12 @@ import { InputAdornment, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
-const SwapInputAdornment = styled(Typography)({
-  borderLeft: '1px solid #E3E7E9',
+const SwapInputAdornment = styled(Typography)(({ theme }) => ({
+  borderLeft: '1px solid',
+  borderColor: theme.palette.grey[300],
   paddingLeft: 8,
   marginLeft: 8,
-});
+}));
 
 const SwapMaxInputAdornment = styled(Typography)({
   textDecoration: 'underline',

diff --git a/packages/widget/src/components/Switch.tsx b/packages/widget/src/components/Switch.tsx
@@ -0,0 +1,50 @@
+import { Switch as MuiSwitch } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { switchClasses } from '@mui/material/Switch';
+
+export const Switch = styled(MuiSwitch)(({ theme }) => ({
+  width: 42,
+  height: 24,
+  padding: 0,
+  [`& .${switchClasses.switchBase}`]: {
+    padding: 0,
+    margin: 2,
+    transitionDuration: theme.transitions.duration.standard,
+    [`&.${switchClasses.checked}`]: {
+      transform: 'translateX(18px)',
+      color: theme.palette.common.white,
+      [`& + .${switchClasses.track}`]: {
+        backgroundColor: theme.palette.primary.main,
+        opacity: 1,
+        border: 0,
+      },
+      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+        opacity: 0.5,
+      },
+    },
+    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
+      color: theme.palette.primary.main,
+      border: '6px solid',
+      borderColor: theme.palette.common.white,
+    },
+    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
+      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+    },
+    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+    },
+  },
+  [`& .${switchClasses.thumb}`]: {
+    boxSizing: 'border-box',
+    width: 20,
+    height: 20,
+  },
+  [`& .${switchClasses.track}`]: {
+    borderRadius: 24 / 2,
+    backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[900],
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: theme.transitions.duration.standard,
+    }),
+  },
+}));
diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -10,7 +10,9 @@
       "to": "And receive to",
       "max": "Max",
       "maxAmount": "({{value, number(minimumFractionDigits: 2)}})",
-      "price": "\u2248 {{value, currency(currency: USD)}}"
+      "price": "\u2248 {{value, currency(currency: USD)}}",
+      "sendToRecipient": "Send to recipient",
+      "routePriority": "Route priority"
     },
     "button": "Swap"
   }

diff --git a/packages/widget/src/theme.ts b/packages/widget/src/theme.ts
@@ -1,16 +1,14 @@
 import { createTheme } from '@mui/material/styles';
 
 // https://mui.com/customization/palette/
-declare module '@mui/material/styles' {
-  interface Palette {
-    appBar: Palette['primary'];
-    appBarText: Palette['text'];
-  }
-  interface PaletteOptions {
-    appBar?: PaletteOptions['primary'];
-    appBarText?: PaletteOptions['text'];
-  }
-}
+// declare module '@mui/material/styles' {
+//   interface Palette {
+//     appBar: Palette['primary'];
+//   }
+//   interface PaletteOptions {
+//     appBar?: PaletteOptions['primary'];
+//   }
+// }
 
 export const theme = createTheme({
   palette: {
@@ -21,19 +19,21 @@ export const theme = createTheme({
     secondary: {
       main: '#F5B5FF',
     },
-    appBar: {
-      main: '#000',
-    },
-    appBarText: {
-      primary: '#fff',
-      secondary: '#A1A1A1',
-    },
     background: {
       default: '#FBFCFC',
     },
     text: {
       primary: '#000',
       secondary: '#52575b',
     },
+    grey: {
+      100: '#F4F5F6',
+      200: '#EFF1F2',
+      300: '#E3E7E9',
+      400: '#C6C9CD',
+      500: '#AEB3B7',
+      600: '#798086',
+      700: '#57595C',
+    },
   },
 });