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

Align custom spending cap Max button in approve screen for multiple languages (#16927)

Browse Source 
* Align custom spending cap Max button in approve screen for multiple languages

* Modify some css styles and adding Box props

* Using ButtonLink component instead of <button/>

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
This commit is contained in:
Vladimir Saric 2023-01-04 18:01:52 +01:00 committed by PeterYinusa
parent 3d1b5062fe
commit dd728b07db
4 changed files with 29 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import FormField from '../../ui/form-field';
import Typography from '../../ui/typography';
import { ButtonLink } from '../../component-library';
import {
ALIGN_ITEMS,
COLORS,
@ -15,6 +16,7 @@ import {
TYPOGRAPHY,
JUSTIFY_CONTENT,
SIZES,
BLOCK_SIZES,
} from '../../../helpers/constants/design-system';
import { getCustomTokenAmount } from '../../../selectors';
import { setCustomTokenAmount } from '../../../ducks/app/app';
@ -112,21 +114,6 @@ export default function CustomSpendingCap({
return (
<>
<Box
textAlign={TEXT_ALIGN.END}
className="custom-spending-cap__max-button"
>
<button
className="custom-spending-cap__input--max-button"
type="link"
onClick={(e) => {
e.preventDefault();
handleChange(currentTokenBalance);
}}
>
{t('max')}
</button>
</Box>
<Box
className="custom-spending-cap"
borderRadius={SIZES.SM}
@ -174,9 +161,8 @@ export default function CustomSpendingCap({
value={value}
titleDetail={
showUseDefaultButton && (
<button
className="custom-spending-cap__input--button"
type="link"
<ButtonLink
size={SIZES.AUTO}
onClick={(e) => {
e.preventDefault();
setShowUseDefaultButton(false);
@ -184,12 +170,30 @@ export default function CustomSpendingCap({
}}
>
{t('useDefault')}
</button>
</ButtonLink>
)
}
titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
allowDecimals
/>
<Box
width={BLOCK_SIZES.MAX}
marginLeft="auto"
paddingRight={4}
paddingBottom={2}
textAlign={TEXT_ALIGN.END}
className="custom-spending-cap__max"
>
<ButtonLink
size={SIZES.AUTO}
onClick={(e) => {
e.preventDefault();
handleChange(currentTokenBalance);
}}
>
{t('max')}
</ButtonLink>
</Box>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.H7}

17
ui/components/app/custom-spending-cap/index.scss
View File

@ -3,26 +3,13 @@
display: contents;
}
&__max-button {
&__max {
position: relative;
margin-top: -30px;
}
&__input {
width: 100%;
&--button {
background: none;
color: var(--color-primary-default);
}
&--max-button {
color: var(--color-text-alternative);
background: none;
position: absolute;
margin-top: 55px;
margin-inline-start: -75px;
z-index: 1;
}
}
#custom-spending-cap-input-value {

5
ui/components/ui/review-spending-cap/index.scss
View File

@ -20,11 +20,6 @@
&__heading-detail {
flex-grow: 1;
align-self: center;
&__button {
background: none;
color: var(--color-primary-default);
}
}
i {

8
ui/components/ui/review-spending-cap/review-spending-cap.js
View File

@ -4,6 +4,7 @@ import { I18nContext } from '../../../contexts/i18n';
import Box from '../box';
import Tooltip from '../tooltip';
import Typography from '../typography';
import { ButtonLink } from '../../component-library';
import {
ALIGN_ITEMS,
COLORS,
@ -93,16 +94,15 @@ export default function ReviewSpendingCap({
className="review-spending-cap__heading-detail"
textAlign={TEXT_ALIGN.END}
>
<button
className="review-spending-cap__heading-detail__button"
type="link"
<ButtonLink
size={SIZES.AUTO}
onClick={(e) => {
e.preventDefault();
onEdit();
}}
>
{t('edit')}
</button>
</ButtonLink>
</Box>
</Box>
<Box>