From b790a2ce70171484f41d783f58ee2dff866d91fb Mon Sep 17 00:00:00 2001
From: Peter Sanderson <dierk.deidel@protonmail.com>
Date: Thu, 3 Oct 2024 14:28:51 +0200
Subject: [PATCH] chore: refactor Download and Ready mograde modals to use
 NewModal

---
 .../src/components/NewModal/NewModal.tsx      |  3 +-
 .../src/support/DesktopUpdater.tsx            | 13 ++--
 .../support/DesktopUpdater/Downloading.tsx    | 75 ++++++++-----------
 .../src/support/DesktopUpdater/Ready.tsx      | 43 ++++-------
 4 files changed, 53 insertions(+), 81 deletions(-)

diff --git a/packages/components/src/components/NewModal/NewModal.tsx b/packages/components/src/components/NewModal/NewModal.tsx
index 75886bba64f..616920f60ff 100644
--- a/packages/components/src/components/NewModal/NewModal.tsx
+++ b/packages/components/src/components/NewModal/NewModal.tsx
@@ -130,6 +130,7 @@ const _NewModalBase = ({
     iconComponent,
     onBackClick,
     onCancel,
+    isBackdropCancelable,
     'data-testid': dataTest = '@modal',
     ...rest
 }: NewModalProps) => {
@@ -142,7 +143,7 @@ const _NewModalBase = ({
     const hasHeader = onBackClick || onCancel || heading || description;
 
     useEvent('keydown', (e: KeyboardEvent) => {
-        if (onCancel && e.key === 'Escape') {
+        if (isBackdropCancelable && onCancel && e.key === 'Escape') {
             onCancel?.();
         }
     });
diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater.tsx
index 29e97868ea1..98b01928851 100644
--- a/packages/suite-desktop-ui/src/support/DesktopUpdater.tsx
+++ b/packages/suite-desktop-ui/src/support/DesktopUpdater.tsx
@@ -33,6 +33,9 @@ interface DesktopUpdaterProps {
 export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
     const dispatch = useDispatch();
     const { desktopUpdate } = useSelector(state => state);
+
+    const desktopUpdateState = desktopUpdate.state;
+
     const routeName = useSelector(selectRouteName);
 
     // Closing a modal opened by auto updater outside of device settings might confuse some users,
@@ -90,14 +93,14 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
         }
 
         // Non visible states
-        if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdate.state)) {
+        if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdateState)) {
             return false;
         }
 
         const isEarlyAccessState = [
             UpdateState.EarlyAccessDisable,
             UpdateState.EarlyAccessEnable,
-        ].includes(desktopUpdate.state);
+        ].includes(desktopUpdateState);
 
         // Enable to setup Early Access even after updater error (when desktopUpdate.latest is undefined).
         if (!isEarlyAccessState && !desktopUpdate.latest) {
@@ -105,10 +108,10 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
         }
 
         return true;
-    }, [desktopUpdate.modalVisibility, desktopUpdate.state, desktopUpdate.latest]);
+    }, [desktopUpdate.modalVisibility, desktopUpdateState, desktopUpdate.latest]);
 
     const getUpdateModal = () => {
-        switch (desktopUpdate.state) {
+        switch (desktopUpdateState) {
             case UpdateState.EarlyAccessEnable:
                 return <EarlyAccessEnable hideWindow={hideWindow} />;
             case UpdateState.EarlyAccessDisable:
@@ -124,7 +127,7 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
             case UpdateState.Downloading:
                 return <Downloading hideWindow={hideWindow} progress={desktopUpdate.progress} />;
             case UpdateState.Ready:
-                return <Ready hideWindow={hideWindow} isCancelable={isSettingsRoute} />;
+                return <Ready hideWindow={hideWindow} />;
             default:
                 return null;
         }
diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
index f7e1fb5d3f6..475e61bfc52 100644
--- a/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
+++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
@@ -4,15 +4,10 @@ import styled from 'styled-components';
 
 import { UpdateProgress } from '@trezor/suite-desktop-api';
 import { bytesToHumanReadable } from '@trezor/utils';
-import { Button, H2, ProgressBar, variables } from '@trezor/components';
+import { H2, NewModal, ProgressBar, variables, Row, Column } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { Translation, Modal } from 'src/components/suite';
-
-import { Row } from './styles';
-
-const DownloadWrapper = styled(Row)`
-    margin-top: 16px;
-`;
+import { Translation } from 'src/components/suite';
 
 const DownloadProgress = styled.span`
     font-size: 20px;
@@ -34,11 +29,6 @@ const Text = styled(H2)`
     font-weight: ${variables.FONT_WEIGHT.MEDIUM};
 `;
 
-// eslint-disable-next-line local-rules/no-override-ds-component
-const StyledProgressBar = styled(ProgressBar)`
-    margin-top: 16px;
-`;
-
 interface DownloadingProps {
     hideWindow: () => void;
     progress?: UpdateProgress;
@@ -56,42 +46,37 @@ export const Downloading = ({ hideWindow, progress }: DownloadingProps) => {
     }, [step]);
 
     return (
-        <Modal
-            headerComponent={
-                <Button
-                    size="small"
-                    variant="tertiary"
-                    icon="x"
-                    iconAlignment="right"
-                    onClick={hideWindow}
-                >
+        <NewModal
+            bottomContent={
+                <NewModal.Button variant="tertiary" onClick={hideWindow}>
                     <Translation id="TR_BACKGROUND_DOWNLOAD" />
-                </Button>
+                </NewModal.Button>
             }
-            onCancel={hideWindow}
         >
-            <DownloadWrapper>
-                {progress?.verifying ? (
-                    <Text>
-                        <Translation id="TR_VERIFYING_SIGNATURE" />
-                        {ellipsisArray.filter((_, k) => k < step)}
-                    </Text>
-                ) : (
-                    <>
+            <Column alignItems="start" gap={spacings.md}>
+                <Row margin={{ top: spacings.md }} justifyContent="space-between" width="100%">
+                    {progress?.verifying ? (
                         <Text>
-                            <Translation id="TR_DOWNLOADING" />
+                            <Translation id="TR_VERIFYING_SIGNATURE" />
+                            {ellipsisArray.filter((_, k) => k < step)}
                         </Text>
-                        <DownloadProgress>
-                            <ReceivedData>
-                                {bytesToHumanReadable(progress?.transferred || 0)}
-                            </ReceivedData>
-                            /<TotalData>{bytesToHumanReadable(progress?.total || 0)}</TotalData>
-                        </DownloadProgress>
-                    </>
-                )}
-            </DownloadWrapper>
-
-            <StyledProgressBar value={progress?.percent || 0} />
-        </Modal>
+                    ) : (
+                        <>
+                            <Text>
+                                <Translation id="TR_DOWNLOADING" />
+                            </Text>
+                            <DownloadProgress>
+                                <ReceivedData>
+                                    {bytesToHumanReadable(progress?.transferred || 0)}
+                                </ReceivedData>
+                                /<TotalData>{bytesToHumanReadable(progress?.total || 0)}</TotalData>
+                            </DownloadProgress>
+                        </>
+                    )}
+                </Row>
+
+                <ProgressBar value={progress?.percent || 0} />
+            </Column>
+        </NewModal>
     );
 };
diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx
index 071a4fea8f4..fc90908c5df 100644
--- a/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx
+++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx
@@ -1,31 +1,15 @@
-import styled from 'styled-components';
+import { Button, NewModal, Paragraph, Row } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 
-import { Button, H2, variables } from '@trezor/components';
-
-import { Translation, Modal } from 'src/components/suite';
+import { Translation } from 'src/components/suite';
 import { useDispatch } from 'src/hooks/suite';
 import { installUpdate } from 'src/actions/suite/desktopUpdateActions';
 
-const Description = styled.span`
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-    color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
-`;
-
-const StyledModal = styled(Modal)`
-    ${Modal.BottomBar} {
-        > * {
-            flex: 1;
-        }
-    }
-`;
-
 interface ReadyProps {
     hideWindow: () => void;
-    isCancelable: boolean;
 }
 
-export const Ready = ({ hideWindow, isCancelable }: ReadyProps) => {
+export const Ready = ({ hideWindow }: ReadyProps) => {
     const dispatch = useDispatch();
 
     const install = () => dispatch(installUpdate({ shouldInstallOnQuit: false }));
@@ -35,27 +19,26 @@ export const Ready = ({ hideWindow, isCancelable }: ReadyProps) => {
     };
 
     return (
-        <StyledModal
+        <NewModal
             heading={<Translation id="TR_UPDATE_MODAL_UPDATE_DOWNLOADED" />}
-            isCancelable={isCancelable}
             onCancel={installOnQuit}
-            bottomBarComponents={
-                <>
+            bottomContent={
+                <Row gap={spacings.xs}>
                     <Button onClick={installOnQuit} variant="tertiary">
                         <Translation id="TR_UPDATE_MODAL_UPDATE_ON_QUIT" />
                     </Button>
                     <Button onClick={install} variant="primary">
                         <Translation id="TR_UPDATE_MODAL_INSTALL_AND_RESTART" />
                     </Button>
-                </>
+                </Row>
             }
         >
-            <H2>
+            <Paragraph typographyStyle="highlight" variant="primary">
                 <Translation id="TR_UPDATE_MODAL_INSTALL_NOW_OR_LATER" />
-            </H2>
-            <Description>
+            </Paragraph>
+            <Paragraph>
                 <Translation id="TR_UPDATE_MODAL_RESTART_NEEDED" />
-            </Description>
-        </StyledModal>
+            </Paragraph>
+        </NewModal>
     );
 };