Skip to content

Commit

Permalink
fix: refactor EAP modals to NewModal with purple icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@peter-sanderson
peter-sanderson committed Oct 3, 2024
1 parent 171c7d6 commit 532d22e
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 104 deletions.
4 changes: 2 additions & 2 deletions packages/components/src/components/NewModal/NewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
withFrameProps,
} from '../../utils/frameProps';
import { TransientProps } from '../../utils/transientProps';
import { NewModalIcon } from './NewModalIcon';
import { NewModalIcon, type NewModalIconColors } from './NewModalIcon';

export const allowedNewModalFrameProps = ['height'] as const satisfies FramePropsKeys[];
type AllowedFrameProps = Pick<FrameProps, (typeof allowedNewModalFrameProps)[number]>;
Expand Down Expand Up @@ -247,4 +247,4 @@ NewModal.ModalBase = NewModalBase;
NewModal.Icon = NewModalIcon;

export { NewModal, NEW_MODAL_CONTENT_ID };
export type { NewModalProps, NewModalSize };
export type { NewModalProps, NewModalSize, NewModalIconColors };
92 changes: 47 additions & 45 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessDisable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,15 @@
import { useCallback, useState } from 'react';

import styled from 'styled-components';
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, Image } from '@trezor/components';
import { Button, Column, NewModal, Paragraph } from '@trezor/components';
import { spacings } from '@trezor/theme';
import { NewModalIconColors } from '@trezor/components';

import { Translation, Modal, TrezorLink } from 'src/components/suite';
import { DialogModal } from 'src/components/suite/modals/Modal/DialogRenderer';

import { ImageWrapper, Description, Title } from './styles';

export const Link = styled(TrezorLink)`
width: 100%;
`;

const StyledModal = styled(Modal)`
${Modal.BottomBar} {
> * {
flex: 1;
}
}
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const LinkButton = styled(Button)`
width: 100%;
`;
import { Translation, TrezorLink } from 'src/components/suite';

interface EarlyAccessDisableProps {
hideWindow: () => void;
Expand All @@ -36,6 +18,8 @@ interface EarlyAccessDisableProps {
export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
const [enabled, setEnabled] = useState(true);

const theme = useTheme();

const allowPrerelease = useCallback(() => {
analytics.report({
type: EventType.SettingsGeneralEarlyAccess,
Expand All @@ -47,9 +31,19 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
setEnabled(false);
}, []);

const purpleModalColorBranding: NewModalIconColors = {
foreground: theme.iconAlertPurple,
background: theme.backgroundAlertPurpleSubtleOnElevationNegative,
};

const eapIconComponent = <NewModal.Icon iconName="eap" iconColor={purpleModalColorBranding} />;

return enabled ? (
<StyledModal
bottomBarComponents={
<NewModal
iconComponent={eapIconComponent}
onCancel={hideWindow}
heading={<Translation id="TR_EARLY_ACCESS" />}
bottomContent={
<>
<Button onClick={allowPrerelease}>
<Translation id="TR_EARLY_ACCESS_DISABLE" />
Expand All @@ -60,33 +54,41 @@ export const EarlyAccessDisable = ({ hideWindow }: EarlyAccessDisableProps) => {
</>
}
>
<ImageWrapper>
<Image width={60} height={60} image="EARLY_ACCESS_DISABLE" />
</ImageWrapper>
<Title>
<Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_TITLE" />
</Title>
<Description>
<Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_DESCRIPTION" />
</Description>
</StyledModal>
<Column gap={spacings.xs} alignItems="start">
<Paragraph typographyStyle="highlight">
<Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_TITLE" />
</Paragraph>
<Paragraph variant="tertiary">
<Translation id="TR_EARLY_ACCESS_DISABLE_CONFIRM_DESCRIPTION" />
</Paragraph>
</Column>
</NewModal>
) : (
<DialogModal
icon="check"
bodyHeading={<Translation id="TR_EARLY_ACCESS_LEFT_TITLE" />}
body={<Translation id="TR_EARLY_ACCESS_LEFT_DESCRIPTION" />}
bottomBarComponents={
<NewModal
iconComponent={eapIconComponent}
onCancel={hideWindow}
heading={<Translation id="TR_EARLY_ACCESS" />}
bottomContent={
<>
<Link variant="nostyle" href={SUITE_URL}>
<LinkButton icon="arrowUpRight" iconAlignment="right">
<TrezorLink variant="nostyle" href={SUITE_URL}>
<Button icon="arrowUpRight" iconAlignment="right" variant="primary">
<Translation id="TR_EARLY_ACCESS_REINSTALL" />
</LinkButton>
</Link>
</Button>
</TrezorLink>
<Button onClick={hideWindow} variant="tertiary">
<Translation id="TR_EARLY_ACCESS_SKIP_REINSTALL" />
</Button>
</>
}
/>
>
<Column gap={spacings.xs} alignItems="start">
<Paragraph typographyStyle="highlight">
<Translation id="TR_EARLY_ACCESS_LEFT_TITLE" />
</Paragraph>
<Paragraph variant="tertiary">
<Translation id="TR_EARLY_ACCESS_LEFT_DESCRIPTION" />
</Paragraph>
</Column>
</NewModal>
);
};
109 changes: 52 additions & 57 deletions packages/suite-desktop-ui/src/support/DesktopUpdater/EarlyAccessEnable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,21 @@
import { useCallback, useState } from 'react';

import styled from 'styled-components';
import { useTheme } from 'styled-components';

import { analytics, EventType } from '@trezor/suite-analytics';
import { desktopApi } from '@trezor/suite-desktop-api';
import { Button, Paragraph, Tooltip, Image } from '@trezor/components';
import {
Button,
Paragraph,
Tooltip,
NewModal,
Card,
Column,
NewModalIconColors,
} from '@trezor/components';
import { spacings } from '@trezor/theme';

import { CheckItem, Translation, Modal } from 'src/components/suite';
import { DialogModal } from 'src/components/suite/modals/Modal/DialogRenderer';

import { Description, Divider } from './styles';

const DescriptionWrapper = styled.div`
display: flex;
`;

const DescriptionTextWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
margin-left: 20px;
text-align: left;
`;

// Checkbox has 80% max-width by default but it's nicer full width here.
const Checkbox = styled(CheckItem)`
max-width: 100%;
`;
import { CheckItem, Translation } from 'src/components/suite';

interface EarlyAccessEnableProps {
hideWindow: () => void;
Expand All @@ -37,6 +25,8 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
const [understood, setUnderstood] = useState(false);
const [enabled, setEnabled] = useState(false);

const theme = useTheme();

const allowPrerelease = useCallback(() => {
analytics.report({
type: EventType.SettingsGeneralEarlyAccess,
Expand All @@ -50,12 +40,19 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {

const checkForUpdates = useCallback(() => desktopApi.checkForUpdates(true), []);

const purpleModalColorBranding: NewModalIconColors = {
foreground: theme.iconAlertPurple,
background: theme.backgroundAlertPurpleSubtleOnElevationNegative,
};

const eapIconComponent = <NewModal.Icon iconName="eap" iconColor={purpleModalColorBranding} />;

return enabled ? (
<DialogModal
icon="check"
bodyHeading={<Translation id="TR_EARLY_ACCESS_JOINED_TITLE" />}
body={<Translation id="TR_EARLY_ACCESS_JOINED_DESCRIPTION" />}
bottomBarComponents={
<NewModal
iconComponent={eapIconComponent}
heading={<Translation id="TR_EARLY_ACCESS_JOINED_TITLE" />}
onCancel={hideWindow}
bottomContent={
<>
<Button onClick={checkForUpdates}>
<Translation id="TR_EARLY_ACCESS_CHECK_UPDATE" />
Expand All @@ -69,20 +66,23 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
</Button>
</>
}
/>
>
<Translation id="TR_EARLY_ACCESS_JOINED_DESCRIPTION" />
</NewModal>
) : (
<Modal
<NewModal
iconComponent={eapIconComponent}
heading={<Translation id="TR_EARLY_ACCESS" />}
isCancelable
onCancel={hideWindow}
bottomBarComponents={
bottomContent={
<Tooltip
maxWidth={285}
content={
!understood && <Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TOOLTIP" />
}
>
<Button
variant="primary"
onClick={allowPrerelease}
isDisabled={!understood}
data-testid="@settings/early-access-confirm-button"
Expand All @@ -92,29 +92,24 @@ export const EarlyAccessEnable = ({ hideWindow }: EarlyAccessEnableProps) => {
</Tooltip>
}
>
<DescriptionWrapper>
<Image width={60} height={60} image="EARLY_ACCESS" />
<DescriptionTextWrapper>
<Paragraph typographyStyle="highlight">
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TITLE" />
</Paragraph>
<Description>
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_DESCRIPTION" />
</Description>
</DescriptionTextWrapper>
</DescriptionWrapper>
<Divider />
<Checkbox
data-testid="@settings/early-access-confirm-check"
title={
<Paragraph typographyStyle="highlight">
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_CHECK" />
</Paragraph>
}
description=""
isChecked={understood}
onClick={() => setUnderstood(!understood)}
/>
</Modal>
<Column gap={spacings.xs} alignItems="start">
<Paragraph typographyStyle="highlight">
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_TITLE" />
</Paragraph>
<Paragraph variant="tertiary">
<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_DESCRIPTION" />
</Paragraph>

<Card>
<CheckItem
data-testid="@settings/early-access-confirm-check"
title={<Translation id="TR_EARLY_ACCESS_ENABLE_CONFIRM_CHECK" />}
description=""
isChecked={understood}
onClick={() => setUnderstood(!understood)}
/>
</Card>
</Column>
</NewModal>
);
};

0 comments on commit 532d22e

Please sign in to comment.