1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 03:20:23 +01:00

Part of #18714: Replacing deprecated constants (#20003)

* replacing deprecated constants

* updating Box in player.js

* created story for Player.js
This commit is contained in:
Dhruv 2023-07-19 15:08:06 +05:30 committed by GitHub
parent 821888effd
commit 674bb131b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 16 deletions

View File

@ -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={{

View File

@ -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';

View File

@ -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}

View File

@ -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}

View File

@ -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">