mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-28 23:06:37 +01:00
* replacing deprecated constants * updating Box in player.js * created story for Player.js
This commit is contained in:
parent
821888effd
commit
674bb131b2
@ -2,16 +2,15 @@ import React, { useEffect, useMemo, useState } from 'react';
|
||||
import QRCode from 'qrcode.react';
|
||||
import { UR, UREncoder } from '@ngraveio/bc-ur';
|
||||
import PropTypes from 'prop-types';
|
||||
import Box from '../../../ui/box';
|
||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||
import {
|
||||
AlignItems,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Display,
|
||||
FlexDirection,
|
||||
TextAlign,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import { PageContainerFooter } from '../../../ui/page-container';
|
||||
import { Text } from '../../../component-library/text/deprecated';
|
||||
import { Text, Box } from '../../../component-library';
|
||||
|
||||
const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
|
||||
const t = useI18nContext();
|
||||
@ -39,9 +38,9 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
|
||||
<Box
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
display={DISPLAY.FLEX}
|
||||
display={Display.Flex}
|
||||
alignItems={AlignItems.center}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import Player from './player';
|
||||
|
||||
export default {
|
||||
title: 'Components/App/Player',
|
||||
component: Player,
|
||||
argTypes: {
|
||||
type: {
|
||||
control: 'text',
|
||||
},
|
||||
cbor: {
|
||||
control: 'text',
|
||||
},
|
||||
cancelQRHardwareSignRequest: {
|
||||
action: 'cancelQRHardwareSignRequest',
|
||||
},
|
||||
toRead: {
|
||||
action: 'toRead',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
type: 'abc',
|
||||
cbor: 'abc',
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <Player {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
@ -1,18 +1,17 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
DISPLAY,
|
||||
Display,
|
||||
AlignItems,
|
||||
Color,
|
||||
JustifyContent,
|
||||
} from '../../../../helpers/constants/design-system';
|
||||
import Box from '../../../ui/box';
|
||||
import { Icon, IconName } from '../../../component-library';
|
||||
import { Icon, IconName, Box } from '../../../component-library';
|
||||
|
||||
const SignatureRequestSIWEIcon = () => {
|
||||
return (
|
||||
<Box
|
||||
className="signature-request-siwe-icon"
|
||||
display={DISPLAY.INLINE_FLEX}
|
||||
display={Display.InlineFlex}
|
||||
alignItems={AlignItems.center}
|
||||
backgroundColor={Color.errorDefault}
|
||||
justifyContent={JustifyContent.center}
|
||||
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import {
|
||||
TextVariant,
|
||||
Size,
|
||||
DISPLAY,
|
||||
Display,
|
||||
AlignItems,
|
||||
BackgroundColor,
|
||||
TextColor,
|
||||
@ -16,7 +16,7 @@ const SignatureRequestSIWETag = ({ text }) => {
|
||||
<Box
|
||||
className="signature-request-siwe-tag"
|
||||
marginRight={1}
|
||||
display={DISPLAY.INLINE_FLEX}
|
||||
display={Display.InlineFlex}
|
||||
alignItems={AlignItems.center}
|
||||
backgroundColor={BackgroundColor.errorDefault}
|
||||
borderRadius={Size.XL}
|
||||
|
@ -2,12 +2,11 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Icon, IconName, IconSize } from '../../component-library';
|
||||
import Box from '../../ui/box';
|
||||
import { Icon, IconName, IconSize, Box } from '../../component-library';
|
||||
import {
|
||||
BorderRadius,
|
||||
Color,
|
||||
DISPLAY,
|
||||
Display,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
const TabBar = (props) => {
|
||||
@ -33,7 +32,7 @@ const TabBar = (props) => {
|
||||
className="tab-bar__tab__selected-indicator"
|
||||
borderRadius={BorderRadius.pill}
|
||||
backgroundColor={Color.primaryDefault}
|
||||
display={[DISPLAY.NONE, DISPLAY.BLOCK]}
|
||||
display={[Display.None, Display.Block]}
|
||||
/>
|
||||
)}
|
||||
<div className="tab-bar__tab__content">
|
||||
|
Loading…
Reference in New Issue
Block a user