From 60a724bae7c240ea7405673415b7c068d30cb8d2 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 15 Mar 2024 07:36:26 +0000
Subject: [PATCH] chore: update popout headers

---
 src/app/components/disclaimer.tsx             |  2 +-
 src/app/components/no-fees-warning-row.tsx    |  4 +-
 src/app/features/container/container.tsx      |  7 +---
 src/app/features/container/total-balance.tsx  |  2 +-
 .../container/utils/get-popup-header.ts       | 39 +++++++++++++++----
 .../container/utils/get-title-from-url.ts     |  3 +-
 .../current-account-avatar.tsx                |  6 +--
 .../contract-call-details.tsx                 |  1 +
 .../stx-transfer-details.tsx                  |  1 +
 .../components/get-addresses.layout.tsx       |  2 +-
 .../transaction-request.tsx                   |  8 +++-
 .../components/containers/headers/header.tsx  | 19 ++-------
 12 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
index fbd8a9e72d5..0ef74549f06 100644
--- a/src/app/components/disclaimer.tsx
+++ b/src/app/components/disclaimer.tsx
@@ -10,7 +10,7 @@ interface DisclaimerProps extends BoxProps {
 export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: DisclaimerProps) {
   return (
     <Box lineHeight="1.4" {...props}>
-      <styled.span textStyle="caption.02">
+      <styled.span textStyle="caption.01">
         {disclaimerText}
         {learnMoreUrl ? (
           <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>
diff --git a/src/app/components/no-fees-warning-row.tsx b/src/app/components/no-fees-warning-row.tsx
index 3ed6cfedf31..420bf92a6d5 100644
--- a/src/app/components/no-fees-warning-row.tsx
+++ b/src/app/components/no-fees-warning-row.tsx
@@ -9,8 +9,8 @@ interface NoFeesWarningRowProps {
 export function NoFeesWarningRow({ chainId }: NoFeesWarningRowProps) {
   return (
     <HStack alignItems="center" justifyContent="space-between">
-      <styled.span textStyle="caption.02">No fees are incurred</styled.span>
-      <styled.span textStyle="caption.02">
+      <styled.span textStyle="caption.01">No fees are incurred</styled.span>
+      <styled.span textStyle="caption.01">
         {whenStacksChainId(chainId)({
           [ChainID.Testnet]: 'Testnet',
           [ChainID.Mainnet]: 'Mainnet',
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
index 616e227c805..a5a4d166183 100644
--- a/src/app/features/container/container.tsx
+++ b/src/app/features/container/container.tsx
@@ -34,6 +34,7 @@ import {
   getDisplayAddresssBalanceOf,
   isKnownPopupRoute,
   showAccountInfo,
+  showBalanceInfo,
 } from './utils/get-popup-header';
 import { getTitleFromUrl } from './utils/get-title-from-url';
 import {
@@ -154,10 +155,6 @@ export function Container() {
                     align="middle"
                     img={
                       <CurrentAccountAvatar
-                        color="white"
-                        fontSize="16px"
-                        fontWeight={500}
-                        size="32px"
                         toggleSwitchAccount={() =>
                           setIsShowingSwitchAccount(!isShowingSwitchAccount)
                         }
@@ -169,7 +166,7 @@ export function Container() {
                 )
               }
               totalBalance={
-                showAccountInfo(pathname) && (
+                showBalanceInfo(pathname) && (
                   <TotalBalance displayAddresssBalanceOf={getDisplayAddresssBalanceOf(pathname)} />
                 )
               }
diff --git a/src/app/features/container/total-balance.tsx b/src/app/features/container/total-balance.tsx
index 13095a54fd2..2ca38223807 100644
--- a/src/app/features/container/total-balance.tsx
+++ b/src/app/features/container/total-balance.tsx
@@ -13,7 +13,7 @@ interface TotalBalanceLayoutProps {
 }
 function TotalBalanceLayout({ children }: TotalBalanceLayoutProps) {
   return (
-    <Box p="space.04" width="100%" borderBottom="borders.default">
+    <Box p="space.04" width="100%">
       {children}
     </Box>
   );
diff --git a/src/app/features/container/utils/get-popup-header.ts b/src/app/features/container/utils/get-popup-header.ts
index d24ea0ac2e4..d42d48e8e2a 100644
--- a/src/app/features/container/utils/get-popup-header.ts
+++ b/src/app/features/container/utils/get-popup-header.ts
@@ -4,21 +4,41 @@
 import { RouteUrls } from '@shared/route-urls';
 
 export function showAccountInfo(pathname: RouteUrls) {
-  return (
-    pathname === RouteUrls.TransactionRequest ||
-    pathname === RouteUrls.ProfileUpdateRequest ||
-    pathname === RouteUrls.PsbtRequest
-  );
+  switch (pathname) {
+    case RouteUrls.TransactionRequest:
+    case RouteUrls.ProfileUpdateRequest:
+    case RouteUrls.PsbtRequest:
+    case RouteUrls.RpcSendTransfer:
+    case RouteUrls.SignatureRequest:
+    case RouteUrls.RpcStacksSignature:
+      return true;
+    default:
+      return false;
+  }
 }
+
+export function showBalanceInfo(pathname: RouteUrls) {
+  switch (pathname) {
+    case RouteUrls.ProfileUpdateRequest:
+    case RouteUrls.PsbtRequest:
+    case RouteUrls.RpcSendTransfer:
+    case RouteUrls.RpcStacksSignature:
+      return true;
+    case RouteUrls.TransactionRequest:
+    default:
+      return false;
+  }
+}
+
 export function getDisplayAddresssBalanceOf(pathname: RouteUrls) {
+  //  TODO it's unclear when to show ALL or STX balance here
   switch (pathname) {
     case RouteUrls.TransactionRequest:
     case RouteUrls.ProfileUpdateRequest:
     case RouteUrls.PsbtRequest:
+    case RouteUrls.RpcSendTransfer:
       return 'all';
-    case RouteUrls.SignatureRequest:
-    case RouteUrls.RpcGetAddresses:
-      return undefined;
+    case RouteUrls.RpcStacksSignature:
     default:
       return 'stx';
   }
@@ -31,6 +51,9 @@ export function isKnownPopupRoute(pathname: RouteUrls) {
     case RouteUrls.PsbtRequest:
     case RouteUrls.SignatureRequest:
     case RouteUrls.RpcGetAddresses:
+    case RouteUrls.RpcSendTransfer:
+    case RouteUrls.SignatureRequest:
+    case RouteUrls.RpcStacksSignature:
       return true;
     default:
       return false;
diff --git a/src/app/features/container/utils/get-title-from-url.ts b/src/app/features/container/utils/get-title-from-url.ts
index dd05c7ecea9..42ed7fe7a01 100644
--- a/src/app/features/container/utils/get-title-from-url.ts
+++ b/src/app/features/container/utils/get-title-from-url.ts
@@ -2,8 +2,9 @@ import { RouteUrls } from '@shared/route-urls';
 
 export function getTitleFromUrl(pathname: RouteUrls) {
   if (pathname.match(RouteUrls.SendCryptoAsset)) {
-    // don't show send on first step of send flow
+    // don't show send on first step of send flow or popuop transfer
     if (pathname === RouteUrls.SendCryptoAsset) return undefined;
+    if (pathname === RouteUrls.RpcSendTransfer) return undefined;
     return 'Send';
   }
 
diff --git a/src/app/features/current-account/current-account-avatar.tsx b/src/app/features/current-account/current-account-avatar.tsx
index 13e7f6bb145..7e5cc23bd15 100644
--- a/src/app/features/current-account/current-account-avatar.tsx
+++ b/src/app/features/current-account/current-account-avatar.tsx
@@ -11,8 +11,7 @@ import { AccountAvatar } from '@app/ui/components/account/account-avatar/account
 interface CurrentAccountAvatar extends CircleProps {
   toggleSwitchAccount(): void;
 }
-export const CurrentAccountAvatar = memo((props: CurrentAccountAvatar) => {
-  const { toggleSwitchAccount } = props;
+export const CurrentAccountAvatar = memo(({ toggleSwitchAccount }: CurrentAccountAvatar) => {
   const accountIndex = useCurrentAccountIndex();
   const accounts = useStacksAccounts();
   const currentAccount = accounts[accountIndex] as StacksAccount | undefined;
@@ -23,9 +22,8 @@ export const CurrentAccountAvatar = memo((props: CurrentAccountAvatar) => {
     <AccountAvatar
       index={currentAccount.index}
       name={name}
-      onClick={toggleSwitchAccount}
+      onClick={() => toggleSwitchAccount()}
       publicKey={currentAccount.stxPublicKey}
-      {...props}
     />
   );
 });
diff --git a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
index cd36cc7e396..a2e6d6ed277 100644
--- a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
+++ b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx
@@ -27,6 +27,7 @@ function ContractCallDetailsSuspense() {
       py="32px"
       gap="space.05"
       width="100%"
+      background="ink.background-primary"
     >
       <Title>Function and arguments</Title>
 
diff --git a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
index de5bd459b24..7a214f1fcd7 100644
--- a/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
+++ b/src/app/features/stacks-transaction-request/stx-transfer-details/stx-transfer-details.tsx
@@ -20,6 +20,7 @@ export function StxTransferDetails(): React.JSX.Element | null {
       px="space.04"
       py="space.06"
       gap="space.05"
+      backgroundColor="ink.background-secondary"
     >
       <Title>Transfer details</Title>
       <Stack gap="space.04">
diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
index 642e425afb9..a8669b172d1 100644
--- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
+++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
@@ -45,7 +45,7 @@ export function GetAddressesLayout(props: GetAddressesLayoutProps) {
         alignSelf="bottom"
         bg="ink.background-secondary"
       >
-        <styled.p textStyle="caption.02">
+        <styled.p textStyle="caption.01">
           By connecting you give permission to {requester} to see all addresses linked to this
           account
         </styled.p>
diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
index c521a116292..5e4a1d4000a 100644
--- a/src/app/pages/transaction-request/transaction-request.tsx
+++ b/src/app/pages/transaction-request/transaction-request.tsx
@@ -91,7 +91,13 @@ function TransactionRequestBase() {
   };
 
   return (
-    <Flex alignItems="center" flexDirection="column" p="space.05" width="100%">
+    <Flex
+      alignItems="center"
+      flexDirection="column"
+      p="space.05"
+      width="100%"
+      background="ink.background-secondary"
+    >
       <Formik
         initialValues={initialValues}
         onSubmit={onSubmit}
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
index ab6f3626229..a7218aaecce 100644
--- a/src/app/ui/components/containers/headers/header.tsx
+++ b/src/app/ui/components/containers/headers/header.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { Flex, Grid, GridItem, HStack, styled } from 'leather-styles/jsx';
 
-import { ArrowLeftIcon, CloseIcon } from '@app/ui/icons';
+import { ArrowLeftIcon } from '@app/ui/icons';
 
 import { BigTitleHeader } from './components/big-title-header';
 import { HeaderActionButton } from './components/header-action-button';
@@ -37,12 +37,9 @@ export function Header({
 }: HeaderProps) {
   const logoItem = onGoBack || logo || account;
   return (
-    <styled.header
-      p={variant === 'bigTitle' ? 'space.05' : 'space.04'}
-      bg={{ base: 'ink.background-primary', sm: 'transparent' }}
-    >
+    <styled.header p={variant === 'bigTitle' ? 'space.05' : 'space.04'} bg="transparent">
       <Grid
-        gridTemplateColumns="1fr 4fr 1fr"
+        gridTemplateColumns="auto 4fr auto"
         gridAutoFlow="column"
         width="100%"
         maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
@@ -70,16 +67,8 @@ export function Header({
         <GridItem hideBelow={variant === 'bigTitle' ? 'md' : undefined}>
           <HStack alignItems="center" justifyContent="flex-end">
             {networkBadge}
-            {totalBalance}
+            {totalBalance && totalBalance}
             {variant !== 'onboarding' && settingsMenu}
-            {onClose && (
-              <HeaderActionButton
-                icon={<CloseIcon />}
-                dataTestId={SharedComponentsSelectors.HeaderCloseBtn}
-                isWaitingOnPerformedAction={isWaitingOnPerformedAction}
-                onAction={onClose}
-              />
-            )}
           </HStack>
         </GridItem>
       </Grid>