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: Replace Typography with Text swap-import-token (#18479)

Browse Source 
* Initial changes to support Text component in import token component

* linting issue fix

* fix prettier linting issue

* updated styles and attributes for boxProps

* lint leading 0
This commit is contained in:
dswilson4 2023-04-07 08:48:30 -07:00 committed by GitHub
parent b452f40e2f
commit d4e12e55e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/pages/swaps/import-token/import-token.js
View File

@ -5,10 +5,10 @@ import UrlIcon from '../../../components/ui/url-icon';
import Popover from '../../../components/ui/popover'; import Popover from '../../../components/ui/popover';
import Button from '../../../components/ui/button'; import Button from '../../../components/ui/button';
import Box from '../../../components/ui/box'; import Box from '../../../components/ui/box';
import Typography from '../../../components/ui/typography'; import { Text } from '../../../components/component-library';
import ActionableMessage from '../../../components/ui/actionable-message/actionable-message'; import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
import { import {
TypographyVariant, TextVariant,
FONT_WEIGHT, FONT_WEIGHT,
AlignItems, AlignItems,
DISPLAY, DISPLAY,
@ -62,21 +62,26 @@ export default function ImportToken({
fallbackClassName="import-token__token-icon" fallbackClassName="import-token__token-icon"
name={tokenForImport.symbol} name={tokenForImport.symbol}
/> />
<Typography <Text
ariant={TypographyVariant.H4} variant={TextVariant.headingSm}
as="h4"
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ marginTop: 2, marginBottom: 3 }} marginTop={2}
marginBottom={3}
> >
{tokenForImport.name || ''} {tokenForImport.name || ''}
</Typography> </Text>
<Typography variant={TypographyVariant.H6}>{t('contract')}:</Typography> <Text variant={TextVariant.bodySm} as="h6">
<Typography {t('contract')}:
</Text>
<Text
variant={TextVariant.bodySm}
className="import-token__contract-address" className="import-token__contract-address"
variant={TypographyVariant.H7} as="h6"
boxProps={{ marginBottom: 6 }} marginBottom={6}
> >
{tokenForImport.address || ''} {tokenForImport.address || ''}
</Typography> </Text>
</Box> </Box>
</Popover> </Popover>
); );

1
ui/pages/swaps/import-token/index.scss
View File

@ -14,6 +14,7 @@
border-radius: 8px; border-radius: 8px;
background-color: var(--color-background-alternative); background-color: var(--color-background-alternative);
padding: 5px 10px; padding: 5px 10px;
font-size: 0.75rem;
} }
&__token-icon { &__token-icon {