chore: make naming of popup consistent

leather-io · Feb 2, 2024 · 7158d68 · 7158d68
1 parent 6c88596
commit 7158d68
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/.storybook/viewports.ts b/.storybook/viewports.ts
@@ -3,8 +3,8 @@ import { breakpoints } from '@leather-wallet/tokens';
 import { POPUP_HEIGHT, POPUP_WIDTH } from '../src/shared/constants';
 
 export const customViewports = {
-  extension: {
-    name: 'Extension Popout',
+  popup: {
+    name: 'Popup',
     styles: {
       width: `${POPUP_WIDTH}px`,
       height: `${POPUP_HEIGHT}px`,

diff --git a/src/app/ui/components/containers/home.layout.tsx b/src/app/ui/components/containers/home.layout.tsx
@@ -3,18 +3,17 @@ import React from 'react';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Stack } from 'leather-styles/jsx';
 
-import { AccountInfoCard } from '../../../pages/home/components/account-info-card';
+import { HOMEPAGE_MAX_WIDTH } from '@shared/constants';
 
-//  FIXME 4370 - move this const somewhere else, maybe with POPOUT size in src/shared/constants? with the other viewports? Use a breakpoint token?
-export const HOME_MAX_WIDTH = '882px';
+import { AccountInfoCard } from '../../../pages/home/components/account-info-card';
 
 type HomeLayoutProps = Record<'currentAccount' | 'children', React.ReactNode>;
 export function HomeLayout({ children }: HomeLayoutProps) {
   return (
     <Stack alignItems="center" width="100%" mx={['', 'space.04']}>
       <Stack
         data-testid={HomePageSelectors.HomePageContainer}
-        maxWidth={['unset', 'unset', HOME_MAX_WIDTH]}
+        maxWidth={['unset', 'unset', HOMEPAGE_MAX_WIDTH]}
         px={['space.04', 'space.04', 'space.08']}
         width="100%"
         backgroundColor="ink.1"

diff --git a/...ponents/containers/popout/popout.card.tsx → ...omponents/containers/popup/popup-card.tsx b/...ponents/containers/popout/popout.card.tsx → ...omponents/containers/popup/popup-card.tsx
@@ -2,8 +2,7 @@ import { Stack } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 
-//  shared card for popout content used in psbt + bitcoin contract request
-export function PopOutCard({ children }: HasChildren) {
+export function PopupCard({ children }: HasChildren) {
   return (
     <Stack
       alignItems="center"

diff --git a/src/app/ui/components/containers/two-column.layout.tsx b/src/app/ui/components/containers/two-column.layout.tsx
@@ -1,7 +1,7 @@
 import { Flex, Stack, styled } from 'leather-styles/jsx';
 
 // import { POPUP_WIDTH } from 'shared/constants';
-import { HOME_MAX_WIDTH } from '../containers/home.layout';
+import { HOMEPAGE_MAX_WIDTH } from '@shared/constants';
 
 interface TwoColumnLayoutProps {
   leftColumn: React.JSX.Element;
@@ -16,7 +16,7 @@ export function TwoColumnLayout({
   return (
     <Flex
       id="two-column"
-      maxWidth={HOME_MAX_WIDTH}
+      maxWidth={HOMEPAGE_MAX_WIDTH}
       // flexDirection={['column', 'column', 'column', 'row']}
       flexDirection={{ base: 'column', md: 'row' }}
       paddingTop="space.06"

diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -7,6 +7,7 @@ export const gaiaUrl = 'https://hub.blockstack.org';
 // #4250 setting consistent dimensions of extension + popup to match mobile
 export const POPUP_WIDTH = 390;
 export const POPUP_HEIGHT = 756;
+export const HOMEPAGE_MAX_WIDTH = '882px';
 
 export const HIGH_FEE_AMOUNT_STX = 5;
 export const HIGH_FEE_WARNING_LEARN_MORE_URL_BTC = 'https://bitcoinfees.earn.com/';