Skip to content

Commit

Permalink
chore(suite): refactor updates modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamhavel
adamhavel committed Dec 12, 2024
1 parent ecbf01e commit 9283788
Show file tree
Hide file tree
Showing 7 changed files with 77 additions and 157 deletions.
71 changes: 25 additions & 46 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx
View file
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>
</Checkbox>
</Card>
</Column>
</NewModal>
Expand Down
63 changes: 19 additions & 44 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx
View file
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
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
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
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
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

0 comments on commit 9283788

Please sign in to comment.