diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx index 8837ab00e8e..2bbeb808a60 100644 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx +++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/Available.tsx @@ -1,18 +1,16 @@ -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'; @@ -20,27 +18,8 @@ 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 = () => ( - - - - - - -); - interface AvailableProps { onCancel: () => void; latest: UpdateInfo | undefined; @@ -85,45 +64,45 @@ export const Available = ({ onCancel, latest }: AvailableProps) => { } > - -
- + + +

- +

-
+ - + {latest?.changelog ? ( {latest?.changelog} ) : ( )} - + - - {latest?.releaseDate && ( - - - - )} - + {latest?.releaseDate && ( + + + + )} - - + + - - - + + + + + diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx index 475e61bfc52..2df5ac1f029 100644 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx +++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/Downloading.tsx @@ -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; @@ -53,28 +31,25 @@ export const Downloading = ({ hideWindow, progress }: DownloadingProps) => { } > - - - {progress?.verifying ? ( - - - {ellipsisArray.filter((_, k) => k < step)} - - ) : ( - <> - - + + {progress?.verifying ? ( +

+ + {ellipsisArray.filter((_, k) => k < step)} +

+ ) : ( + +

+ +

+ + + {bytesToHumanReadable(progress?.transferred || 0)} - - - {bytesToHumanReadable(progress?.transferred || 0)} - - /{bytesToHumanReadable(progress?.total || 0)} - - - )} - - + /{bytesToHumanReadable(progress?.total || 0)} + + + )} diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx index 10ca9f2cec2..e273a4d31ae 100644 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx +++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx @@ -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'; @@ -53,12 +46,12 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => { heading={} bottomContent={ <> - - + } > @@ -79,20 +72,20 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => { bottomContent={ <> - + - + } > - - + +

- +

diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx index 4b2a33af618..013eb305625 100644 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx +++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx @@ -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, @@ -57,16 +57,16 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => { onCancel={hideWindow} bottomContent={ <> - - + } > @@ -84,25 +84,23 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => { !understood && } > - + } > - - + +

- +

- void; } @@ -46,15 +43,13 @@ export const JustUpdated = ({ onCancel }: AvailableProps) => { } > - - - {changelog !== null ? ( - {changelog} - ) : ( - - )} - - + + {changelog !== null ? ( + {changelog} + ) : ( + + )} + ); }; diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx index 7f2d0a92a8c..4510b7d8064 100644 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx +++ b/packages/suite-desktop-ui/src/support/DesktopUpdater/Ready.tsx @@ -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'; @@ -33,9 +33,9 @@ export const Ready = ({ hideWindow }: ReadyProps) => { } > - +

- +

diff --git a/packages/suite-desktop-ui/src/support/DesktopUpdater/changelogComponents.tsx b/packages/suite-desktop-ui/src/support/DesktopUpdater/changelogComponents.tsx deleted file mode 100644 index ecc7a2be2b8..00000000000 --- a/packages/suite-desktop-ui/src/support/DesktopUpdater/changelogComponents.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ReactNode } from 'react'; - -import styled from 'styled-components'; - -import { borders, Elevation, mapElevationToBackground, spacingsPx } from '@trezor/theme'; -import { useElevation } from '@trezor/components'; - -const ChangelogWrapper = styled.div<{ $elevation: Elevation }>` - background-color: ${({ theme, $elevation }) => mapElevationToBackground({ theme, $elevation })}; - border-radius: ${borders.radii.md}; - max-height: 400px; - overflow-y: auto; - padding: ${spacingsPx.md} ${spacingsPx.xl}; -`; - -export const Changelog = ({ children }: { children: ReactNode }) => { - const { elevation } = useElevation(); - - return {children}; -};