chore: rebase with new button changes

leather-io · Jan 22, 2024 · 2ae6445 · 2ae6445
1 parent 5b94058
commit 2ae6445
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 69 deletions.
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -69,7 +69,12 @@ export function RequestPassword({
         >
           {/* // TODO #4370 add header */}
           <styled.header height="68px" p="space.04">
-            <LeatherLogo height="32px" verticalAlign="middle" px="space.02" />
+            <LeatherLogo
+            // 4370 TODO - make logos the same
+            // height="32px"
+            // verticalAlign="middle"
+            // px="space.02"
+            />
           </styled.header>
           <Stack px="space.05" gap="space.05" minHeight={{ base: '100vh', md: '100px' }}>
             <styled.h2 textStyle="heading.03">{title}</styled.h2>

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
@@ -6,7 +6,7 @@ import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useShowSwitchAccountsState } from '@app/store/ui/ui.hooks';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 
@@ -48,9 +48,9 @@ export const SwitchAccountDialog = memo(() => {
       footer={whenWallet({
         software: (
           <Footer>
-            <LeatherButton fullWidth onClick={() => onCreateAccount()}>
+            <Button fullWidth onClick={() => onCreateAccount()}>
               Create new account
-            </LeatherButton>
+            </Button>
           </Footer>
         ),
         ledger: <></>,

diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx
@@ -89,7 +89,6 @@ export function WelcomeLayout({
 
           <Flex gap="space.05" alignItems="flex-start">
             <Link
-              variant={isAtleastBreakpointMd ? 'link' : 'outline'}
               paddingTop="space.02"
               paddingBottom={{ base: 'space.02', md: 'unset' }}
               bg={{ base: 'darkModeInk.1', md: 'inherit' }}
@@ -107,7 +106,6 @@ export function WelcomeLayout({
               Use existing key
             </Link>
             <Link
-              variant={isAtleastBreakpointMd ? 'link' : 'outline'}
               paddingTop="space.02"
               paddingBottom={{ base: 'space.02', md: 'unset' }}
               bg={{ base: 'darkModeInk.1', md: 'unset' }}

diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -12,7 +12,7 @@ import { HighFeeDialog } from '@app/features/dialogs/high-fee-dialog/high-fee-di
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
@@ -97,13 +97,13 @@ export function BtcSendForm() {
               </SendCryptoAssetFormLayout>
 
               <Footer>
-                <LeatherButton
+                <Button
                   data-testid={SendCryptoAssetSelectors.PreviewSendTxBtn}
                   onClick={() => props.handleSubmit()}
                   type="submit"
                 >
                   Continue
-                </LeatherButton>
+                </Button>
                 <AvailableBalance balance={formatMoney(btcBalance.balance)} />
               </Footer>
               <HighFeeDialog learnMoreUrl={HIGH_FEE_WARNING_LEARN_MORE_URL_BTC} />

diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
@@ -2,7 +2,6 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { useFormik } from 'formik';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
-import { useThemeSwitcher } from '@app/common/theme-provider';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Flag } from '@app/components/layout/flag';
 import { Button } from '@app/ui/components/button/button';

diff --git a/src/app/ui/components/button/button.tsx b/src/app/ui/components/button/button.tsx
@@ -3,7 +3,10 @@ import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/
 
 const StyledButton = styled('button');
 
-type ButtonProps = Omit<React.ComponentProps<typeof StyledButton>, keyof ButtonVariantProps> &
+export type ButtonProps = Omit<
+  React.ComponentProps<typeof StyledButton>,
+  keyof ButtonVariantProps
+> &
   ButtonVariantProps;
 
 export function Button(props: ButtonProps) {

diff --git a/src/app/ui/components/containers/footers/footer.stories.tsx b/src/app/ui/components/containers/footers/footer.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/react';
 import { Flex, styled } from 'leather-styles/jsx';
 
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 
 import { Footer as Component } from './footer';
@@ -25,9 +25,9 @@ export default meta;
 export function Footer() {
   return (
     <Component>
-      <LeatherButton fullWidth onClick={() => null}>
+      <Button fullWidth onClick={() => null}>
         Create new account
-      </LeatherButton>
+      </Button>
     </Component>
   );
 }
@@ -36,10 +36,10 @@ export function SignOutConfirmFooter() {
   return (
     <Component>
       <Flex flexDirection="row" gap="space.04">
-        <LeatherButton color="gray" flexGrow={1} variant="outline" onClick={() => null}>
+        <Button color="gray" flexGrow={1} variant="outline" onClick={() => null}>
           Cancel
-        </LeatherButton>
-        <LeatherButton
+        </Button>
+        <Button
           _hover={{ opacity: 0.8 }}
           background="error.label"
           color="lightModeBrown.1"
@@ -48,7 +48,7 @@ export function SignOutConfirmFooter() {
           type="submit"
         >
           Sign out
-        </LeatherButton>
+        </Button>
       </Flex>
     </Component>
   );
@@ -57,9 +57,9 @@ export function SignOutConfirmFooter() {
 export function ReceiveTokensFooter() {
   return (
     <Component>
-      <LeatherButton fullWidth mt="space.05" onClick={() => null}>
+      <Button fullWidth mt="space.05" onClick={() => null}>
         Copy address
-      </LeatherButton>
+      </Button>
     </Component>
   );
 }
@@ -70,7 +70,7 @@ export function ReceiveTokensFooter() {
 export function RequestPasswordFooter() {
   return (
     <Component>
-      <LeatherButton
+      <Button
         // TODO improve this
         // can I move this style to footer / do I need it?
         // - something weird happens with this button overflowing
@@ -81,17 +81,17 @@ export function RequestPasswordFooter() {
         // mx={{ base: 'space.05', md: 'unset' }}
       >
         Continue
-      </LeatherButton>
+      </Button>
     </Component>
   );
 }
 
 export function FooterWithText() {
   return (
     <Component>
-      <LeatherButton fullWidth onClick={() => null}>
+      <Button fullWidth onClick={() => null}>
         Continue
-      </LeatherButton>
+      </Button>
 
       <Flex width="100%" justifyContent="center">
         <styled.span textStyle="caption.02" display="block" textAlign="left">
@@ -118,9 +118,9 @@ export function FooterWithText() {
 export function FooterWithLink() {
   return (
     <Component>
-      <LeatherButton fullWidth onClick={() => null}>
+      <Button fullWidth onClick={() => null}>
         Button
-      </LeatherButton>
+      </Button>
 
       <Flex width="100%" justifyContent="center">
         {/* use new <Link component here */}
@@ -141,9 +141,9 @@ export function FooterWithLink() {
 export function FooterWithBalance() {
   return (
     <Component>
-      <LeatherButton onClick={() => null} type="submit">
+      <Button onClick={() => null} type="submit">
         Button
-      </LeatherButton>
+      </Button>
       <AvailableBalance
         balance="0.00048208 BTC"
         balanceTooltipLabel="Total balance minus any amounts already represented by transfer inscriptions in your wallet."
@@ -159,9 +159,9 @@ export function FooterWithBalancesAbove() {
         <styled.span textStyle="label.02">0.00048208 BTC</styled.span>
         <styled.span textStyle="label.02">$ 1,100.00</styled.span>
       </Flex>
-      <LeatherButton onClick={() => null} type="submit">
+      <Button onClick={() => null} type="submit">
         Button
-      </LeatherButton>
+      </Button>
     </Component>
   );
 }
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -3,7 +3,7 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
-import { LeatherButton } from '@app/ui/components/button';
+import { Button } from '@app/ui/components/button/button';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { CloseIcon } from '@app/ui/components/icons/close-icon';
 import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
@@ -100,8 +100,9 @@ export function Header({
           ) : undefined}
           <LeatherLogo
             data-testid={OnboardingSelectors.LeatherLogoRouteToHome}
-            width="72px"
-            verticalAlign="middle"
+            // 4370 TODO - asess if we need these other props
+            // width="72px"
+            // verticalAlign="middle"
             // onClick={variant !== 'home' ? () => navigate(RouteUrls.Home) : undefined}
           />
         </Flex>
@@ -124,15 +125,15 @@ export function Header({
           {/* // FIXME 4370 task #6 - network mode relies on accessing state so fails on Storybook  */}
           <NetworkModeBadge isTestnetChain name="Testnet" onClick={() => null} />
           {variant !== 'onboarding' && (
-            <LeatherButton
+            <Button
               data-testid={SettingsSelectors.SettingsMenuBtn}
               // FIXME 4370 task #6 - need to make this settings menu clickable here
               // onClick={() => setIsShowingSettings(!isShowingSettings)}
               onClick={() => null}
               variant="ghost"
             >
               <HamburgerIcon />
-            </LeatherButton>
+            </Button>
           )}
           {variant === 'page' && onClose && (
             <HeaderActionButton

diff --git a/src/app/ui/components/containers/headers/home-header.tsx b/src/app/ui/components/containers/headers/home-header.tsx
@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
@@ -16,22 +16,6 @@ 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';
 
-// Fara got rid of all of this in 4820
-// maybe can avoid all this by using the variant for onBoarding / home?
-function isSettingsClickable(pathname: RouteUrls) {
-  return (
-    pathname !== RouteUrls.RequestDiagnostics &&
-    pathname !== RouteUrls.Onboarding &&
-    pathname !== RouteUrls.BackUpSecretKey &&
-    pathname !== RouteUrls.SetPassword &&
-    pathname !== RouteUrls.SignIn
-  );
-}
-
-function isLeatherLogoClickable(pathname: RouteUrls) {
-  return isSettingsClickable(pathname) && pathname !== RouteUrls.Home;
-}
-
 interface HomeHeaderProps extends FlexProps {
   onClose?(): void;
   title?: string;
@@ -40,14 +24,13 @@ interface HomeHeaderProps extends FlexProps {
 export function HomeHeader(props: HomeHeaderProps) {
   const { onClose, title } = props;
   const { isShowingSettings, setIsShowingSettings } = useDialogs();
-  const { pathname } = useLocation();
   const navigate = useNavigate();
 
   const isBreakpointSm = useViewportMinWidth('sm');
 
   return (
     <Flex
-      alignItems={hideSettings ? 'center' : 'flex-start'}
+      // alignItems={hideSettings ? 'center' : 'flex-start'}
       backgroundColor={['accent.background-primary', 'accent.background-secondary']}
       justifyContent="space-between"
       minHeight={['unset', '80px']}
@@ -90,15 +73,16 @@ export function HomeHeader(props: HomeHeaderProps) {
       )}
       <HStack alignItems="center" flexBasis="20%" justifyContent="flex-end">
         <NetworkModeBadge />
-        {!hideSettings && (
-          <Button
-            data-testid={SettingsSelectors.SettingsMenuBtn}
-            onClick={() => setIsShowingSettings(!isShowingSettings)}
-            variant="ghost"
-          >
-            <HamburgerIcon />
-          </Button>
-        )}
+        {/* TODO this should go with new header */}
+        {/* {!hideSettings && ( */}
+        <Button
+          data-testid={SettingsSelectors.SettingsMenuBtn}
+          onClick={() => setIsShowingSettings(!isShowingSettings)}
+          variant="ghost"
+        >
+          <HamburgerIcon />
+        </Button>
+        {/* )} */}
       </HStack>
     </Flex>
   );

diff --git a/src/app/ui/components/leather-logo.tsx b/src/app/ui/components/leather-logo.tsx
@@ -1,20 +1,22 @@
-import { ButtonProps, LeatherButton } from '@app/ui/components/button';
+import { styled } from 'leather-styles/jsx';
+
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
-export function LeatherLogo(props: ButtonProps) {
-  const { onClick, ...rest } = props;
+interface LeatherLogoProps {
+  onClick?(): void;
+}
+export function LeatherLogo({ onClick, ...rest }: LeatherLogoProps) {
   return (
-    <LeatherButton
+    <styled.button
       _hover={onClick && { color: 'accent.action-primary-hover' }}
       color="accent.text-primary"
       cursor={onClick ? 'pointer' : 'unset'}
       height="32px"
       onClick={onClick ? onClick : undefined}
-      variant="text"
       width="76px"
       {...rest}
     >
       <LeatherIcon />
-    </LeatherButton>
+    </styled.button>
   );
 }