chore: deprecate virtuoso styles and fix scrolling

leather-io · Feb 14, 2024 · 25d317b · 25d317b
1 parent 378dfe6
commit 25d317b
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 77 deletions.
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
@@ -66,10 +66,9 @@ export function Container() {
     );
   };
 
-  // > scroll behaviour
-  // dialog titles
-  // signout dialog bottom padding
-  // mnemonic key login styling
+  // > scroll behaviour - test more
+  // signout dialog bottom radius
+
   // > settings fix menu - dialogs
   // - need to show Settings menu on unlock screen
   // > fix hacky code around showing logo or not - get rid of placeholder etc
@@ -106,17 +105,10 @@ export function Container() {
 
   return (
     <>
-      {/* #4370 SMELL
-       -  without this check for isShowingSwitchAccount the wallet crashes on new install
-       - Wallet is neither of type `ledger` nor `software`
-       Moved here from SwitchAccountDialog but should be improved
-       */}
-      {isShowingSwitchAccount && (
-        <SwitchAccountDialog
-          isShowing={isShowingSwitchAccount}
-          onClose={() => setIsShowingSwitchAccount(false)}
-        />
-      )}
+      <SwitchAccountDialog
+        isShowing={isShowingSwitchAccount}
+        onClose={() => setIsShowingSwitchAccount(false)}
+      />
       {/* TODO #4310 Toast */}
       <Toaster position="bottom-center" toastOptions={{ style: { fontSize: '14px' } }} />
       <ContainerLayout

diff --git a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list.tsx b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list.tsx
@@ -1,11 +1,9 @@
 import { ReactNode, memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
-import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
 
 import { SwitchAccountListItem } from './switch-account-list-item';
 
@@ -19,19 +17,20 @@ export const SwitchAccountList = memo(
   ({ currentAccountIndex, handleClose, addressesNum }: SwitchAccountListProps) => {
     const { whenWallet } = useWalletType();
 
+    //  TODO 4370 task #1 - test  LEDGER DIALOGS
     return (
       <Box
-        className={css(virtuosoContainerStyle)}
         css={{
+          // PETE try this just being 'auto' to fix windows problems also
           // only allow scroll if more than 6 accounts
           overflowY: addressesNum > 6 ? 'scroll' : 'hidden',
+          // PETE check this with new structure on Ledger
           // fill space on ledger as no create account button
           maxHeight: whenWallet({ ledger: '100vh', software: '' }),
         }}
       >
         <Virtuoso
           useWindowScroll
-          className={css(virtuosoStyle)}
           initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
           totalCount={addressesNum}
           itemContent={index => (

diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -32,9 +32,12 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDi
     onClose();
   };
 
-  if (stacksAddressesNum === 0 && btcAddressesNum === 0) {
+  if (isShowing && stacksAddressesNum === 0 && btcAddressesNum === 0) {
     return <AccountListUnavailable />;
   }
+  // #4370 SMELL without this early return the wallet crashes on new install with: Wallet is neither of type `ledger` nor `software`
+  // test this more as it could be OK to remove.
+  if (!isShowing) return null;
 
   return (
     <Dialog

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -117,6 +117,7 @@ export const ChooseAccountsList = memo(() => {
   return (
     <Box mt="space.05" width="100%">
       {whenWallet({ software: <AddAccountAction />, ledger: <></> })}
+      {/* TODO test this virtuoso */}
       <Virtuoso
         useWindowScroll
         data={accounts}

diff --git a/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
@@ -2,13 +2,11 @@ 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';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
-import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
 
 import { AccountListItem } from './account-list-item';
 
@@ -23,19 +21,17 @@ export const RecipientAccountsDialog = memo(() => {
 
   if (stacksAddressesNum === 0 && btcAddressesNum === 0) return null;
 
-  // TODO 4370 task #3 virtuoso boxes - test UI of this and other virtuoso lists and maybe change to share more code?
   return (
     <Dialog title="My accounts" isShowing onClose={onGoBack}>
       <Box
-        className={css(virtuosoContainerStyle)}
         css={{
+          // PETE try this just being 'auto' to fix windows problems also
           // only allow scroll if more than 7 accounts
           overflowY: stacksAccounts.length > 7 ? 'scroll' : 'hidden',
           maxHeight: '100vh',
         }}
       >
         <Virtuoso
-          className={css(virtuosoStyle)}
           itemContent={index => (
             <AccountListItem
               key={index}

diff --git a/src/app/ui/components/containers/dialog/dialog.tsx b/src/app/ui/components/containers/dialog/dialog.tsx
@@ -69,57 +69,47 @@ export const Dialog = memo(
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
                 width: { base: '100vw', md: '90vw' },
-                height: { base: '100vh', md: 'dialogHeight' },
+                height: { base: '100vh', md: '100%' },
                 maxWidth: { base: '100vw', md: 'pageWidth' },
-                maxHeight: { base: '100vh', md: '85vh' },
+                maxHeight: { base: '100vh', md: '50vh' },
                 animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
               })}
             >
-              <Box maxHeight="100vh" overflowY="hidden">
-                {/* TODO check if this box is even needed now 
-                
-                  Probably is needed for account selector
-                */}
-                {/* <Box
-        className={css({
-          position: 'fixed',
-          width: '100%',
-          height: '68px',
-          padding: '16px',
-        })}
-      > */}
-                {/* PETE check this for onboarding as the header spacing should be space.04 and not space.05 */}
-                {/* {header ? (
+              {/* PETE check this for onboarding as the header spacing should be space.04 and not space.05 */}
+              {/* {header ? (
                   header
                 ) : ( */}
 
-                {title && (
-                  <Header
-                    variant="page"
-                    isWaitingOnPerformedAction={isWaitingOnPerformedAction}
-                    onClose={onClose}
-                    // onGoBack={onGoBack}
-                    title={isString(title) ? <Title title={title} /> : title}
-                  />
-                )}
+              {title && (
+                <Header
+                  variant="page"
+                  isWaitingOnPerformedAction={isWaitingOnPerformedAction}
+                  onClose={onClose}
+                  // onGoBack={onGoBack}
+                  title={isString(title) ? <Title title={title} /> : title}
+                />
+              )}
 
-                {/* TODO - test this cross browser and remove if repaced by global.ts
+              {/* TODO - test this cross browser and remove if repaced by global.ts
                 
                   Probably is needed for account selector
                    */}
-                <Box
-                  className={css({
-                    // overflowY: 'scroll',
-                    overflowY: 'auto',
-                    '&::-webkit-scrollbar': {
-                      display: 'none',
-                    },
-                  })}
-                >
-                  {children}
-                </Box>
-                {footer}
+              <Box
+                className={css({
+                  // height: '520px',
+                  // maxHeight: 'fit-content',
+                  height: 'dialogContentHeight',
+                  maxHeight: 'dialogContentHeight',
+                  // overflowY: 'scroll',
+                  overflowY: 'auto',
+                  '&::-webkit-scrollbar': {
+                    display: 'none',
+                  },
+                })}
+              >
+                {children}
               </Box>
+              {footer}
             </RadixDialog.Content>
           </RadixDialog.Overlay>
         </RadixDialog.Portal>

diff --git a/src/app/ui/shared/styles/virtuoso-styles.ts b/src/app/ui/shared/styles/virtuoso-styles.ts
diff --git a/theme/tokens.ts b/theme/tokens.ts
@@ -12,6 +12,7 @@ export const tokens = defineTokens({
     twoColumnPageWidth: { value: '500px' },
     fullPageMaxWidth: { value: '882px' },
     dialogHeight: { value: '600px' },
+    dialogContentHeight: { value: '500px' },
     headerHeight: { value: '80px' },
     footerHeight: { value: '95px' },
     // #4250 setting consistent dimensions of extension + popup to match mobile