update styles for progress circle, pagination, dialog and file upload

icons/wallets/metamask.svg

 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-  <path fill="#E2761B" d="M19.004 1 11.2 6.82l1.443-3.434L19.003 1Z"/>
-  <path fill="#E4761B" d="M.988 1 8.73 6.875 7.357 3.386.988 1Zm15.208 13.492-2.078 3.197 4.447 1.229 1.278-4.356-3.647-.07Zm-16.031.07 1.27 4.356 4.447-1.229-2.078-3.197-3.64.07Z"/>
-  <path fill="#E4761B" d="m5.631 9.088-1.239 1.883 4.416.197-.157-4.765-3.02 2.685Zm8.73 0-3.06-2.74-.101 4.82 4.408-.197-1.247-1.883ZM5.882 17.69l2.651-1.3-2.29-1.795-.36 3.095Zm5.577-1.3 2.659 1.3-.369-3.095-2.29 1.796Z"/>
-  <path fill="#D7C1B3" d="m14.118 17.69-2.66-1.3.213 1.74-.024.733 2.47-1.174Zm-8.236 0 2.47 1.173-.015-.733.196-1.74-2.65 1.3Z"/>
-  <path fill="#233447" d="M8.392 13.444 6.18 12.79l1.561-.716.651 1.37Zm3.208 0 .651-1.37 1.569.716-2.22.654Z"/>
-  <path fill="#CD6116" d="m5.882 17.69.377-3.199-2.455.071 2.078 3.127Zm7.86-3.199.376 3.198 2.078-3.127-2.455-.07Zm1.866-3.52-4.408.197.408 2.276.65-1.37 1.57.716 1.78-1.82ZM6.18 12.79l1.57-.717.642 1.37.416-2.276-4.416-.197 1.788 1.82Z"/>
-  <path fill="#E4751F" d="m4.392 10.97 1.851 3.624-.063-1.804-1.788-1.82Zm9.435 1.82-.078 1.804 1.859-3.623-1.78 1.82Zm-5.02-1.622-.415 2.276.518 2.686.117-3.537-.22-1.425Zm2.393 0-.212 1.418.094 3.544.526-2.686-.408-2.276Z"/>
-  <path fill="#F6851B" d="m11.608 13.444-.526 2.686.377.26 2.29-1.796.079-1.804-2.22.654ZM6.18 12.79l.063 1.804 2.29 1.796.377-.26-.518-2.686-2.212-.654Z"/>
-  <path fill="#C0AD9E" d="m11.647 18.863.024-.733-.196-.173H8.518l-.18.173.015.733-2.47-1.174.862.709 1.75 1.22h3.003l1.757-1.22.863-.709-2.471 1.174Z"/>
-  <path fill="#161616" d="m11.459 16.39-.377-.26H8.91l-.377.26-.196 1.74.18-.173h2.957l.197.173-.212-1.74Z"/>
-  <path fill="#763D16" d="M19.333 7.198 20 3.985 19.004 1l-7.545 5.623L14.36 9.09l4.102 1.205.91-1.064-.393-.283.628-.575-.486-.378.627-.48-.416-.316ZM0 3.985l.667 3.213-.424.315.628.48-.479.379.628.575-.393.283.902 1.064 4.102-1.205 2.902-2.466L.988 1 0 3.985Z"/>
-  <path fill="#F6851B" d="M18.463 10.294 14.36 9.089l1.247 1.882-1.859 3.623 2.447-.031h3.647l-1.38-4.27ZM5.63 9.089l-4.1 1.205-1.365 4.268h3.639l2.44.032-1.852-3.623 1.24-1.882Zm5.57 2.079.258-4.545 1.192-3.237H7.357l1.176 3.237.275 4.545.094 1.433.008 3.529h2.172l.016-3.529.102-1.433Z"/>
+  <g clip-path="url(#a)">
+    <path fill="#FF5C16" d="m17.763 17.7-3.864-1.15-2.914 1.742H8.952L6.037 16.55 2.175 17.7 1 13.736l1.175-4.402L1 5.613 2.175 1l6.034 3.605h3.519L17.763 1l1.175 4.612-1.175 3.721 1.175 4.402-1.175 3.966Z"/>
+    <path fill="#FF5C16" d="M2.176 1 8.21 4.608l-.24 2.476L2.176 1Zm3.862 12.737 2.655 2.022-2.655.791v-2.813Zm2.443-3.344-.51-3.307-3.267 2.249-.002-.001v.001l.01 2.315 1.325-1.257H8.48ZM17.763 1l-6.035 3.608.24 2.476L17.762 1ZM13.9 13.737l-2.656 2.022 2.656.791v-2.813Zm1.335-4.402v-.002l-.001.001-3.267-2.248-.51 3.307H13.9l1.325 1.257.01-2.315Z"/>
+    <path fill="#E34807" d="M6.037 16.55 2.175 17.7 1 13.737h5.037v2.814Zm2.443-6.159.738 4.781-1.023-2.658-3.485-.865 1.326-1.257H8.48Zm5.42 6.159 3.863 1.15 1.175-3.964H13.9v2.814Zm-2.442-6.159-.738 4.781 1.022-2.658 3.485-.865-1.326-1.257h-2.443Z"/>
+    <path fill="#FF8D5D" d="m1 13.735 1.175-4.402H4.7l.01 2.316 3.484.864 1.023 2.658-.526.586-2.655-2.023H1Zm17.938 0-1.175-4.402h-2.527l-.009 2.316-3.485.864-1.022 2.658.525.586 2.656-2.023h5.037Zm-7.21-9.13H8.209l-.238 2.476 1.247 8.088h1.502l1.248-8.088-.24-2.476Z"/>
+    <path fill="#661800" d="M2.175 1 1 5.612l1.175 3.721H4.7l3.27-2.249L2.175 1ZM7.75 11.352H6.605l-.623.61 2.214.55-.446-1.16ZM17.763 1l1.175 4.612-1.175 3.721h-2.527l-3.268-2.249L17.763 1Zm-5.574 10.352h1.147l.623.611-2.217.55.447-1.162Zm-1.205 5.363.261-.957-.525-.585H9.217l-.526.585.261.957"/>
+    <path fill="#C0C4CD" d="M10.984 16.714v1.579H8.952v-1.579h2.032Z"/>
+    <path fill="#E7EBF6" d="m6.038 16.548 2.916 1.744v-1.579l-.261-.956-2.655.791Zm7.863 0-2.917 1.744v-1.579l.262-.956 2.655.791Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M1 1h18v17.366H1z"/>
+    </clipPath>
+  </defs>
 </svg>

toolkit/theme/foundations/semanticTokens.ts

@@ -9,7 +9,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     button: {
       outline: {
         fg: {
-          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
+          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.600}' } },
         },
       },
       subtle: {
@@ -168,7 +168,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     },
     progressCircle: {
       trackColor: {
-        DEFAULT: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
+        DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.whiteAlpha.100}' } },
       },
     },
     skeleton: {

toolkit/theme/recipes/dialog.recipe.ts

@@ -61,6 +61,7 @@ export const recipe = defineSlotRecipe({
       display: 'flex',
       alignItems: 'center',
       columnGap: 2,
+      minH: '40px',
     },
     body: {
       flex: '1',
@@ -70,7 +71,7 @@ export const recipe = defineSlotRecipe({
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'flex-start',
-      gap: '3',
+      gap: '6',
       p: '0',
       mt: '6',
     },

toolkit/theme/recipes/progress-circle.recipe.ts

@@ -40,22 +40,31 @@ export const recipe = defineSlotRecipe({
     size: {
       sm: {
         circle: {
-          '--size': '16px',
+          '--size': '20px',
           '--thickness': '2px',
         },
         valueText: {
-          textStyle: '2xs',
+          textStyle: 'xs',
         },
       },
       md: {
         circle: {
-          '--size': '20px',
-          '--thickness': '2px',
+          '--size': '32px',
+          '--thickness': '3px',
         },
         valueText: {
           textStyle: 'xs',
         },
       },
+      lg: {
+        circle: {
+          '--size': '80px',
+          '--thickness': '8px',
+        },
+        valueText: {
+          textStyle: 'sm',
+        },
+      },
     },
   },
 

ui/addressVerification/steps/AddressVerificationStepSignature.tsx

@@ -219,7 +219,7 @@ const AddressVerificationStepSignature = ({ address, signingMessage, contractCre
         ) }
         <Flex rowGap={ 5 } flexDir="column">
           <div>
-            <CopyToClipboard text={ signingMessage } ml="auto" mb={ 2 }/>
+            <CopyToClipboard text={ signingMessage } ml="auto"/>
             <FormFieldText<Fields>
               name="message"
               placeholder="Message to sign"

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

-import { Text, Box, Flex } from '@chakra-ui/react';
+import { Text, Box, Flex, VStack } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, FieldPathValue, ValidateResult } from 'react-hook-form';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -55,12 +55,12 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
 
   const renderUploadButton = React.useCallback(() => {
     return (
-      <div>
-        <Text fontWeight={ 500 } color="text.secondary" mb={ 3 }>{ title }</Text>
+      <VStack gap={ 3 }>
+        <Text fontWeight={ 500 }>{ title }</Text>
         <Button size="sm" variant="outline">
           Drop file{ multiple ? 's' : '' } or click here
         </Button>
-      </div>
+      </VStack>
     );
   }, [ multiple, title ]);
 
@@ -116,7 +116,13 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
               rowGap={ 2 }
               w="100%"
             >
-              <DragAndDropArea onDrop={ onChange } fullFilePath={ fullFilePath } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
+              <DragAndDropArea
+                onDrop={ onChange }
+                fullFilePath={ fullFilePath }
+                p={{ base: 3, lg: 6 }}
+                isDisabled={ formState.isSubmitting }
+                isInvalid={ Boolean(error) }
+              >
                 { hasValue ? renderFiles(field.value) : renderUploadButton() }
               </DragAndDropArea>
             </Flex>
@@ -125,7 +131,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
         { errorElement }
       </>
     );
-  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton, fullFilePath ]);
+  }, [ fileTypes, multiple, commonError?.type, commonError?.message, fullFilePath, formState.isSubmitting, error, renderFiles, renderUploadButton ]);
 
   const validateFileType = React.useCallback(async(value: FieldPathValue<FormFields, typeof name>): Promise<ValidateResult> => {
     if (Array.isArray(value)) {

ui/pages/GasTracker.tsx

@@ -56,7 +56,6 @@ const GasTracker = () => {
               key={ dataUpdatedAt }
               startTime={ dataUpdatedAt }
               duration={ data.gas_prices_update_in }
-              size="md"
               ml={ 2 }
             />
           ) }

ui/shared/Hint.tsx

@@ -29,8 +29,10 @@ const Hint = ({ label, className, tooltipProps, isLoading, as }: Props) => {
         loadingSkeleton={ isLoading }
         borderRadius="sm"
         as={ as }
+        color="icon.info"
+        _hover={{ color: 'link.primary.hover' }}
       >
-        <IconSvg name="info" w="100%" h="100%" color="icon.info" _hover={{ color: 'link.primary.hover' }}/>
+        <IconSvg name="info" w="100%" h="100%"/>
       </IconButton>
     </Tooltip>
   );

ui/shared/forms/inputs/file/DragAndDropArea.tsx

@@ -9,10 +9,11 @@ interface Props {
   onDrop: (files: Array<File>) => void;
   className?: string;
   isDisabled?: boolean;
+  isInvalid?: boolean;
   fullFilePath?: boolean;
 }
 
-const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath }: Props) => {
+const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath, isInvalid }: Props) => {
   const [ isDragOver, setIsDragOver ] = React.useState(false);
 
   const handleDrop = React.useCallback(async(event: DragEvent<HTMLDivElement>) => {
@@ -50,23 +51,23 @@ const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath
     }
   }, [ isDisabled ]);
 
-  const disabledBorderColor = { _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' };
-  const borderColor = isDragOver ? 'link.primary.hover' : 'link.primary';
-
   return (
     <Center
       className={ className }
       w="100%"
       minH="120px"
       borderWidth="2px"
-      borderColor={ isDisabled ? disabledBorderColor : borderColor }
-      _hover={{
-        borderColor: isDisabled ? disabledBorderColor : 'link.primary.hover',
-      }}
       borderRadius="base"
       borderStyle="dashed"
+      borderColor={ isDragOver ? 'input.border.hover' : 'input.border' }
       cursor="pointer"
       textAlign="center"
+      { ...(isDisabled ? { 'data-disabled': true } : {}) }
+      { ...(isInvalid ? { 'data-invalid': true } : {}) }
+      color="input.placeholder"
+      _disabled={{ opacity: 'control.disabled' }}
+      _invalid={{ borderColor: 'input.border.error', color: 'input.placeholder.error' }}
+      _hover={{ borderColor: 'input.border.hover' }}
       onClick={ handleClick }
       onDrop={ handleDrop }
       onDragOver={ handleDragOver }

ui/shared/forms/inputs/file/FileSnippet.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { CloseButton } from 'toolkit/chakra/close-button';
-import { Tooltip } from 'toolkit/chakra/tooltip';
+import Hint from 'ui/shared/Hint';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -36,11 +36,6 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
     onRemove?.(index);
   }, [ index, onRemove ]);
 
-  const handleErrorHintIconClick = React.useCallback((event: React.MouseEvent) => {
-    event.stopPropagation();
-
-  }, []);
-
   const fileExtension = getFileExtension(file.name);
   const fileIcon = FILE_ICONS[fileExtension] || 'files/placeholder';
 
@@ -51,16 +46,12 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
       className={ className }
       alignItems="center"
       textAlign="left"
+      columnGap={ 2 }
     >
       <IconSvg
         name={ fileIcon }
-        boxSize="74px"
-        color={ error ? 'text.error' : { _light: 'gray.600', _dark: 'gray.400' } }
-        mr={ 2 }
-        borderWidth="2px"
-        borderRadius="md"
-        borderColor={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' }}
-        p={ 3 }
+        boxSize="48px"
+        color={ error ? 'text.error' : 'initial' }
       />
       <Box maxW="calc(100% - 58px - 24px)">
         <Flex alignItems="center">
@@ -73,25 +64,15 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
           >
             { file.name }
           </Text>
-          { Boolean(error) && (
-            <Tooltip
-              content={ error }
-              positioning={{ placement: 'top' }}
-            >
-              <Box cursor="pointer" display="inherit" onClick={ handleErrorHintIconClick } ml={ 1 }>
-                <IconSvg name="info" boxSize={ 5 } color="text.error"/>
-              </Box>
-            </Tooltip>
-          ) }
+          { Boolean(error) && <Hint label={ error } ml={ 1 } color="text.error"/> }
           <CloseButton
             aria-label="Remove"
-            ml="auto"
+            ml={ 2 }
             onClick={ handleRemove }
             disabled={ isDisabled }
-            alignSelf="flex-start"
           />
         </Flex>
-        <Text color="text.secondary" mt={ 1 }>
+        <Text color="text.secondary" textStyle="sm" mt={ 1 }>
           { file.size.toLocaleString(undefined, { notation: 'compact', maximumFractionDigits: 2, unit: 'byte', unitDisplay: 'narrow', style: 'unit' }) }
         </Text>
       </Box>

ui/shared/gas/GasInfoTooltip.tsx

@@ -42,9 +42,9 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, placement }: Props) =>
   const content = (
     <Flex flexDir="column" textStyle="xs" rowGap={ 3 }>
       { data.gas_price_updated_at && (
-        <Flex justifyContent="space-between">
+        <Flex justifyContent="space-between" alignItems="center">
           <Box color="text.secondary">Last update</Box>
-          <Flex color="text.secondary" justifyContent="flex-end" columnGap={ 2 } ml={ 3 }>
+          <Flex color="text.secondary" justifyContent="flex-end" alignItems="center" columnGap={ 2 } ml={ 3 }>
             { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
             { data.gas_prices_update_in !== 0 &&
               <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }

ui/shared/pagination/Pagination.tsx

@@ -26,7 +26,7 @@ const Pagination = (props: Props) => {
       alignItems="center"
       { ...rest }
     >
-      <Skeleton loading={ showSkeleton } mr={ 4 }>
+      <Skeleton loading={ showSkeleton } mr={ 3 }>
         <Button
           variant="outline"
           size="sm"
@@ -39,8 +39,7 @@ const Pagination = (props: Props) => {
       <IconButton
         aria-label="Prev page"
         variant="outline"
-        w={ 9 }
-        h={ 8 }
+        boxSize={ 8 }
         onClick={ onPrevPageClick }
         disabled={ !canGoBackwards || isLoading || page === 1 }
         loadingSkeleton={ showSkeleton }
@@ -53,11 +52,11 @@ const Pagination = (props: Props) => {
           alignItems="center"
           justifyContent="center"
           h={ 8 }
-          minW={ 9 }
+          minW={ 8 }
           px={ 2 }
-
+          fontWeight="semibold"
           bgColor={{ _light: 'blue.50', _dark: 'whiteAlpha.100' }}
-          color={{ _light: 'blackAlpha.800', _dark: 'gray.50' }}
+          color={{ _light: 'blue.700', _dark: 'gray.50' }}
           borderRadius="base"
           textStyle="sm"
         >
@@ -67,8 +66,7 @@ const Pagination = (props: Props) => {
       <IconButton
         aria-label="Next page"
         variant="outline"
-        w={ 9 }
-        h={ 8 }
+        boxSize={ 8 }
         onClick={ onNextPageClick }
         disabled={ !hasNextPage || isLoading }
         loadingSkeleton={ showSkeleton }

ui/showcases/Dialog.tsx

 /* eslint-disable max-len */
+import { noop } from 'es-toolkit';
 import React from 'react';
 
 import { Button } from 'toolkit/chakra/button';
@@ -30,14 +31,15 @@ const DialogShowcase = () => {
                   <p>{ CONTENT }</p>
                 </DialogBody>
                 <DialogFooter>
+                  <Button>Save</Button>
                   <DialogActionTrigger asChild>
-                    <Button variant="outline">Cancel</Button>
+                    <Button variant="link">I'll do it later</Button>
                   </DialogActionTrigger>
-                  <Button>Save</Button>
                 </DialogFooter>
               </DialogContent>
             </DialogRoot>
           </Sample>
+
           <Sample label="size: md">
             <DialogRoot size="md">
               <DialogTrigger asChild>
@@ -46,7 +48,7 @@ const DialogShowcase = () => {
                 </Button>
               </DialogTrigger>
               <DialogContent>
-                <DialogHeader>
+                <DialogHeader onBackToClick={ noop }>
                   <DialogTitle>Dialog Title</DialogTitle>
                 </DialogHeader>
                 <DialogBody>
@@ -61,6 +63,7 @@ const DialogShowcase = () => {
               </DialogContent>
             </DialogRoot>
           </Sample>
+
           <Sample label="size: full">
             <DialogRoot size="full">
               <DialogTrigger asChild>

ui/showcases/ProgressCircle.tsx

 import React from 'react';
 
-import { ProgressCircleRoot, ProgressCircleRing } from 'toolkit/chakra/progress-circle';
+import { ProgressCircleRoot, ProgressCircleRing, ProgressCircleValueText } from 'toolkit/chakra/progress-circle';
 
 import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
 
@@ -25,7 +25,7 @@ const ProgressCircleShowcase = () => {
       <Section>
         <SectionHeader>Size</SectionHeader>
         <SamplesStack >
-          { ([ 'sm', 'md' ] as const).map((size) => (
+          { ([ 'sm', 'md', 'lg' ] as const).map((size) => (
             <Sample key={ size } label={ `size: ${ size }` }>
               <ProgressCircleRoot
                 value={ 45 }
@@ -33,6 +33,7 @@ const ProgressCircleShowcase = () => {
                 size={ size }
               >
                 <ProgressCircleRing/>
+                { size === 'lg' && <ProgressCircleValueText/> }
               </ProgressCircleRoot>
             </Sample>
           )) }