fix: import account style on mobile (#8798)

* fix: import account style on mobile * fix: cross
shapeshift · Feb 11, 2025 · bc33710 · bc33710
1 parent 1b22db6
commit bc33710
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/components/ManageAccountsDrawer/components/DrawerContent.tsx b/src/components/ManageAccountsDrawer/components/DrawerContent.tsx
@@ -16,7 +16,7 @@ export const DrawerContentWrapper = ({
 }: DrawerContentWrapperProps) => {
   return (
     <>
-      <DrawerHeader>
+      <DrawerHeader pt='calc(env(safe-area-inset-top) + 1rem)'>
         {title && <RawText as='h3'>{title}</RawText>}
         {description && (
           <RawText color='text.subtle' fontSize='md'>
@@ -25,7 +25,7 @@ export const DrawerContentWrapper = ({
         )}
       </DrawerHeader>
       {body && <DrawerBody>{body}</DrawerBody>}
-      <DrawerFooter>{footer}</DrawerFooter>
+      <DrawerFooter pb='calc(env(safe-area-inset-bottom) + 1rem)'>{footer}</DrawerFooter>
     </>
   )
 }
diff --git a/src/components/ManageAccountsDrawer/components/DrawerWrapper.tsx b/src/components/ManageAccountsDrawer/components/DrawerWrapper.tsx
@@ -12,7 +12,7 @@ export const DrawerWrapper = ({ children, isOpen, onClose, variant }: DrawerWrap
     <Drawer isOpen={isOpen} size='lg' placement='right' onClose={onClose} variant={variant}>
       <DrawerOverlay zIndex='modal' />
       <DrawerContent>
-        <DrawerCloseButton />
+        <DrawerCloseButton top='calc(env(safe-area-inset-top) + 1rem)' />
         {children}
       </DrawerContent>
     </Drawer>

diff --git a/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx b/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx
@@ -120,11 +120,23 @@ const TableRow = forwardRef<TableRowProps, 'div'>(
       ))
     }, [asset, isAccountActive, otherAccountIds, ref])
 
+    const toggleSize = useMemo(
+      () => ({
+        base: 'md',
+        md: 'lg',
+      }),
+      [],
+    )
+
     return (
       <>
         <Tr opacity={isAccountActive ? '1' : '0.5'}>
           <Td>
-            <Switch size='lg' isChecked={isAccountActive} onChange={handleToggleIsAccountActive} />
+            <Switch
+              size={toggleSize}
+              isChecked={isAccountActive}
+              onChange={handleToggleIsAccountActive}
+            />
           </Td>
           <Td>
             <RawText color='text.subtle'>{accountNumber}</RawText>
@@ -397,6 +409,14 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => {
     })
   }, [accounts, asset, handleToggleAccountIds])
 
+  const tableSize = useMemo(
+    () => ({
+      base: 'sm',
+      md: 'md',
+    }),
+    [],
+  )
+
   if (!asset) {
     console.error(`No fee asset found for chainId: ${chainId}`)
     return null
@@ -430,7 +450,7 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => {
       body={
         <>
           <TableContainer mb={4}>
-            <Table variant='simple'>
+            <Table variant='simple' size={tableSize}>
               <Tbody>
                 {accountRows}
                 {(isFetching || isLoading || autoFetching) && (

diff --git a/src/components/ManageAccountsDrawer/components/SelectChain.tsx b/src/components/ManageAccountsDrawer/components/SelectChain.tsx
@@ -26,6 +26,11 @@ export type SelectChainProps = {
   onClose: () => void
 }
 
+const buttonsStackColumns = {
+  base: 2,
+  md: 3,
+}
+
 const ChainButton = ({
   chainId,
   onClick,
@@ -104,7 +109,7 @@ export const SelectChain = ({ onSelectChainId, onClose }: SelectChainProps) => {
           placeholder={translate('accountManagement.selectChain.searchChains')}
           inputGroupProps={inputGroupProps}
         />
-        <SimpleGrid columns={3} spacing={4}>
+        <SimpleGrid columns={buttonsStackColumns} spacing={4}>
           {chainButtons}
         </SimpleGrid>
       </Stack>