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 ;
case UpdateState.EarlyAccessDisable:
@@ -124,7 +127,7 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
case UpdateState.Downloading:
return ;
case UpdateState.Ready:
- return ;
+ return ;
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 (
-
+
-
+
}
- onCancel={hideWindow}
>
-
- {progress?.verifying ? (
-
-
- {ellipsisArray.filter((_, k) => k < step)}
-
- ) : (
- <>
+
+
+ {progress?.verifying ? (
-
+
+ {ellipsisArray.filter((_, k) => k < step)}
-
-
- {bytesToHumanReadable(progress?.transferred || 0)}
-
- /{bytesToHumanReadable(progress?.total || 0)}
-
- >
- )}
-
-
-
-
+ ) : (
+ <>
+
+
+
+
+
+ {bytesToHumanReadable(progress?.transferred || 0)}
+
+ /{bytesToHumanReadable(progress?.total || 0)}
+
+ >
+ )}
+
+
+
+
+
);
};
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 (
- }
- isCancelable={isCancelable}
onCancel={installOnQuit}
- bottomBarComponents={
- <>
+ bottomContent={
+
- >
+
}
>
-
+
-
-
+
+
-
-
+
+
);
};