style: update component themes and styles across widgets, enhancing U…

…I consistency with new background colors and improved button designs
DODOEX · Jan 10, 2025 · 624ee2c · 624ee2c
1 parent 0878704
commit 624ee2c
Show file tree

Hide file tree

Showing 36 changed files with 1,416 additions and 1,245 deletions.
diff --git a/packages/doc/package.json b/packages/doc/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@dodoex/components": "^3.0.1",
+    "@dodoex/components": "^3.0.1-beta.1",
     "@dodoex/widgets": "^3.0.1",
     "@emotion/styled": "^11.10.0",
     "@storybook/addon-docs": "^8.3.5",

diff --git a/packages/dodoex-components/package.json b/packages/dodoex-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/components",
-  "version": "3.0.1",
+  "version": "3.0.1-beta.1",
   "description": "UI component library",
   "source": "src/index.ts",
   "types": "dist/types/index.d.ts",

diff --git a/packages/dodoex-components/src/Button/Button.tsx b/packages/dodoex-components/src/Button/Button.tsx
@@ -112,18 +112,16 @@ const buttonStyles = (
     case Variant.outlined:
       result = {
         ...result,
-        border: `solid 1px ${
-          danger ? theme.palette.error.main : theme.palette.primary.main
-        }`,
-        color: danger ? 'error.main' : 'primary.main',
+        border: `solid 1px ${danger ? theme.palette.error.main : '#000'}`,
+        color: danger ? 'error.main' : '#000',
         '&[disabled]': {
           color: 'text.disabled',
           borderColor: 'border.disabled',
         },
         [hoverLabel]: {
           background: danger
             ? alpha(theme.palette.error.main, 0.1)
-            : alpha(theme.palette.primary.main, 0.1),
+            : 'background.paper',
         },
       };
       break;

diff --git a/packages/dodoex-components/src/Modal/WidgetModal.tsx b/packages/dodoex-components/src/Modal/WidgetModal.tsx
@@ -38,6 +38,7 @@ const StyledBackdrop = styled(Backdrop)`
   left: 0;
   background-color: ${({ theme }) => theme.palette.background.backdrop};
   -webkit-tap-highlight-color: transparent;
+  backdrop-filter: blur(5px);
 `;
 
 export const WIDGET_MODAL_CLASS = 'dodo-widget-modal';

diff --git a/packages/dodoex-components/src/Radio/index.tsx b/packages/dodoex-components/src/Radio/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, BoxProps } from '../Box';
+import { useTheme } from '../theme';
 
 type RadioProps = {
   sx?: BoxProps['sx'];
@@ -21,6 +22,7 @@ export const Radio = React.forwardRef(function Radio(
   }: RadioProps,
   ref,
 ) {
+  const theme = useTheme();
   const size = sizeProps ?? 20;
   const checkedIconSize = checkedIconSizeProps ?? size / 2 + 2;
   return (
@@ -35,9 +37,12 @@ export const Radio = React.forwardRef(function Radio(
         position: 'relative',
         borderRadius: '50%',
         border: '1px solid',
-        borderColor: other.checked ? 'primary.main' : 'text.secondary',
+        borderColor: other.checked ? '#34CA50' : 'text.secondary',
         cursor: 'pointer',
         ...sx,
+        [theme.breakpoints.up('tablet')]: {
+          borderColor: other.checked ? '#000' : 'text.secondary',
+        },
       }}
     >
       <Box
@@ -63,7 +68,10 @@ export const Radio = React.forwardRef(function Radio(
             width: checkedIconSize,
             height: checkedIconSize,
             borderRadius: '50%',
-            backgroundColor: 'primary.main',
+            backgroundColor: '#34CA50',
+            [theme.breakpoints.up('tablet')]: {
+              backgroundColor: '#000',
+            },
           }}
         />
       )}

diff --git a/packages/dodoex-components/src/theme/config.tsx b/packages/dodoex-components/src/theme/config.tsx
@@ -121,12 +121,12 @@ export const darkPalette: PaletteOptions = {
   },
   background: {
     default: '#252831',
-    paper: '#33363F',
+    paper: '#000',
     paperContrast: '#41454F',
     paperDarkContrast: alpha('#FFF', 0.1),
     backdrop: alpha('#000', 0.9),
     input: '#252831',
-    tag: alpha('#FFF', 0.04),
+    tag: alpha('#FFF', 0.2),
   },
   text: {
     primary: '#FFF',

diff --git a/packages/dodoex-widgets/package.json b/packages/dodoex-widgets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/widgets",
-  "version": "3.0.1",
+  "version": "3.0.2-neox.1",
   "description": "DODO Widgets",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.0",
     "@dodoex/api": "3.0.2",
-    "@dodoex/components": "^3.0.1",
+    "@dodoex/components": "^3.0.1-beta.1",
     "@dodoex/contract-request": "^1.3.0",
     "@dodoex/dodo-contract-request": "^1.8.0",
     "@dodoex/icons": "^2.0.2",

diff --git a/packages/dodoex-widgets/src/components/Swap/components/TokenCard/index.tsx b/packages/dodoex-widgets/src/components/Swap/components/TokenCard/index.tsx
@@ -335,6 +335,7 @@ export function TokenCard({
               ...(title
                 ? { backgroundColor: theme.palette.background.paper }
                 : {}),
+              ...inputSx,
             }}
           />
         ))}

diff --git a/packages/dodoex-widgets/src/components/TokenSelect.tsx b/packages/dodoex-widgets/src/components/TokenSelect.tsx
@@ -1,4 +1,4 @@
-import { Box, ButtonBase, useTheme } from '@dodoex/components';
+import { alpha, Box, ButtonBase, useTheme } from '@dodoex/components';
 import { TokenInfo } from '../hooks/Token/type';
 import { chainListMap } from '../constants/chainList';
 import { selectTokenBtn } from '../constants/testId';
@@ -24,7 +24,7 @@ export default function TokenSelect({
   notTokenPickerModal,
   border,
   px = 20,
-  py = 8,
+  py = 12,
   highlightDefault,
   onTokenClick,
   onTokenChange,
@@ -62,7 +62,7 @@ export default function TokenSelect({
           alignItems: 'center',
           justifyContent: 'space-between',
           gap: 8,
-          color: theme.palette.text.primary,
+          color: '#1A1A1B',
           typography: showChainName ? 'body2' : 'body1',
           fontWeight: 600,
           px,
@@ -71,15 +71,15 @@ export default function TokenSelect({
             opacity: 0.5,
           },
           ...(!!border && {
-            border: `solid 1px ${theme.palette.border.main}`,
-            borderRadius: 8,
+            borderRadius: 12,
+            backgroundColor: theme.palette.background.paper,
             '&:hover': {
-              backgroundColor: theme.palette.hover.default,
+              backgroundColor: alpha(theme.palette.background.paper, 0.8),
             },
           }),
           ...(!!(highlightDefault && !token) && {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastText,
+            backgroundColor: '#00D555',
+            color: '#000',
             '&:hover': {
               opacity: 0.8,
             },

diff --git a/packages/dodoex-widgets/src/components/WidgetDialog.tsx b/packages/dodoex-widgets/src/components/WidgetDialog.tsx
@@ -69,6 +69,7 @@ export default function WidgetDialog({
                 minHeight: 200,
                 maxHeight: '80%',
                 borderRadius: 16,
+                boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.15)',
               }),
         }}
         data-testid={testId}

diff --git a/packages/dodoex-widgets/src/locales/en-US.js b/packages/dodoex-widgets/src/locales/en-US.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -335,6 +335,7 @@ export function TokenCard({ @@
                   ...(title
                     ? { backgroundColor: theme.palette.background.paper }
                     : {}),
+                  ...inputSx,
                 }}
               />
             ))}
@@ Expand Down @@