fix: improve display of select account in extension mode, leather-io#…

…4165
Nithishvb · Oct 13, 2023 · f09aec3 · f09aec3
1 parent f166a31
commit f09aec3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/src/app/components/drawer/controlled-drawer.tsx b/src/app/components/drawer/controlled-drawer.tsx
@@ -17,6 +17,9 @@ export function ControlledDrawer(props: ControlledDrawerProps) {
 
   return (
     <BaseDrawer
+      height="100vh"
+      position={['absolute', 'fixed']}
+      top={['-24px', 0]}
       enableGoBack={enableGoBack}
       icon={icon}
       isShowing={isShowing}

diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx
@@ -7,8 +7,16 @@ interface CreateAccountActionProps {
 }
 export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProps) {
   return (
-    <Flex py="space.05" px="space.05" flexGrow="1" position="fixed" bottom={0} width="100%">
-      <LeatherButton fullWidth onClick={() => onCreateAccount()}>
+    <Flex
+      mt="100px"
+      py="space.05"
+      px="space.05"
+      flexGrow="1"
+      position="fixed"
+      bottom={0}
+      width="100%"
+    >
+      <LeatherButton data-testId="create-account" fullWidth onClick={() => onCreateAccount()}>
         Create new account
       </LeatherButton>
     </Flex>

diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Box } from '@stacks/ui';
+import { Box } from 'leather-styles/jsx';
 
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
@@ -21,7 +21,7 @@ export const SwitchAccountList = memo(
         style={{ paddingTop: '24px', height: '70vh' }}
         totalCount={accounts.length}
         itemContent={index => (
-          <Box mx={['base-loose', 'extra-loose']} key={accounts[index].address ?? index}>
+          <Box mx={['space.05', 'space.06']} key={accounts[index].address ?? index}>
             <SwitchAccountListItem handleClose={handleClose} account={accounts[index]} />
           </Box>
         )}

diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
@@ -33,7 +33,11 @@ export const SwitchAccountDrawer = memo(() => {
 
   return isShowing && accounts ? (
     <ControlledDrawer title="Select account" isShowing={isShowing} onClose={onClose}>
-      <Box mb={whenWallet({ ledger: 'base', software: '' })}>
+      <Box
+        mb={whenWallet({ ledger: 'base', software: '' })}
+        height={['100vh', '100%']}
+        maxHeight={['110vh', 'inherit']}
+      >
         <SwitchAccountList
           accounts={accounts}
           currentAccountIndex={currentAccountIndex}