Merge pull request #46 from bnb-chain/fix/meson

fix: Fix input error message style
bnb-chain · Oct 24, 2024 · 656c59a · 656c59a
2 parents 1eccdf2 + 7214478
commit 656c59a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/...onical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx b/...onical-bridge-widget/src/modules/transfer/components/SendInput/InputValidationMessage.tsx
@@ -1,4 +1,4 @@
-import { Box, useBreakpointValue, useColorMode, useTheme } from '@bnb-chain/space';
+import { Box, useColorMode, useTheme } from '@bnb-chain/space';
 import { useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
@@ -13,7 +13,6 @@ export const InputValidationMessage = () => {
   const { validateInput } = useInputValidation();
   const { chain } = useAccount();
   const dispatch = useAppDispatch();
-  const isBase = useBreakpointValue({ base: true, lg: false }) ?? false;
 
   const transferActionInfo = useAppSelector((state) => state.transfer.transferActionInfo);
   const theme = useTheme();
@@ -67,11 +66,10 @@ export const InputValidationMessage = () => {
   return error || balanceInputError ? (
     <Box
       color={theme.colors[colorMode].text.danger}
-      fontSize={'12px'}
+      fontSize={'14px'}
       fontWeight={400}
       lineHeight={'16px'}
-      position={isBase ? 'static' : 'absolute'}
-      top={`calc(100% + ${'8px'})`}
+      mt={'8px'}
     >
       {balanceInputError ?? error?.text}
     </Box>

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
@@ -1,5 +1,5 @@
 import { Box, Flex, Input, useColorMode, useDisclosure, useIntl, useTheme } from '@bnb-chain/space';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { useAppDispatch, useAppSelector } from '@/modules/store/StoreProvider';
 import { setSendValue } from '@/modules/transfer/action';
@@ -40,9 +40,11 @@ export const SendInput: React.FC = () => {
   const dispatch = useAppDispatch();
   const { formatMessage } = useIntl();
   const timerRef = useRef<any>();
+  const theme = useTheme();
+
+  const [isFocused, setIsFocused] = useState(false);
 
   const sendValue = useAppSelector((state) => state.transfer.sendValue);
-  const theme = useTheme();
   const selectedToken = useAppSelector((state) => state.transfer.selectedToken);
   const isGlobalFeeLoading = useAppSelector((state) => state.transfer.isGlobalFeeLoading);
   const fromChain = useAppSelector((state) => state.transfer.fromChain);
@@ -100,13 +102,38 @@ export const SendInput: React.FC = () => {
         p={'12px 16px'}
         h={'64px'}
         borderRadius={'8px'}
-        border={`1px solid ${
+        border={'1px solid'}
+        borderColor={`${
           !!error?.text
             ? theme.colors[colorMode].text.danger
+            : isFocused
+            ? theme.colors[colorMode].text.brand
             : theme.colors[colorMode].input.border.default
         }`}
+        boxShadow={
+          !!error?.text
+            ? `0 0 0 1px ${theme.colors[colorMode].text.danger}`
+            : isFocused
+            ? `0 0 0 1px ${theme.colors[colorMode].text.brand}`
+            : 'none'
+        }
         background={theme.colors[colorMode].input.background}
         position={'relative'}
+        _hover={{
+          outline: '1px solid',
+          outlineColor: !!error?.text
+            ? theme.colors[colorMode].text.danger
+            : isFocused
+            ? theme.colors[colorMode].text.brand
+            : theme.colors[colorMode].input.border.hover,
+          border: `1px solid ${
+            !!error?.text
+              ? theme.colors[colorMode].text.danger
+              : isFocused
+              ? theme.colors[colorMode].text.brand
+              : theme.colors[colorMode].input.border.hover
+          }`,
+        }}
       >
         <Input
           inputMode={'decimal'}
@@ -115,6 +142,12 @@ export const SendInput: React.FC = () => {
           fontSize={'24px'}
           onChange={onChangeSendValue}
           placeholder={'0.0'}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
           border={'none'}
           disabled={!selectedToken || (isGlobalFeeLoading && sendValue === debouncedSendValue)}
           _hover={{

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
@@ -3,7 +3,7 @@ import {
   Box,
   Input,
   useColorMode,
-  theme,
+  useTheme,
   FlexProps,
   useIntl,
   InputGroup,
@@ -25,6 +25,7 @@ export function ToAccount(props: FlexProps) {
   const { colorMode } = useColorMode();
   const { formatMessage } = useIntl();
   const dispatch = useAppDispatch();
+  const theme = useTheme();
 
   const [isChecked, setIsChecked] = useState(false);
 
@@ -86,24 +87,34 @@ export function ToAccount(props: FlexProps) {
       {...props}
     >
       <Box>{formatMessage({ id: 'to.section.account.label' })}</Box>
-      <InputGroup alignItems="center" mt={'12px'}>
+      <InputGroup
+        alignItems="center"
+        mt={'12px'}
+        _hover={{
+          outline: '2px solid',
+          outlineColor: theme.colors[colorMode].input.border.hover,
+          borderRadius: '8px',
+        }}
+      >
         <Input
           isInvalid={isInvalid}
+          background={theme.colors[colorMode].input.background}
+          borderColor={theme.colors[colorMode].input.border.default}
           size={'lg'}
           value={inputValue}
           placeholder={formatMessage(
             { id: 'to.section.account.placeholder' },
             { network: toChain?.name ?? '' },
           )}
-          bg="transparent"
           onChange={onChange}
           _active={{}}
           _focusVisible={{}}
           _hover={{
-            bg: 'transparent',
+            borderColor: isInvalid
+              ? theme.colors[colorMode].text.danger
+              : theme.colors[colorMode].input.border.hover,
           }}
           _focus={{
-            bg: 'transparent',
             boxShadow: `0 0 0 1px ${theme.colors[colorMode].text.brand}`,
             borderColor: theme.colors[colorMode].text.brand,
           }}
@@ -121,7 +132,7 @@ export function ToAccount(props: FlexProps) {
       </InputGroup>
 
       {isInvalid && (
-        <Flex mt={'8px'} color={theme.colors[colorMode].text.danger}>
+        <Flex mt={'8px'} fontSize={'14px'} color={theme.colors[colorMode].text.danger}>
           {formatMessage({ id: 'to.section.account.invalid' })}
         </Flex>
       )}