From 9f17e2f94b00fe16cd02c8d16d24164e79c9169a Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Sat, 25 Feb 2023 00:22:11 +0530 Subject: [PATCH] UX Icon: updated fa-exclamation-circle (#17879) --- app/_locales/de/messages.json | 2 +- app/_locales/el/messages.json | 2 +- app/_locales/en/messages.json | 2 +- app/_locales/es/messages.json | 2 +- app/_locales/fr/messages.json | 2 +- app/_locales/hi/messages.json | 2 +- app/_locales/id/messages.json | 2 +- app/_locales/ja/messages.json | 2 +- app/_locales/ko/messages.json | 2 +- app/_locales/pt/messages.json | 2 +- app/_locales/ru/messages.json | 2 +- app/_locales/tl/messages.json | 2 +- app/_locales/tr/messages.json | 2 +- app/_locales/vi/messages.json | 2 +- app/_locales/zh_CN/messages.json | 2 +- .../app/custom-spending-cap/custom-spending-cap.js | 4 ++-- ui/components/app/flask/snap-content-footer/index.scss | 5 ----- .../flask/snap-content-footer/snap-content-footer.js | 10 +++++++++- .../__snapshots__/error-message.component.test.js.snap | 10 ++++++---- .../ui/error-message/error-message.component.js | 10 +++++++++- ui/components/ui/error-message/index.scss | 6 ------ ui/components/ui/review-spending-cap/index.scss | 4 ---- .../ui/review-spending-cap/review-spending-cap.js | 5 ++++- .../confirm-transaction-base.test.js.snap | 5 +++-- 24 files changed, 48 insertions(+), 41 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 7895301f9..2c4eb3e1e 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Der Contract könnte Ihr gesamtes Token-Guthaben ohne weitere Benachrichtigung oder Zustimmung ausgeben. Schützen Sie sich, indem Sie eine niedrigere Ausgabenobergrenze festlegen.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Schwach" diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 6e5d88ddc..021bca9e2 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Ο συμβαλλόμενος μπορεί να ξοδέψει ολόκληρο το υπόλοιπο των tokens σας χωρίς περαιτέρω ειδοποίηση ή συγκατάθεση. Προστατέψτε τον εαυτό σας προσαρμόζοντας ένα χαμηλότερο όριο δαπανών.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Αδύναμος" diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 451f866e5..3cd6aa772 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -4507,7 +4507,7 @@ }, "warningTooltipText": { "message": "$1 The contract could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Weak" diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 705afc965..0f9c3e87b 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 El contrato podría gastar todo su saldo de tokens sin previo aviso o consentimiento. Protéjase personalizando un límite de gasto más bajo.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Débil" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index a9a7a2b0d..d30cbd4d7 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 L’autre partie au contrat peut dépenser la totalité de votre solde de jetons sans préavis et sans demander votre consentement. Protégez-vous en abaissant le plafond des dépenses.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Faible" diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index 464a11f4c..019bc2bfa 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 अनुबंध आगे की सूचना या सहमति के बिना आपकी संपूर्ण टोकन शेष राशि खर्च कर सकता है। कम खर्च करने की सीमा को समायोजित करके अपनी सुरक्षा करें।", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "कमज़ोर" diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 2e4827739..3a136c207 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Kontrak dapat mempergunakan seluruh saldo token Anda tanpa pemberitahuan atau persetujuan lebih lanjut. Lindungi diri Anda dengan menyesuaikan batas pengeluaran yang lebih rendah.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Lemah" diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 079811756..47d58c951 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 このコントラクトは今後、通知や承諾なしにトークン残高全額を使用できます。使用限度をより低い金額にカスタマイズして、自分の身を守りましょう。", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "弱" diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 5222265ad..42f3c8dd8 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 계약은 추가 통보나 동의 없이도 남은 토큰 전체를 사용할 수 있습니다. 보호를 위해 최소 지출 한도를 설정하세요.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "약함" diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 99bf8ee3d..185a4a129 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 O contrato pode gastar todo o seu saldo de tokens sem aviso ou consentimento. Proteja-se personalizando um limite de gastos menor.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Fraca" diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 72354ed4c..70f47fda8 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Контракт может потратить весь ваш баланс токенов без дополнительного уведомления или согласия. Защитите себя, установив более низкий лимит расходов.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Слабый" diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 6300ac771..453324c80 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Maaaring gastusin ng kontrata ang iyong buong balanse ng token nang walang karagdagang abiso o pahintulot. Protektahan ang iyong sarili sa pamamagitan ng pag-customize ng mas mababang limitasyon sa paggastos.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Madali" diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index ee0882b2e..88cc092be 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Sözleşme, başkaca bildiri ya da rıza olmaksızın tüm token bakiyenizi harcayabilir. Düşük bir harcama limitini özelleştirerek kendinizi koruyun.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Zayıf" diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 7a0f6ea93..6d2ed796a 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 Hợp đồng có thể chi tiêu toàn bộ số dư token của bạn mà không cần thông báo hoặc chấp thuận. Hãy tự bảo vệ chính mình bằng cách chỉnh hạn mức chi tiêu thấp hơn.", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "Yếu" diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 2577028e7..f1b9c8f0d 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -4236,7 +4236,7 @@ }, "warningTooltipText": { "message": "$1 合约可能会花费您的全部代币余额，无需进一步通知或同意。请自定义较低的支出上限以保护自己。", - "description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour" + "description": "$1 is a warning icon with text 'Be careful' in 'warning' colour" }, "weak": { "message": "弱" diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index e8df6d748..be49b0409 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -7,7 +7,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 { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; import { AlignItems, DISPLAY, @@ -151,7 +151,7 @@ export default function CustomSpendingCap({ fontWeight={FONT_WEIGHT.BOLD} color={TextColor.errorDefault} > - {t('beCareful')} + {t('beCareful')} , ]) : t('inputLogicEmptyState'); diff --git a/ui/components/app/flask/snap-content-footer/index.scss b/ui/components/app/flask/snap-content-footer/index.scss index 972d3328e..f337b26ad 100644 --- a/ui/components/app/flask/snap-content-footer/index.scss +++ b/ui/components/app/flask/snap-content-footer/index.scss @@ -1,9 +1,4 @@ .snap-content-footer { - i { - color: var(--color-icon-muted); - padding-right: 4px; - } - .button { white-space: nowrap; overflow: hidden; diff --git a/ui/components/app/flask/snap-content-footer/snap-content-footer.js b/ui/components/app/flask/snap-content-footer/snap-content-footer.js index 440cb10fa..d2c66b60e 100644 --- a/ui/components/app/flask/snap-content-footer/snap-content-footer.js +++ b/ui/components/app/flask/snap-content-footer/snap-content-footer.js @@ -11,9 +11,12 @@ import { JustifyContent, AlignItems, TextColor, + Size, + IconColor, } from '../../../../helpers/constants/design-system'; import Button from '../../../ui/button'; import Box from '../../../ui/box/box'; +import { Icon, ICON_NAMES } from '../../../component-library'; export default function SnapContentFooter({ snapName, snapId }) { const t = useI18nContext(); @@ -32,7 +35,12 @@ export default function SnapContentFooter({ snapName, snapId }) { paddingBottom={4} className="snap-content-footer" > - + {t('snapContent', [