m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-21 17:37:01 +01:00
Code

AvatarIcon prod updates and some deprecated fixes (#20557)

Browse Source 
* AvatarIcon prod updates and some deprecated fixes

* fix flex display

* fix iconsize on props

* fix IconSize import

* IconSize

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Garrett Bear 2023-09-01 07:26:29 -07:00 committed by GitHub
parent acf386c609
commit 92f04eb6e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/app/permission-cell/permission-cell.js
View File

@ -13,6 +13,7 @@ import {
} from '../../../helpers/constants/design-system';
import {
AvatarIcon,
AvatarIconSize,
Icon,
IconName,
IconSize,
@ -77,7 +78,7 @@ const PermissionCell = ({
{typeof permissionIcon === 'string' ? (
<AvatarIcon
iconName={permissionIcon}
size={IconSize.Md}
size={AvatarIconSize.Md}
iconProps={{
size: IconSize.Sm,
}}

7
ui/components/app/snaps/install-error/install-error.js
View File

@ -16,7 +16,7 @@ import {
import {
AvatarIcon,
IconSize,
AvatarIconSize,
Text,
Box,
BannerAlert,
@ -35,10 +35,7 @@ const InstallError = ({ title, error, description, iconName }) => {
{iconName && (
<AvatarIcon
iconName={iconName}
size={IconSize.Xl}
iconProps={{
size: IconSize.Xl,
}}
size={AvatarIconSize.Xl}
color={IconColor.errorDefault}
backgroundColor={BackgroundColor.errorMuted}
marginBottom={4}

1
ui/components/app/snaps/snap-avatar/snap-avatar.js
View File

@ -50,7 +50,6 @@ const SnapAvatar = ({
borderColor={BackgroundColor.backgroundDefault}
borderWidth={borderWidth}
iconProps={{
size: badgeSize,
color: IconColor.infoInverse,
}}
/>

9
ui/components/app/snaps/snap-delineator/snap-delineator.js
View File

@ -10,12 +10,13 @@ import {
IconColor,
TextVariant,
TextColor,
Display,
} from '../../../../helpers/constants/design-system';
import Box from '../../../ui/box';
import {
AvatarIcon,
AvatarIconSize,
Box,
IconName,
IconSize,
Text,
} from '../../../component-library';
import {
@ -42,19 +43,19 @@ export const SnapDelineator = ({
>
<Box
className="snap-delineator__header"
display={Display.Flex}
alignItems={AlignItems.center}
padding={1}
>
<AvatarIcon
iconName={IconName.Snaps}
size={IconSize.Sm}
size={AvatarIconSize.Sm}
backgroundColor={
isError ? IconColor.errorDefault : IconColor.infoDefault
}
borderColor={BackgroundColor.backgroundDefault}
borderWidth={2}
iconProps={{
size: IconSize.Sm,
color: IconColor.infoInverse,
}}
/>

12
ui/components/app/snaps/snap-install-warning/snap-install-warning.js
View File

@ -10,14 +10,18 @@ import {
IconColor,
TextVariant,
TextAlign,
Size,
JustifyContent,
FontWeight,
} from '../../../../helpers/constants/design-system';
import Popover from '../../../ui/popover';
import Button from '../../../ui/button';
import { AvatarIcon, IconName, Text } from '../../../component-library';
import Box from '../../../ui/box/box';
import {
AvatarIcon,
AvatarIconSize,
Box,
IconName,
Text,
} from '../../../component-library';
/**
* a very simple reducer using produce from Immer to keep checkboxes state manipulation
@ -87,7 +91,7 @@ export default function SnapInstallWarning({
iconName={IconName.Danger}
backgroundColor={BackgroundColor.warningMuted}
color={IconColor.warningDefault}
size={Size.XL}
size={AvatarIconSize.Xl}
/>
</Box>
<Text

20
ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js
View File

@ -1,24 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Box from '../../../ui/box/box';
import Popover from '../../../ui/popover';
import {
AvatarIcon,
AvatarIconSize,
Box,
Button,
BUTTON_SIZES,
BUTTON_VARIANT,
ButtonLink,
ButtonLinkSize,
IconName,
IconSize,
Text,
} from '../../../component-library';
import {
AlignItems,
BackgroundColor,
BLOCK_SIZES,
DISPLAY,
BlockSize,
Display,
FontWeight,
IconColor,
JustifyContent,
@ -43,7 +43,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
<Box
marginTop={4}
className="snap-privacy-warning__header__info-icon"
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
@ -51,14 +51,14 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
iconName={IconName.Info}
color={IconColor.infoDefault}
backgroundColor={BackgroundColor.primaryMuted}
size={IconSize.Md}
size={AvatarIconSize.Md}
/>
</Box>
<Box
className="snap-privacy-warning__header__title"
marginTop={4}
marginBottom={4}
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.center}
alignItems={AlignItems.center}
>
@ -119,12 +119,12 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
<Box
className="snap-privacy-warning__footer"
marginTop={6}
display={DISPLAY.FLEX}
display={Display.Flex}
>
<Button
variant={BUTTON_VARIANT.SECONDARY}
size={BUTTON_SIZES.LG}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
className="snap-privacy-warning__cancel-button"
onClick={onCanceled}
marginRight={2}
@ -134,7 +134,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
<Button
variant={BUTTON_VARIANT.PRIMARY}
size={BUTTON_SIZES.LG}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
className="snap-privacy-warning__ok-button"
onClick={onAccepted}
marginLeft={2}

7
ui/components/app/transaction-icon/transaction-icon.js
View File

@ -7,11 +7,10 @@ import {
TransactionStatus,
} from '../../../../shared/constants/transaction';
import { captureSingleException } from '../../../store/actions';
import { AvatarIcon, IconName } from '../../component-library';
import { AvatarIcon, AvatarIconSize, IconName } from '../../component-library';
import {
BackgroundColor,
IconColor,
Size,
} from '../../../helpers/constants/design-system';
const ICON_MAP = {
@ -62,7 +61,7 @@ export default function TransactionIcon({ status, category }) {
return (
<AvatarIcon
backgroundColor={BackgroundColor.backgroundAlternative}
size={Size.MD}
size={AvatarIconSize.Md}
/>
);
}
@ -71,7 +70,7 @@ export default function TransactionIcon({ status, category }) {
<AvatarIcon
backgroundColor={backgroundColor}
iconName={Icon}
size={Size.MD}
size={AvatarIconSize.Md}
color={color}
/>
);

3
ui/helpers/utils/permission.js
View File

@ -16,6 +16,7 @@ import {
import Tooltip from '../../components/ui/tooltip';
import {
AvatarIcon,
AvatarIconSize,
///: BEGIN:ONLY_INCLUDE_IN(snaps)
Icon,
Text,
@ -44,7 +45,7 @@ function getLeftIcon(iconName) {
return (
<AvatarIcon
iconName={iconName}
size={IconSize.Sm}
size={AvatarIconSize.Sm}
iconProps={{
size: IconSize.Xs,
}}

37
ui/pages/permissions-connect/snaps/snap-result/snap-result.js
View File

@ -6,22 +6,20 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import Box from '../../../../components/ui/box/box';
import {
AlignItems,
BLOCK_SIZES,
BlockSize,
BorderStyle,
FLEX_DIRECTION,
FONT_WEIGHT,
FlexDirection,
FontWeight,
JustifyContent,
TextVariant,
BackgroundColor,
IconColor,
TextAlign,
FontWeight,
} from '../../../../helpers/constants/design-system';
import {
AvatarIcon,
AvatarIconSize,
IconName,
IconSize,
ValidTag,
Text,
} from '../../../../components/component-library';
import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
@ -64,25 +62,22 @@ export default function SnapResult({
return (
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
height={BLOCK_SIZES.FULL}
height={BlockSize.Full}
paddingTop={2}
paddingBottom={2}
>
<AvatarIcon
className="snap-result__header__icon"
iconName={IconName.Confirmation}
size={IconSize.Xl}
iconProps={{
size: IconSize.Xl,
}}
size={AvatarIconSize.Xl}
color={IconColor.successDefault}
backgroundColor={BackgroundColor.successMuted}
/>
<Text
fontWeight={FONT_WEIGHT.BOLD}
fontWeight={FontWeight.Bold}
variant={TextVariant.headingLg}
paddingBottom={2}
marginTop={4}
@ -91,7 +86,7 @@ export default function SnapResult({
</Text>
<Text textAlign={TextAlign.Center}>
{t('snapResultSuccessDescription', [
<Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
<Text as="span" key="1" fontWeight={FontWeight.Medium}>
{snapNameToRender}
</Text>,
])}
@ -108,7 +103,7 @@ export default function SnapResult({
case 'wallet_installSnap':
failedScreenTitle = t('snapInstallationErrorTitle');
failedScreenDescription = t('snapInstallationErrorDescription', [
<Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
<Text as="span" key="1" fontWeight={FontWeight.Medium}>
{snapNameToRender}
</Text>,
]);
@ -116,7 +111,7 @@ export default function SnapResult({
case 'wallet_updateSnap':
failedScreenTitle = t('snapUpdateErrorTitle');
failedScreenDescription = t('snapUpdateErrorDescription', [
<Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
<Text as="span" key="1" fontWeight={FontWeight.Medium}>
{snapNameToRender}
</Text>,
]);
@ -139,9 +134,9 @@ export default function SnapResult({
<Box
className="page-container snap-result"
justifyContent={JustifyContent.spaceBetween}
height={BLOCK_SIZES.FULL}
height={BlockSize.Full}
borderStyle={BorderStyle.none}
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
>
<SnapAuthorshipHeader snapId={targetSubjectMetadata.origin} />
<Box
@ -149,7 +144,7 @@ export default function SnapResult({
paddingLeft={4}
paddingRight={4}
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
style={{
overflowY: 'auto',
}}
@ -157,7 +152,7 @@ export default function SnapResult({
{isLoading && (
<Box
className="snap-result__content__loader-container"
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
@ -172,7 +167,7 @@ export default function SnapResult({
<Box
className="snap-result__footer"
alignItems={AlignItems.center}
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
style={{
boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
}}