m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix: fix theme issues of desktop pairing page

Browse Source
This commit is contained in:
“Goktug 2023-03-10 13:22:51 +01:00 committed by Goktug Poyraz
parent 0f1b86a037
commit d2098e26ac
4 changed files with 206 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
shared/lib/error-utils.js
View File

@ -126,7 +126,9 @@ function disableDesktop(backgroundConnection) {
}
export function downloadDesktopApp() {
global.platform.openTab({ url: 'https://metamask.io/' });
global.platform.openTab({
url: 'https://github.com/MetaMask/metamask-desktop/releases',
});
}
export function downloadExtension() {

54
ui/pages/desktop-pairing/__snapshots__/desktop-pairing.test.js.snap
View File

@ -3,16 +3,13 @@
exports[`Desktop Pairing page should render otp component 1`] = `
<div>
<div
class="page-container__content"
class="box box--margin-right-2 box--margin-left-2 box--display-flex box--flex-direction-column box--align-items-center"
>
<div
class="desktop-pairing"
>
<div>
<div
class="box box--margin-top-12 box--margin-right-6 box--margin-left-6 box--display-flex box--flex-direction-column box--align-items-center box--text-align-center"
class="box box--margin-top-8 box--margin-bottom-8 box--display-flex box--flex-direction-row box--justify-content-center"
>
<svg
class="desktop-pairing__icon"
fill="currentColor"
height="64"
viewBox="0 0 64 39"
@ -93,27 +90,21 @@ exports[`Desktop Pairing page should render otp component 1`] = `
/>
</svg>
</div>
</div>
<div
class="desktop-pairing__title"
<h3
align="center"
class="box mm-text mm-text--heading-md mm-text--color-text-default box--flex-direction-row"
>
Pair with Desktop
</div>
<div
class="desktop-pairing__subtitle"
</h3>
<p
align="center"
class="box mm-text mm-text--body-md mm-text--color-text-default box--margin-top-2 box--flex-direction-row"
>
Open your MetaMask Desktop and type this code
</div>
</div>
</p>
<div
class="desktop-pairing"
>
<div
class="desktop-pairing__clickable"
class="box desktop-pairing__clickable box--margin-top-6 box--margin-bottom-6 box--flex-direction-row"
data-testid="desktop-pairing-otp-content"
>
<div
class="box box--margin-right-6 box--margin-left-6 box--display-flex box--flex-direction-column box--align-items-center box--text-align-center"
>
<div
class="desktop-pairing__tooltip-wrapper"
@ -127,15 +118,19 @@ exports[`Desktop Pairing page should render otp component 1`] = `
tabindex="0"
>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography desktop-pairing__otp typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
align="center"
class="box mm-text desktop-pairing__otp mm-text--body-md mm-text--color-text-default box--flex-direction-row"
>
123456
</p>
</div>
</div>
</div>
<div
class="box box--margin-top-4 box--margin-bottom-6 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
>
<p
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography desktop-pairing__countdown-timer typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
align="center"
class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--flex-direction-row"
>
<span>
@ -149,15 +144,16 @@ exports[`Desktop Pairing page should render otp component 1`] = `
</span>
</p>
<div
class="desktop-pairing__description"
</div>
<p
align="center"
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
If the pairing is successful, extension will restart and you'll have to re-enter your password.
</div>
</div>
</p>
</div>
<div
class="desktop-pairing__buttons"
class="box box--flex-direction-row box--width-1/2"
>
<button
class="button btn--rounded btn-primary"

100
ui/pages/desktop-pairing/desktop-pairing.component.js
View File

@ -3,19 +3,20 @@ import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import Button from '../../components/ui/button';
import { SECOND } from '../../../shared/constants/time';
import Typography from '../../components/ui/typography';
import { I18nContext } from '../../contexts/i18n';
import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing';
import {
TEXT_ALIGN,
TypographyVariant,
TextVariant,
DISPLAY,
AlignItems,
FLEX_DIRECTION,
BLOCK_SIZES,
JustifyContent,
} from '../../helpers/constants/design-system';
import Box from '../../components/ui/box/box';
import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
import Tooltip from '../../components/ui/tooltip';
import { Text } from '../../components/component-library';
export default function DesktopPairingPage({
generateDesktopOtp,
@ -75,19 +76,14 @@ export default function DesktopPairingPage({
const renderIcon = () => {
return (
<div>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
textAlign={TEXT_ALIGN.CENTER}
flexDirection={FLEX_DIRECTION.COLUMN}
marginLeft={6}
marginRight={6}
marginTop={12}
justifyContent={JustifyContent.center}
marginTop={8}
marginBottom={8}
>
<IconDesktopPairing size={64} />
<IconDesktopPairing className="desktop-pairing__icon" size={64} />
</Box>
</div>
);
};
@ -104,56 +100,68 @@ export default function DesktopPairingPage({
hideLoadingIndication();
return (
<div
<>
<Text variant={TextVariant.headingMd} align={TEXT_ALIGN.CENTER}>
{t('desktopPageTitle')}
</Text>
<Text
marginTop={2}
variant={TextVariant.bodyMd}
align={TEXT_ALIGN.CENTER}
>
{t('desktopPageSubTitle')}
</Text>
<Box
marginBottom={6}
marginTop={6}
className="desktop-pairing__clickable"
onClick={() => {
handleCopy(otp);
}}
data-testid="desktop-pairing-otp-content"
>
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
textAlign={TEXT_ALIGN.CENTER}
flexDirection={FLEX_DIRECTION.COLUMN}
marginLeft={6}
marginRight={6}
>
<Tooltip
wrapperClassName="desktop-pairing__tooltip-wrapper"
position="top"
title={copied ? t('copiedExclamation') : t('copyToClipboard')}
>
<Typography
align={TEXT_ALIGN.CENTER}
className="desktop-pairing__otp"
>
<Text align={TEXT_ALIGN.CENTER} className="desktop-pairing__otp">
{otp}
</Typography>
</Text>
</Tooltip>
</Box>
<Typography
variant={TypographyVariant.paragraph}
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
marginTop={4}
marginBottom={6}
>
<Text
variant={TextVariant.paragraph}
align={TEXT_ALIGN.CENTER}
className="desktop-pairing__countdown-timer"
>
{t('desktopPairingExpireMessage', [
<span className="desktop-pairing__countdown-timer-seconds" key={1}>
<span
className="desktop-pairing__countdown-timer-seconds"
key={1}
>
{getExpireDuration()}
</span>,
])}
</Typography>
<div className="desktop-pairing__description">
</Text>
</Box>
<Text align={TEXT_ALIGN.CENTER} variant={TextVariant.bodySm}>
{t('desktopPageDescription')}
</div>
</div>
</Text>
</Box>
</>
);
};
const renderFooter = () => {
return (
<div className="desktop-pairing__buttons">
<Box width={BLOCK_SIZES.HALF}>
<Button
type="primary"
rounded
@ -163,22 +171,22 @@ export default function DesktopPairingPage({
>
{t('done')}
</Button>
</div>
</Box>
);
};
return (
<div className="page-container__content">
<div className="desktop-pairing">
<Box
display={DISPLAY.FLEX}
flexDirection="column"
alignItems={AlignItems.center}
marginLeft={2}
marginRight={2}
>
{renderIcon()}
<div className="desktop-pairing__title">{t('desktopPageTitle')}</div>
<div className="desktop-pairing__subtitle">
{t('desktopPageSubTitle')}
</div>
</div>
<div className="desktop-pairing">{renderContent()}</div>
{renderContent()}
{renderFooter()}
</div>
</Box>
);
}

107
ui/pages/desktop-pairing/index.scss
View File

@ -3,126 +3,39 @@
flex-flow: column;
align-items: center;
padding: 0 30px 0;
max-width: 640px;
&__countdown-timer {
background: #f2f3f4;
border-radius: 15.5px;
padding: 7px 0 7px 0;
margin: 0 32px 0 32px;
background: var(--color-background-default);
border-radius: 16px;
padding: 8px 0;
font-size: 12px;
width: 240px;
}
&__countdown-timer-seconds {
color: var(--color-primary-default);
}
&__icon {
padding-top: 24px;
}
&__title {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 140.62%;
text-align: center;
color: #24292e;
padding-top: 24px;
}
&__subtitle,
&__description {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 140.62%;
text-align: center;
color: #000;
padding-top: 8px;
margin: 0 56px;
}
&__description {
margin: 18px 0;
}
&__otp {
font-style: normal;
font-weight: 500;
font-size: 48px;
line-height: 48px;
letter-spacing: 10px;
color: #000;
}
&__buttons {
display: flex;
width: 70%;
justify-content: space-between;
margin: auto;
}
&__tooltip-wrapper {
width: 100%;
}
&__clickable {
width: 100%;
&:hover {
&__clickable:hover {
cursor: pointer;
}
}
}
.desktop-pairing-warning {
font-style: normal;
font-weight: 400;
font-size: 14px;
&__close-button {
z-index: 1050;
font-size: 24px;
cursor: pointer;
&__close::after {
content: '\00D7';
font-size: 24px;
cursor: pointer;
position: relative;
float: right;
margin-top: -8px;
}
}
&__title {
font-weight: bold;
font-size: 16px;
}
&__text {
font-size: 0.875rem;
}
&__link {
color: var(--color-primary-default);
display: block;
cursor: pointer;
line-height: 100%;
font-size: 0.875rem;
padding: 0 0;
}
&__warning-content {
border-left: 5px solid var(--color-warning-default);
border-right: 0;
border-bottom: 0;
border-top: 0;
margin: 4px;
.icon {
position: absolute;
left: 5px;
top: 10px;
&__icon {
path {
fill: var(--color-text-default);
}
}
}