copy of 'new components pr'

apps/passport-client/components/screens/AddEmailScreen.tsx

@@ -246,7 +246,7 @@ export function AddEmailScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={64} />
         <CenterColumn>{content}</CenterColumn>
       </AppContainer>

apps/passport-client/components/screens/AddScreen/AddScreen.tsx

@@ -36,7 +36,7 @@ export function AddScreen(): JSX.Element | null {
 
   if (!screen) {
     // Need AppContainer to display error
-    return <AppContainer bg="gray" />;
+    return <AppContainer bg="primary" />;
   }
   return screen;
 }

apps/passport-client/components/screens/AddScreen/JustAddScreen.tsx

@@ -146,7 +146,7 @@ export function JustAddScreen({
     <>
       {isProtocolWorlds && <ProtocolWorldsStyling />}
       <MaybeModal fullScreen isProveOrAddScreen={true} />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Container>
           <Spacer h={16} />
           <AppHeader isProveOrAddScreen={true} />

apps/passport-client/components/screens/AddScreen/ProveAndAddScreen.tsx

@@ -79,7 +79,7 @@ export function ProveAndAddScreen({
   return (
     <>
       <MaybeModal fullScreen isProveOrAddScreen={true} />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Container>
           <Spacer h={24} />
           <AppHeader isProveOrAddScreen={true}>

apps/passport-client/components/screens/AddSubscriptionScreen.tsx

@@ -187,7 +187,7 @@ export function AddSubscriptionScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <ScreenNavigation label={"Subscriptions"} to="/subscriptions" />
         <SubscriptionsScreenContainer>
           {mismatchedEmails && (

apps/passport-client/components/screens/ChangeEmailScreen.tsx

@@ -257,7 +257,7 @@ export function ChangeEmailScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={64} />
         <CenterColumn>{content}</CenterColumn>
       </AppContainer>

apps/passport-client/components/screens/ChangePasswordScreen.tsx

@@ -201,7 +201,7 @@ export function ChangePasswordScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={64} />
         <CenterColumn>{content}</CenterColumn>
       </AppContainer>

apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx

@@ -46,7 +46,7 @@ export function EmbeddedGPCProofScreen({
   const [proving, setProving] = useState(false);
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <Spacer h={4} />
       <H2
         style={{

apps/passport-client/components/screens/FrogScreens/FrogManagerScreen.tsx

@@ -19,7 +19,7 @@ export function FrogManagerScreen(): JSX.Element {
   }
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <ButtonGroup>
         <Button
           disabled={tab === "frogs"}

apps/passport-client/components/screens/FrogScreens/FrogSubscriptionScreen.tsx

@@ -63,7 +63,7 @@ export function FrogSubscriptionScreen(): JSX.Element {
   }
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <Container>
         <TypistText
           onInit={(typewriter): TypewriterClass =>

apps/passport-client/components/screens/GetWithoutProvingScreen.tsx

@@ -104,7 +104,7 @@ export function GetWithoutProvingScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal fullScreen isProveOrAddScreen={true} />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Container>
           <Spacer h={16} />
           <AppHeader isProveOrAddScreen={true} />

apps/passport-client/components/screens/HaloScreen/AddHaloScreen.tsx

@@ -98,12 +98,12 @@ export function AddHaloScreen({
   let content: ReactNode;
 
   if (invalidPCD) {
-    return <AppContainer bg="gray" />;
+    return <AppContainer bg="primary" />;
   } else if (!pcd) {
     return <SyncingPCDs />;
   } else if (!loggedIn) {
     return (
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <MaybeModal fullScreen />
         <Container>
           <Spacer h={16} />
@@ -139,7 +139,7 @@ export function AddHaloScreen({
   }
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <MaybeModal fullScreen />
       <Container>
         <Spacer h={16} />

apps/passport-client/components/screens/HaloScreen/HaloScreen.tsx

@@ -27,15 +27,15 @@ export function HaloScreen(): JSX.Element {
 
   if (!syncSettled) {
     return (
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <SyncingPCDs />
       </AppContainer>
     );
   }
 
   if (!screen) {
     // Need AppContainer to display error
-    return <AppContainer bg="gray" />;
+    return <AppContainer bg="primary" />;
   }
 
   return screen;

apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx

@@ -164,7 +164,7 @@ export function HomeScreenImpl(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={24} />
         <AppHeader isEdgeCity={isEdgeCity} />
         <Spacer h={24} />

apps/passport-client/components/screens/ImportBackupScreen.tsx

@@ -246,7 +246,7 @@ export function ImportBackupScreen(): JSX.Element {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <ScreenNavigation label={"Home"} to="/" />
         <Container>
           <Spacer h={8} />

apps/passport-client/components/screens/MissingScreen.tsx

@@ -7,7 +7,7 @@ export function MissingScreen(): JSX.Element {
   const loc = useLocation();
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <CenterColumn w={290}>
         <TextCenter>
           <Spacer h={64} />

apps/passport-client/components/screens/ProveScreen/GenericProveScreen.tsx

@@ -87,7 +87,7 @@ export function GenericProveScreen({
   return (
     <>
       <MaybeModal fullScreen isProveOrAddScreen={true} />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <AppHeader isProveOrAddScreen={true}>
           <H2
             style={{

apps/passport-client/components/screens/ProveScreen/ProveScreen.tsx

@@ -56,15 +56,15 @@ export function ProveScreen(): JSX.Element | null {
 
   if (!syncSettled) {
     return (
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <SyncingPCDs />
       </AppContainer>
     );
   }
 
   if (!screen) {
     // Need AppContainer to display error
-    return <AppContainer bg="gray" />;
+    return <AppContainer bg="primary" />;
   }
 
   return screen;
@@ -101,7 +101,7 @@ function getScreen(request: PCDGetRequest): JSX.Element | null {
   return (
     <>
       <MaybeModal fullScreen isProveOrAddScreen={true} />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={24} />
         <H2>{title.toUpperCase()}</H2>
         <Spacer h={24} />

apps/passport-client/components/screens/RemoveEmailScreen.tsx

@@ -187,7 +187,7 @@ export function RemoveEmailScreen(): JSX.Element | null {
   return (
     <>
       <MaybeModal />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <Spacer h={64} />
         <CenterColumn>{content}</CenterColumn>
       </AppContainer>

apps/passport-client/components/screens/ScanScreen.tsx

@@ -63,14 +63,14 @@ export function ScanScreen(): JSX.Element {
 
   if (isRedirectingProtocolWorlds) {
     return (
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <ScreenLoader text="Discovering something new.." />
       </AppContainer>
     );
   }
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       {!usingLaserScanner && (
         <QRContainer>
           <Spacer h={8} />

apps/passport-client/components/screens/ServerErrorScreen.tsx

@@ -14,7 +14,7 @@ export function ServerErrorScreen(): JSX.Element {
   const description = query.get("description");
 
   return (
-    <AppContainer bg="gray">
+    <AppContainer bg="primary">
       <CenterColumn w={290}>
         <TextCenter>
           <Spacer h={64} />

apps/passport-client/components/screens/SubscriptionsScreen.tsx

@@ -29,7 +29,7 @@ export function SubscriptionsScreen(): JSX.Element {
     <>
       <MaybeModal />
       <Overscroll />
-      <AppContainer bg="gray">
+      <AppContainer bg="primary">
         <ScreenNavigation label={"Home"} to="/" />
         <Spacer h={8} />
         <Button onClick={onAddNewClicked}>Add Subscription</Button>

apps/passport-client/components/shared/AppContainer.tsx

@@ -11,7 +11,8 @@ import { ScreenLoader } from "./ScreenLoader";
 
 // Wrapper for all screens.
 export function AppContainer({
-  children
+  children,
+  bg
 }: {
   bg: "primary" | "gray";
   children?: ReactNode;
@@ -25,7 +26,8 @@ export function AppContainer({
     [dispatch]
   );
 
-  const col = "var(--bg-dark-primary)";
+  const col =
+    bg === "gray" ? "var(--dot-pattern-bg)" : "var(--bg-dark-primary)";
   return (
     <>
       <GlobalBackground color={col} />
@@ -53,7 +55,7 @@ export function AppContainer({
 
 export const GlobalBackground = createGlobalStyle<{ color: string }>`
   html {
-    background-color: ${(p): string => p.color};
+    background: ${(p): string => p.color};
   }
 `;