feat: Adjust style and class name

.release/.changeset/little-books-raise.md

@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Adjust style class name

apps/canonical-bridge-ui/core/theme/dark.ts

@@ -21,6 +21,9 @@ export const dark = {
     warning: '#FFEADB',
     danger: '#F8545F',
     route: { title: '#8C8F9B' },
+    network: {
+      title: '#8C8F9B',
+    },
     on: {
       color: {
         primary: '#181A1E',

apps/canonical-bridge-ui/core/theme/light.ts

@@ -21,6 +21,9 @@ export const light = {
     warning: '#BC4E00',
     danger: '#EF2A37',
     route: { title: '#5C5F6A' },
+    network: {
+      title: '#8C8F9B',
+    },
     on: {
       color: {
         primary: '#FFFFFF',

packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx

@@ -76,7 +76,7 @@ export function StateModal(props: StateModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered {...restProps}>
       <LightMode>
-        <ModalOverlay />
+        <ModalOverlay className={`${className}-overlay`} />
 
         <ModalContent className={className} borderRadius={'20px'} maxW={'435px'}>
           <ModalCloseButton

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx

@@ -90,7 +90,10 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
 
             return (
               <ListItem
-                className={`bccb-widget-token-list-item` + (isDisabled ? '-disabled' : '')}
+                className={
+                  `bccb-widget-token-list-item` +
+                  (isActive ? '-active' : isDisabled ? '-disabled' : '')
+                }
                 key={item.address}
                 iconUrl={item.icon}
                 isActive={isActive}

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx

@@ -70,7 +70,7 @@ export function BaseModal(props: BaseModalProps) {
             }}
           />
         </Flex>
-        <Flex flexDir="column" p="20px 0px 16px" flex={1}>
+        <Flex className={`${className}-body`} flexDir="column" p="20px 0px 16px" flex={1}>
           <Flex px={'20px'} mb={'20px'}>
             <SearchInput
               className={`${className}-search`}

packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx

@@ -34,7 +34,7 @@ export const ListItem = React.forwardRef((props: ListItemProps, ref: any) => {
   return (
     <Box className={`${className}-wrapper`} ref={ref} p="0 20px 4px">
       <Flex
-        className={`${className}` + isDisabled ? '-disabled' : ''}
+        className={className}
         borderRadius={'8px'}
         px={'11px'}
         py="7px"

packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx

@@ -440,9 +440,27 @@ export function TransferButton({
     signTransaction,
   ]);
 
+  const isDisabled =
+    isLoading ||
+    isGlobalFeeLoading ||
+    !sendValue ||
+    !Number(sendValue) ||
+    !transferActionInfo ||
+    !isTransferable ||
+    (isTronTransfer && (!isToAddressChecked || !toAccount?.address || !isTronAvailableToAccount)) ||
+    isTronContract === true ||
+    !!evmBytecode ||
+    (isSolanaTransfer &&
+      (!isToAddressChecked || !toAccount.address || !isSolanaAvailableToAccount));
+
   return (
-    <Flex className="bccb-widget-transfer-button" flexDir="column" w={'100%'}>
+    <Flex
+      className={`bccb-widget-transfer-button` + `${isDisabled ? ' disabled' : ''}`}
+      flexDir="column"
+      w={'100%'}
+    >
       <Button
+        className={isDisabled ? 'disabled' : ''}
         bg={theme.colors[colorMode].button.brand.default}
         size={'lg'}
         fontWeight={500}
@@ -453,20 +471,7 @@ export function TransferButton({
           _disabled: { bg: theme.colors[colorMode].button.disabled },
         }}
         onClick={sendTx}
-        isDisabled={
-          isLoading ||
-          isGlobalFeeLoading ||
-          !sendValue ||
-          !Number(sendValue) ||
-          !transferActionInfo ||
-          !isTransferable ||
-          (isTronTransfer &&
-            (!isToAddressChecked || !toAccount?.address || !isTronAvailableToAccount)) ||
-          isTronContract === true ||
-          !!evmBytecode ||
-          (isSolanaTransfer &&
-            (!isToAddressChecked || !toAccount.address || !isSolanaAvailableToAccount))
-        }
+        isDisabled={isDisabled}
       >
         {isApproveNeeded
           ? formatMessage({ id: 'transfer.button.approve' })

packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx

@@ -18,7 +18,11 @@ export const NetWorkSection = () => {
           justifyContent={'space-between'}
           flex={1}
         >
-          <Typography variant="label" size={'md'} color={theme.colors[colorMode].text.placeholder}>
+          <Typography
+            variant="label"
+            size={'md'}
+            color={theme.colors[colorMode].text.network.title}
+          >
             {formatMessage({ id: 'from.section.title' })}
           </Typography>
         </Flex>
@@ -30,7 +34,11 @@ export const NetWorkSection = () => {
           ml="48px"
           display={{ base: 'none', md: 'flex' }}
         >
-          <Typography variant="label" size={'md'} color={theme.colors[colorMode].text.placeholder}>
+          <Typography
+            variant="label"
+            size={'md'}
+            color={theme.colors[colorMode].text.network.title}
+          >
             {formatMessage({ id: 'to.section.title' })}
           </Typography>
         </Flex>

packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx

@@ -149,7 +149,12 @@ export const ReceiveInfo = ({ onOpen }: ReceiveInfoProps) => {
     <Box className="bccb-widget-received-info-container" mb={isHideSection ? '-24px' : 0}>
       <Collapse in={!isHideSection} animateOpacity>
         <Flex flexDir={'column'} gap={'8px'}>
-          <Flex flexDir={'row'} alignItems={'center'} justifyContent={'space-between'}>
+          <Flex
+            className="bccb-widget-received-info-title"
+            flexDir={'row'}
+            alignItems={'center'}
+            justifyContent={'space-between'}
+          >
             <Typography
               variant={'label'}
               size={'md'}

packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx

@@ -101,10 +101,10 @@ export const SendInput: React.FC = () => {
 
   return (
     <Flex className="bccb-widget-transfer-input-container" flexDir={'column'} position={'relative'}>
-      <Flex flexDir={'row'} justifyContent={'space-between'}>
+      <Flex className="bccb-widget-input-title" flexDir={'row'} justifyContent={'space-between'}>
         <Typography
           className="input-header-label"
-          color={theme.colors[colorMode].text.placeholder}
+          color={theme.colors[colorMode].text.network.title}
           variant={'label'}
           size={'md'}
         >
@@ -113,7 +113,9 @@ export const SendInput: React.FC = () => {
         <MaxLink />
       </Flex>
       <Flex
-        className="bccb-widget-transfer-input-wrapper"
+        className={`bccb-widget-transfer-input-wrapper ${
+          !!error?.text ? 'input-error' : isFocused ? 'input-focused' : ''
+        }`}
         flex={1}
         mt={'8px'}
         flexDir={'row'}

packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx

@@ -120,7 +120,7 @@ export function ToAccount(props: FlexProps) {
         {formatMessage({ id: 'to.section.account.label' })}
       </Box>
       <InputGroup
-        className="bccb-widget-to-account-input"
+        className={`bccb-widget-to-account-input ${isInvalid ? 'input-error' : ''}`}
         alignItems="center"
         mt={'12px'}
         _hover={{
@@ -130,6 +130,7 @@ export function ToAccount(props: FlexProps) {
         }}
       >
         <Input
+          className={`${isInvalid ? 'input-error' : ''}`}
           isInvalid={isInvalid}
           background={theme.colors[colorMode].input.background}
           borderColor={theme.colors[colorMode].input.border.default}

packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx

@@ -18,7 +18,9 @@ export const RouteWrapper = ({
 
   return (
     <Flex
-      className="bccb-widget-route-wrapper"
+      className={`bccb-widget-route-wrapper${isSelected ? '-selected' : ''} ${
+        isError ? 'route-error' : ''
+      }`}
       flex={1}
       flexDir={'column'}
       gap={'4px'}

packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx

@@ -138,7 +138,7 @@ export function TransferOverview({ routeContentBottom }: { routeContentBottom?:
         >
           {formatMessage({ id: 'route.title' })}
           {!options.length || isGlobalFeeLoading ? (
-            <SkeletonCircle w={'32px'} h={'32px'} />
+            <SkeletonCircle className="skeleton" w={'32px'} h={'32px'} />
           ) : !isBase ? (
             <RefreshingButton />
           ) : null}