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

Replaced ActionableMessage Instances in edit-gas (#20196)

Browse Source 
* Replaced ActionableMessage Instances in edit-gas

* Updated BannerAlert className

* Changed errorKey to errorMessage

* Removing CSS and restoring local key

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Pritam Dhara 2023-08-02 02:51:42 +05:30 committed by GitHub
parent 9b55791af7
commit 067d385012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui/components/app/edit-gas-display/edit-gas-display.component.js
View File

@ -11,14 +11,13 @@ import {
FontWeight, FontWeight,
TextColor, TextColor,
TextVariant, TextVariant,
Severity,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Text } from '../../component-library'; import { BannerAlert, Text } from '../../component-library';
import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util'; import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util';
import InfoTooltip from '../../ui/info-tooltip'; import InfoTooltip from '../../ui/info-tooltip';
import ErrorMessage from '../../ui/error-message';
import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component'; import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
import ActionableMessage from '../../ui/actionable-message/actionable-message';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
@ -62,38 +61,30 @@ export default function EditGasDisplay({
const showTopError = balanceError && txParamsHaveBeenCustomized; const showTopError = balanceError && txParamsHaveBeenCustomized;
let errorKey;
if (balanceError) {
errorKey = 'insufficientFunds';
}
return ( return (
<div className="edit-gas-display"> <div className="edit-gas-display">
<div className="edit-gas-display__content"> <div className="edit-gas-display__content">
{showTopError && ( {showTopError && (
<div className="edit-gas-display__warning"> <BannerAlert
<ErrorMessage errorKey={errorKey} /> severity={Severity.Danger}
</div> description={t('insufficientFunds')}
marginBottom={6}
/>
)} )}
{warningMessage && ( {warningMessage && (
<div className="edit-gas-display__warning"> <BannerAlert
<ActionableMessage severity={Severity.Warning}
className="actionable-message--warning" description={warningMessage}
message={warningMessage} marginBottom={6}
iconFillColor="var(--color-warning-default)" />
useIcon
/>
</div>
)} )}
{requireDappAcknowledgement && ( {requireDappAcknowledgement && (
<div className="edit-gas-display__dapp-acknowledgement-warning"> <BannerAlert
<ActionableMessage severity={Severity.Warning}
className="actionable-message--warning" className="banner-alert--warning"
message={t('gasDisplayDappWarning', [transaction.origin])} description={t('gasDisplayDappWarning', [transaction.origin])}
iconFillColor="var(--color-warning-default)" marginBottom={6}
useIcon />
/>
</div>
)} )}
{mode === EditGasModes.speedUp && ( {mode === EditGasModes.speedUp && (
<div className="edit-gas-display__top-tooltip"> <div className="edit-gas-display__top-tooltip">
@ -113,7 +104,7 @@ export default function EditGasDisplay({
)} )}
<Text <Text
color={TextColor.textDefault} color={TextColor.textDefault}
variant={TextVariant.displayMd} variant={TextVariant.headingLg}
as="h1" as="h1"
textAlign={TextAlign.Center} textAlign={TextAlign.Center}
> >

38
ui/components/app/edit-gas-display/index.scss
View File

@ -1,13 +1,4 @@
.edit-gas-display { .edit-gas-display {
& .actionable-message--warning,
& .actionable-message--error {
margin-top: 0;
& .actionable-message__message {
text-align: start;
}
}
&__top-tooltip { &__top-tooltip {
text-align: center; text-align: center;
@ -21,10 +12,6 @@
} }
} }
&__dapp-acknowledgement-warning {
margin-bottom: 20px;
}
button.edit-gas-display__dapp-acknowledgement-button { button.edit-gas-display__dapp-acknowledgement-button {
margin: 40px auto 0 auto; margin: 40px auto 0 auto;
display: block; display: block;
@ -39,35 +26,10 @@
margin: 20px auto; margin: 20px auto;
} }
&__advanced-button {
display: block;
margin: 0 auto;
background: transparent;
color: var(--color-primary-default);
font-weight: bold;
}
.advanced-gas-controls { .advanced-gas-controls {
margin-top: 20px; margin-top: 20px;
} }
&__education {
margin-top: 20px;
button {
display: block;
margin: 0 auto;
background: transparent;
color: var(--color-primary-default);
}
}
&__warning {
margin-bottom: 24px;
position: relative;
margin-top: 4px;
}
&__scroll-bottom { &__scroll-bottom {
margin-bottom: -20px; margin-bottom: -20px;
margin-top: 20px; margin-top: 20px;