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 #17670 , #18714 & #18651 for 3 files. (#18752)

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

10
ui/components/app/approve-content-card/approve-content-card.js
View File

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

42
ui/pages/swaps/awaiting-signatures/awaiting-signatures.js
View File

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

48
ui/pages/swaps/build-quote/build-quote.js
View File

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