1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Adds desktop pairing page story and fix suggestions

This commit is contained in:
Goktug Poyraz 2023-03-21 13:09:13 +01:00
parent c1b607bdba
commit 3a1bcf1446
4 changed files with 52 additions and 36 deletions

View File

@ -117,12 +117,12 @@ exports[`Desktop Pairing page should render otp component 1`] = `
style="display: inline;" style="display: inline;"
tabindex="0" tabindex="0"
> >
<p <h1
align="center" align="center"
class="box mm-text desktop-pairing__otp mm-text--body-md mm-text--color-text-default box--flex-direction-row" class="box mm-text desktop-pairing__otp mm-text--display-md mm-text--color-text-default box--flex-direction-row"
> >
123456 123456
</p> </h1>
</div> </div>
</div> </div>
<div <div
@ -130,7 +130,7 @@ exports[`Desktop Pairing page should render otp component 1`] = `
> >
<p <p
align="center" align="center"
class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--flex-direction-row" class="box mm-text desktop-pairing__countdown-timer mm-text--body-md mm-text--color-text-default box--padding-2 box--flex-direction-row box--background-color-background-default box--rounded-xl"
> >
<span> <span>
@ -153,12 +153,10 @@ exports[`Desktop Pairing page should render otp component 1`] = `
</p> </p>
</div> </div>
<div <div
class="box box--flex-direction-row box--width-1/2" class="box box--flex-direction-row"
> >
<button <button
class="button btn--rounded btn-primary" class="box mm-text mm-button-base mm-button-base--size-md mm-button-primary mm-text--body-md mm-text--color-primary-inverse box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-primary-default box--rounded-pill"
role="button"
tabindex="0"
> >
Done Done
</button> </button>

View File

@ -1,7 +1,6 @@
import React, { useState, useEffect, useRef, useContext } from 'react'; import React, { useState, useEffect, useRef, useContext } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Button from '../../components/ui/button';
import { SECOND } from '../../../shared/constants/time'; import { SECOND } from '../../../shared/constants/time';
import { I18nContext } from '../../contexts/i18n'; import { I18nContext } from '../../contexts/i18n';
import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing'; import IconDesktopPairing from '../../components/ui/icon/icon-desktop-pairing';
@ -10,13 +9,14 @@ import {
TextVariant, TextVariant,
DISPLAY, DISPLAY,
AlignItems, AlignItems,
BLOCK_SIZES,
JustifyContent, JustifyContent,
BackgroundColor,
BorderRadius,
} from '../../helpers/constants/design-system'; } from '../../helpers/constants/design-system';
import Box from '../../components/ui/box/box'; import Box from '../../components/ui/box/box';
import { useCopyToClipboard } from '../../hooks/useCopyToClipboard'; import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
import Tooltip from '../../components/ui/tooltip'; import Tooltip from '../../components/ui/tooltip';
import { Text } from '../../components/component-library'; import { Text, Button } from '../../components/component-library';
export default function DesktopPairingPage({ export default function DesktopPairingPage({
generateDesktopOtp, generateDesktopOtp,
@ -104,11 +104,7 @@ export default function DesktopPairingPage({
<Text variant={TextVariant.headingMd} align={TEXT_ALIGN.CENTER}> <Text variant={TextVariant.headingMd} align={TEXT_ALIGN.CENTER}>
{t('desktopPageTitle')} {t('desktopPageTitle')}
</Text> </Text>
<Text <Text marginTop={2} align={TEXT_ALIGN.CENTER}>
marginTop={2}
variant={TextVariant.bodyMd}
align={TEXT_ALIGN.CENTER}
>
{t('desktopPageSubTitle')} {t('desktopPageSubTitle')}
</Text> </Text>
<Box <Box
@ -125,7 +121,11 @@ export default function DesktopPairingPage({
position="top" position="top"
title={copied ? t('copiedExclamation') : t('copyToClipboard')} title={copied ? t('copiedExclamation') : t('copyToClipboard')}
> >
<Text align={TEXT_ALIGN.CENTER} className="desktop-pairing__otp"> <Text
align={TEXT_ALIGN.CENTER}
variant={TextVariant.displayMd}
className="desktop-pairing__otp"
>
{otp} {otp}
</Text> </Text>
</Tooltip> </Tooltip>
@ -137,9 +137,12 @@ export default function DesktopPairingPage({
marginBottom={6} marginBottom={6}
> >
<Text <Text
className="desktop-pairing__countdown-timer"
variant={TextVariant.paragraph} variant={TextVariant.paragraph}
align={TEXT_ALIGN.CENTER} align={TEXT_ALIGN.CENTER}
className="desktop-pairing__countdown-timer" backgroundColor={BackgroundColor.backgroundDefault}
borderRadius={BorderRadius.XL}
padding={2}
> >
{t('desktopPairingExpireMessage', [ {t('desktopPairingExpireMessage', [
<span <span
@ -161,10 +164,8 @@ export default function DesktopPairingPage({
const renderFooter = () => { const renderFooter = () => {
return ( return (
<Box width={BLOCK_SIZES.HALF}> <Box>
<Button <Button
type="primary"
rounded
onClick={() => { onClick={() => {
goBack(); goBack();
}} }}

View File

@ -0,0 +1,30 @@
import React from 'react';
import DesktopPairingPage from './desktop-pairing.component';
export default {
title: 'Pages/DesktopPairingPage',
component: DesktopPairingPage,
argTypes: {
showLoadingIndication: {
action: 'showLoadingIndication',
},
hideLoadingIndication: {
action: 'hideLoadingIndication',
},
generateDesktopOtp: {
action: 'generateDesktopOtp',
},
},
args: {
mostRecentOverviewPage: '/',
},
};
export const DefaultStory = (args) => {
const generateDesktopOtp = async () => Promise.resolve('123456');
return (
<DesktopPairingPage {...args} generateDesktopOtp={generateDesktopOtp} />
);
};
DefaultStory.storyName = 'Default';

View File

@ -1,27 +1,14 @@
.desktop-pairing { .desktop-pairing {
display: flex;
flex-flow: column;
align-items: center;
padding: 0 30px 0;
max-width: 640px;
&__countdown-timer { &__countdown-timer {
background: var(--color-background-default);
border-radius: 16px;
padding: 8px 0;
font-size: 12px; font-size: 12px;
width: 240px;
} }
&__countdown-timer-seconds { &__countdown-timer-seconds {
color: var(--color-primary-default); color: var(--color-primary-default);
min-width: 180px;
} }
&__otp { &__otp {
font-style: normal;
font-weight: 500;
font-size: 48px;
line-height: 48px;
letter-spacing: 10px; letter-spacing: 10px;
} }
@ -35,7 +22,7 @@
&__icon { &__icon {
path { path {
fill: var(--color-text-default); fill: var(--color-icon-default);
} }
} }
} }