home icon change (MystenLabs#4252)

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

@@ -21,51 +21,57 @@
 .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-Union:before { content: "\ea07"; }
+.sui-icons-activity:before { content: "\ea08"; }
+.sui-icons-apps:before { content: "\ea09"; }
+.sui-icons-arrow-left:before { content: "\ea0a"; }
+.sui-icons-arrow-right:before { content: "\ea0b"; }
+.sui-icons-checkmark:before { content: "\ea0c"; }
+.sui-icons-clipboard:before { content: "\ea0d"; }
+.sui-icons-close:before { content: "\ea0e"; }
+.sui-icons-coins:before { content: "\ea0f"; }
+.sui-icons-globe:before { content: "\ea10"; }
+.sui-icons-hand-coins:before { content: "\ea11"; }
+.sui-icons-history:before { content: "\ea12"; }
+.sui-icons-logout:before { content: "\ea13"; }
+.sui-icons-nfts:before { content: "\ea14"; }
+.sui-icons-percentage-polygon:before { content: "\ea15"; }
+.sui-icons-person:before { content: "\ea16"; }
+.sui-icons-search:before { content: "\ea17"; }
+.sui-icons-sui-chevron-right:before { content: "\ea18"; }
+.sui-icons-sui-logo-icon:before { content: "\ea19"; }
+.sui-icons-sui-logo-txt:before { content: "\ea1a"; }
+.sui-icons-swap:before { content: "\ea1b"; }
+.sui-icons-tokens:before { content: "\ea1c"; }
+.sui-icons-version-icon:before { content: "\ea1d"; }
 
 $sui-icons-Buy: "\ea01";
 $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";
+$sui-icons-Union: "\ea07";
+$sui-icons-activity: "\ea08";
+$sui-icons-apps: "\ea09";
+$sui-icons-arrow-left: "\ea0a";
+$sui-icons-arrow-right: "\ea0b";
+$sui-icons-checkmark: "\ea0c";
+$sui-icons-clipboard: "\ea0d";
+$sui-icons-close: "\ea0e";
+$sui-icons-coins: "\ea0f";
+$sui-icons-globe: "\ea10";
+$sui-icons-hand-coins: "\ea11";
+$sui-icons-history: "\ea12";
+$sui-icons-logout: "\ea13";
+$sui-icons-nfts: "\ea14";
+$sui-icons-percentage-polygon: "\ea15";
+$sui-icons-person: "\ea16";
+$sui-icons-search: "\ea17";
+$sui-icons-sui-chevron-right: "\ea18";
+$sui-icons-sui-logo-icon: "\ea19";
+$sui-icons-sui-logo-txt: "\ea1a";
+$sui-icons-swap: "\ea1b";
+$sui-icons-tokens: "\ea1c";
+$sui-icons-version-icon: "\ea1d";
 

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

@@ -8,6 +8,8 @@ export enum SuiIcons {
   Plus = "sui-icons-Plus",
   Preview = "sui-icons-Preview",
   ThumbsUp = "sui-icons-ThumbsUp",
+  Union = "sui-icons-Union",
+  Activity = "sui-icons-activity",
   Apps = "sui-icons-apps",
   ArrowLeft = "sui-icons-arrow-left",
   ArrowRight = "sui-icons-arrow-right",
@@ -26,10 +28,11 @@ export enum SuiIcons {
   SuiChevronRight = "sui-icons-sui-chevron-right",
   SuiLogoIcon = "sui-icons-sui-logo-icon",
   SuiLogoTxt = "sui-icons-sui-logo-txt",
+  Swap = "sui-icons-swap",
   Tokens = "sui-icons-tokens",
   VersionIcon = "sui-icons-version-icon"
 }
 
-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 type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-Union" | "sui-icons-activity" | "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-swap" | "sui-icons-tokens" | "sui-icons-version-icon"
+export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "Union" | "activity" | "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" | "swap" | "tokens" | "version-icon"
 export const SuiIconsPrefix = "sui-icons-"

wallet/src/ui/app/components/navigation/Navigation.module.scss

@@ -32,15 +32,31 @@
     flex-grow: 1;
     flex-basis: 80px;
 
+    &:hover {
+        color: colors.$nav-item-hover;
+
+        i {
+            color: colors.$nav-item-hover;
+        }
+    }
+
     &.active {
         color: v.use(v.$colors-nav-item-highlighted-color);
+
+        &:hover {
+            color: #007195;
+
+            i {
+                color: #007195;
+            }
+        }
     }
 }
 
 .icon {
     font-size: 32px;
     margin-bottom: 2px;
-    color: colors.$sui-steel-blue;
+    color: colors.$gray-60;
 
     .active > & {
         color: v.use(v.$colors-nav-item-icon-highlighted-color);
@@ -57,7 +73,7 @@
     font-weight: 600;
 
     .active > & {
-        font-weight: 700;
+        font-weight: 600;
     }
 }
 
@@ -66,3 +82,8 @@
     opacity: 0;
     transition: transform 300ms ease-in-out, opacity 0ms ease-in 300ms;
 }
+
+.wallet-activity-icon {
+    font-size: 26px;
+    font-weight: 500;
+}

wallet/src/ui/app/components/navigation/index.tsx

@@ -38,7 +38,10 @@ function Navigation({ className }: NavigationProps) {
                 className={makeLinkCls}
                 title="Transactions"
             >
-                <Icon className={st.icon} icon={SuiIcons.History} />
+                <Icon
+                    className={cl(st.icon, st.walletActivityIcon)}
+                    icon={SuiIcons.Activity}
+                />
                 <span className={st.title}>Activity</span>
             </NavLink>
         </nav>

wallet/src/ui/app/pages/home/tokens/TokensPage.module.scss

@@ -19,8 +19,10 @@
 .actions {
     display: flex;
     flex-flow: row nowrap;
-    max-width: 100%;
-    margin-bottom: 25px;
+    gap: 8px;
+    margin-bottom: 12px;
+    width: 320px;
+    justify-content: space-between;
 }
 
 .title {
@@ -57,3 +59,16 @@
     margin-top: 47px;
     align-self: center;
 }
+
+.staking {
+    a {
+        display: flex;
+        flex-flow: row;
+        width: 320px;
+        height: 48px;
+        justify-content: center;
+        border-radius: 15px;
+    }
+
+    margin-bottom: 25px;
+}

wallet/src/ui/app/pages/home/tokens/icon-link/IconLink.module.scss

@@ -1,43 +1,66 @@
 @use '_values/colors';
 @use 'sass:color';
+@use '_utils';
 
 .container {
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
-    background-color: color.adjust(colors.$sui-steel-blue, $alpha: -0.9);
+    background-color: color.adjust(colors.$sui-blue, $alpha: -0.9);
     border-radius: 10px;
     padding: 10px 14px;
     text-decoration: none;
-    color: colors.$sui-dark-blue;
+    color: colors.$cta-blue;
     flex-basis: 98px;
 
-    & + & {
-        margin-left: 8px;
+    i {
+        font-size: 18px;
+        font-weight: 400;
+    }
+
+    &:nth-child(2) {
+        i {
+            display: flex;
+            position: relative;
+            align-items: center;
+            justify-content: center;
+
+            @include utils.angled-arrow;
+
+            font-size: 18px;
+            font-weight: 400;
+            margin: auto;
+            color: colors.$cta-blue;
+        }
     }
-}
 
-.disabled {
-    pointer-events: none;
-    opacity: 0.5;
+    &:hover {
+        color: colors.$cta-blue-hover;
+    }
+
+    &.disabled {
+        pointer-events: none;
+        background-color: colors.$gray-40;
+        color: colors.$gray-60;
+
+        i {
+            color: colors.$gray-60;
+        }
+    }
 }
 
 .icon-container {
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    background-color: colors.$cta-blue;
-    color: colors.$white;
+    color: colors.$cta-blue;
     padding: 10px;
     font-size: 16px;
 }
 
 .text {
-    margin-top: 8px;
     text-align: center;
     font-weight: 600;
     font-size: 13px;
-    letter-spacing: -0.03em;
 }

wallet/src/ui/app/pages/home/tokens/index.tsx

@@ -43,22 +43,31 @@ function TokensPage() {
             </div>
             <div className={st.actions}>
                 <IconLink
-                    icon={SuiIcons.Coins}
+                    icon={SuiIcons.Buy}
                     to="/"
                     disabled={true}
-                    text="Buy, Sell & Swap"
+                    text="Buy"
                 />
                 <IconLink
-                    icon={SuiIcons.HandCoins}
+                    icon={SuiIcons.ArrowLeft}
                     to={`/send?${new URLSearchParams({
                         type: GAS_TYPE_ARG,
                     }).toString()}`}
-                    text="Send & Receive"
+                    text="Send"
                 />
                 <IconLink
-                    icon={SuiIcons.PercentagePolygon}
+                    icon={SuiIcons.Swap}
+                    to="/"
+                    disabled={true}
+                    text="Swap"
+                />
+            </div>
+            <div className={st.staking}>
+                <IconLink
+                    icon={SuiIcons.Union}
                     to="/stake"
-                    text="Stake & Earn"
+                    disabled={true}
+                    text="Stake & Earn SUI"
                 />
             </div>
             <div className={st.title}>OTHER COINS</div>

wallet/src/ui/styles/themes/dark.scss

@@ -10,7 +10,7 @@ $values: (
     c-var.$text-on-main-content-background: c-val.$white,
     shadows.$main-content: 0 0 49px rgb(103 103 103 / 13%),
     c-var.$nav-background-color: #4e545b33,
-    c-var.$nav-background-filter: blur(25px),
+    c-var.$nav-background-filter: blur(40px),
     c-var.$nav-item-color: c-val.$sui-steel-blue,
     c-var.$nav-item-highlighted-color: c-val.$white,
     c-var.$nav-item-icon-highlighted-color: c-val.$sui-blue,

wallet/src/ui/styles/themes/light.scss

@@ -13,10 +13,10 @@ $values: (
         0 0 44px rgb(0 0 0 / 5%),
         0 0 6px rgb(0 0 0 / 2%),
     ),
-    c-var.$nav-background-color: #dde3eb33,
-    c-var.$nav-background-filter: blur(25px),
+    c-var.$nav-background-color: #f0f9ffb0,
+    c-var.$nav-background-filter: blur(40px),
     c-var.$nav-item-color: c-val.$gray-60,
-    c-var.$nav-item-highlighted-color: c-val.$gray-95,
+    c-var.$nav-item-highlighted-color: c-val.$cta-blue,
     c-var.$nav-item-icon-highlighted-color: transparent,
     c-var.$nav-item-icon-highlighted-gradient-color:
         linear-gradient(135deg, #589aea 0%, #4c75a6 100%),

wallet/src/ui/styles/values/colors.scss

@@ -23,3 +23,4 @@ $error: #ca2d2d;
 $error-light: #ffe7e7;
 $cta-light-blue: #adcadd;
 $shadow-color: #1018280d;
+$nav-item-hover: #627885;