Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(suite): refactor updates modals #15929

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+77 −157
Open

chore(suite): refactor updates modals #15929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 25 additions & 46 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,25 @@
import styled from 'styled-components';

import {
Card,
Checkbox,
Badge,
Column,
Icon,
Markdown,
NewModal,
Paragraph,
Row,
Text,
H4,
} from '@trezor/components';
import { desktopApi, UpdateInfo } from '@trezor/suite-desktop-api';
import { borders, spacings, spacingsPx } from '@trezor/theme';
import { spacings } from '@trezor/theme';

import { FormattedDate, Translation } from 'src/components/suite';
import { useDispatch, useSelector } from 'src/hooks/suite';
import { download } from 'src/actions/suite/desktopUpdateActions';
import { selectSuiteFlags } from 'src/reducers/suite/suiteReducer';
import { setFlag } from 'src/actions/suite/suiteActions';

import { Changelog } from './changelogComponents';
import { getVersionName } from './getVersionName';

const GreenTag = styled.div`
display: flex;
align-items: center;
gap: ${spacingsPx.xxs};
border-radius: ${borders.radii.full};
background-color: ${({ theme }) => theme.backgroundPrimarySubtleOnElevation0};
padding: ${spacingsPx.xxxs} ${spacingsPx.xs};
`;

const NewTag = () => (
<GreenTag>
<Icon name="sparkleFilled" variant="primary" size="small" />
<Text variant="primary">
<Translation id="TR_UPDATE_MODAL_ENABLE_AUTO_UPDATES_NEW_TAG" />
</Text>
</GreenTag>
);

interface AvailableProps {
onCancel: () => void;
latest: UpdateInfo | undefined;
Expand Down Expand Up @@ -85,45 +64,45 @@ export const Available = ({ onCancel, latest }: AvailableProps) => {
</>
}
>
<Column gap={spacings.xs} alignItems="start">
<div>
<Paragraph typographyStyle="highlight" variant="primary">
<Column gap={spacings.md}>
<Column>
<H4>
<Translation
id="TR_VERSION_HAS_BEEN_RELEASED"
values={{ version: suiteNewVersion }}
/>
</Paragraph>
</H4>
<Paragraph typographyStyle="hint" variant="tertiary">
<Translation id="TR_WERE_CONSTANTLY_WORKING_TO_IMPROVE" />
</Paragraph>
</div>
</Column>

<Changelog>
<Card maxHeight={400} overflow="auto">
{latest?.changelog ? (
<Markdown>{latest?.changelog}</Markdown>
) : (
<Translation id="TR_COULD_NOT_RETRIEVE_CHANGELOG" />
)}
</Changelog>
</Card>

<Row justifyContent="end" width="100%">
{latest?.releaseDate && (
<Text variant="tertiary">
<FormattedDate value={latest.releaseDate} date month="long" />
</Text>
)}
</Row>
{latest?.releaseDate && (
<Paragraph variant="tertiary" align="right">
<FormattedDate value={latest.releaseDate} date month="long" />
</Paragraph>
)}

<Card>
<Row justifyContent="start" gap={spacings.xs}>
<Checkbox
isChecked={enableAutoupdateOnNextRun}
onClick={handleToggleAutoUpdateClick}
>
<Checkbox
isChecked={enableAutoupdateOnNextRun}
onClick={handleToggleAutoUpdateClick}
>
<Row gap={spacings.xs}>
<Translation id="TR_UPDATE_MODAL_ENABLE_AUTO_UPDATES" />
</Checkbox>
<NewTag />
</Row>
<Badge icon="sparkleFilled" variant="primary">
<Translation id="TR_UPDATE_MODAL_ENABLE_AUTO_UPDATES_NEW_TAG" />
</Badge>
</Row>
Comment on lines +101 to +103
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you remove this tag? The feature is not new anymore.

</Checkbox>
</Card>
</Column>
</NewModal>
Expand Down
63 changes: 19 additions & 44 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,12 @@
import { useEffect, useState } from 'react';

import styled from 'styled-components';

import { UpdateProgress } from '@trezor/suite-desktop-api';
import { bytesToHumanReadable } from '@trezor/utils';
import { H2, NewModal, ProgressBar, variables, Row, Column } from '@trezor/components';
import { H3, NewModal, ProgressBar, Row, Column, Text } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { Translation } from 'src/components/suite';

const DownloadProgress = styled.span`
font-size: 20px;
font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
`;

const ReceivedData = styled.span`
color: ${({ theme }) => theme.legacy.TYPE_GREEN};
`;

const TotalData = styled.span`
color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const Text = styled(H2)`
color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
font-weight: ${variables.FONT_WEIGHT.MEDIUM};
`;

interface DownloadingProps {
hideWindow: () => void;
progress?: UpdateProgress;
Expand All @@ -53,28 +31,25 @@ export const Downloading = ({ hideWindow, progress }: DownloadingProps) => {
</NewModal.Button>
}
>
<Column alignItems="start" gap={spacings.md}>
<Row margin={{ top: spacings.md }} justifyContent="space-between" width="100%">
{progress?.verifying ? (
<Text>
<Translation id="TR_VERIFYING_SIGNATURE" />
{ellipsisArray.filter((_, k) => k < step)}
</Text>
) : (
<>
<Text>
<Translation id="TR_DOWNLOADING" />
<Column gap={spacings.md} margin={{ top: spacings.md }}>
{progress?.verifying ? (
<H3>
<Translation id="TR_VERIFYING_SIGNATURE" />
{ellipsisArray.filter((_, k) => k < step)}
</H3>
) : (
<Row justifyContent="space-between">
<H3>
<Translation id="TR_DOWNLOADING" />
</H3>
<Text variant="tertiary" typographyStyle="titleSmall">
<Text variant="primary">
{bytesToHumanReadable(progress?.transferred || 0)}
</Text>
<DownloadProgress>
<ReceivedData>
{bytesToHumanReadable(progress?.transferred || 0)}
</ReceivedData>
/<TotalData>{bytesToHumanReadable(progress?.total || 0)}</TotalData>
</DownloadProgress>
</>
)}
</Row>

/{bytesToHumanReadable(progress?.total || 0)}
</Text>
</Row>
)}
<ProgressBar value={progress?.percent || 0} />
</Column>
</NewModal>
Expand Down
31 changes: 12 additions & 19 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,7 @@ import { useTheme } from 'styled-components';
import { SUITE_URL } from '@trezor/urls';
import { analytics, EventType } from '@trezor/suite-analytics';
import { desktopApi } from '@trezor/suite-desktop-api';
import {
Button,
Column,
NewModal,
Paragraph,
IconCircleColors,
IconCircle,
} from '@trezor/components';
import { Column, NewModal, Paragraph, IconCircleColors, IconCircle, H4 } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { Translation, TrezorLink } from 'src/components/suite';
Expand Down Expand Up @@ -53,12 +46,12 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
heading={<Translation id="TR_EARLY_ACCESS" />}
bottomContent={
<>
<Button onClick={allowPrerelease}>
<NewModal.Button onClick={allowPrerelease}>
<Translation id="TR_EARLY_ACCESS_DISABLE" />
</Button>
<Button onClick={hideWindow} variant="tertiary">
</NewModal.Button>
<NewModal.Button onClick={hideWindow} variant="tertiary">
<Translation id="TR_EARLY_ACCESS_STAY_IN" />
</Button>
</NewModal.Button>
</>
}
>
Expand All @@ -79,20 +72,20 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
bottomContent={
<>
<TrezorLink variant="nostyle" href={SUITE_URL}>
<Button icon="arrowUpRight" iconAlignment="right" variant="primary">
<NewModal.Button icon="arrowUpRight" iconAlignment="right">
<Translation id="TR_EARLY_ACCESS_REINSTALL" />
</Button>
</NewModal.Button>
</TrezorLink>
<Button onClick={hideWindow} variant="tertiary">
<NewModal.Button onClick={hideWindow} variant="tertiary">
<Translation id="TR_EARLY_ACCESS_SKIP_REINSTALL" />
</Button>
</NewModal.Button>
</>
}
>
<Column gap={spacings.xs} alignItems="start">
<Paragraph typographyStyle="highlight">
<Column gap={spacings.xs}>
<H4>
<Translation id="TR_EARLY_ACCESS_LEFT_TITLE" />
</Paragraph>
</H4>
<Paragraph variant="tertiary">
<Translation id="TR_EARLY_ACCESS_LEFT_DESCRIPTION" />
</Paragraph>
Expand Down
22 changes: 10 additions & 12 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { useTheme } from 'styled-components';
import { analytics, EventType } from '@trezor/suite-analytics';
import { desktopApi } from '@trezor/suite-desktop-api';
import {
Button,
Paragraph,
Tooltip,
NewModal,
H4,
Card,
Column,
IconCircleColors,
Expand Down Expand Up @@ -57,16 +57,16 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
onCancel={hideWindow}
bottomContent={
<>
<Button onClick={checkForUpdates}>
<NewModal.Button onClick={checkForUpdates}>
<Translation id="TR_EARLY_ACCESS_CHECK_UPDATE" />
</Button>
<Button
</NewModal.Button>
<NewModal.Button
onClick={hideWindow}
variant="tertiary"
data-testid="@settings/early-access-skip-button"
>
<Translation id="TR_EARLY_ACCESS_SKIP_CHECK" />
</Button>
</NewModal.Button>
</>
}
>
Expand All @@ -84,25 +84,23 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
!understood && <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TOOLTIP" />
}
>
<Button
variant="primary"
<NewModal.Button
onClick={allowPrerelease}
isDisabled={!understood}
data-testid="@settings/early-access-confirm-button"
>
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM" />
</Button>
</NewModal.Button>
</Tooltip>
}
>
<Column gap={spacings.xs} alignItems="start">
<Paragraph typographyStyle="highlight">
<Column gap={spacings.xs}>
<H4>
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TITLE" />
</Paragraph>
</H4>
<Paragraph variant="tertiary">
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_DESCRIPTION" />
</Paragraph>

<Card>
<CheckItem
data-testid="@settings/early-access-confirm-check"
Expand Down
21 changes: 8 additions & 13 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/JustUpdated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { useState, useCallback, useEffect } from 'react';

import { Column, Markdown, NewModal, Paragraph } from '@trezor/components';
import { spacings } from '@trezor/theme';
import { Markdown, NewModal, Paragraph, Card } from '@trezor/components';

import { Translation } from 'src/components/suite';

import { Changelog } from './changelogComponents';

interface AvailableProps {
onCancel: () => void;
}
Expand Down Expand Up @@ -46,15 +43,13 @@ export const JustUpdated = ({ onCancel }: AvailableProps) => {
</>
}
>
<Column gap={spacings.xs} alignItems="start">
<Changelog>
{changelog !== null ? (
<Markdown>{changelog}</Markdown>
) : (
<Translation id="TR_COULD_NOT_RETRIEVE_CHANGELOG" />
)}
</Changelog>
</Column>
<Card maxHeight={400} overflow="auto">
{changelog !== null ? (
<Markdown>{changelog}</Markdown>
) : (
<Translation id="TR_COULD_NOT_RETRIEVE_CHANGELOG" />
)}
</Card>
</NewModal>
);
};
6 changes: 3 additions & 3 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, NewModal, Paragraph, Row } from '@trezor/components';
import { Button, NewModal, Paragraph, H4, Row } from '@trezor/components';
import { spacings } from '@trezor/theme';

import { Translation } from 'src/components/suite';
Expand Down Expand Up @@ -33,9 +33,9 @@ export const Ready = ({ hideWindow }: ReadyProps) => {
</Row>
}
>
<Paragraph typographyStyle="highlight" variant="primary">
<H4>
<Translation id="TR_UPDATE_MODAL_INSTALL_NOW_OR_LATER" />
</Paragraph>
</H4>
<Paragraph>
<Translation id="TR_UPDATE_MODAL_RESTART_NEEDED" />
</Paragraph>
Expand Down
Loading
Loading