From ada179eea6449e768df6f724dcab40c3e7742c39 Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Tue, 19 Nov 2024 21:47:50 +1000
Subject: [PATCH 1/2] feat: Adjust style for PCS

---
 apps/canonical-bridge-ui/core/theme/dark.ts   |  3 ++
 apps/canonical-bridge-ui/core/theme/light.ts  |  3 ++
 .../src/core/components/StateModal/index.tsx  |  2 +-
 .../SelectModal/ChooseTokenModal.tsx          |  5 ++-
 .../SelectModal/components/BaseModal.tsx      |  2 +-
 .../SelectModal/components/ListItem.tsx       |  2 +-
 .../components/Button/TransferButton.tsx      | 35 +++++++++++--------
 .../components/NetWorkSection/index.tsx       | 12 +++++--
 .../transfer/components/ReceiveInfo/index.tsx |  7 +++-
 .../transfer/components/SendInput/index.tsx   |  8 +++--
 .../transfer/components/ToAccount/index.tsx   |  3 +-
 .../RouteInfo/RouteWrapper.tsx                |  4 ++-
 .../components/TransferOverview/index.tsx     |  2 +-
 13 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/apps/canonical-bridge-ui/core/theme/dark.ts b/apps/canonical-bridge-ui/core/theme/dark.ts
index f9e67ac8..80482627 100644
--- a/apps/canonical-bridge-ui/core/theme/dark.ts
+++ b/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',
diff --git a/apps/canonical-bridge-ui/core/theme/light.ts b/apps/canonical-bridge-ui/core/theme/light.ts
index 643a55bc..230fe43f 100644
--- a/apps/canonical-bridge-ui/core/theme/light.ts
+++ b/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',
diff --git a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx b/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
index 7fe16fd3..c5f7bd7e 100644
--- a/packages/canonical-bridge-widget/src/core/components/StateModal/index.tsx
+++ b/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
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
index 52022532..36bc19ac 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
+++ b/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}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
index 1c6f7eaa..d4881b65 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/BaseModal.tsx
+++ b/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`}
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
index 39c91479..1002115e 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/components/ListItem.tsx
+++ b/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"
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
index ca864e4d..50f5234a 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/Button/TransferButton.tsx
+++ b/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' })
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
index 18ce860a..c7869479 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/NetWorkSection/index.tsx
+++ b/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>
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
index cdb23c04..bef7a378 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ReceiveInfo/index.tsx
+++ b/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'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
index 53e54eed..68a33f26 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SendInput/index.tsx
+++ b/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'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
index a464f4f2..31c3defa 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/ToAccount/index.tsx
+++ b/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}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
index 4bff9fca..936f9253 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteWrapper.tsx
+++ b/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'}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
index 2a1f1c99..a091d90e 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/index.tsx
+++ b/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}

From aee98a56f8f5a5047b86f3d60eb51efe17c30d6f Mon Sep 17 00:00:00 2001
From: chris <leosameric@gmail.com>
Date: Tue, 19 Nov 2024 21:54:25 +1000
Subject: [PATCH 2/2] chore: Alpha release

---
 .release/.changeset/little-books-raise.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .release/.changeset/little-books-raise.md

diff --git a/.release/.changeset/little-books-raise.md b/.release/.changeset/little-books-raise.md
new file mode 100644
index 00000000..be19942e
--- /dev/null
+++ b/.release/.changeset/little-books-raise.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Adjust style class name