From 6523b22cef1d6e225868225b6522b84c0cacae12 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Thu, 15 Feb 2024 05:52:30 +0000
Subject: [PATCH] chore: best effort on allow diagnostics modal

---
 .../allow-diagnostics-layout.tsx              | 53 +++++++++++--------
 .../components/containers/dialog/dialog.tsx   | 14 -----
 .../components/containers/headers/header.tsx  |  4 +-
 3 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
index 525b6bd0e7e..96ec5f58cf2 100644
--- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
+++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -4,7 +4,9 @@ import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
 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';
+import { Header } from '@app/ui/components/containers/headers/header';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
+import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
 interface ReasonToAllowDiagnosticsProps {
   text: string;
@@ -29,8 +31,35 @@ export function AllowDiagnosticsLayout({
   onUserDenyDiagnostics,
 }: AllowDiagnosticsLayoutProps) {
   return (
-    <Dialog isShowing>
-      <Stack gap="space.04" p="space.05" minWidth={{ base: '100%', md: '452px' }}>
+    <Dialog
+      isShowing
+      footer={
+        <Footer>
+          <Flex flexDirection="row" gap="space.04">
+            <Button
+              flexGrow={1}
+              variant="outline"
+              onClick={() => onUserDenyDiagnostics()}
+              data-testid={OnboardingSelectors.DenyAnalyticsBtn}
+            >
+              Deny
+            </Button>
+            <Button
+              flexGrow={1}
+              autoFocus
+              data-testid={OnboardingSelectors.AllowAnalyticsBtn}
+              onClick={onUserAllowDiagnostics}
+            >
+              Allow
+            </Button>
+          </Flex>
+        </Footer>
+      }
+    >
+      <Stack py="space.04" gap="space.04">
+        <Box height="32px">
+          <LeatherIcon />
+        </Box>
         <styled.h1 textStyle="heading.03">Help us improve</styled.h1>
         <styled.p textStyle="heading.05">
           Leather would like to gather deidentified service usage data to help improve the
@@ -43,26 +72,6 @@ export function AllowDiagnosticsLayout({
           <ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help fix errors, and analyze statistics" />
         </Stack>
       </Stack>
-      <Footer>
-        <Flex flexDirection="row" gap="space.04">
-          <Button
-            flexGrow={1}
-            variant="outline"
-            onClick={() => onUserDenyDiagnostics()}
-            data-testid={OnboardingSelectors.DenyAnalyticsBtn}
-          >
-            Deny
-          </Button>
-          <Button
-            flexGrow={1}
-            autoFocus
-            data-testid={OnboardingSelectors.AllowAnalyticsBtn}
-            onClick={onUserAllowDiagnostics}
-          >
-            Allow
-          </Button>
-        </Flex>
-      </Footer>
     </Dialog>
   );
 }
diff --git a/src/app/ui/components/containers/dialog/dialog.tsx b/src/app/ui/components/containers/dialog/dialog.tsx
index 371ba7e0551..a4e3b1d9831 100644
--- a/src/app/ui/components/containers/dialog/dialog.tsx
+++ b/src/app/ui/components/containers/dialog/dialog.tsx
@@ -26,7 +26,6 @@ export function BigTitle({ title }: { title: string }) {
 
 export interface DialogProps {
   children?: ReactNode;
-  header?: ReactNode;
   footer?: ReactNode;
   isShowing: boolean;
   isWaitingOnPerformedAction?: boolean;
@@ -75,33 +74,20 @@ export const Dialog = memo(
                 animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
               })}
             >
-              {/* PETE check this for onboarding as the header spacing should be space.04 and not space.05 */}
-              {/* {header ? (
-                  header
-                ) : ( */}
-
               {title && (
                 <Header
                   variant="page"
                   isWaitingOnPerformedAction={isWaitingOnPerformedAction}
                   onClose={onClose}
-                  // onGoBack={onGoBack}
                   title={isString(title) ? <Title title={title} /> : title}
                 />
               )}
 
-              {/* TODO - test this cross browser and remove if repaced by global.ts
-                
-                  Probably is needed for account selector
-                   */}
               <Box
                 className={css({
-                  // height: '520px',
-                  // maxHeight: 'fit-content',
                   height: 'dialogContentHeight',
                   maxHeight: 'dialogContentHeight',
                   paddingX: 'space.05',
-                  // overflowY: 'scroll',
                   overflowY: 'auto',
                   '&::-webkit-scrollbar': {
                     display: 'none',
diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
index 0beede13938..3170bea966a 100644
--- a/src/app/ui/components/containers/headers/header.tsx
+++ b/src/app/ui/components/containers/headers/header.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 
-import { AppVersion } from '@app/components/app-version';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { CloseIcon } from '@app/ui/components/icons/close-icon';
 
@@ -27,7 +26,7 @@ export interface HeaderProps {
 }
 
 export function Header({
-  variant = 'page',
+  variant,
   // enableGoBack,
   isWaitingOnPerformedAction,
   onClose,
@@ -61,7 +60,6 @@ export function Header({
               />
             ) : undefined}
             {account ? account : logo}
-            <AppVersion />
           </Flex>
         )}
         {title}