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
index d65f2be6eb7..efb71b1facd 100644
--- a/src/app/features/switch-account-drawer/components/switch-account-list.tsx
+++ b/src/app/features/switch-account-drawer/components/switch-account-list.tsx
@@ -5,8 +5,8 @@ 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 { virtuosoContainerStyle, virtuosoStyle } from '../../../ui/shared/styles/virtuoso-styles';
import { SwitchAccountListItem } from './switch-account-list-item';
interface SwitchAccountListProps {
diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
index 0a0c9567c17..9361c7c953d 100644
--- a/src/app/features/switch-account-drawer/switch-account-drawer.tsx
+++ b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
@@ -15,7 +15,6 @@ import { AccountListUnavailable } from './components/account-list-unavailable';
import { SwitchAccountList } from './components/switch-account-list';
export const SwitchAccountDrawer = memo(() => {
- //TODO - see if I can get rid of this jotai stuff
const [isShowing, setShowSwitchAccountsState] = useShowSwitchAccountsState();
const currentAccountIndex = useCurrentAccountIndex();
@@ -38,14 +37,14 @@ export const SwitchAccountDrawer = memo(() => {
return ;
}
- // without this early return it crashes on new install with:
+ // #4370 SMELL without this early return the wallet crashes on new install with:
// Wallet is neither of type `ledger` nor `software`
+ // FIXME - this shouldn't be rendered until necessary
if (!isShowing) return null;
- // FIXME - how is this even getting loaded at all on install?!?!?!
return (
Select account} // FIXME this is a hack for Select Account that needs to be fixed
+ title={Select account} // #4370 FIXME: Headers passing JSX as a hack for Select Account that needs to be fixed
isShowing={isShowing}
onClose={onClose}
footer={whenWallet({
diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
index 87c6d7c575b..f0874d3c13a 100644
--- a/src/app/pages/fund/components/fund-account-tile.tsx
+++ b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -48,7 +48,6 @@ export function FundAccountTile(props: FundAccountTileProps) {
height="40px"
justifyContent="center"
width="40px"
- backgroundColor="colors.lightModeBrown.1"
>
diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
index a1944e7e36e..3f1298e66c6 100644
--- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
+++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -1,11 +1,8 @@
-import { useState } from 'react';
-
-import * as Dialog from '@radix-ui/react-dialog';
+import { Dialog } from '@radix-ui/themes';
import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
import { css } from 'leather-styles/css';
import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
-// import { isPopupMode } from '@app/common/utils';
import { LeatherButton } from '@app/ui/components/button';
import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
@@ -29,90 +26,51 @@ interface AllowDiagnosticsLayoutProps {
onUserDenyDiagnostics(): void;
}
-// // #4250 TODO
-// Popup mode is just slightly wider than extension view
-// isPopupMode() returns true for extension / popup
-// could also change sm breakpoint
-// sm: '398px', -> sm: '442px',
-
export function AllowDiagnosticsLayout(props: AllowDiagnosticsLayoutProps) {
const { onUserAllowDiagnostics, onUserDenyDiagnostics } = props;
- const [open, setOpen] = useState(true);
return (
-
-
-
- setOpen(!open)}
- className={css({
- backgroundColor: 'accent.background-primary',
- borderRadius: '6px',
- boxShadow:
- 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
- position: 'fixed',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: '90vw',
- maxWidth: '450px',
- maxHeight: '85vh',
- padding: '25px',
- animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-
- // OLD
- // width: '500px',
- // marginY: 'space.03',
- // backgroundColor: 'accent.background-primary',
- // adding a minHeight here works for extension/popup but we lose margins
- // minHeight: isPopupMode() ? '600px' : undefined,
- })}
- >
-
-
- Help us improve
-
-
- Leather would like to gather deidentified service usage data to help improve the
- experience of the wallet.
-
+
+
+
+
+ Help us improve
+
+
+ Leather would like to gather deidentified service usage data to help improve the
+ experience of the wallet.
+
-
-
-
-
-
+
+
+
+
+
-
- onUserDenyDiagnostics()}
- data-testid={OnboardingSelectors.DenyAnalyticsBtn}
- >
- Deny
-
-
- Allow
-
-
-
-
-
-
-
-
+
+ onUserDenyDiagnostics()}
+ data-testid={OnboardingSelectors.DenyAnalyticsBtn}
+ >
+ Deny
+
+
+ Allow
+
+
+
);
}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
index 9570a02f88e..06a5e91d66a 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
@@ -8,11 +8,8 @@ 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 { Modal } from '@app/ui/components/containers/modal/modal';
+import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
-import {
- virtuosoContainerStyle,
- virtuosoStyle,
-} from '../../../../../ui/shared/styles/virtuoso-styles';
import { AccountListItem } from './account-list-item';
export const RecipientAccountsDrawer = memo(() => {
diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx
index 0e7d16a497d..917ddd260ea 100644
--- a/src/app/ui/components/containers/footers/footer.tsx
+++ b/src/app/ui/components/containers/footers/footer.tsx
@@ -13,8 +13,8 @@ export function Footer({ children }: HasChildren) {
width="100%"
zIndex={1}
backgroundColor="accent.background-primary"
- minHeight="92px" // give footer minHeight 92px to help offset vh of virtuoso
- maxWidth={{ base: '100vw', md: '450px' }} // this is so buggy - set to the same width as base drawer flex - need to fix this properly
+ minHeight="92px"
+ maxWidth={{ base: '100vw', md: '450px' }}
borderRadius={[0, 0, 'lg']}
>
{children}
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
index 39d74c911fd..c7fa0ec5307 100644
--- a/src/app/ui/components/containers/headers/header.tsx
+++ b/src/app/ui/components/containers/headers/header.tsx
@@ -8,14 +8,13 @@ import { RouteUrls } from '@shared/route-urls';
import { useDrawers } from '@app/common/hooks/use-drawers';
import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { AppVersion } from '@app/components/app-version';
import { NetworkModeBadge } from '@app/components/network-mode-badge';
import { LeatherButton } from '@app/ui/components/button';
import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
import { LeatherLogo } from '@app/ui/components/leather-logo';
-import { AppVersion } from '../../../../components/app-version';
-
function isSettingsClickable(pathname: RouteUrls) {
return (
pathname !== RouteUrls.RequestDiagnostics &&
diff --git a/src/app/ui/components/containers/headers/modal-header.tsx b/src/app/ui/components/containers/headers/modal-header.tsx
index f5b4cdaba49..b06468eb52b 100644
--- a/src/app/ui/components/containers/headers/modal-header.tsx
+++ b/src/app/ui/components/containers/headers/modal-header.tsx
@@ -10,7 +10,7 @@ import { LeatherButton } from '@app/ui/components/button';
import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
import { CloseIcon } from '@app/ui/components/icons/close-icon';
-// This is called ModalHeader but also gets shown on the Send flow which is a full page
+// #4370 TODO - refactor headers: This is called ModalHeader but also gets shown on the Send flow which is a full page
interface ModalHeaderProps {
onClose?(): void;
diff --git a/src/app/ui/components/containers/modal/modal.tsx b/src/app/ui/components/containers/modal/modal.tsx
index 8dab97201ce..9b0ccb12375 100644
--- a/src/app/ui/components/containers/modal/modal.tsx
+++ b/src/app/ui/components/containers/modal/modal.tsx
@@ -1,5 +1,3 @@
-// TODO - not sure why we call this a drawer when it's a modal
-// 4370 TODO - can investigate swapping this for radix dialog and using modal true / false
import { ReactNode, memo } from 'react';
import { useNavigate } from 'react-router-dom';