fix: standardise virtuoso components, closes #4692

leather-io · Dec 14, 2023 · 982f7de · 982f7de
1 parent 7fade7d
commit 982f7de
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 80 deletions.
diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
@@ -1,5 +1,5 @@
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Flex, HStack, Stack, StackProps, styled } from 'leather-styles/jsx';
+import { Box, Flex, HStack, Stack, StackProps, styled } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
@@ -36,56 +36,58 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
   const isBreakpointSm = useViewportMinWidth('sm');
 
   return (
-    <Flex
-      width="100%"
-      key={`account-${index}`}
-      data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
-      cursor="pointer"
-      position="relative"
-      onClick={onSelectAccount}
-      {...rest}
-    >
-      <Flag align="middle" img={avatar} spacing="space.04" width="100%" mr="space.04">
-        <Stack gap="space.01">
-          <HStack alignItems="center" justifyContent="space-between">
-            <HStack alignItems="center" gap="space.02">
-              {accountName}
-              {isActive && <CheckmarkIcon />}
+    <Box mx={['space.05', 'space.06']}>
+      <Flex
+        width="100%"
+        key={`account-${index}`}
+        data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
+        cursor="pointer"
+        position="relative"
+        onClick={onSelectAccount}
+        {...rest}
+      >
+        <Flag align="middle" img={avatar} spacing="space.04" width="100%" mr="space.04">
+          <Stack gap="space.01">
+            <HStack alignItems="center" justifyContent="space-between">
+              <HStack alignItems="center" gap="space.02">
+                {accountName}
+                {isActive && <CheckmarkIcon />}
+              </HStack>
+              {isLoading ? (
+                <Spinner
+                  color="accent.text-subdued"
+                  position="absolute"
+                  right={0}
+                  size="18px"
+                  top="calc(50% - 8px)"
+                />
+              ) : (
+                balanceLabel
+              )}
             </HStack>
-            {isLoading ? (
-              <Spinner
-                color="accent.text-subdued"
-                position="absolute"
-                right={0}
-                size="18px"
-                top="calc(50% - 8px)"
-              />
-            ) : (
-              balanceLabel
-            )}
-          </HStack>
-          <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
-            <CaptionDotSeparator>
-              <StacksAccountLoader index={index}>
-                {account => (
-                  <styled.span textStyle="caption.02">
-                    {truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}
-                  </styled.span>
-                )}
-              </StacksAccountLoader>
+            <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
+              <CaptionDotSeparator>
+                <StacksAccountLoader index={index}>
+                  {account => (
+                    <styled.span textStyle="caption.02">
+                      {truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}
+                    </styled.span>
+                  )}
+                </StacksAccountLoader>
 
-              <BitcoinNativeSegwitAccountLoader index={index}>
-                {signer => (
-                  <styled.span textStyle="caption.02">
-                    {truncateMiddle(signer.address, 5)}
-                  </styled.span>
-                )}
-              </BitcoinNativeSegwitAccountLoader>
-            </CaptionDotSeparator>
-          </HStack>
-        </Stack>
-      </Flag>
-      {children}
-    </Flex>
+                <BitcoinNativeSegwitAccountLoader index={index}>
+                  {signer => (
+                    <styled.span textStyle="caption.02">
+                      {truncateMiddle(signer.address, 5)}
+                    </styled.span>
+                  )}
+                </BitcoinNativeSegwitAccountLoader>
+              </CaptionDotSeparator>
+            </HStack>
+          </Stack>
+        </Flag>
+        {children}
+      </Flex>
+    </Box>
   );
 }
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,6 +1,7 @@
 import { ReactNode, memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
+import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
@@ -17,9 +18,6 @@ interface SwitchAccountListProps {
 export const SwitchAccountList = memo(
   ({ currentAccountIndex, handleClose, addressesNum }: SwitchAccountListProps) => {
     const { whenWallet } = useWalletType();
-    const isAtleastBreakpointMd = useViewportMinWidth('md');
-
-    console.log('switch account list');
 
     return (
       <Box
@@ -28,31 +26,24 @@ export const SwitchAccountList = memo(
           '&::-webkit-scrollbar': {
             display: 'none',
           },
-          // minHeight: 'calc(70vh + 92px)',
-          //PETE = probably need to make all drawer-flex base-drawer have this height as otherwise modals don't stretch to bottom
-          maxHeight: isAtleastBreakpointMd ? '100%' : '75vh',
+          //#4370 TODO = probably need to make all drawer-flex
+          // base-drawer have this height as otherwise modals don't stretch to bottom
+          maxHeight: { base: '75vh', md: '100%' },
         }}
-        // minHeight="calc(70vh + 92px)" //set minHeight only on extension
         mb={whenWallet({ ledger: 'space.04', software: '' })}
       >
         <Virtuoso
           useWindowScroll
-          // components={{ Header, Footer }}
           initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
-          style={{
-            paddingTop: '24px',
-            // height: isAtleastBreakpointMd ? '100%' : '20vh',
-            minHeight: '50vh',
-          }}
+          className="l-virtuoso"
           totalCount={addressesNum}
           itemContent={index => (
-            <Box mx={['space.05', 'space.06']} key={index}>
-              <SwitchAccountListItem
-                handleClose={handleClose}
-                currentAccountIndex={currentAccountIndex}
-                index={index}
-              />
-            </Box>
+            <SwitchAccountListItem
+              key={index}
+              handleClose={handleClose}
+              currentAccountIndex={currentAccountIndex}
+              index={index}
+            />
           )}
         />
       </Box>

diff --git a/...send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/...send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
@@ -2,6 +2,7 @@ import { memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
 
+import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
@@ -23,19 +24,17 @@ export const RecipientAccountsDrawer = memo(() => {
 
   return (
     <BaseDrawer title="My accounts" isShowing onClose={onGoBack}>
-      <Box mb="space.05" mx={['space.04', 'space.06']}>
+      <Box>
         <Virtuoso
-          height="72px"
+          className="l-virtuoso"
           itemContent={index => (
-            <Box mx={['space.05', 'space.06']} key={index}>
-              <AccountListItem
-                stacksAccount={stacksAccounts[index]}
-                onClose={onGoBack}
-                index={index}
-              />
-            </Box>
+            <AccountListItem
+              key={index}
+              stacksAccount={stacksAccounts[index]}
+              onClose={onGoBack}
+              index={index}
+            />
           )}
-          style={{ paddingTop: '24px', height: '70vh' }}
           totalCount={stacksAddressesNum || btcAddressesNum}
         />
       </Box>

diff --git a/theme/global/global.ts b/theme/global/global.ts
@@ -36,4 +36,8 @@ export const globalCss = defineGlobalStyles({
   ...tippyStyles,
   ...radixStyles,
   ...radixTabStyles,
+  '.l-virtuoso': {
+    paddingTop: '24px',
+    minHeight: { base: '85vh', md: '70vh' },
+  },
 });