chore: rename headers, restrict width of home header

leather-io · Jan 10, 2024 · 60ab169 · 60ab169
1 parent 5ef6f4f
commit 60ab169
Show file tree

Hide file tree

Showing 34 changed files with 88 additions and 74 deletions.
diff --git a/src/app/components/generic-error/generic-error.tsx b/src/app/components/generic-error/generic-error.tsx
@@ -5,7 +5,7 @@ import { FlexProps, styled } from 'leather-styles/jsx';
 import { closeWindow } from '@shared/utils';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 
 import { GenericErrorLayout } from './generic-error.layout';
 
@@ -23,7 +23,7 @@ interface GenericErrorProps extends FlexProps {
 export function GenericError(props: GenericErrorProps) {
   const { body, helpTextList, onClose = () => closeWindow(), title, ...rest } = props;
 
-  useRouteHeader(<Header />);
+  useRouteHeader(<HomeHeader />);
 
   return (
     <GenericErrorLayout

diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -1,16 +1,15 @@
 import { FormEvent, ReactNode, useCallback, useState } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Box, Stack, styled } from 'leather-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { buildEnterKeyEvent } from '@app/common/hooks/use-modifier-key';
 import { WaitingMessages, useWaitingMessage } from '@app/common/utils/use-waiting-message';
 import { LeatherButton } from '@app/ui/components/button';
-import { FixedFooter, Footer } from '@app/ui/components/containers/footers/footer';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 
-// import { PageLayout } from '@app/ui/components/containers/page.layout';
 import { TwoColumnLayout } from '../ui/components/containers/two-column.layout';
 import { ErrorLabel } from './error-label';
 

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -21,7 +21,7 @@ import {
   useNetworksActions,
 } from '@app/store/networks/networks.hooks';
 import { LeatherButton } from '@app/ui/components/button';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 import { Input } from '@app/ui/components/input';
 import { Title } from '@app/ui/components/typography/title';
 
@@ -62,7 +62,7 @@ export function AddNetwork() {
 
   const { setFieldValue } = formikProps;
 
-  useRouteHeader(<Header title="Add a network" onClose={() => navigate(RouteUrls.Home)} />);
+  useRouteHeader(<HomeHeader title="Add a network" onClose={() => navigate(RouteUrls.Home)} />);
 
   const handleApiChange = (newValue: BitcoinNetworkModes) => {
     setBitcoinApi(newValue);

diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx
@@ -7,13 +7,13 @@ import { ErrorBoundary, FallbackProps, useErrorHandler } from '@app/features/err
 import { openGithubIssue } from '@app/features/errors/utils';
 import { useErrorStackTraceState } from '@app/store/ui/ui.hooks';
 import { CodeBlock } from '@app/ui/components/codeblock';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 import { Title } from '@app/ui/components/typography/title';
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const [value] = useErrorStackTraceState();
 
-  useRouteHeader(<Header />);
+  useRouteHeader(<HomeHeader />);
 
   return (
     <Stack gap="space.06" flexGrow={1}>

diff --git a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx
@@ -6,14 +6,14 @@ import { Stack } from 'leather-styles/jsx';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 
 interface BitcoinContractListProps {
   children: ReactNode;
 }
 export function BitcoinContractListLayout({ children }: BitcoinContractListProps) {
   const navigate = useNavigate();
-  useRouteHeader(<Header title="Bitcoin Contracts" onClose={() => navigate(RouteUrls.Home)} />);
+  useRouteHeader(<HomeHeader title="Bitcoin Contracts" onClose={() => navigate(RouteUrls.Home)} />);
   return (
     <Stack padding="space.04" width="100%" overflow={'scroll'}>
       {children}

diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx
@@ -13,7 +13,7 @@ import { ChooseAssetContainer } from '@app/components/crypto-assets/choose-crypt
 import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout';
 import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list';
 import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 export function ChooseCryptoAssetToFund() {
   const btcCryptoCurrencyAssetBalance = useBtcCryptoCurrencyAssetBalance();
@@ -40,7 +40,7 @@ export function ChooseCryptoAssetToFund() {
     [cryptoCurrencyAssetBalances, checkBlockchainAvailable, whenWallet]
   );
 
-  useRouteHeader(<ModalHeader onGoBack={() => navigate(RouteUrls.Home)} />);
+  useRouteHeader(<PageHeader onGoBack={() => navigate(RouteUrls.Home)} />);
 
   const navigateToSendForm = useCallback(
     (cryptoAssetBalance: AllTransferableCryptoAssetBalances) => {

diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx
@@ -9,7 +9,7 @@ import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { useCurrentAccountNativeSegwitIndexZeroSignerNullable } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 
 import { FundLayout } from './components/fund.layout';
 import { FiatProvidersList } from './fiat-providers-list';
@@ -49,7 +49,7 @@ export function FundPage() {
   const address = getAddress();
   const balance = getBalance();
 
-  useRouteHeader(<Header onClose={() => navigate(RouteUrls.FundChooseCurrency)} title=" " />);
+  useRouteHeader(<HomeHeader onClose={() => navigate(RouteUrls.FundChooseCurrency)} title=" " />);
 
   if (!address || !balance) return <FullPageLoadingSpinner />;
   return (

diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -11,11 +11,11 @@ import { FeedbackButton } from '@app/features/feedback-button/feedback-button';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { homePageModalRoutes } from '@app/routes/app-routes';
 import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 
+import { HomeLayout } from '../../ui/components/containers/home.layout';
 import { CurrentAccount } from './components/account-area';
 import { HomeTabs } from './components/home-tabs';
-import { HomeLayout } from './components/home.layout';
 
 export function Home() {
   const { decodedAuthRequest } = useOnboardingState();
@@ -25,7 +25,7 @@ export function Home() {
   useRouteHeader(
     <>
       <InAppMessages />
-      <Header />
+      <HomeHeader />
     </>
   );
 

diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx
@@ -7,7 +7,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { settingsActions } from '@app/store/settings/settings.actions';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 
 import { AllowDiagnosticsLayout } from './allow-diagnostics-layout';
 
@@ -19,7 +19,7 @@ export function AllowDiagnosticsModal() {
 
   useEffect(() => void analytics.page('view', `${pathname}`), [analytics, pathname]);
 
-  useRouteHeader(<Header />);
+  useRouteHeader(<HomeHeader />);
 
   const setDiagnosticsPermissionsAndGoToOnboarding = useCallback(
     (areDiagnosticsAllowed: boolean) => {

diff --git a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx
@@ -6,7 +6,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { SecretKeyDisplayer } from '@app/features/secret-key-displayer/secret-key-displayer';
 import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 import { TwoColumnLayout } from '@app/ui/components/containers/two-column.layout';
 
 import { BackUpSecretKeyContent } from './components/back-up-secret-key.content';
@@ -15,7 +15,7 @@ export const BackUpSecretKeyPage = memo(() => {
   const secretKey = useDefaultWalletSecretKey();
   const navigate = useNavigate();
 
-  useRouteHeader(<Header />);
+  useRouteHeader(<HomeHeader />);
 
   useEffect(() => {
     if (!secretKey) navigate(RouteUrls.Onboarding);

diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx
@@ -22,7 +22,7 @@ import {
 import { OnboardingGate } from '@app/routes/onboarding-gate';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { LeatherButton } from '@app/ui/components/button';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 import { TwoColumnLayout } from '@app/ui/components/containers/two-column.layout';
 
 import { PasswordField } from './components/password-field';
@@ -53,7 +53,7 @@ function SetPasswordPage() {
   const { decodedAuthRequest } = useOnboardingState();
   const analytics = useAnalytics();
 
-  useRouteHeader(<Header onClose={() => navigate(-1)} />);
+  useRouteHeader(<HomeHeader onClose={() => navigate(-1)} />);
 
   useEffect(() => {
     void analytics.page('view', '/set-password');

diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx
@@ -6,7 +6,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { createNullArrayOfLength } from '@app/common/utils';
 import { MnemonicForm } from '@app/pages/onboarding/sign-in/mnemonic-form';
-import { Header } from '@app/ui/components/containers/headers/header';
+import { HomeHeader } from '@app/ui/components/containers/headers/home-header';
 import { TwoColumnLayout } from '@app/ui/components/containers/two-column.layout';
 
 import { SignInContent } from './components/sign-in.content';
@@ -17,7 +17,7 @@ export function SignIn() {
   const [twentyFourWordMode, setTwentyFourWordMode] = useState(true);
   const [mnemonic, setMnemonic] = useState<(string | null)[]>([]);
 
-  useRouteHeader(<Header onClose={() => navigate(RouteUrls.Onboarding)} />);
+  useRouteHeader(<HomeHeader onClose={() => navigate(RouteUrls.Onboarding)} />);
 
   useEffect(() => {
     const emptyMnemonicArray = twentyFourWordMode

diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx
@@ -13,7 +13,7 @@ import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-cr
 import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list';
 import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 export function ChooseCryptoAsset() {
   const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances();
@@ -24,7 +24,7 @@ export function ChooseCryptoAsset() {
 
   const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable();
 
-  useRouteHeader(<ModalHeader defaultGoBack />);
+  useRouteHeader(<PageHeader defaultGoBack />);
 
   function navigateToSendForm(cryptoAssetBalance: AllTransferableCryptoAssetBalances) {
     const { asset } = cryptoAssetBalance;

diff --git a/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx b/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx
@@ -14,7 +14,7 @@ import {
   InfoCardBtn,
   InfoCardFooter,
 } from '@app/components/info-card/info-card';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
@@ -38,7 +38,7 @@ export function LockBitcoinSummary() {
     toast.success('ID copied!');
   }
 
-  useRouteHeader(<ModalHeader defaultClose title="Locked Bitcoin" />);
+  useRouteHeader(<PageHeader defaultClose title="Locked Bitcoin" />);
 
   return (
     <InfoCard>

diff --git a/src/app/pages/send/send-container.tsx b/src/app/pages/send/send-container.tsx
@@ -4,10 +4,10 @@ import { Flex } from 'leather-styles/jsx';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { whenPageMode } from '@app/common/utils';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 export function SendContainer() {
-  useRouteHeader(<ModalHeader defaultGoBack title="Send" />, true);
+  useRouteHeader(<PageHeader defaultGoBack title="Send" />, true);
 
   return whenPageMode({
     full: (

diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx
@@ -25,7 +25,7 @@ import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/
 import { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client';
 import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/use-brc-20';
 import { useSignBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 import { useSendBitcoinAssetContextState } from '../../family/bitcoin/components/send-bitcoin-asset-container';
 
@@ -117,7 +117,7 @@ export function BrcChooseFee() {
     navigate(-1);
   }
 
-  useRouteHeader(<ModalHeader defaultGoBack onGoBack={onGoBack} title="Choose fee" />);
+  useRouteHeader(<PageHeader defaultGoBack onGoBack={onGoBack} title="Choose fee" />);
 
   return isLoadingOrder ? (
     <Stack

diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx
@@ -23,7 +23,7 @@ import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by
 import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/use-brc-20';
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
 import { LeatherButton } from '@app/ui/components/button';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
 
@@ -103,7 +103,7 @@ export function Brc20SendFormConfirmation() {
     });
   }
 
-  useRouteHeader(<ModalHeader defaultClose defaultGoBack title="Review" />);
+  useRouteHeader(<PageHeader defaultClose defaultGoBack title="Review" />);
 
   return (
     <InfoCard data-testid={SendCryptoAssetSelectors.ConfirmationDetails}>

diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx
@@ -10,7 +10,7 @@ import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoi
 import { BitcoinChooseFee } from '@app/features/bitcoin-choose-fee/bitcoin-choose-fee';
 import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend';
 import { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 import { useSendBitcoinAssetContextState } from '../../family/bitcoin/components/send-bitcoin-asset-container';
 import { useBtcChooseFee } from './use-btc-choose-fee';
@@ -41,7 +41,7 @@ export function BtcChooseFee() {
     isSendingMax
   );
 
-  useRouteHeader(<ModalHeader onGoBack={onGoBack} title="Choose fee" />);
+  useRouteHeader(<PageHeader onGoBack={onGoBack} title="Choose fee" />);
 
   return (
     <>

diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
@@ -29,7 +29,7 @@ import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by
 import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { LeatherButton } from '@app/ui/components/button';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 
 import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
 
@@ -124,7 +124,7 @@ export function BtcSendFormConfirmation() {
     };
   }
 
-  useRouteHeader(<ModalHeader defaultClose defaultGoBack title="Review" />);
+  useRouteHeader(<PageHeader defaultClose defaultGoBack title="Review" />);
 
   return (
     <InfoCard data-testid={SendCryptoAssetSelectors.ConfirmationDetails}>

diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx
@@ -7,7 +7,7 @@ import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { useLocationStateWithCache } from '@app/common/hooks/use-location-state';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { Tooltip } from '@app/components/tooltip';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
 
 import { useStacksBroadcastTransaction } from '../../family/stacks/hooks/use-stacks-broadcast-transaction';
@@ -47,7 +47,7 @@ export function StacksSendFormConfirmation() {
   } = formReviewTxSummary(stacksDeserializedTransaction, symbol, decimals);
 
   useRouteHeader(
-    <ModalHeader
+    <PageHeader
       defaultClose
       onGoBack={() => navigate('../', { relative: 'path', replace: true })}
       title="Review"

diff --git a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
@@ -19,7 +19,7 @@ import {
 } from '@app/components/info-card/info-card';
 import { InfoLabel } from '@app/components/info-label';
 import { LeatherButton } from '@app/ui/components/button';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 
 import { TxDone } from '../send-crypto-asset-form/components/tx-done';
@@ -47,7 +47,7 @@ export function Brc20SentSummary() {
     navigate('/');
   }
 
-  useRouteHeader(<ModalHeader defaultClose title="Creating transfer inscription" />);
+  useRouteHeader(<PageHeader defaultClose title="Creating transfer inscription" />);
 
   return (
     <InfoCard>

diff --git a/src/app/pages/send/sent-summary/btc-sent-summary.tsx b/src/app/pages/send/sent-summary/btc-sent-summary.tsx
@@ -16,7 +16,7 @@ import {
   InfoCardRow,
   InfoCardSeparator,
 } from '@app/components/info-card/info-card';
-import { ModalHeader } from '@app/ui/components/containers/headers/modal-header';
+import { PageHeader } from '@app/ui/components/containers/headers/page-header';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
 
@@ -53,7 +53,7 @@ export function BtcSentSummary() {
     toast.success('ID copied!');
   }
 
-  useRouteHeader(<ModalHeader defaultClose title="Sent" />);
+  useRouteHeader(<PageHeader defaultClose title="Sent" />);
 
   return (
     <InfoCard>