fix(components): fix as comment

alleslabs · May 23, 2023 · 181e7ae · 181e7ae
1 parent 1ec3ac1
commit 181e7ae
Show file tree

Hide file tree

Showing 123 changed files with 237 additions and 254 deletions.
diff --git a/src/lib/app-fns/tx/clearAdmin.tsx b/src/lib/app-fns/tx/clearAdmin.tsx
@@ -70,7 +70,7 @@ export const clearAdminTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

diff --git a/src/lib/app-fns/tx/common/catchTxError.tsx b/src/lib/app-fns/tx/common/catchTxError.tsx
@@ -52,7 +52,7 @@ export const catchTxError = (
           <CustomIcon
             name="alert-circle-solid"
             color="error.light"
-            boxSize="5"
+            boxSize={5}
           />
         ),
       },

diff --git a/src/lib/app-fns/tx/execute.tsx b/src/lib/app-fns/tx/execute.tsx
@@ -88,7 +88,7 @@ export const executeContractTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

diff --git a/src/lib/app-fns/tx/resend.tsx b/src/lib/app-fns/tx/resend.tsx
@@ -72,7 +72,7 @@ export const resendTx = ({
             <CustomIcon
               name="check-circle-solid"
               color="success.main"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

diff --git a/src/lib/app-fns/tx/submitProposal.tsx b/src/lib/app-fns/tx/submitProposal.tsx
@@ -90,7 +90,7 @@ export const submitProposalTx = ({
             <CustomIcon
               name="submit-proposal-solid"
               color="gray.600"
-              boxSize="5"
+              boxSize={5}
             />
           ),
         },

diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx
@@ -95,7 +95,7 @@ export const uploadContractTx = ({
             </>
           ),
           headerIcon: (
-            <CustomIcon name="upload-cloud" boxSize="5" color="gray.600" />
+            <CustomIcon name="upload-cloud" boxSize={5} color="gray.600" />
           ),
         },
         actionVariant: isMigrate ? "upload-migrate" : "upload",

diff --git a/src/lib/components/ButtonCard.tsx b/src/lib/components/ButtonCard.tsx
@@ -20,7 +20,7 @@ export const ButtonCard = ({
 }: ButtonCardProps) => (
   <Flex
     aria-disabled={disabled}
-    p="24px"
+    p={6}
     align="center"
     justify="space-between"
     onClick={!disabled ? onClick : undefined}

diff --git a/src/lib/components/ConnectWalletAlert.tsx b/src/lib/components/ConnectWalletAlert.tsx
@@ -38,10 +38,10 @@ export const ConnectWalletAlert = ({
       variant="accent"
       alignItems="center"
       justifyContent="space-between"
-      py="12px"
+      py={3}
     >
       <Flex gap={2}>
-        <CustomIcon name="wallet-solid" boxSize="4" />
+        <CustomIcon name="wallet-solid" boxSize={4} />
         <Box>
           <AlertTitle>{title}</AlertTitle>
           <AlertDescription>{subtitle}</AlertDescription>

diff --git a/src/lib/components/ContractCmdButton.tsx b/src/lib/components/ContractCmdButton.tsx
@@ -12,7 +12,6 @@ export const ContractCmdButton = ({
     variant="command-button"
     fontSize="12px"
     height="24px"
-    px="10px"
     borderRadius="16px"
     fontWeight={400}
     onClick={onClickCmd}

diff --git a/src/lib/components/ContractSelectSection.tsx b/src/lib/components/ContractSelectSection.tsx
@@ -197,7 +197,7 @@ export const ContractSelectSection = observer(
         mb={style.container}
         borderWidth="thin"
         borderColor="gray.800"
-        p="16px"
+        p={4}
         borderRadius="8px"
         fontSize="12px"
         justify="space-between"
@@ -235,7 +235,7 @@ export const ContractSelectSection = observer(
               label={contractState.label}
             />
           </Flex>
-          <Flex gap="8px" alignItems="center">
+          <Flex gap={2} alignItems="center">
             {mode === "all-lists" && contractState.isValid && (
               <ContractDetailsButton
                 contractAddress={contractAddress}

diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
@@ -34,7 +34,7 @@ export const CustomTab = ({ count, ...restProps }: CustomTabProps) => {
       {tabProps.children}
 
       {count !== undefined && (
-        <Badge variant={isSelected ? "primary" : "gray"} ml="6px">
+        <Badge variant={isSelected ? "primary" : "gray"} ml={2}>
           {count}
         </Badge>
       )}

diff --git a/src/lib/components/DotSeparator.tsx b/src/lib/components/DotSeparator.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
 
 export const DotSeparator = () => (
-  <Box bg="secondary.darker" borderRadius="50%" w="4px" h="4px" />
+  <Box bg="secondary.darker" borderRadius="50%" w={1} h={1} />
 );
diff --git a/src/lib/components/DotSeperator.tsx b/src/lib/components/DotSeperator.tsx
diff --git a/src/lib/components/ErrorMessageRender.tsx b/src/lib/components/ErrorMessageRender.tsx
@@ -12,7 +12,7 @@ export const ErrorMessageRender = ({
   ...restProps
 }: ErrorMessageRenderProps) => (
   <Flex gap={2} {...restProps}>
-    <CustomIcon name="alert-circle-solid" color="error.main" boxSize="3" />
+    <CustomIcon name="alert-circle-solid" color="error.main" boxSize={3} />
     <Text variant="body3" color="error.main">
       {error}
     </Text>

diff --git a/src/lib/components/Expedited.tsx b/src/lib/components/Expedited.tsx
@@ -23,8 +23,8 @@ export const Expedited = ({ isActiveExpedited }: ExpeditedProps) => (
     <Flex align="center">
       <CustomIcon
         name="expedited"
-        boxSize="4"
-        ml="0"
+        boxSize={4}
+        ml={0}
         color={isActiveExpedited ? "accent.main" : "gray.400"}
       />
       <Text

diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx
@@ -203,7 +203,7 @@ export const ExplorerLink = ({
             value={copyValue || value}
             copyLabel={copyValue ? `${getCopyLabel(type)} Copied!` : undefined}
             display={showCopyOnHover ? "none" : "block"}
-            ml="8px"
+            ml={2}
             amptrackSection={ampCopierSection}
           />
         </>

diff --git a/src/lib/components/InputWithIcon.tsx b/src/lib/components/InputWithIcon.tsx
@@ -29,7 +29,7 @@ const InputWithIcon = ({
       size={size}
       onClick={action ? () => AmpTrack(AmpEvent.USE_SEARCH_INPUT) : undefined}
     />
-    <InputRightElement h="56px" alignItems="center" mr="1">
+    <InputRightElement h="56px" alignItems="center" mr={1}>
       <CustomIcon name="search" color="gray.600" />
     </InputRightElement>
   </InputGroup>

diff --git a/src/lib/components/ListSelection.tsx b/src/lib/components/ListSelection.tsx
@@ -134,7 +134,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].map((option) => (
                   <Flex
                     display="inline-block"
@@ -149,7 +149,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       mr={1}
                     >
                       {option.label}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -195,8 +195,8 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
             <List
               borderRadius="8px"
               bg="gray.800"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"
@@ -222,7 +222,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                         mr={2}
                         name="check"
                         color="gray.600"
-                        boxSize="3"
+                        boxSize={3}
                       />
                     )}
                   </Flex>
@@ -241,7 +241,7 @@ export const ListSelection = forwardRef<HTMLInputElement, ListSelectionProps>(
                       onClick={() => setEnableOutside(false)}
                     >
                       <Flex alignItems="center" gap={2}>
-                        <CustomIcon name="plus" color="text.dark" boxSize="3" />
+                        <CustomIcon name="plus" color="text.dark" boxSize={3} />
                         <Text variant="body2">Create New List </Text>
                       </Flex>
                     </ListItem>

diff --git a/src/lib/components/Loading.tsx b/src/lib/components/Loading.tsx
@@ -5,12 +5,12 @@ export const Loading = () => (
     borderY="1px solid"
     borderColor="gray.700"
     width="full"
-    py="60px"
+    py={15}
     my={12}
     flexDirection="column"
     alignItems="center"
   >
     <Spinner size="xl" />
-    <Text mt="20px">Loading ...</Text>
+    <Text mt={5}>Loading ...</Text>
   </Flex>
 );
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
@@ -39,7 +39,7 @@ export const OffChainForm = <T extends OffchainDetail>({
   errors,
   labelBgColor = "background.main",
 }: OffChainFormProps<T>) => (
-  <VStack gap="16px" w="full">
+  <VStack gap={4} w="full">
     <ControllerInput
       name={"name" as FieldPath<T>}
       control={control}

diff --git a/src/lib/components/PageContainer.tsx b/src/lib/components/PageContainer.tsx
@@ -6,7 +6,7 @@ type PageContainerProps = {
 };
 
 const PageContainer = ({ children }: PageContainerProps) => (
-  <Box as="main" p="48px" overflowX="hidden" minH="inherit">
+  <Box as="main" p={12} overflowX="hidden" minH="inherit">
     {children}
   </Box>
 );

diff --git a/src/lib/components/PublicDescription.tsx b/src/lib/components/PublicDescription.tsx
@@ -39,7 +39,7 @@ export const PublicDescription = ({
     >
       <Flex align="center" gap={1} h="32px">
         {icon}
-        <Text variant="body2" fontWeight={500} color="text.dark" mt="1px">
+        <Text variant="body2" fontWeight={500} color="text.dark">
           {title}
         </Text>
       </Flex>

diff --git a/src/lib/components/TagSelection.tsx b/src/lib/components/TagSelection.tsx
@@ -145,7 +145,7 @@ export const TagSelection = observer(
               overflowX="scroll"
             >
               {result.length > 0 && (
-                <Flex alignItems="center" pl="2">
+                <Flex alignItems="center" pl={2}>
                   {result.map((option) => (
                     <Flex
                       display="inline-block"
@@ -154,7 +154,7 @@ export const TagSelection = observer(
                     >
                       <Tag gap={1} mr={1} cursor="pointer">
                         {option}
-                        <CustomIcon name="close" boxSize="3" />
+                        <CustomIcon name="close" boxSize={3} />
                       </Tag>
                     </Flex>
                   ))}
@@ -202,8 +202,8 @@ export const TagSelection = observer(
               <List
                 borderRadius="8px"
                 bg="gray.800"
-                px="2"
-                py="1"
+                px={2}
+                py={1}
                 mt={0}
                 position="absolute"
                 zIndex="2"
@@ -247,7 +247,7 @@ export const TagSelection = observer(
                           mr={2}
                           name="check"
                           color="gray.600"
-                          boxSize="3"
+                          boxSize={3}
                         />
                       )}
                     </Flex>

diff --git a/src/lib/components/TokenCard.tsx b/src/lib/components/TokenCard.tsx
@@ -63,15 +63,15 @@ export const TokenCard = ({
           >
             {symbol}
           </Text>
-          <Badge variant="gray" ml="6px">
+          <Badge variant="gray" ml={2}>
             {price ? formatPrice(price as USD<number>) : "N/A"}
           </Badge>
           <Copier
             type={price ? "supported_asset" : "unsupported_asset"}
             value={id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="1px"
+            ml={1}
             amptrackSection={amptrackSection}
           />
         </Flex>

diff --git a/src/lib/components/TxFilterSelection.tsx b/src/lib/components/TxFilterSelection.tsx
@@ -117,7 +117,7 @@ export const TxFilterSelection = forwardRef<
             overflowX="scroll"
           >
             {result.length > 0 && (
-              <Flex alignItems="center" pl="2">
+              <Flex alignItems="center" pl={2}>
                 {[...result].reverse().map((option) => (
                   <Flex
                     display="inline-block"
@@ -132,7 +132,7 @@ export const TxFilterSelection = forwardRef<
                       cursor="pointer"
                     >
                       {displayActionValue(option)}
-                      <CustomIcon name="close" boxSize="3" />
+                      <CustomIcon name="close" boxSize={3} />
                     </Tag>
                   </Flex>
                 ))}
@@ -179,8 +179,8 @@ export const TxFilterSelection = forwardRef<
             <List
               borderRadius="8px"
               bg="gray.900"
-              px="2"
-              py="1"
+              px={2}
+              py={1}
               mt={0}
               position="absolute"
               zIndex="2"

diff --git a/src/lib/components/ViewPermissionAddresses.tsx b/src/lib/components/ViewPermissionAddresses.tsx
@@ -50,7 +50,7 @@ export const ViewPermissionAddresses = ({
           rightIcon={
             <CustomIcon
               name={viewAll ? "chevron-up" : "chevron-down"}
-              boxSize="3"
+              boxSize={3}
             />
           }
         >

diff --git a/src/lib/components/WasmPageContainer.tsx b/src/lib/components/WasmPageContainer.tsx
@@ -15,7 +15,7 @@ const WasmPageContainer = ({
     align="center"
     width={width}
     mx="auto"
-    py="48px"
+    py={12}
     direction="column"
   >
     {children}

diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
@@ -68,15 +68,15 @@ export const SingleMsg = ({
           </Text>
           <Tooltip label={`Token ID: ${token.id}`} maxW="240px">
             <Flex cursor="pointer">
-              <CustomIcon name="info-circle" boxSize="3" color="gray.600" />
+              <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
             </Flex>
           </Tooltip>
           <Copier
             type={token.symbol ? "supported_asset" : "unsupported_asset"}
             value={token.id}
             copyLabel="Token ID Copied!"
             display="none"
-            ml="4px"
+            ml={1}
           />
         </Flex>
       ))}

diff --git a/src/lib/components/button/BackButton.tsx b/src/lib/components/button/BackButton.tsx
@@ -12,16 +12,16 @@ export const BackButton = (props: ButtonProps) => {
     <Button
       variant="ghost-secondary"
       size="sm"
-      mb="8px"
+      mb={2}
       p="unset"
-      pr="2"
+      pr={2}
       onClick={() => {
         AmpTrack(AmpEvent.USE_BACK_BUTTON);
         router.back();
       }}
       {...props}
     >
-      <CustomIcon name="chevron-left" boxSize="3" mr={2} />
+      <CustomIcon name="chevron-left" boxSize={3} mr={2} />
       BACK
     </Button>
   );