1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Part of #17670 , #18714 & #18651 for 3 files. (#18752)

* Adding strong tag support for Text component

* Update build-quote.js

* Update awaiting-signatures.js

* Used <strong> tag in a better way.

* Remove <strong> tag from file: awaiting-signatures.js

Co-authored-by: Danica Shen <zhaodanica@gmail.com>

* Update awaiting-signatures.js

* Update ui/components/component-library/text/text.scss

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/pages/swaps/build-quote/build-quote.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Removing unintended UI and strong css from Text component

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Danica Shen <zhaodanica@gmail.com>
Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Harsh Shukla 2023-05-02 06:18:58 +05:30 committed by GitHub
parent 32a7f0fe09
commit f5f2e2e35f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 56 deletions

View File

@ -12,9 +12,9 @@ import {
BLOCK_SIZES,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
FontWeight,
JustifyContent,
TEXT_ALIGN,
TextAlign,
TextColor,
TextVariant,
} from '../../../helpers/constants/design-system';
@ -177,13 +177,13 @@ export default function ApproveContentCard({
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={AlignItems.flexEnd}
textAlign={TEXT_ALIGN.RIGHT}
textAlign={TextAlign.Right}
>
{useCurrencyRateCheck && (
<Box>
<Text
variant={TextVariant.headingSm}
fontWeight={FONT_WEIGHT.BOLD}
fontWeight={FontWeight.Bold}
color={TextColor.TEXT_DEFAULT}
as="h4"
>
@ -197,7 +197,7 @@ export default function ApproveContentCard({
<Box>
<Text
variant={TextVariant.bodySm}
fontWeight={FONT_WEIGHT.NORMAL}
fontWeight={FontWeight.Normal}
color={TextColor.textMuted}
as="h6"
>

View File

@ -21,12 +21,10 @@ import {
BUILD_QUOTE_ROUTE,
} from '../../../helpers/constants/routes';
import PulseLoader from '../../../components/ui/pulse-loader';
import Typography from '../../../components/ui/typography';
import Box from '../../../components/ui/box';
import {
BLOCK_SIZES,
TypographyVariant,
FONT_WEIGHT,
TextVariant,
JustifyContent,
DISPLAY,
TextColor,
@ -34,6 +32,7 @@ import {
import SwapsFooter from '../swaps-footer';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
import { Text } from '../../../components/component-library';
import SwapStepIcon from './swap-step-icon';
export default function AwaitingSignatures() {
@ -94,57 +93,52 @@ export default function AwaitingSignatures() {
<Box marginTop={3} marginBottom={4}>
<PulseLoader />
</Box>
<Typography
<Text
color={TextColor.textDefault}
variant={TypographyVariant.H3}
variant={TextVariant.headingMd}
as="h3"
>
{headerText}
</Typography>
</Text>
{needsTwoConfirmations && (
<>
<Typography
variant={TypographyVariant.paragraph}
boxProps={{ marginTop: 2 }}
fontWeight={FONT_WEIGHT.BOLD}
>
<Text variant={TextVariant.bodyMdBold} boxProps={{ marginTop: 2 }}>
{t('swapToConfirmWithHwWallet')}
</Typography>
</Text>
<ul className="awaiting-signatures__steps">
<li>
<SwapStepIcon stepNumber={1} />
{t('swapAllowSwappingOf', [
<Typography
<Text
as="span"
fontWeight={FONT_WEIGHT.BOLD}
variant={TextVariant.bodyMdBold}
key="allowToken"
>
{destinationTokenInfo?.symbol}
</Typography>,
</Text>,
])}
</li>
<li>
<SwapStepIcon stepNumber={2} />
{t('swapFromTo', [
<Typography
<Text
as="span"
fontWeight={FONT_WEIGHT.BOLD}
variant={TextVariant.bodyMdBold}
key="tokenFrom"
>
{sourceTokenInfo?.symbol}
</Typography>,
<Typography
</Text>,
<Text
as="span"
fontWeight={FONT_WEIGHT.BOLD}
variation={TextVariant.bodyMdBold}
key="tokenTo"
>
{destinationTokenInfo?.symbol}
</Typography>,
</Text>,
])}
</li>
</ul>
<Typography variant={TypographyVariant.paragraph}>
{t('swapGasFeesSplit')}
</Typography>
<Text variant={TextVariant.bodyMd}>{t('swapGasFeesSplit')}</Text>
</>
)}
</Box>

View File

@ -22,12 +22,11 @@ import Popover from '../../../components/ui/popover';
import Button from '../../../components/ui/button';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
import Box from '../../../components/ui/box';
import Typography from '../../../components/ui/typography';
import {
TypographyVariant,
TextVariant,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
FontWeight,
TextColor,
} from '../../../helpers/constants/design-system';
import {
@ -112,6 +111,7 @@ import {
getValueFromWeiHex,
hexToDecimal,
} from '../../../../shared/modules/conversion.utils';
import { Text } from '../../../components/component-library';
const fuseSearchKeys = [
{ name: 'name', weight: 0.499 },
@ -593,7 +593,7 @@ export default function BuildQuote({
{t('enableSmartTransactions')}
</Button>
<Box marginTop={1}>
<Typography variant={TypographyVariant.H6}>
<Text variant={TextVariant.bodySm} as="h6">
<Button
type="link"
onClick={onCloseSmartTransactionsOptInPopover}
@ -601,7 +601,7 @@ export default function BuildQuote({
>
{t('noThanksVariant2')}
</Button>
</Typography>
</Text>
</Box>
</>
}
@ -627,13 +627,13 @@ export default function BuildQuote({
alt={t('swapSwapSwitch')}
/>
</Box>
<Typography variant={TypographyVariant.H7} marginTop={0}>
<Text variant={TextVariant.bodySm} as="h6" marginTop={0}>
{t('stxDescription')}
</Typography>
<Typography
</Text>
<Text
as="ul"
variant={TypographyVariant.H7}
fontWeight={FONT_WEIGHT.BOLD}
variant={TextVariant.bodySm}
fontWeight={FontWeight.Bold}
marginTop={3}
>
<li>{t('stxBenefit1')}</li>
@ -641,30 +641,24 @@ export default function BuildQuote({
<li>{t('stxBenefit3')}</li>
<li>
{t('stxBenefit4')}
<Typography
<Text
as="span"
fontWeight={FONT_WEIGHT.NORMAL}
variant={TypographyVariant.H7}
fontWeight={FontWeight.Normal}
variant={TextVariant.bodySm}
>
{' *'}
</Typography>
</Text>
</li>
</Typography>
<Typography
variant={TypographyVariant.H8}
</Text>
<Text
variant={TextVariant.bodyXs}
as="h6"
color={TextColor.textAlternative}
boxProps={{ marginTop: 3 }}
marginTop={3}
>
{t('stxSubDescription')}&nbsp;
<Typography
as="span"
fontWeight={FONT_WEIGHT.BOLD}
variant={TypographyVariant.H8}
color={TextColor.textAlternative}
>
{t('stxYouCanOptOut')}&nbsp;
</Typography>
</Typography>
<strong>{t('stxYouCanOptOut')}&nbsp;</strong>
</Text>
</Box>
</Popover>
)}