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

Feat/18444/text align update app folder (#19216)

Browse Source 
* Update TEXT_ALIGN const to TextAlign enum

* update TEXT_ALIGN to TextAlign in app folder
This commit is contained in:
Garrett Bear 2023-05-23 12:29:14 -07:00 committed by GitHub
parent 9db971768b
commit ba90e57663
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/components/app/confirm-page-container/snaps/snap-insight.js
View File

@ -8,7 +8,7 @@ import {
AlignItems, AlignItems,
FLEX_DIRECTION, FLEX_DIRECTION,
JustifyContent, JustifyContent,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
TextVariant, TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
@ -53,7 +53,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
marginBottom={hasNoData && 12} marginBottom={hasNoData && 12}
alignItems={hasNoData && AlignItems.center} alignItems={hasNoData && AlignItems.center}
justifyContent={hasNoData && JustifyContent.center} justifyContent={hasNoData && JustifyContent.center}
textAlign={hasNoData && TEXT_ALIGN.CENTER} textAlign={hasNoData && TextAlign.Center}
className="snap-insight" className="snap-insight"
> >
{!loading && !error && ( {!loading && !error && (

4
ui/components/app/custom-spending-cap/custom-spending-cap.js
View File

@ -13,7 +13,7 @@ import {
AlignItems, AlignItems,
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
TEXT_ALIGN, TextAlign,
TextVariant, TextVariant,
JustifyContent, JustifyContent,
Size, Size,
@ -273,7 +273,7 @@ export default function CustomSpendingCap({
marginLeft="auto" marginLeft="auto"
paddingRight={4} paddingRight={4}
paddingBottom={2} paddingBottom={2}
textAlign={TEXT_ALIGN.END} textAlign={TextAlign.End}
className={classnames('custom-spending-cap__max', { className={classnames('custom-spending-cap__max', {
'custom-spending-cap__max--with-error-message': error, 'custom-spending-cap__max--with-error-message': error,
})} })}

4
ui/components/app/import-token-link/import-token-link.component.js
View File

@ -5,7 +5,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes';
import Button from '../../ui/button'; import Button from '../../ui/button';
import Box from '../../ui/box/box'; import Box from '../../ui/box/box';
import { TEXT_ALIGN } from '../../../helpers/constants/design-system'; import { TextAlign } from '../../../helpers/constants/design-system';
import { detectNewTokens } from '../../../store/actions'; import { detectNewTokens } from '../../../store/actions';
import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics';
import { import {
@ -33,7 +33,7 @@ export default function ImportTokenLink() {
Boolean(process.env.IN_TEST); Boolean(process.env.IN_TEST);
return ( return (
<Box className="import-token-link" textAlign={TEXT_ALIGN.CENTER}> <Box className="import-token-link" textAlign={TextAlign.Center}>
{isTokenDetectionAvailable && ( {isTokenDetectionAvailable && (
<> <>
<Button <Button

6
ui/components/app/ledger-instruction-field/ledger-instruction-field.js
View File

@ -23,7 +23,7 @@ import { BannerAlert, ButtonLink, Text } from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import { import {
SEVERITIES, SEVERITIES,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { import {
@ -150,7 +150,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
{renderInstructionStep( {renderInstructionStep(
<span> <span>
<ButtonLink <ButtonLink
textAlign={TEXT_ALIGN.LEFT} textAlign={TextAlign.Left}
onClick={async () => { onClick={async () => {
if (environmentTypeIsFullScreen) { if (environmentTypeIsFullScreen) {
window.location.reload(); window.location.reload();
@ -167,7 +167,7 @@ export default function LedgerInstructionField({ showDataInstruction }) {
{renderInstructionStep( {renderInstructionStep(
<span> <span>
<ButtonLink <ButtonLink
textAlign={TEXT_ALIGN.LEFT} textAlign={TextAlign.Left}
onClick={async () => { onClick={async () => {
if (environmentTypeIsFullScreen) { if (environmentTypeIsFullScreen) {
const connectedDevices = const connectedDevices =

12
ui/components/app/nfts-tab/nfts-tab.js
View File

@ -9,10 +9,10 @@ import NftsDetectionNotice from '../nfts-detection-notice';
import NftsItems from '../nfts-items'; import NftsItems from '../nfts-items';
import { import {
TypographyVariant, TypographyVariant,
TEXT_ALIGN, TextAlign,
JustifyContent, JustifyContent,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT, FontWeight,
AlignItems, AlignItems,
TextColor, TextColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -76,8 +76,8 @@ export default function NftsTab({ onAddNFT }) {
<Typography <Typography
color={TextColor.textMuted} color={TextColor.textMuted}
variant={TypographyVariant.H4} variant={TypographyVariant.H4}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{t('noNFTs')} {t('noNFTs')}
</Typography> </Typography>
@ -101,7 +101,7 @@ export default function NftsTab({ onAddNFT }) {
<Typography <Typography
color={TextColor.textMuted} color={TextColor.textMuted}
variant={TypographyVariant.H5} variant={TypographyVariant.H5}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
> >
{t('missingNFT')} {t('missingNFT')}
</Typography> </Typography>
@ -128,7 +128,7 @@ export default function NftsTab({ onAddNFT }) {
<Typography <Typography
color={TextColor.textMuted} color={TextColor.textMuted}
variant={TypographyVariant.H6} variant={TypographyVariant.H6}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
> >
{t('or')} {t('or')}
</Typography> </Typography>

8
ui/components/app/signature-request-original/signature-request-original.component.js
View File

@ -20,8 +20,8 @@ import Typography from '../../ui/typography/typography';
import { PageContainerFooter } from '../../ui/page-container'; import { PageContainerFooter } from '../../ui/page-container';
import { import {
TypographyVariant, TypographyVariant,
FONT_WEIGHT, FontWeight,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi) ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
IconColor, IconColor,
@ -210,7 +210,7 @@ export default class SignatureRequestOriginal extends Component {
<Typography <Typography
className="request-signature__content__title" className="request-signature__content__title"
variant={TypographyVariant.H3} variant={TypographyVariant.H3}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{this.context.t('sigRequest')} {this.context.t('sigRequest')}
</Typography> </Typography>
@ -218,7 +218,7 @@ export default class SignatureRequestOriginal extends Component {
className="request-signature__content__subtitle" className="request-signature__content__subtitle"
variant={TypographyVariant.H7} variant={TypographyVariant.H7}
color={TextColor.textAlternative} color={TextColor.textAlternative}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
margin={12} margin={12}
marginTop={3} marginTop={3}
> >

8
ui/components/app/signature-request/signature-request.component.js
View File

@ -17,8 +17,8 @@ import Typography from '../../ui/typography/typography';
import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal'; import ContractDetailsModal from '../modals/contract-details-modal/contract-details-modal';
import { import {
TypographyVariant, TypographyVariant,
FONT_WEIGHT, FontWeight,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi) ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
IconColor, IconColor,
@ -306,7 +306,7 @@ export default class SignatureRequest extends PureComponent {
<Typography <Typography
className="signature-request__content__title" className="signature-request__content__title"
variant={TypographyVariant.H3} variant={TypographyVariant.H3}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
boxProps={{ boxProps={{
marginTop: 4, marginTop: 4,
}} }}
@ -317,7 +317,7 @@ export default class SignatureRequest extends PureComponent {
className="request-signature__content__subtitle" className="request-signature__content__subtitle"
variant={TypographyVariant.H7} variant={TypographyVariant.H7}
color={TextColor.textAlternative} color={TextColor.textAlternative}
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
margin={12} margin={12}
marginTop={3} marginTop={3}
> >

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

@ -9,7 +9,7 @@ import {
BackgroundColor, BackgroundColor,
IconColor, IconColor,
TextVariant, TextVariant,
TEXT_ALIGN, TextAlign,
Size, Size,
JustifyContent, JustifyContent,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
@ -86,13 +86,13 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
</Box> </Box>
<Text <Text
paddingBottom={6} paddingBottom={6}
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
variant={TextVariant.headingSm} variant={TextVariant.headingSm}
as="h2" as="h2"
> >
{t('snapInstallWarningHeading')} {t('snapInstallWarningHeading')}
</Text> </Text>
<Text paddingBottom={6} textAlign={TEXT_ALIGN.CENTER}> <Text paddingBottom={6} textAlign={TextAlign.Center}>
{warnings.length > 1 {warnings.length > 1
? t('snapInstallWarningCheckPlural') ? t('snapInstallWarningCheckPlural')
: t('snapInstallWarningCheck')} : t('snapInstallWarningCheck')}

10
ui/components/app/transaction-detail-item/transaction-detail-item.component.js
View File

@ -5,12 +5,12 @@ import classnames from 'classnames';
import Typography from '../../ui/typography/typography'; import Typography from '../../ui/typography/typography';
import { import {
Color, Color,
FONT_WEIGHT, FontWeight,
TypographyVariant, TypographyVariant,
DISPLAY, DISPLAY,
FLEX_WRAP, FLEX_WRAP,
AlignItems, AlignItems,
TEXT_ALIGN, TextAlign,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
export default function TransactionDetailItem({ export default function TransactionDetailItem({
@ -28,7 +28,7 @@ export default function TransactionDetailItem({
<div className="transaction-detail-item__row"> <div className="transaction-detail-item__row">
<Typography <Typography
color={detailTitleColor} color={detailTitleColor}
fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL} fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
variant={TypographyVariant.H6} variant={TypographyVariant.H6}
boxProps={{ boxProps={{
display: DISPLAY.FLEX, display: DISPLAY.FLEX,
@ -54,12 +54,12 @@ export default function TransactionDetailItem({
)} )}
<Typography <Typography
color={Color.textDefault} color={Color.textDefault}
fontWeight={boldHeadings ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL} fontWeight={boldHeadings ? FontWeight.Bold : FontWeight.Normal}
variant={TypographyVariant.H6} variant={TypographyVariant.H6}
marginTop={1} marginTop={1}
marginBottom={1} marginBottom={1}
marginLeft={1} marginLeft={1}
boxProps={{ textAlign: TEXT_ALIGN.RIGHT }} boxProps={{ textAlign: TextAlign.Right }}
> >
{detailTotal} {detailTotal}
</Typography> </Typography>

4
ui/components/institutional/confirm-remove-jwt-modal/confirm-remove-jwt-modal.js
View File

@ -11,7 +11,7 @@ import Box from '../../ui/box';
import { import {
BorderRadius, BorderRadius,
DISPLAY, DISPLAY,
TEXT_ALIGN, TextAlign,
TextColor, TextColor,
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -102,7 +102,7 @@ const ConfirmRemoveJWT = ({
)} )}
<Text <Text
as="h6" as="h6"
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
variant={TextVariant.bodySm} variant={TextVariant.bodySm}
marginTop={2} marginTop={2}
> >

10
ui/components/institutional/transaction-failed-modal/transaction-failed.js
View File

@ -9,8 +9,8 @@ import {
BorderRadius, BorderRadius,
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT, FontWeight,
TEXT_ALIGN, TextAlign,
TextVariant, TextVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Text, Icon, IconName, IconSize } from '../../component-library'; import { Text, Icon, IconName, IconSize } from '../../component-library';
@ -43,8 +43,8 @@ const TransactionFailedModal = ({
<Text <Text
as="h1" as="h1"
variant={TextVariant.displayMd} variant={TextVariant.displayMd}
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
paddingTop={4} paddingTop={4}
paddingBottom={4} paddingBottom={4}
> >
@ -53,7 +53,7 @@ const TransactionFailedModal = ({
: `${t('transactionFailed')}!`} : `${t('transactionFailed')}!`}
</Text> </Text>
<Text <Text
textAlign={TEXT_ALIGN.CENTER} textAlign={TextAlign.Center}
variant={TextVariant.bodySm} variant={TextVariant.bodySm}
paddingTop={4} paddingTop={4}
paddingBottom={4} paddingBottom={4}