From 6e9c26c0f26f20273704c6200355a5af0f20e824 Mon Sep 17 00:00:00 2001
From: devinxl <devin@nodereal.io>
Date: Sat, 7 Oct 2023 13:55:22 +0800
Subject: [PATCH] fix(dcellar-web-ui): fix some calculator style issues

---
 .../accounts/components/AccountDetail.tsx     |  2 +-
 .../components/PaymentAccountDetail.tsx       | 24 ++---
 .../components/Calculator.tsx                 |  3 +-
 .../components/CustomTime.tsx                 |  1 +
 .../components/SPFreeQuota.tsx                |  2 +-
 .../components/SizeMenu.tsx                   | 93 ++++++++++---------
 .../src/modules/wallet/Send/index.tsx         | 30 +++---
 7 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx
index 0cc66830..71112117 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx
@@ -53,7 +53,7 @@ export const AccountDetail = ({ loading, title, accountDetail, availableBalance
   };
   const detailItems = [
     {
-      label: 'Account Address',
+      label: 'Account address',
       value: (
         <Flex>
           <Text fontSize={'14px'} fontWeight={500}>
diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx
index 7c2f513f..05b7fad5 100644
--- a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx
+++ b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx
@@ -1,11 +1,7 @@
 import { DCButton } from '@/components/common/DCButton';
 import { DCDrawer } from '@/components/common/DCDrawer';
 import { useAppDispatch, useAppSelector } from '@/store';
-import {
-  selectAccount,
-  setEditPaymentDetail,
-  setupAccountDetail,
-} from '@/store/slices/accounts';
+import { selectAccount, setEditPaymentDetail, setupAccountDetail } from '@/store/slices/accounts';
 import { Flex, QDrawerFooter } from '@totejs/uikit';
 import { useAsyncEffect, useInterval } from 'ahooks';
 import React, { useEffect } from 'react';
@@ -71,25 +67,25 @@ export const PaymentAccountDetail = () => {
       />
       <QDrawerFooter>
         <Flex w={'100%'} gap={16}>
-          {!isLoadingDetail && isNonRefundable && !isFrozen && (
+          {!isLoadingDetail && (
             <DCButton
               variant={'dcPrimary'}
               flex={1}
-              gaClickName="dc.file.f_detail_pop.share.click"
-              onClick={() => onAction('withdraw')}
+              borderColor="#e6e8ea"
+              gaClickName="dc.file.f_detail_pop.download.click"
+              onClick={() => onAction('deposit')}
             >
-              Withdraw
+              Deposit
             </DCButton>
           )}
-          {!isLoadingDetail && (
+          {!isLoadingDetail && isNonRefundable && !isFrozen && (
             <DCButton
               variant={!isNonRefundable || isFrozen ? 'dcPrimary' : 'dcGhost'}
               flex={1}
-              borderColor="#e6e8ea"
-              gaClickName="dc.file.f_detail_pop.download.click"
-              onClick={() => onAction('deposit')}
+              gaClickName="dc.file.f_detail_pop.share.click"
+              onClick={() => onAction('withdraw')}
             >
-              Deposit
+              Withdraw
             </DCButton>
           )}
           {/* {!isLoadingDetail && isNonRefundable && (
diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/Calculator.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/Calculator.tsx
index 9ba475d4..010ea197 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/Calculator.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/Calculator.tsx
@@ -511,6 +511,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
               <>
                 {item.id !== 'custom' && (
                   <DCButton
+                    borderRadius={4}
                     key={item.title}
                     variant="ghost"
                     borderColor={item.id === storageTime.id ? 'readable.brand6' : 'readable.border'}
@@ -648,7 +649,7 @@ export const Calculator = ({ storeParams, bnbPrice, gasFee }: CalculatorProps) =
             fee={costs.totalGasCost}
             bnbPrice={bnbPrice}
           />
-          <Text>*1 month=30 day</Text>
+          <Text color={'readable.disabled'}>*1 month=30 day</Text>
         </Flex>
       </Flex>
     </PriceResponsiveContainer>
diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
index 68685624..04cab27a 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/CustomTime.tsx
@@ -65,6 +65,7 @@ export const CustomTime = ({
             onChangeButton();
             onToggle();
           }}
+          borderRadius={4}
           gaClickName={gaClickName}
           sx={{
             [smMedia]: {
diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SPFreeQuota.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SPFreeQuota.tsx
index 7ee72b75..93f9bb44 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SPFreeQuota.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SPFreeQuota.tsx
@@ -53,7 +53,7 @@ export const SPFreeQuota = ({ sps }: SPFreeQuotaProps) => (
             alignItems={'center'}
             color={'readable.normal'}
           >
-            <Text fontWeight={600} fontSize={13} display={'inline-block'}>
+            <Text fontWeight={600} fontSize={14} display={'inline-block'}>
               {item.name}
             </Text>
             <ExternalLinkIcon w={12} />
diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx
index 16290726..a41a9fbe 100644
--- a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx
+++ b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx
@@ -1,63 +1,64 @@
-
 import { smMedia } from '@/modules/responsive';
 import { MenuCloseIcon, MenuOpenIcon } from '@totejs/icons';
 import { Button, ButtonProps, Menu, MenuButton, MenuItem, MenuList } from '@totejs/uikit';
-import React from 'react'
+import React from 'react';
 
 type Props = {
   value: string;
   sizes: string[];
   onItemClick: (item: string) => void;
   buttonStyles?: ButtonProps;
-}
+};
 
-export const SizeMenu = ({value, sizes, onItemClick, buttonStyles = {}}: Props)=> {
+export const SizeMenu = ({ value, sizes, onItemClick, buttonStyles = {} }: Props) => {
   return (
     <Menu>
-    {({ isOpen }) => (
-      <>
-        <MenuButton
-          isActive={isOpen}
-          as={Button}
-          h={44}
-          w={80}
-          color={'readable.normal'}
-          bgColor={'bg.bottom'}
-          _hover={{
-            bg: 'bg.secondary',
-          }}
+      {({ isOpen }) => (
+        <>
+          <MenuButton
+            isActive={isOpen}
+            as={Button}
+            h={44}
+            w={80}
+            borderRadius={4}
+            color={'readable.normal'}
+            bgColor={'bg.bottom'}
+            _hover={{
+              bg: 'bg.secondary',
+            }}
             sx={{
               [smMedia]: {
                 w: '60px',
                 h: '33px',
-                fontSize: '14px'
+                fontSize: '14px',
+              },
+            }}
+            rightIcon={
+              isOpen ? (
+                <MenuOpenIcon pointerEvents={'none'} color="readable.normal" />
+              ) : (
+                <MenuCloseIcon pointerEvents={'none'} color="readable.normal" />
+              )
             }
-          }}
-          rightIcon={
-            isOpen ? (
-              <MenuOpenIcon pointerEvents={'none'} color="readable.normal" />
-            ) : (
-              <MenuCloseIcon pointerEvents={'none'} color="readable.normal" />
-            )
-          }
-          {...buttonStyles}
-        >
-          {value}
-        </MenuButton>
-        <MenuList>
-          {sizes.map((item) => (
-            <MenuItem
-              key={item}
-              onClick={() => {
-                onItemClick(item);
-              }}
-            >
-              {item}
-            </MenuItem>
-          ))}
-        </MenuList>
-      </>
-    )}
-  </Menu>
-  )
-}
+            {...buttonStyles}
+          >
+            {value}
+          </MenuButton>
+          <MenuList borderRadius={4}>
+            {sizes.map((item) => (
+              <MenuItem
+                w={80}
+                key={item}
+                onClick={() => {
+                  onItemClick(item);
+                }}
+              >
+                {item}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+};
diff --git a/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx b/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx
index 2fa14620..43c31f08 100644
--- a/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx
+++ b/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx
@@ -342,20 +342,22 @@ export const Send = () => {
             loading={loadingToAccount}
             onChange={(e) => onChangeToAccount(e)}
           />
-          <FormHelperText
-            display={'flex'}
-            alignItems={'center'}
-            justifyContent={'flex-end'}
-            textAlign={'right'}
-            color="#76808F"
-          >
-            Balance on Greenfield:{' '}
-            {loadingToAccount ? (
-              <Loading size={12} marginX={4} color="readable.normal" />
-            ) : (
-              renderFee(toBalance, exchangeRate + '')
-            )}
-          </FormHelperText>
+          {accountTypes[toAccount.address] !== 'gnfd_account' && (
+            <FormHelperText
+              display={'flex'}
+              alignItems={'center'}
+              justifyContent={'flex-end'}
+              textAlign={'right'}
+              color="#76808F"
+            >
+              Balance on Greenfield:{' '}
+              {loadingToAccount ? (
+                <Loading size={12} marginX={4} color="readable.normal" />
+              ) : (
+                renderFee(toBalance, exchangeRate + '')
+              )}
+            </FormHelperText>
+          )}
           <FormErrorMessage textAlign={'left'}>
             {toErrors && toErrors.map((error, index) => <Box key={index}>{error}</Box>)}
           </FormErrorMessage>