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

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
View File

@ -2,16 +2,15 @@ import React, { useEffect, useMemo, useState } from 'react';
import QRCode from 'qrcode.react'; import QRCode from 'qrcode.react';
import { UR, UREncoder } from '@ngraveio/bc-ur'; import { UR, UREncoder } from '@ngraveio/bc-ur';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Box from '../../../ui/box';
import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useI18nContext } from '../../../../hooks/useI18nContext';
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
FLEX_DIRECTION, FlexDirection,
TextAlign, TextAlign,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import { PageContainerFooter } from '../../../ui/page-container'; 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 Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
const t = useI18nContext(); const t = useI18nContext();
@ -39,9 +38,9 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
<Box <Box
paddingTop={4} paddingTop={4}
paddingBottom={4} paddingBottom={4}
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FlexDirection.Column}
> >
<div <div
style={{ style={{

29
ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.stories.js Normal file
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';

7
ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
View File

@ -1,18 +1,17 @@
import React from 'react'; import React from 'react';
import { import {
DISPLAY, Display,
AlignItems, AlignItems,
Color, Color,
JustifyContent, JustifyContent,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box'; import { Icon, IconName, Box } from '../../../component-library';
import { Icon, IconName } from '../../../component-library';
const SignatureRequestSIWEIcon = () => { const SignatureRequestSIWEIcon = () => {
return ( return (
<Box <Box
className="signature-request-siwe-icon" className="signature-request-siwe-icon"
display={DISPLAY.INLINE_FLEX} display={Display.InlineFlex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={Color.errorDefault} backgroundColor={Color.errorDefault}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}

4
ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { import {
TextVariant, TextVariant,
Size, Size,
DISPLAY, Display,
AlignItems, AlignItems,
BackgroundColor, BackgroundColor,
TextColor, TextColor,
@ -16,7 +16,7 @@ const SignatureRequestSIWETag = ({ text }) => {
<Box <Box
className="signature-request-siwe-tag" className="signature-request-siwe-tag"
marginRight={1} marginRight={1}
display={DISPLAY.INLINE_FLEX} display={Display.InlineFlex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
backgroundColor={BackgroundColor.errorDefault} backgroundColor={BackgroundColor.errorDefault}
borderRadius={Size.XL} borderRadius={Size.XL}

7
ui/components/app/tab-bar/tab-bar.js
View File

@ -2,12 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, IconName, IconSize } from '../../component-library'; import { Icon, IconName, IconSize, Box } from '../../component-library';
import Box from '../../ui/box';
import { import {
BorderRadius, BorderRadius,
Color, Color,
DISPLAY, Display,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
const TabBar = (props) => { const TabBar = (props) => {
@ -33,7 +32,7 @@ const TabBar = (props) => {
className="tab-bar__tab__selected-indicator" className="tab-bar__tab__selected-indicator"
borderRadius={BorderRadius.pill} borderRadius={BorderRadius.pill}
backgroundColor={Color.primaryDefault} backgroundColor={Color.primaryDefault}
display={[DISPLAY.NONE, DISPLAY.BLOCK]} display={[Display.None, Display.Block]}
/> />
)} )}
<div className="tab-bar__tab__content"> <div className="tab-bar__tab__content">