From 7158d68ce6312d1944c5bab3905056f2b99196ef Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 2 Feb 2024 05:45:49 +0000
Subject: [PATCH] chore: make naming of popup consistent

---
 .storybook/viewports.ts                                    | 4 ++--
 src/app/ui/components/containers/home.layout.tsx           | 7 +++----
 .../{popout/popout.card.tsx => popup/popup-card.tsx}       | 3 +--
 src/app/ui/components/containers/two-column.layout.tsx     | 4 ++--
 src/shared/constants.ts                                    | 1 +
 5 files changed, 9 insertions(+), 10 deletions(-)
 rename src/app/ui/components/containers/{popout/popout.card.tsx => popup/popup-card.tsx} (76%)

diff --git a/.storybook/viewports.ts b/.storybook/viewports.ts
index 6fde3c7c3a9..65e8ef8075f 100644
--- 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
index a05d2add556..724ef2fb1b0 100644
--- a/src/app/ui/components/containers/home.layout.tsx
+++ b/src/app/ui/components/containers/home.layout.tsx
@@ -3,10 +3,9 @@ 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) {
@@ -14,7 +13,7 @@ export function HomeLayout({ children }: HomeLayoutProps) {
     <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/src/app/ui/components/containers/popout/popout.card.tsx b/src/app/ui/components/containers/popup/popup-card.tsx
similarity index 76%
rename from src/app/ui/components/containers/popout/popout.card.tsx
rename to src/app/ui/components/containers/popup/popup-card.tsx
index f4a5c311655..8e7549eef59 100644
--- a/src/app/ui/components/containers/popout/popout.card.tsx
+++ b/src/app/ui/components/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
index 768906aa1d2..f281e08b014 100644
--- 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
index 6aff2513e02..caf0d7e753a 100644
--- 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/';