Wallet welcome screen redesign (MystenLabs#4236)

* welcome screen

* wip

* wip

* wip

* welcome screen update

* rm TextareaAutosize from import wallet

* remove back button

* added license to sui-icons ts file

* change checkbox background color

wallet/font-icons/output/sui-icons.scss

@@ -16,50 +16,56 @@
 }
 
 .sui-icons-Buy:before { content: "\ea01"; }
-.sui-icons-Info:before { content: "\ea02"; }
-.sui-icons-Preview:before { content: "\ea03"; }
-.sui-icons-apps:before { content: "\ea04"; }
-.sui-icons-arrow-left:before { content: "\ea05"; }
-.sui-icons-arrow-right:before { content: "\ea06"; }
-.sui-icons-checkmark:before { content: "\ea07"; }
-.sui-icons-clipboard:before { content: "\ea08"; }
-.sui-icons-close:before { content: "\ea09"; }
-.sui-icons-coins:before { content: "\ea0a"; }
-.sui-icons-globe:before { content: "\ea0b"; }
-.sui-icons-hand-coins:before { content: "\ea0c"; }
-.sui-icons-history:before { content: "\ea0d"; }
-.sui-icons-logout:before { content: "\ea0e"; }
-.sui-icons-nfts:before { content: "\ea0f"; }
-.sui-icons-percentage-polygon:before { content: "\ea10"; }
-.sui-icons-person:before { content: "\ea11"; }
-.sui-icons-search:before { content: "\ea12"; }
-.sui-icons-sui-chevron-right:before { content: "\ea13"; }
-.sui-icons-sui-logo-icon:before { content: "\ea14"; }
-.sui-icons-sui-logo-txt:before { content: "\ea15"; }
-.sui-icons-tokens:before { content: "\ea16"; }
-.sui-icons-version-icon:before { content: "\ea17"; }
+.sui-icons-Download:before { content: "\ea02"; }
+.sui-icons-Info:before { content: "\ea03"; }
+.sui-icons-Plus:before { content: "\ea04"; }
+.sui-icons-Preview:before { content: "\ea05"; }
+.sui-icons-ThumbsUp:before { content: "\ea06"; }
+.sui-icons-apps:before { content: "\ea07"; }
+.sui-icons-arrow-left:before { content: "\ea08"; }
+.sui-icons-arrow-right:before { content: "\ea09"; }
+.sui-icons-checkmark:before { content: "\ea0a"; }
+.sui-icons-clipboard:before { content: "\ea0b"; }
+.sui-icons-close:before { content: "\ea0c"; }
+.sui-icons-coins:before { content: "\ea0d"; }
+.sui-icons-globe:before { content: "\ea0e"; }
+.sui-icons-hand-coins:before { content: "\ea0f"; }
+.sui-icons-history:before { content: "\ea10"; }
+.sui-icons-logout:before { content: "\ea11"; }
+.sui-icons-nfts:before { content: "\ea12"; }
+.sui-icons-percentage-polygon:before { content: "\ea13"; }
+.sui-icons-person:before { content: "\ea14"; }
+.sui-icons-search:before { content: "\ea15"; }
+.sui-icons-sui-chevron-right:before { content: "\ea16"; }
+.sui-icons-sui-logo-icon:before { content: "\ea17"; }
+.sui-icons-sui-logo-txt:before { content: "\ea18"; }
+.sui-icons-tokens:before { content: "\ea19"; }
+.sui-icons-version-icon:before { content: "\ea1a"; }
 
 $sui-icons-Buy: "\ea01";
-$sui-icons-Info: "\ea02";
-$sui-icons-Preview: "\ea03";
-$sui-icons-apps: "\ea04";
-$sui-icons-arrow-left: "\ea05";
-$sui-icons-arrow-right: "\ea06";
-$sui-icons-checkmark: "\ea07";
-$sui-icons-clipboard: "\ea08";
-$sui-icons-close: "\ea09";
-$sui-icons-coins: "\ea0a";
-$sui-icons-globe: "\ea0b";
-$sui-icons-hand-coins: "\ea0c";
-$sui-icons-history: "\ea0d";
-$sui-icons-logout: "\ea0e";
-$sui-icons-nfts: "\ea0f";
-$sui-icons-percentage-polygon: "\ea10";
-$sui-icons-person: "\ea11";
-$sui-icons-search: "\ea12";
-$sui-icons-sui-chevron-right: "\ea13";
-$sui-icons-sui-logo-icon: "\ea14";
-$sui-icons-sui-logo-txt: "\ea15";
-$sui-icons-tokens: "\ea16";
-$sui-icons-version-icon: "\ea17";
+$sui-icons-Download: "\ea02";
+$sui-icons-Info: "\ea03";
+$sui-icons-Plus: "\ea04";
+$sui-icons-Preview: "\ea05";
+$sui-icons-ThumbsUp: "\ea06";
+$sui-icons-apps: "\ea07";
+$sui-icons-arrow-left: "\ea08";
+$sui-icons-arrow-right: "\ea09";
+$sui-icons-checkmark: "\ea0a";
+$sui-icons-clipboard: "\ea0b";
+$sui-icons-close: "\ea0c";
+$sui-icons-coins: "\ea0d";
+$sui-icons-globe: "\ea0e";
+$sui-icons-hand-coins: "\ea0f";
+$sui-icons-history: "\ea10";
+$sui-icons-logout: "\ea11";
+$sui-icons-nfts: "\ea12";
+$sui-icons-percentage-polygon: "\ea13";
+$sui-icons-person: "\ea14";
+$sui-icons-search: "\ea15";
+$sui-icons-sui-chevron-right: "\ea16";
+$sui-icons-sui-logo-icon: "\ea17";
+$sui-icons-sui-logo-txt: "\ea18";
+$sui-icons-tokens: "\ea19";
+$sui-icons-version-icon: "\ea1a";
 

wallet/font-icons/output/sui-icons.ts

@@ -3,8 +3,11 @@
 
 export enum SuiIcons {
   Buy = "sui-icons-Buy",
+  Download = "sui-icons-Download",
   Info = "sui-icons-Info",
+  Plus = "sui-icons-Plus",
   Preview = "sui-icons-Preview",
+  ThumbsUp = "sui-icons-ThumbsUp",
   Apps = "sui-icons-apps",
   ArrowLeft = "sui-icons-arrow-left",
   ArrowRight = "sui-icons-arrow-right",
@@ -27,6 +30,6 @@ export enum SuiIcons {
   VersionIcon = "sui-icons-version-icon"
 }
 
-export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Info" | "sui-icons-Preview" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-tokens" | "sui-icons-version-icon"
-export type SuiIconsIcon = "Buy" | "Info" | "Preview" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "tokens" | "version-icon"
-export const SuiIconsPrefix = "sui-icons-"
+export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-tokens" | "sui-icons-version-icon"
+export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "tokens" | "version-icon"
+export const SuiIconsPrefix = "sui-icons-"

wallet/src/ui/app/pages/home/Home.module.scss

@@ -1,13 +1,15 @@
 @use '_variables' as v;
 @use '_values/sizing';
 @use '_utils';
+@use '_values/colors';
 
 .container {
     display: flex;
     flex-flow: column nowrap;
     flex-grow: 1;
     width: 100%;
     max-height: 100%;
+    background-color: colors.$gray-40;
 }
 
 .header {

wallet/src/ui/app/pages/initialize/InitializePage.module.scss

@@ -5,6 +5,9 @@
     margin: 0 auto;
     max-width: 800px;
     padding: 16px 8px 8px;
+    height: 100%;
+    max-height: 800px;
+    justify-content: center;
 }
 
 .header {

wallet/src/ui/app/pages/initialize/backup/Backup.module.scss

@@ -1,8 +1,77 @@
-.mnemonic {
-    padding: 12px;
-    border: 1px solid #90c2d866;
-    border-radius: 6px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 400;
+@use '_values/colors';
+@use '_utils';
+
+.wallet-created {
+    .mnemonic {
+        padding: 14px;
+        border-radius: 15px;
+        margin: auto;
+        margin-bottom: 16px;
+        background: colors.$white;
+        border: 1px solid #e9eaeb;
+        font-family: Inter, sans-serif;
+        width: 320px;
+        height: 90px;
+
+        @include utils.typography('header/search-text');
+
+        line-height: 130%;
+        color: colors.$gray-85;
+    }
+
+    .header-title {
+        text-align: left;
+        margin-bottom: 20px;
+        color: colors.$gray-100;
+        font-size: 30px;
+        font-weight: 700;
+        line-height: 36px;
+    }
+
+    .sub-title {
+        text-align: center;
+        color: colors.$gray-90;
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 100%;
+    }
+
+    .success-icon {
+        border-radius: 50%;
+        width: 46px;
+        height: 46px;
+        margin: auto;
+        border: 3px dotted colors.$success;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .success-bg {
+            background-color: colors.$success;
+            border-radius: 50%;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        i {
+            color: colors.$white;
+            font-size: 25px;
+        }
+    }
+
+    .btn {
+        width: 100%;
+        margin: auto;
+        max-width: 320px;
+        margin-top: 20px;
+
+        i {
+            margin-right: 10px;
+            font-weight: 500;
+            font-size: 12px;
+        }
+    }
 }

wallet/src/ui/app/pages/initialize/backup/index.tsx

@@ -4,6 +4,8 @@
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import Button from '_app/shared/button';
+import Icon, { SuiIcons } from '_components/icon';
 import { useAppDispatch, useAppSelector } from '_src/ui/app/hooks';
 import { setMnemonic } from '_src/ui/app/redux/slices/account';
 
@@ -22,13 +24,28 @@ const BackupPage = () => {
         }
     }, [navigate, dispatch, mnemonic]);
     return (
-        <>
-            <h1>Backup Recovery Passphrase</h1>
+        <div className={st.walletCreated}>
+            <div className={st.successIcon}>
+                <div className={st.successBg}>
+                    <Icon icon={SuiIcons.ThumbsUp} />
+                </div>
+            </div>
+
+            <h1 className={st.headerTitle}>Wallet Successfully Created!</h1>
+            <h2 className={st.subTitle}>Backup Recovery Passphrase</h2>
             <div className={st.mnemonic}>{mnemonic}</div>
-            <button type="button" onClick={handleOnClick} className="btn">
+
+            <Button
+                type="button"
+                className={st.btn}
+                size="large"
+                mode="primary"
+                onClick={handleOnClick}
+            >
+                <Icon icon={SuiIcons.Checkmark} className={st.success} />
                 Done
-            </button>
-        </>
+            </Button>
+        </div>
     );
 };