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

swap hex colors in ui/components/app folder (#14189)

This commit is contained in:
Guillaume Roux 2022-03-25 16:32:36 +01:00 committed by GitHub
parent e8d4f11cbf
commit 06e196441a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 26 additions and 19 deletions

View File

@ -113,7 +113,7 @@ const AddNetwork = ({
</a>
</>
}
iconFillColor="#f8c000"
iconFillColor="var(--color-warning-default)"
useIcon
withRightButton
/>

View File

@ -18,7 +18,10 @@ const AppLoadingSpinner = ({ className }) => {
role="alert"
aria-busy="true"
>
<Spinner color="#F7C06C" className="app-loading-spinner__inner" />
<Spinner
color="var(--color-secondary-muted)"
className="app-loading-spinner__inner"
/>
</div>
);
};

View File

@ -311,7 +311,7 @@ export default function CollectibleDetails({ collectible }) {
{copied ? (
t('copiedExclamation')
) : (
<Copy size={15} color="#6a737d" />
<Copy size={15} color="var(--color-icon-default)" />
)}
</button>
</Box>

View File

@ -146,7 +146,7 @@ export default function EditGasDisplay({
<ActionableMessage
className="actionable-message--warning"
message={warningMessage}
iconFillColor="#f8c000"
iconFillColor="var(--color-warning-default)"
useIcon
/>
</div>
@ -156,7 +156,7 @@ export default function EditGasDisplay({
<ActionableMessage
className="actionable-message--warning"
message={t('gasDisplayDappWarning', [transaction.origin])}
iconFillColor="#f8c000"
iconFillColor="var(--color-warning-default)"
useIcon
/>
</div>
@ -166,7 +166,7 @@ export default function EditGasDisplay({
<ActionableMessage
className="actionable-message--warning"
message={t('networkIsBusy')}
iconFillColor="#f8c000"
iconFillColor="var(--color-warning-default)"
useIcon
/>
</div>

View File

@ -136,7 +136,9 @@ const EditGasItem = ({ priorityLevel }) => {
<div className="edit-gas-item__maxfee">
<LoadingHeartBeat
backgroundColor={
priorityLevel === estimateUsed ? '#f2f3f4' : '#fff'
priorityLevel === estimateUsed
? 'var(--color-background-alternative)'
: 'var(--color-background-default)'
}
estimateUsed={priorityLevel}
/>

View File

@ -250,7 +250,9 @@ export default class QrScanner extends Component {
display: ready === READY_STATE.READY ? 'block' : 'none',
}}
/>
{ready === READY_STATE.READY ? null : <Spinner color="#F7C06C" />}
{ready === READY_STATE.READY ? null : (
<Spinner color="var(--color-secondary-muted)" />
)}
</div>
</div>
<div className="qr-scanner__status">{message}</div>

View File

@ -55,7 +55,7 @@ const EnhancedReader = ({ handleScan }) => {
filter: 'blur(4px)',
}}
/>
{canplay ? null : <Spinner color="#F7C06C" />}
{canplay ? null : <Spinner color="var(--color-secondary-muted)" />}
</div>
);
};

View File

@ -63,7 +63,7 @@ class SelectedAccount extends Component {
<div className="selected-account__address">
{shortenAddress(checksummedAddress)}
<div className="selected-account__copy">
<CopyIcon size={11} color="#989a9b" />
<CopyIcon size={11} color="var(--color-icon-default)" />
</div>
</div>
</button>

View File

@ -127,7 +127,7 @@ export default function SrpInput({ onChange }) {
</label>
<ActionableMessage
className="import-srp__paste-tip"
iconFillColor="#037dd6" // This is `--color-info-default`
iconFillColor="var(--color-info-default)"
message={t('srpPasteTip')}
useIcon
/>
@ -197,7 +197,7 @@ export default function SrpInput({ onChange }) {
{srpError ? (
<ActionableMessage
className="import-srp__srp-error"
iconFillColor="#d73a49" // This is `--color-error-default`
iconFillColor="var(--color-error-default)"
message={srpError}
type="danger"
useIcon
@ -206,7 +206,7 @@ export default function SrpInput({ onChange }) {
{pasteFailed ? (
<ActionableMessage
className="import-srp__srp-too-many-words-error"
iconFillColor="#d73a49" // This is `--color-error-default`
iconFillColor="var(--color-error-default)"
message={t('srpPasteFailedTooManyWords')}
primaryAction={{
label: t('dismiss'),

View File

@ -29,7 +29,7 @@ export default function TokenCell({
rel="noopener noreferrer"
target="_blank"
onClick={(event) => event.stopPropagation()}
style={{ color: '#F7861C' }}
style={{ color: 'var(--color-secondary-default)' }}
>
{t('here')}
</a>

View File

@ -20,7 +20,7 @@ const CopyRawData = ({ data }) => {
className="copy-raw-data__button"
>
<div className="copy-raw-data__icon">
<CopyIcon size={12} color="#BBC0C5" />
<CopyIcon size={12} color="var(--color-icon-default)" />
</div>
<div className="copy-raw-data__label">
{t('copyRawTransactionData')}

View File

@ -202,7 +202,7 @@ export default function TransactionDecoding({ to = '', inputData: data = '' }) {
if (loading) {
return (
<div className="tx-insight-loading">
<Spinner color="#F7C06C" />
<Spinner color="var(--color-secondary-muted)" />
</div>
);
}

View File

@ -23,9 +23,9 @@ const ICON_MAP = {
[TRANSACTION_GROUP_CATEGORIES.SWAP]: Swap,
};
const FAIL_COLOR = '#D73A49';
const PENDING_COLOR = '#6A737D';
const OK_COLOR = '#2F80ED';
const FAIL_COLOR = 'var(--color-error-default)';
const PENDING_COLOR = 'var(--color-icon-default)';
const OK_COLOR = 'var(--color-primary-default)';
const COLOR_MAP = {
[TRANSACTION_GROUP_STATUSES.PENDING]: PENDING_COLOR,