[FLASK] Update snap installation permission warning UI (#19494)

* Update snap installation permission warning UI

* Fix font size (TextVariant)

* Fix vertical margins between labels

* Update font weight in warning top description

* Update snapName for warning modal on update flow

app/_locales/de/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Snap installieren"
   },
   "snapInstallWarningCheck": {
-    "message": "Um zu bestätigen, dass Sie das verstanden haben, markieren Sie das Kästchen."
+    "message": "Um zu bestätigen, dass Sie das verstanden haben, markieren Sie das Kästchen.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Um zu bestätigen, dass Sie alles verstanden haben, markieren Sie alle Kästchen."
+    "message": "Um zu bestätigen, dass Sie alles verstanden haben, markieren Sie alle Kästchen.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Sie gewähren dem Snap „$1“ wichtige $2-Zugriffsrechte. Dies kann nicht rückgängig gemacht werden und gibt „$1“ Kontrolle über Ihre $2-Konten und Vermögenswerte. Stellen Sie sicher, dass Sie „$1“ vertrauen, bevor Sie fortfahren.",

app/_locales/el/messages.json

@@ -3257,10 +3257,12 @@
     "message": "Εγκατάσταση Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα πλαίσια ελέγχου."
+    "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα πλαίσια ελέγχου.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα κουτάκια."
+    "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα κουτάκια.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Εκχωρείτε στο $2 βασική πρόσβαση στο snap \"$1\". Αυτό είναι αμετάκλητο και παρέχει στο \"$1\" τον έλεγχο των λογαριασμών και των περιουσιακών σας στοιχείων $2. Βεβαιωθείτε ότι εμπιστεύεστε το \"$1\" προτού συνεχίσετε.",

app/_locales/en/messages.json

@@ -3793,20 +3793,22 @@
     "message": "Installation complete"
   },
   "snapInstallWarningCheck": {
-    "message": "Ensure that the permission below aligns with your intended actions. Only proceed with authors you trust."
+    "message": "Take a moment to review the permission being requested. Only continue if you trust $1.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Ensure that the permissions below align with your intended actions. Only proceed with authors you trust."
+    "message": "Take a moment to review the permissions being requested. Only continue if you trust $1.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningHeading": {
     "message": "Proceed with caution"
   },
   "snapInstallWarningKeyAccess": {
-    "message": "Grant $2 account control to $1",
+    "message": "Give $2 account control to $1",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
   "snapInstallWarningPublicKeyAccess": {
-    "message": "Grant $2 public key access to $1",
+    "message": "Give $2 public key access to $1",
     "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
   "snapInstallationErrorDescription": {

app/_locales/es/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Instalar complemento"
   },
   "snapInstallWarningCheck": {
-    "message": "Para confirmar que comprende, verifique la casilla."
+    "message": "Para confirmar que comprende, verifique la casilla.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Para confirmar que comprende, marque todas las casillas."
+    "message": "Para confirmar que comprende, marque todas las casillas.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Está otorgando acceso clave de $2 al complemento \"$1\". Esto es irrevocable y le otorga a \"$1\" el control de sus cuentas y activos de $2. Asegúrese de que confía en \"$1\" antes de continuar.",

app/_locales/fr/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Installer Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Cochez la case pour confirmer que vous avez compris."
+    "message": "Cochez la case pour confirmer que vous avez compris.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Veuillez confirmer que vous avez bien compris en cochant toutes les cases."
+    "message": "Veuillez confirmer que vous avez bien compris en cochant toutes les cases.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Vous autorisez $2 à accéder à la clé du snap « $1 ». Cette action est irréversible et accorde à « $1 » le contrôle de vos comptes et actifs $2. Assurez-vous que vous faites confiance à « $1 » avant de continuer.",

app/_locales/hi/messages.json

@@ -3260,10 +3260,12 @@
     "message": "स्नैप इंस्टाल करें"
   },
   "snapInstallWarningCheck": {
-    "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं।"
+    "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं।",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं:"
+    "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं:",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "आप स्नैप \"$1\" के लिए $2 कुंजी का एक्सेस प्रदान कर रहे हैं। यह अपरिवर्तनीय है और आपके $2 खातों और संपत्तियों पर \"$1\" नियंत्रण प्रदान करता है। आगे बढ़ने से पहले सुनिश्चित करें कि आप \"$1\" पर भरोसा करते हैं।",

app/_locales/id/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Instal Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Untuk mengonfirmasikan bahwa Anda sudah paham, centang kotaknya."
+    "message": "Untuk mengonfirmasikan bahwa Anda sudah paham, centang kotaknya.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Untuk mengonfirmasikan bahwa Anda memahaminya, centang semua kotak."
+    "message": "Untuk mengonfirmasikan bahwa Anda memahaminya, centang semua kotak.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Anda memberikan $2 akses kunci ke snap \"$1\". Tindakan ini tidak dapat dibatalkan dan memberikan kendali \"$1\" atas akun dan aset $2 Anda. Sebelum melanjutkan, pastikan \"$1\" aman.",

app/_locales/ja/messages.json

@@ -3260,10 +3260,12 @@
     "message": "スナップをインストール"
   },
   "snapInstallWarningCheck": {
-    "message": "理解したことを確認するために、次の項目にチェックを入れてください."
+    "message": "理解したことを確認するために、次の項目にチェックを入れてください.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "理解したことを確認するために、すべての項目にチェックを入れてください。"
+    "message": "理解したことを確認するために、すべての項目にチェックを入れてください。",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "スナップ「$1」に $2 へのキーアクセスを許可しようとしています。この操作は取り消し不能であり、$2 アカウントとアセットのコントロールを「$1」に許可することになります。続行する前に、必ず「$1」が信頼できることを確認してください。",

app/_locales/ko/messages.json

@@ -3260,10 +3260,12 @@
     "message": "스냅 설치"
   },
   "snapInstallWarningCheck": {
-    "message": "이해하셨으면 모두 체크해 주세요."
+    "message": "이해하셨으면 모두 체크해 주세요.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "이해하셨으면 모든 란에 체크하세요."
+    "message": "이해하셨으면 모든 란에 체크하세요.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "'$1' 스냅 이용에 필요한 $2 키 액세스 권한을 부여하고 있습니다. 이 작업은 사용자의 $2 계정과 자산에 '$1' 제어 권한을 부여하며 취소가 불가능합니다. '$1의 신뢰성을 확인한 후에 진행하세요.",

app/_locales/pt/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Instalar snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Para confirmar que você entende, marque a caixa."
+    "message": "Para confirmar que você entende, marque a caixa.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Para confirmar que você entende, marque todas as caixas."
+    "message": "Para confirmar que você entende, marque todas as caixas.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Você está concedendo ao snap \"$1\" acesso à sua chave $2. Isso é irrevogável e concede a \"$1\" controle de suas contas e ativos $2. Certifique-se de que confia em \"$1\" antes de prosseguir.",

app/_locales/ru/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Установить снап"
   },
   "snapInstallWarningCheck": {
-    "message": "Чтобы подтвердить, что вы понимаете, отметьте все."
+    "message": "Чтобы подтвердить, что вы понимаете, отметьте все.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Чтобы подтвердить, что вы понимаете, отметьте все ячейки."
+    "message": "Чтобы подтвердить, что вы понимаете, отметьте все ячейки.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Вы предоставляете ключ доступа $2 к привязке \"$1\". Это действие нельзя отменить, и оно предоставляет \"$1\" управление всеми счетами и активами $2. Перед тем как продолжить, убедитесь, что доверяете \"$1\".",

app/_locales/tl/messages.json

@@ -3260,10 +3260,12 @@
     "message": "I-install ang snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Para kumpirmahing naunawaan mo, tsekan lahat."
+    "message": "Para kumpirmahing naunawaan mo, tsekan lahat.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Para kumpirmahin na naiintindihan mo, lagyan ng tsek ang lahat ng kahon."
+    "message": "Para kumpirmahin na naiintindihan mo, lagyan ng tsek ang lahat ng kahon.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Binibigyan mo ang $2 ng key access sa snap na \"$1\". Hindi na ito mababawi at nagbibigay ito sa \"$1\" ng kontrol sa iyong mga $2 account at asset. Tiyaking pinagkakatiwalaan mo ang \"$1\" bago magpatuloy.",

app/_locales/tr/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Snap'i yükle"
   },
   "snapInstallWarningCheck": {
-    "message": "Anladığını doğrulamak için kutucuğu işaretle."
+    "message": "Anladığını doğrulamak için kutucuğu işaretle.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Anladığınızı kontrol etmek için tüm kutuları işaretleyin."
+    "message": "Anladığınızı kontrol etmek için tüm kutuları işaretleyin.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "\"$1\" için $2 anahtar erişimi veriyorsunuz. Bu iptal edilemez ve $2 hesaplarınıza ve varlıklarınıza \"$1\" kontrolü verir. İlerlemeden önce \"$1\" alanına güvendiğinizden emin olun.",

app/_locales/vi/messages.json

@@ -3260,10 +3260,12 @@
     "message": "Cài đặt Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào ô."
+    "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào ô.",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào tất cả các ô."
+    "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào tất cả các ô.",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "Bạn đang cấp quyền truy cập khóa $2 cho Snap \"$1\". Hành động này không thể hủy bỏ và sẽ cấp quyền kiểm soát tài khoản và tài sản $2 của bạn cho \"$1\". Đảm bảo bạn tin tưởng \"$1\" trước khi tiếp tục.",

app/_locales/zh_CN/messages.json

@@ -3260,10 +3260,12 @@
     "message": "安装Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "请勾选选项框以确认您理解。"
+    "message": "请勾选选项框以确认您理解。",
+    "description": "Warning message used in popup displayed on snap install. $1 is the snap name."
   },
   "snapInstallWarningCheckPlural": {
-    "message": "请勾选所有方框以确认您理解。"
+    "message": "请勾选所有方框以确认您理解。",
+    "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name."
   },
   "snapInstallWarningKeyAccess": {
     "message": "您正在向snap \"$1\"授予$2的密钥访问权限。此操作不可撤销，并会向\"$1\"授予对您的$2账户和资产的控制权。在继续之前，请确保您信任\"$1\"。",

ui/components/app/snaps/snap-install-warning/index.scss

@@ -9,7 +9,7 @@
     display: flex;
     align-items: flex-start;
     gap: 0 16px;
-    margin-top: 16px;
+    margin-top: 24px;
 
     &--first {
       margin-top: 0;

ui/components/app/snaps/snap-install-warning/snap-install-warning.js

@@ -12,6 +12,7 @@ import {
   TextAlign,
   Size,
   JustifyContent,
+  FontWeight,
 } from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
@@ -37,7 +38,12 @@ const checkboxStateReducer = produce((state, action) => {
   }
 });
 
-export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
+export default function SnapInstallWarning({
+  onCancel,
+  onSubmit,
+  warnings,
+  snapName,
+}) {
   const t = useI18nContext();
   const [checkboxState, dispatch] = useReducer(checkboxStateReducer, {});
 
@@ -81,21 +87,37 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
           iconName={IconName.Danger}
           backgroundColor={BackgroundColor.warningMuted}
           color={IconColor.warningDefault}
-          size={Size.LG}
+          size={Size.XL}
         />
       </Box>
       <Text
         paddingBottom={6}
         textAlign={TextAlign.Center}
-        variant={TextVariant.headingSm}
+        variant={TextVariant.headingMd}
         as="h2"
       >
         {t('snapInstallWarningHeading')}
       </Text>
       <Text paddingBottom={6} textAlign={TextAlign.Center}>
         {warnings.length > 1
-          ? t('snapInstallWarningCheckPlural')
-          : t('snapInstallWarningCheck')}
+          ? t('snapInstallWarningCheckPlural', [
+              <Text
+                key="snapNameInWarningDescription"
+                fontWeight={FontWeight.Medium}
+                as="span"
+              >
+                {snapName}
+              </Text>,
+            ])
+          : t('snapInstallWarningCheck', [
+              <Text
+                key="snapNameInWarningDescription"
+                fontWeight={FontWeight.Medium}
+                as="span"
+              >
+                {snapName}
+              </Text>,
+            ])}
       </Text>
       {warnings.map((warning, i) => (
         <div
@@ -110,7 +132,7 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
             onClick={() => onCheckboxClicked(warning.id)}
           />
           <label htmlFor={warning.id}>
-            <Text variant={TextVariant.bodySm}>{warning.message}</Text>
+            <Text variant={TextVariant.bodyMd}>{warning.message}</Text>
           </label>
         </div>
       ))}
@@ -134,4 +156,8 @@ SnapInstallWarning.propTypes = {
     message: PropTypes.node,
     id: PropTypes.string,
   }),
+  /**
+   * Snap name
+   */
+  snapName: PropTypes.string.isRequired,
 };

ui/helpers/utils/permission.js

@@ -24,12 +24,7 @@ import {
   IconSize,
 } from '../../components/component-library';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
-import {
-  Color,
-  FONT_WEIGHT,
-  IconColor,
-  TextVariant,
-} from '../constants/design-system';
+import { Color, FontWeight, IconColor } from '../constants/design-system';
 import {
   coinTypeToProtocolName,
   getSnapDerivationPathName,
@@ -93,16 +88,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
           <Text
             key="1"
             color={Color.primaryDefault}
-            fontWeight={FONT_WEIGHT.BOLD}
-            variant={TextVariant.bodySm}
+            fontWeight={FontWeight.Medium}
             as="span"
           >
             {getSnapName(targetSubjectMetadata?.origin)}
           </Text>,
-          <b key="2">
+          <Text as="span" key="2" fontWeight={FontWeight.Medium}>
             {getSnapDerivationPathName(path, curve) ??
               `${path.join('/')} (${curve})`}
-          </b>,
+          </Text>,
         ]),
       };
 
@@ -163,16 +157,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
           <Text
             key="1"
             color={Color.primaryDefault}
-            fontWeight={FONT_WEIGHT.BOLD}
-            variant={TextVariant.bodySm}
+            fontWeight={FontWeight.Medium}
             as="span"
           >
             {getSnapName(targetSubjectMetadata?.origin)}
           </Text>,
-          <b key="2">
+          <Text as="span" key="2" fontWeight={FontWeight.Medium}>
             {getSnapDerivationPathName(path, curve) ??
               `${path.join('/')} (${curve})`}
-          </b>,
+          </Text>,
         ]),
       };
 
@@ -245,16 +238,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
         <Text
           key="1"
           color={Color.primaryDefault}
-          fontWeight={FONT_WEIGHT.BOLD}
-          variant={TextVariant.bodySm}
+          fontWeight={FontWeight.Medium}
           as="span"
         >
           {getSnapName(targetSubjectMetadata?.origin)}
         </Text>,
-        <b key="2">
+        <Text as="span" key="2" fontWeight={FontWeight.Medium}>
           {coinTypeToProtocolName(coinType) ||
             t('unrecognizedProtocol', [coinType])}
-        </b>,
+        </Text>,
       ]),
     })),
   [RestrictedMethods.snap_getEntropy]: ({ t }) => ({

ui/pages/permissions-connect/snaps/snap-install/snap-install.js

@@ -179,6 +179,7 @@ export default function SnapInstall({
           onCancel={() => setIsShowingWarning(false)}
           onSubmit={onSubmit}
           warnings={warnings}
+          snapName={snapName}
         />
       )}
     </Box>

ui/pages/permissions-connect/snaps/snap-update/snap-update.js

@@ -205,7 +205,7 @@ export default function SnapUpdate({
         <SnapInstallWarning
           onCancel={() => setIsShowingWarning(false)}
           onSubmit={onSubmit}
-          snapName={targetSubjectMetadata.name}
+          snapName={snapName}
           warnings={warnings}
         />
       )}