style: enhance component layouts and update theme colors across widge…

…ts and buttons for improved UI consistency
DODOEX · Jan 10, 2025 · 0878704 · 0878704
1 parent 5d2642d
commit 0878704
Show file tree

Hide file tree

Showing 28 changed files with 709 additions and 352 deletions.
diff --git a/packages/doc/.storybook/preview.tsx b/packages/doc/.storybook/preview.tsx
@@ -53,7 +53,7 @@ const preview = {
                 right: 0,
                 bottom: 0,
                 left: 0,
-                backgroundColor: 'background.default',
+                backgroundColor: 'transparent',
               }}
             />
             <Box

diff --git a/packages/doc/src/stories/widgets/Config.stories.tsx b/packages/doc/src/stories/widgets/Config.stories.tsx
@@ -7,7 +7,7 @@ import {
 } from '@dodoex/widgets';
 import { SwapWidgetApi } from '@dodoex/api';
 import React from 'react';
-import { Box } from '@dodoex/components';
+import { Box, useTheme } from '@dodoex/components';
 
 export default {
   title: 'Widgets/Config',
@@ -25,6 +25,8 @@ export const Primary = ({
   hasOrder: boolean;
   onlyChainId?: number;
 }) => {
+  const theme = useTheme();
+
   const [config, setConfig] = React.useState<SwapWidgetProps>({
     tokenList: [
       {
@@ -143,7 +145,10 @@ export const Primary = ({
           sx={{
             position: 'relative',
             overflowY: 'hidden',
-            width: 1230,
+            width: '100%',
+            [theme.breakpoints.up('desktop')]: {
+              width: 1230,
+            },
           }}
         >
           <Swap />

diff --git a/packages/doc/src/stories/widgets/Pool.stories.tsx b/packages/doc/src/stories/widgets/Pool.stories.tsx
@@ -129,4 +129,6 @@ Primary.args = {
   supportAMMV2: true,
   supportAMMV3: true,
   // onlyChainId: 1,
+  noUI: true,
+  noSubmissionDialog: true,
 };
diff --git a/packages/dodoex-components/src/Button/Button.tsx b/packages/dodoex-components/src/Button/Button.tsx
@@ -55,6 +55,7 @@ const buttonStyles = (
     typography: 'button',
     whiteSpace: 'nowrap',
     fontFamily: 'inherit',
+    fontWeight: 600,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -201,16 +202,14 @@ const buttonStyles = (
         },
         [hoverLabel]: {
           backgroundColor: '#123329',
-          color: alpha('#C9EB62', 0.5),
+          color: '#C9EB62',
         },
       };
       break;
     default:
       result = {
         ...result,
-        backgroundColor: danger
-          ? 'error.main'
-          : (backgroundColor ?? 'secondary.main'),
+        backgroundColor: danger ? 'error.main' : (backgroundColor ?? '#00D555'),
         [hoverLabel]: {
           background: `linear-gradient(0deg, rgba(26, 26, 27, 0.1), rgba(26, 26, 27, 0.1)), ${
             danger
@@ -219,7 +218,7 @@ const buttonStyles = (
                 sx?.backgroundColor || theme.palette.secondary.main
           }`,
         },
-        color: danger ? 'error.contrastText' : 'secondary.contrastText',
+        color: danger ? 'error.contrastText' : '#1B372F',
         '&[disabled]': {
           backgroundColor: 'border.disabled',
           color: 'text.disabled',

diff --git a/packages/dodoex-components/src/theme/CssBaseline.tsx b/packages/dodoex-components/src/theme/CssBaseline.tsx
@@ -25,7 +25,7 @@ export const basicTheme = (theme: ThemeOptions) => ({
 
 export const body = (theme: ThemeOptions) => ({
   ...basicTheme(theme),
-  backgroundColor: theme.palette?.background.default,
+  // backgroundColor: theme.palette?.background.default,
   '@media print': {
     // Save printer ink.
     backgroundColor: '#FFF',

diff --git a/packages/dodoex-components/src/theme/config.tsx b/packages/dodoex-components/src/theme/config.tsx
@@ -200,8 +200,8 @@ export const lightPalette: PaletteOptions = {
     default: alpha('#1A1A1B', 0.2),
   },
   tabActive: {
-    main: 'rgba(52, 202, 80, 0.10)',
-    contrastText: '#34CA50',
+    main: '#C9EB62',
+    contrastText: '#000',
   },
 };
 

diff --git a/packages/dodoex-widgets/src/components/LoadMore.tsx b/packages/dodoex-widgets/src/components/LoadMore.tsx
@@ -31,9 +31,6 @@ export default function LoadMore({
         alignItems: 'center',
         height,
         width: '100%',
-        borderStyle: 'solid',
-        borderColor: 'border.main',
-        borderWidth: theme.spacing(1, 0, 0, 0),
         typography: 'body2',
         color: 'text.secondary',
         '&:hover': {

diff --git a/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/SameOrderCard.tsx b/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/SameOrderCard.tsx
@@ -1,19 +1,15 @@
-import React from 'react';
 import { Box, useTheme } from '@dodoex/components';
-import { MobileRoutingVision, PCRoutingVision } from './RoutingVision';
+import { ArrowTopRightBorder } from '@dodoex/icons';
+import { Trans } from '@lingui/macro';
+import React from 'react';
+import { useSubmissionStatusColor } from '../../../hooks/Submission/useSubmissionStatusColor';
 import { useTradeSwapOrderList } from '../../../hooks/Swap/useTradeSwapOrderList';
 import { useRouteVisionData } from '../../../hooks/useRouteVisionData';
-import { useSubmissionStatusColor } from '../../../hooks/Submission/useSubmissionStatusColor';
-import { getTimeText } from '../../../utils/time';
-import FoldBtn, {
-  ChainName,
-  StatusAndTime,
-  TokenAndAmount,
-} from '../../CardWidgets';
-import { Trans } from '@lingui/macro';
-import { ArrowTopRightBorder } from '@dodoex/icons';
 import { getEtherscanPage } from '../../../utils';
+import { getTimeText } from '../../../utils/time';
+import FoldBtn, { StatusAndTime, TokenAndAmount } from '../../CardWidgets';
 import { PriceWithToggle } from './PriceWithToggle';
+import { MobileRoutingVision, PCRoutingVision } from './RoutingVision';
 
 function Extend({
   showFold,
@@ -38,9 +34,12 @@ function Extend({
         gap: 24,
         p: showFold ? 16 : 0,
         backgroundColor: 'background.paperContrast',
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
         maxHeight: showFold ? 400 : 0,
         transition: 'all 300ms',
         overflow: 'hidden',
+        mb: showFold ? 6 : 0,
       }}
     >
       <Box
@@ -86,14 +85,13 @@ export default function SameOrderCard({
     });
   const [showFold, setShowFold] = React.useState(false);
   const time = getTimeText(new Date(data.createdAt));
-  const theme = useTheme();
   if (isMobile)
     return (
       <Box
         sx={{
-          '&:not(:first-child)': {
-            borderTop: `1px solid ${theme.palette.border.main}`,
-          },
+          backgroundColor: 'background.paper',
+          my: 12,
+          borderRadius: 12,
         }}
       >
         <Box
@@ -160,7 +158,6 @@ export default function SameOrderCard({
                 mt: 8,
               }}
             >
-              <ChainName chainId={data.fromToken.chainId} />
               <StatusAndTime
                 isMobile={false}
                 statusText={statusText}
@@ -177,14 +174,26 @@ export default function SameOrderCard({
         <Extend showFold={showFold} data={data} isMobile />
       </Box>
     );
+
+  const mt = 6;
+  const mb = showFold ? 0 : 6;
   return (
     <>
-      <tr>
+      <Box component="tr" sx={{}}>
         <td>
           <TokenAndAmount
             token={data.fromToken}
             amount={data.fromAmount ?? ''}
             showChain
+            sx={{
+              mt,
+              mb,
+              py: 20,
+              px: 24,
+              borderTopLeftRadius: 12,
+              borderBottomLeftRadius: showFold ? 0 : 12,
+              backgroundColor: 'background.paper',
+            }}
           />
         </td>
         <td>
@@ -193,6 +202,13 @@ export default function SameOrderCard({
             amount={data.toAmount ?? ''}
             showChain
             canAddMetamask
+            sx={{
+              mt,
+              mb,
+              py: 20,
+              px: 24,
+              backgroundColor: 'background.paper',
+            }}
           />
         </td>
         <td>
@@ -202,22 +218,52 @@ export default function SameOrderCard({
             statusColor={statusColor}
             alphaColor={statusAlphaColor}
             time={time}
+            sx={{
+              mt,
+              mb,
+              py: 20,
+              px: 24,
+              backgroundColor: 'background.paper',
+            }}
           />
         </td>
         <td>
-          <PriceWithToggle
-            fromToken={data.fromToken}
-            toToken={data.toToken}
-            fromTokenPrice={data.fromTokenPrice}
-            toTokenPrice={data.toTokenPrice}
-          />
+          <Box
+            sx={{
+              mt,
+              mb,
+              py: 20,
+              px: 24,
+              backgroundColor: 'background.paper',
+              minHeight: 84,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+            }}
+          >
+            <PriceWithToggle
+              fromToken={data.fromToken}
+              toToken={data.toToken}
+              fromTokenPrice={data.fromTokenPrice}
+              toTokenPrice={data.toTokenPrice}
+            />
+          </Box>
         </td>
         <td>
           <Box
             sx={{
               display: 'flex',
               alignItems: 'center',
+              justifyContent: 'flex-start',
               gap: 8,
+              mt,
+              mb,
+              py: 20,
+              px: 24,
+              backgroundColor: 'background.paper',
+              minHeight: 84,
+              borderTopRightRadius: 12,
+              borderBottomRightRadius: showFold ? 0 : 12,
             }}
           >
             <Box
@@ -226,8 +272,7 @@ export default function SameOrderCard({
               target="_blank"
               rel="noopener noreferrer"
               sx={{
-                px: 10,
-                py: 12,
+                pr: 10,
                 color: 'primary.main',
               }}
             >
@@ -252,7 +297,7 @@ export default function SameOrderCard({
             />
           </Box>
         </td>
-      </tr>
+      </Box>
       <tr>
         <Box
           component="td"

diff --git a/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/index.tsx b/packages/dodoex-widgets/src/components/Swap/SwapOrderHistory/index.tsx
@@ -1,6 +1,6 @@
 import { ChainId } from '@dodoex/api';
-import { Box, BoxProps, useTheme } from '@dodoex/components';
-import { t, Trans } from '@lingui/macro';
+import { Box, useTheme } from '@dodoex/components';
+import { Trans } from '@lingui/macro';
 import { useWeb3React } from '@web3-react/core';
 import React from 'react';
 import { useWidgetDevice } from '../../../hooks/style/useWidgetDevice';
@@ -19,31 +19,32 @@ export default function SwapOrderHistory({
 }) {
   const theme = useTheme();
   const { onlyChainId } = useUserOptions();
-  const { isMobile } = useWidgetDevice();
+  const { isDesktop } = useWidgetDevice();
   const { account } = useWeb3React();
-  const [filterChainId, setFilterChainId] =
-    React.useState<ChainId | undefined>();
+  const [filterChainId, setFilterChainId] = React.useState<
+    ChainId | undefined
+  >();
   const swapOrderListQueryLocal = useTradeSwapOrderList({
     account: swapOrderListQueryProps ? undefined : account,
     chainId: onlyChainId ?? filterChainId,
-    limit: isMobile ? 10 : 5,
+    limit: isDesktop ? 5 : 10,
   });
   const swapOrderListQuery = swapOrderListQueryProps ?? swapOrderListQueryLocal;
 
   return (
     <CardStatus
-      isMobile={isMobile}
+      isMobile={!isDesktop}
       empty={!swapOrderListQuery.orderList.length}
       loading={swapOrderListQuery.isLoading}
     >
-      {isMobile ? (
+      {!isDesktop ? (
         <Box
           sx={{
-            px: 16,
+            px: 0,
           }}
         >
           {swapOrderListQuery.orderList.map((item) => (
-            <SameOrderCard key={item.hash} data={item} isMobile={isMobile} />
+            <SameOrderCard key={item.hash} data={item} isMobile={!isDesktop} />
           ))}
           <LoadMore
             loading={swapOrderListQuery.isFetchingNextPage}
@@ -119,7 +120,7 @@ export default function SwapOrderHistory({
                 <SameOrderCard
                   key={item.hash}
                   data={item}
-                  isMobile={isMobile}
+                  isMobile={!isDesktop}
                 />
               ))}
             </tbody>