From 1f5ab78a27d44797b5439f4dcf9db8bec23fdf52 Mon Sep 17 00:00:00 2001
From: Pavlos Chrysochoidis <10210143+pchrysochoidis@users.noreply.github.com>
Date: Tue, 12 Jul 2022 18:44:36 +0300
Subject: [PATCH] wallet-ext: bottom navigation bar

* moved current header to the new navigation bar using new icons
---
 .../app/components/header/Header.module.scss  | 30 ----------
 wallet/src/ui/app/components/header/index.tsx | 39 -------------
 .../navigation/Navigation.module.scss         | 56 +++++++++++++++++++
 .../ui/app/components/navigation/index.tsx    | 47 ++++++++++++++++
 wallet/src/ui/app/pages/home/Home.module.scss | 10 +++-
 wallet/src/ui/app/pages/home/index.tsx        |  8 ++-
 .../ui/app/pages/layout/Layout.module.scss    | 14 +++--
 wallet/src/ui/app/pages/layout/index.tsx      |  7 ++-
 wallet/src/ui/app/redux/slices/app/index.ts   | 13 ++++-
 wallet/src/ui/styles/themes/dark.scss         |  6 ++
 wallet/src/ui/styles/themes/index.scss        |  3 +-
 wallet/src/ui/styles/themes/light.scss        |  7 +++
 wallet/src/ui/styles/values/colors.scss       |  2 +
 wallet/src/ui/styles/values/index.scss        |  2 +-
 .../values/{dimensions.scss => sizing.scss}   |  1 +
 wallet/src/ui/styles/variables/colors.scss    |  6 ++
 wallet/src/ui/styles/variables/index.scss     |  5 ++
 wallet/src/ui/styles/variables/sizing.scss    |  1 +
 18 files changed, 174 insertions(+), 83 deletions(-)
 delete mode 100644 wallet/src/ui/app/components/header/Header.module.scss
 delete mode 100644 wallet/src/ui/app/components/header/index.tsx
 create mode 100644 wallet/src/ui/app/components/navigation/Navigation.module.scss
 create mode 100644 wallet/src/ui/app/components/navigation/index.tsx
 rename wallet/src/ui/styles/values/{dimensions.scss => sizing.scss} (69%)
 create mode 100644 wallet/src/ui/styles/variables/sizing.scss

diff --git a/wallet/src/ui/app/components/header/Header.module.scss b/wallet/src/ui/app/components/header/Header.module.scss
deleted file mode 100644
index dbad525fc0c58..0000000000000
--- a/wallet/src/ui/app/components/header/Header.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.container {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: space-around;
-    align-self: stretch;
-}
-
-.link {
-    margin-left: 8px;
-    line-height: 32px;
-    min-width: 54px;
-
-    &:first-child {
-        margin-left: 0;
-    }
-}
-
-.icon {
-    padding: 12px;
-    font-size: 24px;
-    display: block;
-    color: black;
-    transition: all 200ms ease-in-out;
-
-    .active > & {
-        font-size: 30px;
-        color: #4caad8;
-    }
-}
diff --git a/wallet/src/ui/app/components/header/index.tsx b/wallet/src/ui/app/components/header/index.tsx
deleted file mode 100644
index b82cd76af5955..0000000000000
--- a/wallet/src/ui/app/components/header/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright (c) 2022, Mysten Labs, Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-import cl from 'classnames';
-import { memo } from 'react';
-import { NavLink } from 'react-router-dom';
-
-import Icon from '_components/icon';
-
-import st from './Header.module.scss';
-
-function makeLinkCls({ isActive }: { isActive: boolean }) {
-    return cl(st.link, { [st.active]: isActive });
-}
-
-function Header() {
-    return (
-        <div className={st.container}>
-            <NavLink to="./tokens" className={makeLinkCls} title="Tokens">
-                <Icon className={st.icon} icon="coin" />
-            </NavLink>
-            <NavLink to="./nfts" className={makeLinkCls} title="NFTs">
-                <Icon className={st.icon} icon="collection" />
-            </NavLink>
-            <NavLink
-                to="./transactions"
-                className={makeLinkCls}
-                title="Transactions"
-            >
-                <Icon className={st.icon} icon="arrow-left-right" />
-            </NavLink>
-            <NavLink to="./settings" className={makeLinkCls} title="Settings">
-                <Icon className={st.icon} icon="gear" />
-            </NavLink>
-        </div>
-    );
-}
-
-export default memo(Header);
diff --git a/wallet/src/ui/app/components/navigation/Navigation.module.scss b/wallet/src/ui/app/components/navigation/Navigation.module.scss
new file mode 100644
index 0000000000000..53f15dc4559eb
--- /dev/null
+++ b/wallet/src/ui/app/components/navigation/Navigation.module.scss
@@ -0,0 +1,56 @@
+@use '_variables' as v;
+@use '_values' as values;
+
+.container {
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: v.use(v.$colors-nav-background-color);
+    backdrop-filter: v.use(v.$colors-nav-background-filter);
+    height: values.$sizing-nav-height;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: stretch;
+    padding: 5px 10px;
+    overflow: hidden;
+}
+
+.link {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    padding: 6px 6px 14px;
+    text-decoration: none;
+    color: v.use(v.$colors-nav-item-color);
+    user-select: none;
+    flex-grow: 1;
+    flex-basis: 80px;
+
+    &.active {
+        color: v.use(v.$colors-nav-item-highlighted-color);
+    }
+}
+
+.icon {
+    font-size: 32px;
+    margin-bottom: 2px;
+
+    .active > & {
+        color: v.use(v.$colors-nav-item-icon-highlighted-color);
+        background-clip: text;
+        background-image: v.use(
+            v.$colors-nav-item-icon-highlighted-gradient-color
+        );
+    }
+}
+
+.title {
+    font-size: 13px;
+    line-height: 12px;
+    font-weight: 600;
+
+    .active > & {
+        font-weight: 700;
+    }
+}
diff --git a/wallet/src/ui/app/components/navigation/index.tsx b/wallet/src/ui/app/components/navigation/index.tsx
new file mode 100644
index 0000000000000..5b20f0e392d21
--- /dev/null
+++ b/wallet/src/ui/app/components/navigation/index.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import cl from 'classnames';
+import { memo } from 'react';
+import { NavLink } from 'react-router-dom';
+
+import Icon, { SuiIcons } from '_components/icon';
+
+import st from './Navigation.module.scss';
+
+function makeLinkCls({ isActive }: { isActive: boolean }) {
+    return cl(st.link, { [st.active]: isActive });
+}
+
+export type NavigationProps = {
+    className?: string;
+};
+
+function Navigation({ className }: NavigationProps) {
+    return (
+        <nav className={cl(st.container, className)}>
+            <NavLink to="./tokens" className={makeLinkCls} title="Tokens">
+                <Icon className={st.icon} icon={SuiIcons.Tokens} />
+                <span className={st.title}>Coins</span>
+            </NavLink>
+            <NavLink to="./nfts" className={makeLinkCls} title="NFTs">
+                <Icon className={st.icon} icon={SuiIcons.Nfts} />
+                <span className={st.title}>NFTs</span>
+            </NavLink>
+            <NavLink
+                to="./transactions"
+                className={makeLinkCls}
+                title="Transactions"
+            >
+                <Icon className={st.icon} icon={SuiIcons.History} />
+                <span className={st.title}>Activity</span>
+            </NavLink>
+            <NavLink to="./settings" className={makeLinkCls} title="Settings">
+                <Icon className={st.icon} icon={SuiIcons.Apps} />
+                <span className={st.title}>Settings</span>
+            </NavLink>
+        </nav>
+    );
+}
+
+export default memo(Navigation);
diff --git a/wallet/src/ui/app/pages/home/Home.module.scss b/wallet/src/ui/app/pages/home/Home.module.scss
index 402efebbb25e6..9b6bade7971c8 100644
--- a/wallet/src/ui/app/pages/home/Home.module.scss
+++ b/wallet/src/ui/app/pages/home/Home.module.scss
@@ -22,12 +22,18 @@
     flex-flow: column nowrap;
     align-items: center;
     background: v.use(v.$colors-main-content-background);
-    padding: 25px;
     border-radius: 20px 20px 0 0;
     flex-grow: 1;
     box-shadow: v.use(v.$shadows-main-content);
+    overflow: hidden;
+    position: relative;
+}
+
+.main {
     overflow: auto;
-    max-height: 100%;
+    padding: 25px;
+    padding-bottom: calc(v.use(v.$sizing-nav-height-placeholder) + 12px);
+    flex-grow: 1;
 }
 
 .logo {
diff --git a/wallet/src/ui/app/pages/home/index.tsx b/wallet/src/ui/app/pages/home/index.tsx
index ae70ce7f33203..98c4df207aae0 100644
--- a/wallet/src/ui/app/pages/home/index.tsx
+++ b/wallet/src/ui/app/pages/home/index.tsx
@@ -5,9 +5,9 @@ import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { of, filter, switchMap, from, defer, repeat } from 'rxjs';
 
-import Header from '_components/header';
 import Loading from '_components/loading';
 import Logo from '_components/logo';
+import Navigation from '_components/navigation';
 import { useInitializedGuard, useAppDispatch } from '_hooks';
 import PageLayout from '_pages/layout';
 import { fetchAllOwnedObjects } from '_redux/slices/sui-objects';
@@ -41,8 +41,10 @@ const HomePage = () => {
                         <Logo className={st.logo} txt={true} />
                     </div>
                     <div className={st.content}>
-                        <Header />
-                        <Outlet />
+                        <main className={st.main}>
+                            <Outlet />
+                        </main>
+                        <Navigation />
                     </div>
                 </div>
             </Loading>
diff --git a/wallet/src/ui/app/pages/layout/Layout.module.scss b/wallet/src/ui/app/pages/layout/Layout.module.scss
index 2f62b57a38ba9..0fa395859170a 100644
--- a/wallet/src/ui/app/pages/layout/Layout.module.scss
+++ b/wallet/src/ui/app/pages/layout/Layout.module.scss
@@ -1,13 +1,19 @@
-@use '_values/dimensions';
+@use '_values' as val;
+@use '_variables' as v;
 
 .container {
     display: flex;
     align-items: center;
     flex-flow: column nowrap;
+    @include v.set(v.$sizing-nav-height-placeholder, val.$sizing-nav-height);
 
-    &.forced-popup-dimensions,
+    &.nav-hidden {
+        @include v.set(v.$sizing-nav-height-placeholder, 0);
+    }
+
+    &.forced-popup-size,
     :global(.is-popup) & {
-        width: dimensions.$popup-width;
-        height: dimensions.$popup-height;
+        width: val.$sizing-popup-width;
+        height: val.$sizing-popup-height;
     }
 }
diff --git a/wallet/src/ui/app/pages/layout/index.tsx b/wallet/src/ui/app/pages/layout/index.tsx
index 8d38d1cdeafe7..57632f23b163a 100644
--- a/wallet/src/ui/app/pages/layout/index.tsx
+++ b/wallet/src/ui/app/pages/layout/index.tsx
@@ -5,7 +5,8 @@ import cl from 'classnames';
 import { memo } from 'react';
 
 import Loading from '_components/loading';
-import { useFullscreenGuard } from '_hooks';
+import { useAppSelector, useFullscreenGuard } from '_hooks';
+import { getNavIsVisible } from '_redux/slices/app';
 
 import type { ReactNode } from 'react';
 
@@ -23,11 +24,13 @@ function PageLayout({
     children,
 }: PageLayoutProps) {
     const guardLoading = useFullscreenGuard(forceFullscreen);
+    const isNavVisible = useAppSelector(getNavIsVisible);
     return (
         <Loading loading={guardLoading}>
             <div
                 className={cl(st.container, {
-                    [st.forcedPopupDimensions]: limitToPopUpSize,
+                    [st.forcedPopupSize]: limitToPopUpSize,
+                    [st.navHidden]: !isNavVisible,
                 })}
             >
                 {children}
diff --git a/wallet/src/ui/app/redux/slices/app/index.ts b/wallet/src/ui/app/redux/slices/app/index.ts
index a69f27e04365e..4076708a52b9e 100644
--- a/wallet/src/ui/app/redux/slices/app/index.ts
+++ b/wallet/src/ui/app/redux/slices/app/index.ts
@@ -11,18 +11,21 @@ import { getTransactionsByAddress } from '_redux/slices/txresults';
 
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { API_ENV } from '_app/ApiProvider';
+import type { RootState } from '_redux/RootReducer';
 import type { AppThunkConfig } from '_store/thunk-extras';
 
 type AppState = {
     appType: AppType;
     apiEnv: API_ENV;
     showHideNetwork: boolean;
+    navVisible: boolean;
 };
 
 const initialState: AppState = {
     appType: AppType.unknown,
     apiEnv: DEFAULT_API_ENV,
     showHideNetwork: false,
+    navVisible: true,
 };
 
 // On network change, set setNewJsonRpcProvider, fetch all owned objects, and fetch all transactions
@@ -64,11 +67,19 @@ const slice = createSlice({
         setNetworkSelector: (state, { payload }: PayloadAction<boolean>) => {
             state.showHideNetwork = !payload;
         },
+        setNavVisibility: (
+            state,
+            { payload: isVisible }: PayloadAction<boolean>
+        ) => {
+            state.navVisible = isVisible;
+        },
     },
 
     initialState,
 });
 
-export const { initAppType, setApiEnv, setNetworkSelector } = slice.actions;
+export const { initAppType, setApiEnv, setNetworkSelector, setNavVisibility } =
+    slice.actions;
+export const getNavIsVisible = ({ app }: RootState) => app.navVisible;
 
 export default slice.reducer;
diff --git a/wallet/src/ui/styles/themes/dark.scss b/wallet/src/ui/styles/themes/dark.scss
index 316e4bb331e73..7fe7d6016e16d 100644
--- a/wallet/src/ui/styles/themes/dark.scss
+++ b/wallet/src/ui/styles/themes/dark.scss
@@ -9,4 +9,10 @@ $values: (
     c-var.$main-content-background: #0d1f36,
     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-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,
+    c-var.$nav-item-icon-highlighted-gradient-color: none,
 );
diff --git a/wallet/src/ui/styles/themes/index.scss b/wallet/src/ui/styles/themes/index.scss
index 5c6e1ddb109e0..66673e8e0d34c 100644
--- a/wallet/src/ui/styles/themes/index.scss
+++ b/wallet/src/ui/styles/themes/index.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use './light';
 @use './dark';
+@use '_variables' as v;
 
 @mixin apply-theme($name, $values, $default-values) {
     @each $variable, $default-value in $default-values {
@@ -9,7 +10,7 @@
             $final-value: map.get($values, $variable);
         }
 
-        #{$variable}: $final-value;
+        @include v.set($variable, $final-value);
     }
 }
 
diff --git a/wallet/src/ui/styles/themes/light.scss b/wallet/src/ui/styles/themes/light.scss
index 94f52f1532714..caca5bd7599b3 100644
--- a/wallet/src/ui/styles/themes/light.scss
+++ b/wallet/src/ui/styles/themes/light.scss
@@ -13,4 +13,11 @@ $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-item-color: c-val.$gray-60,
+    c-var.$nav-item-highlighted-color: c-val.$gray-95,
+    c-var.$nav-item-icon-highlighted-color: transparent,
+    c-var.$nav-item-icon-highlighted-gradient-color:
+        linear-gradient(135deg, #589aea 0%, #4c75a6 100%),
 );
diff --git a/wallet/src/ui/styles/values/colors.scss b/wallet/src/ui/styles/values/colors.scss
index 1d39746b02d7d..acea3cc8d32a1 100644
--- a/wallet/src/ui/styles/values/colors.scss
+++ b/wallet/src/ui/styles/values/colors.scss
@@ -6,3 +6,5 @@ $gray-70: #898d93;
 $gray-75: #767a81;
 $gray-95: #2a3645;
 $gray-100: #182435;
+$sui-blue: #6fbcf0;
+$sui-steel-blue: #a0b6c3;
diff --git a/wallet/src/ui/styles/values/index.scss b/wallet/src/ui/styles/values/index.scss
index fc529bd67e654..b52af90a99419 100644
--- a/wallet/src/ui/styles/values/index.scss
+++ b/wallet/src/ui/styles/values/index.scss
@@ -1,2 +1,2 @@
-@forward './dimensions' as dimensions-*;
+@forward './sizing' as sizing-*;
 @forward './colors' as colors-*;
diff --git a/wallet/src/ui/styles/values/dimensions.scss b/wallet/src/ui/styles/values/sizing.scss
similarity index 69%
rename from wallet/src/ui/styles/values/dimensions.scss
rename to wallet/src/ui/styles/values/sizing.scss
index 9b65252ed3ff6..ebb5119db4db9 100644
--- a/wallet/src/ui/styles/values/dimensions.scss
+++ b/wallet/src/ui/styles/values/sizing.scss
@@ -1,2 +1,3 @@
 $popup-width: 360px;
 $popup-height: 595px;
+$nav-height: 76px;
diff --git a/wallet/src/ui/styles/variables/colors.scss b/wallet/src/ui/styles/variables/colors.scss
index da536c7b1854d..b3d1709d82974 100644
--- a/wallet/src/ui/styles/variables/colors.scss
+++ b/wallet/src/ui/styles/variables/colors.scss
@@ -3,3 +3,9 @@ $background-color: '--colors-background-color';
 $text-on-background: '--colors-text-on-background';
 $main-content-background: '--colors-main-content-background';
 $text-on-main-content-background: '--colors-text-on-main-content-background';
+$nav-background-color: '--colors-nav-background-color';
+$nav-background-filter: '--colors-nav-background-filter';
+$nav-item-color: '--colors-nav-item-color';
+$nav-item-highlighted-color: '--colors-nav-item-highlighted-color';
+$nav-item-icon-highlighted-color: '--colors-nav-item-icon-highlighted-color';
+$nav-item-icon-highlighted-gradient-color: '--colors-nav-item-icon-highlighted-gradient-color';
diff --git a/wallet/src/ui/styles/variables/index.scss b/wallet/src/ui/styles/variables/index.scss
index 2a33434955084..08d34a012e88c 100644
--- a/wallet/src/ui/styles/variables/index.scss
+++ b/wallet/src/ui/styles/variables/index.scss
@@ -1,6 +1,11 @@
 @forward './colors' as colors-*;
 @forward './shadows' as shadows-*;
+@forward './sizing' as sizing-*;
 
 @function use($variable) {
     @return var(#{$variable});
 }
+
+@mixin set($variable, $value) {
+    #{$variable}: $value;
+}
diff --git a/wallet/src/ui/styles/variables/sizing.scss b/wallet/src/ui/styles/variables/sizing.scss
new file mode 100644
index 0000000000000..2d76bdf08d042
--- /dev/null
+++ b/wallet/src/ui/styles/variables/sizing.scss
@@ -0,0 +1 @@
+$nav-height-placeholder: '--sizing-navigation-placeholder-height';