fix(dcellar-web-ui): fix some style issues

node-real · Aug 31, 2023 · b723c96 · b723c96
1 parent 45107b4
commit b723c96
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 43 deletions.
diff --git a/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx b/apps/dcellar-web-ui/src/components/common/DCSelect/index.tsx
@@ -167,6 +167,7 @@ export function DCSelect(props: DCSelectProps) {
                   position="relative"
                   px={24}
                   py={8}
+                  fontSize={14}
                   transitionDuration="normal"
                   transitionProperty="colors"
                   bg={isSelected ? rgba('#00BA34', 0.1) : undefined}

diff --git a/apps/dcellar-web-ui/src/components/layout/Header/PaymentAccounts.tsx b/apps/dcellar-web-ui/src/components/layout/Header/PaymentAccounts.tsx
@@ -26,7 +26,7 @@ export const PaymentAccounts = () => {
     address: loginAccount as any,
     chainId: GREENFIELD_CHAIN_ID,
     watch: true,
-    cacheTime: 5000,
+    cacheTime: 1000,
   });
   const metamaskValue = gnfdBalance?.formatted ?? '0';
   useAsyncEffect(async () => {

diff --git a/apps/dcellar-web-ui/src/components/layout/Header/index.tsx b/apps/dcellar-web-ui/src/components/layout/Header/index.tsx
@@ -150,6 +150,9 @@ export const Header = ({ taskManagement = true }: { taskManagement?: boolean })
               justifyContent={'center'}
               alignItems={'center'}
               cursor={'pointer'}
+              _hover={{
+                bgColor: '#f5f5f5'
+              }}
               onClick={() => {
                 router.push(InternalRoutePaths.transfer_in);
                 setShowPanel(false);
@@ -180,6 +183,9 @@ export const Header = ({ taskManagement = true }: { taskManagement?: boolean })
               justifyContent={'center'}
               alignItems={'center'}
               cursor={'pointer'}
+              _hover={{
+                bgColor: '#f5f5f5'
+              }}
               onClick={() => {
                 router.push(InternalRoutePaths.transfer_out);
                 setShowPanel(false);
@@ -210,6 +216,9 @@ export const Header = ({ taskManagement = true }: { taskManagement?: boolean })
               justifyContent={'center'}
               alignItems={'center'}
               cursor={'pointer'}
+              _hover={{
+                bgColor: '#f5f5f5'
+              }}
               onClick={() => {
                 router.push(InternalRoutePaths.send);
                 setShowPanel(false);

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx
@@ -56,7 +56,7 @@ export const AccountDetail = ({ loading, title, accountDetail, availableBalance
       ),
     },
     {
-      label: 'Available balance',
+      label: 'Balance',
       value: (
         <Flex marginBottom={8}>
           <LoadingAdaptor loading={loading} empty={false}>

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/PaymentAccountDetail.tsx
@@ -1,7 +1,12 @@
 import { DCButton } from '@/components/common/DCButton';
 import { DCDrawer } from '@/components/common/DCDrawer';
 import { useAppDispatch, useAppSelector } from '@/store';
-import { selectAccount, setEditDisablePaymentAccount, setEditPaymentDetail, setupAccountsInfo } from '@/store/slices/accounts';
+import {
+  selectAccount,
+  setEditDisablePaymentAccount,
+  setEditPaymentDetail,
+  setupAccountsInfo,
+} from '@/store/slices/accounts';
 import { Flex, QDrawerFooter } from '@totejs/uikit';
 import { useAsyncEffect, useInterval } from 'ahooks';
 import React, { useEffect } from 'react';
@@ -14,12 +19,11 @@ export const PaymentAccountDetail = () => {
   const dispatch = useAppDispatch();
   const [availableBalance, setAvailableBalance] = React.useState('0');
   const { loginAccount } = useAppSelector((state) => state.persist);
-  const { editPaymentDetail, isLoadingDetail } = useAppSelector(
-    (state) => state.accounts,
-  );
+  const { editPaymentDetail, isLoadingDetail } = useAppSelector((state) => state.accounts);
   const paymentAccount = useAppSelector(selectAccount(editPaymentDetail));
   const isOpen = !!editPaymentDetail;
   const router = useRouter();
+  const isNonRefundable = paymentAccount.refundable;
   const onClose = () => {
     dispatch(setEditPaymentDetail(''));
   };
@@ -67,34 +71,40 @@ export const PaymentAccountDetail = () => {
       />
       <QDrawerFooter>
         <Flex w={'100%'} gap={16}>
-          <DCButton
-            variant={'dcPrimary'}
-            flex={1}
-            gaClickName="dc.file.f_detail_pop.share.click"
-            onClick={() => onAction('withdraw')}
-          >
-            Withdraw
-          </DCButton>
-          <DCButton
-            variant={'dcGhost'}
-            flex={1}
-            borderColor='#e6e8ea'
-            gaClickName="dc.file.f_detail_pop.download.click"
-            onClick={() => onAction('deposit')}
-          >
-            Deposit
-          </DCButton>
-          <DCButton
-            variant={'dcGhost'}
-            width={'170px'}
-            paddingX={0}
-            mr={'16px'}
-            borderColor='#e6e8ea'
-            gaClickName="dc.file.f_detail_pop.share.click"
-            onClick={() => onAction('set_non-refundable')}
-          >
-            Set non-refundable
-          </DCButton>
+          {!isLoadingDetail && isNonRefundable && (
+            <DCButton
+              variant={'dcPrimary'}
+              flex={1}
+              gaClickName="dc.file.f_detail_pop.share.click"
+              onClick={() => onAction('withdraw')}
+            >
+              Withdraw
+            </DCButton>
+          )}
+          {!isLoadingDetail && (
+            <DCButton
+              variant={!isNonRefundable ? 'dcPrimary' : 'dcGhost'}
+              flex={1}
+              borderColor="#e6e8ea"
+              gaClickName="dc.file.f_detail_pop.download.click"
+              onClick={() => onAction('deposit')}
+            >
+              Deposit
+            </DCButton>
+          )}
+          {!isLoadingDetail && isNonRefundable && (
+            <DCButton
+              variant={'dcGhost'}
+              width={'170px'}
+              paddingX={0}
+              mr={'16px'}
+              borderColor="#e6e8ea"
+              gaClickName="dc.file.f_detail_pop.share.click"
+              onClick={() => onAction('set_non-refundable')}
+            >
+              Set non-refundable
+            </DCButton>
+          )}
         </Flex>
       </QDrawerFooter>
     </DCDrawer>

diff --git a/apps/dcellar-web-ui/src/modules/object/components/AccessItem.tsx b/apps/dcellar-web-ui/src/modules/object/components/AccessItem.tsx
@@ -19,14 +19,14 @@ const options = [
   {
     icon: <PrivateFileIcon fillColor="#1E2026" w={16} h={16} />,
     label: 'Private',
-    desc: 'Only people with access can open with the link.',
+    desc: 'Only peoples with permission can access the objects.',
     value: 2,
     bg: '#E6E8EA',
   },
   {
     icon: <PublicFileIcon fillColor="#1E2026" w={16} h={16} />,
     label: 'Public',
-    desc: 'Anyone with the link can open at anytime and can find in explorer.',
+    desc: 'Anyone with a shared link can access objects.',
     value: 1,
     bg: '#E7F3FD',
   },

diff --git a/apps/dcellar-web-ui/src/modules/upload/AccessItem.tsx b/apps/dcellar-web-ui/src/modules/upload/AccessItem.tsx
@@ -23,14 +23,14 @@ const options = [
     icon: <PrivateFileIcon fillColor="#1E2026" />,
     bgColor: '#E6E8EA',
     label: 'Private',
-    desc: 'Only people with access can open with share link.',
+    desc: 'Only peoples with permission can access the objects.',
     value: VisibilityType.VISIBILITY_TYPE_PRIVATE,
   },
   {
     icon: <PublicFileIcon fillColor="#1184EE" />,
     bgColor: '#E7F3FD',
     label: 'Public',
-    desc: 'Everyone with share link can open and can find in explorer.',
+    desc: 'Anyone with a shared link can access objects.',
     value: VisibilityType.VISIBILITY_TYPE_PUBLIC_READ,
   },
 ];

diff --git a/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx b/apps/dcellar-web-ui/src/modules/wallet/Send/index.tsx
@@ -262,7 +262,7 @@ export const Send = () => {
             textAlign={'right'}
             color="#76808F"
           >
-            Balance on: {isLoadingDetail === fromAccount.address ? <SmallLoading /> : renderFee(balance, exchangeRate + '' )}
+            Balance on Greenfield: {isLoadingDetail === fromAccount.address ? <SmallLoading /> : renderFee(balance, exchangeRate + '' )}
           </FormHelperText>
         </FormControl>
         <FormControl isInvalid={!isEmpty(toErrors)} marginY={24}>
@@ -290,7 +290,7 @@ export const Send = () => {
           <FormErrorMessage textAlign={'left'}>
             {toErrors && toErrors.map((error, index) => <Box key={index}>{error}</Box>)}
           </FormErrorMessage>
-          <FormHelperText textAlign={'right'} color="#76808F">
+          {/* <FormHelperText textAlign={'right'} color="#76808F">
             Balance on:{' '}
             {toAccount ? (
               toAccount.address && isLoadingDetail === toAccount.address ? (
@@ -302,7 +302,7 @@ export const Send = () => {
               renderFee(0, exchangeRate)
             )}{' '}
             BNB
-          </FormHelperText>
+          </FormHelperText> */}
         </FormControl>
         <Amount
           balance={balance}

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/FromAccountSelector.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/FromAccountSelector.tsx
@@ -80,11 +80,14 @@ export function FromAccountSelector(props: TAccountSelector) {
       alignItems={'center'}
       justifyContent={'center'}
       cursor={'pointer'}
+      _hover={{
+        bgColor: 'bg.bottom'
+      }}
       onClick={() => {
         router.push('/accounts');
       }}
     >
-      Manage Account
+      Manage Accounts
     </Flex>
   );
 

diff --git a/apps/dcellar-web-ui/src/modules/wallet/components/ToAccountSelector.tsx b/apps/dcellar-web-ui/src/modules/wallet/components/ToAccountSelector.tsx
@@ -87,11 +87,14 @@ export function ToAccountSelector({ onChange, to, disabled = false }: TProps) {
       alignItems={'center'}
       justifyContent={'center'}
       cursor={'pointer'}
+      _hover={{
+        bgColor: 'bg.bottom'
+      }}
       onClick={() => {
         router.push('/accounts');
       }}
     >
-      Manage Account
+      Manage Accounts
     </Flex>
   );