feat: rebrand connect site view (#2113)

apps/ui-icons/src/Warning.tsx

@@ -0,0 +1,24 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgWarning(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.732 3C12.9622 1.66667 11.0377 1.66667 10.2679 3L1.6076 18C0.837803 19.3333 1.80005 21 3.33965 21H20.6602C22.1998 21 23.162 19.3333 22.3922 18L13.732 3ZM12.0003 17.8C12.663 17.8 13.2003 17.2627 13.2003 16.6C13.2003 15.9373 12.663 15.4 12.0003 15.4C11.3376 15.4 10.8003 15.9373 10.8003 16.6C10.8003 17.2627 11.3376 17.8 12.0003 17.8ZM10.8003 8.2C10.8003 7.53726 11.3376 7 12.0003 7C12.663 7 13.2003 7.53726 13.2003 8.2V11.8C13.2003 12.4627 12.663 13 12.0003 13C11.3376 13 10.8003 12.4627 10.8003 11.8V8.2Z"
+                fill="currentColor"
+            />
+            ;
+        </svg>
+    );
+}

apps/ui-icons/src/index.ts

@@ -76,3 +76,4 @@ export { default as Unpined } from './Unpined';
 export { default as Vest } from './Vest';
 export { default as VisibilityOff } from './VisibilityOff';
 export { default as VisibilityOn } from './VisibilityOn';
+export { default as Warning } from './Warning';

apps/wallet/src/ui/app/pages/site-connect/index.tsx

@@ -17,11 +17,11 @@ import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import { ampli } from '_src/shared/analytics/ampli';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-
 import { useAccountGroups } from '../../hooks/useAccountGroups';
 import { useActiveAccount } from '../../hooks/useActiveAccount';
 import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayoutTitle';
-import st from './SiteConnectPage.module.scss';
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { Warning } from '@iota/ui-icons';
 
 function SiteConnectPage() {
     const { requestID } = useParams();
@@ -107,16 +107,24 @@ function SiteConnectPage() {
                         blended
                     >
                         <PageMainLayoutTitle title="Insecure Website" />
-                        <div className={st.warningWrapper}>
-                            <h1 className={st.warningTitle}>Your Connection is Not Secure</h1>
-                        </div>
-
-                        <div className={st.warningMessage}>
-                            If you connect your wallet to this site your data could be exposed to
-                            attackers. Click **Reject** if you don't trust this site.
-                            <br />
-                            <br />
-                            Continue at your own risk.
+                        <div className="flex flex-col gap-lg">
+                            <InfoBox
+                                title="Your connection is insecure"
+                                supportingText="Proceed at your own risk."
+                                type={InfoBoxType.Default}
+                                style={InfoBoxStyle.Elevated}
+                                icon={<Warning />}
+                            />
+                            <div className="flex flex-col gap-xs">
+                                <span className="text-label-lg text-neutral-60">
+                                    Connecting your wallet to this site could expose your data to
+                                    attackers.
+                                </span>
+                                <span className="text-label-lg text-neutral-60">
+                                    If you don't have confidence in this site, reject the
+                                    connection.
+                                </span>
+                            </div>
                         </div>
                     </UserApproveContainer>
                 ) : (