feat: adapt settings for mobile (UI) 2

packages/mobile/App.svelte

@@ -34,7 +34,7 @@
     import { Stage } from 'shared/lib/typings/stage'
 
     mobile.set(process.env.PLATFORM == Platforms.MOBILE)
-    stage.set(Stage[process.env.STAGE.toUpperCase()] ?? Stage.ALPHA)
+    stage.set(Stage[process.env.STAGE?.toUpperCase()] ?? Stage.ALPHA)
 
     $: $appSettings.darkMode
         ? document.body.classList.add('scheme-dark')

packages/shared/components/Button.svelte

@@ -25,6 +25,7 @@
     export let inlineStyle = ''
     export let showHoverText = undefined
     export let iconOnly = false
+    export let unstyled = false
 
     export let onClick = (): void | string => ''
 
@@ -133,7 +134,7 @@
 {/if}
 
 <style type="text/scss">
-    button {
+    button:not(.unstyled) {
         @apply bg-blue-500;
         min-width: 100px;
         span {

packages/shared/components/MainMenu.svelte

@@ -0,0 +1,89 @@
+<script lang="typescript">
+    import { Drawer, Icon, Text } from 'shared/components'
+    import { logout } from 'shared/lib/app'
+    import { isBright, getInitials } from 'shared/lib/helpers'
+    import { activeProfile, getColor } from 'shared/lib/profile'
+    import { selectedAccount } from 'shared/lib/wallet'
+    import { Settings } from 'shared/routes'
+    import { settingsRoute, settingsRouter, SettingsRoute } from '@core/router'
+    import { Locale } from '@core/i18n'
+
+    export let locale: Locale
+
+    $: color = getColor($activeProfile, $selectedAccount?.id) as string
+    $: textColor = isBright(color) ? 'gray-800' : 'white'
+
+    let drawer: Drawer
+
+    $: profileInitial = getInitials($activeProfile?.name, 1)
+
+    function handleBackClick() {
+        if ($settingsRoute === SettingsRoute.Init) {
+            drawer?.close()
+        } else {
+            $settingsRouter.goTo(SettingsRoute.Init)
+        }
+    }
+
+    function handleClick() {
+        $settingsRouter.goTo(SettingsRoute.Init)
+        drawer.open()
+    }
+</script>
+
+<button
+    class="menu-button fixed top-5 left-6 z-10 w-11 h-11 flex items-center justify-center rounded-full leading-100"
+    style="background-color: {color};"
+    on:click={handleClick}
+>
+    <Text type="h4" overrideColor classes="z-10 uppercase text-{textColor}">{profileInitial || 'A'}</Text>
+    <div class="w-11 h-11 flex rounded-full bg-white leading-100 opacity-20 absolute" />
+</button>
+<Drawer bind:this={drawer} fromRight dimLength={0} fullScreen classes="flex">
+    <div class="flex flex-col flex-1">
+        <header
+            class="w-full mt-3 py-3 px-9 mb-5 flex items-centers justify-center bg-white dark:bg-gray-800"
+            on:click={handleBackClick}
+        >
+            <Icon icon="arrow-left" classes="absolute mb-5 left-8 text-gray-500 text-blue-500" />
+            <Text type="h4" classes="text-center">
+                {locale(
+                    $settingsRoute === SettingsRoute.Init
+                        ? 'views.settings.settings'
+                        : `views.settings.${$settingsRoute}.title`
+                )}
+            </Text>
+        </header>
+        {#if $settingsRoute === SettingsRoute.Init}
+            <div class="grid profile-block space-x-5 px-6 w-full mb-6">
+                <div
+                    class="row-span-4 w-16 h-16 flex items-center justify-center rounded-full leading-100"
+                    style="background-color: {color};"
+                >
+                    <span class="text-20 text-center text-white uppercase font-semibold">{profileInitial}</span>
+                </div>
+                <Text type="h4" classes="col-start-2 row-start-2">{$activeProfile?.name}</Text>
+                <button
+                    class="col-start-2 row-start-3 flex items-center w-max px-1 pr-2 rounded-xl"
+                    on:click={() => logout()}
+                >
+                    <Icon width="16" height="16" classes="mr-1 text-gray-500 -ml-2" icon="logout" />
+                    <Text type="p" secondary classes="text-center">Logout</Text>
+                </button>
+            </div>
+        {/if}
+        <Settings {locale} />
+    </div>
+</Drawer>
+
+<style>
+    header {
+        border-top: solid transparent calc(env(safe-area-inset-top) / 1.5);
+    }
+    .menu-button {
+        padding-top: env(safe-area-inset-top);
+    }
+    .profile-block {
+        grid-template-columns: auto 1fr;
+    }
+</style>

packages/shared/components/SettingsMenu.svelte

@@ -15,7 +15,11 @@
 </script>
 
 <div class="flex-1 {$mobile && 'w-full'}">
-    <Icon boxed {icon} classes="text-white" boxClasses={`mb-5 ${iconColor}`} />
+    {#if $mobile}
+        <div class="h-6" />
+    {:else}
+        <Icon boxed {icon} classes="text-white" boxClasses={`mb-5 ${iconColor}`} />
+    {/if}
     <Text type="h4" classes="mb-2">{title}</Text>
     <Text type="p" classes="mb-4" secondary>{description}</Text>
     {#each Object.values(settings) as setting}

packages/shared/components/Sidebar.svelte

@@ -1,15 +1,5 @@
 <script lang="typescript">
-    import {
-        Drawer,
-        Icon,
-        NetworkIndicator,
-        ProfileActionsModal,
-        SidebarTab,
-        Text,
-        Modal,
-        PingingBadge,
-    } from 'shared/components'
-    import { mobile } from 'shared/lib/app'
+    import { Icon, Modal, NetworkIndicator, ProfileActionsModal, PingingBadge, SidebarTab } from 'shared/components'
     import { getInitials, isRecentDate } from 'shared/lib/helpers'
     import { networkStatus, NETWORK_HEALTH_COLORS } from 'shared/lib/networkStatus'
     import { isStakingPossible } from 'shared/lib/participation'
@@ -24,20 +14,15 @@
         dashboardRouter,
         DashboardRoute,
         resetWalletRoute,
-        settingsRoute,
-        settingsRouter,
-        SettingsRoute,
         SidebarTab as SidebarTabType,
     } from '@core/router'
-    import { Settings } from 'shared/routes'
     import { Locale } from '@core/i18n'
     import { versionDetails } from '@lib/appUpdater'
 
     export let locale: Locale
 
     let networkModal: Modal
     let profileModal: Modal
-    let drawer: Drawer
     let prevPartiallyUnstakedAmount = 0 // store the previous unstaked funds to avoid notifying when unstaked funds decrease
     let showStakingNotification = false
 
@@ -101,108 +86,44 @@
         resetWalletRoute()
     }
 
-    function handleBackClick() {
-        if ($settingsRoute === SettingsRoute.Init) {
-            drawer?.close()
-        } else {
-            $settingsRouter.previous()
-        }
-    }
-
     function openStaking() {
         $dashboardRouter.goTo(DashboardRoute.Staking)
     }
 </script>
 
-{#if $mobile}
-    <button
-        class="menu-button z-10 w-9 h-9 flex items-center justify-center rounded-full bg-{profileColor}-500 leading-100"
-        on:click={() => drawer.open()}
-    >
-        <span class="text-12 text-center text-white uppercase">{profileInitial || 'A'}</span>
-    </button>
-    <Drawer bind:this={drawer} fromRight={true} dimLength={0} opened={false} fullScreen classes="flex">
-        <div class="flex flex-col flex-1">
-            <header
-                class="w-full px-8 py-3 mb-6 flex items-centers justify-center bg-white dark:bg-gray-800"
-                on:click={handleBackClick}
-            >
-                <Icon icon="arrow-left" classes="absolute left-6 text-gray-500 text-blue-500" />
-                <Text type="h4" classes="text-center">
-                    {locale(
-                        $settingsRoute === SettingsRoute.Init
-                            ? 'general.yourWallets'
-                            : `views.settings.${$settingsRoute}.title`
-                    )}
-                </Text>
-            </header>
-            {#if $settingsRoute === SettingsRoute.Init}
-                <!-- TODO: add real profile data -->
-                <div class="flex flex-row items-center space-x-6 mb-7 px-6 w-full">
-                    <div
-                        class="w-16 h-16 flex items-center justify-center rounded-full bg-{profileColor}-500 leading-100"
-                    >
-                        <span class="text-20 text-center text-white uppercase font-semibold"
-                            >{profileInitial || 'A'}</span
-                        >
-                    </div>
-                    <Text type="h4">John Doe</Text>
+<aside
+    class="flex flex-col justify-center items-center bg-white dark:bg-gray-800 relative w-20 px-5 pb-5 pt-10 border-solid border-r border-gray-100 dark:border-gray-800"
+>
+    <nav class="flex flex-grow flex-col items-center justify-between">
+        <div class="flex flex-col space-y-8">
+            {#each sidebarTabs as tab}
+                <div class="flex">
+                    <SidebarTab {tab} />
                 </div>
-            {/if}
-            <Settings {locale} />
+            {/each}
         </div>
-    </Drawer>
-{:else}
-    <aside
-        class="flex flex-col justify-center items-center bg-white dark:bg-gray-800 relative w-20 px-5 pb-5 pt-10 border-solid border-r border-gray-100 dark:border-gray-800"
-    >
-        <nav class="flex flex-grow flex-col items-center justify-between">
-            <div class="flex flex-col space-y-8">
-                {#each sidebarTabs as tab}
-                    <div class="flex">
-                        <SidebarTab {tab} />
-                    </div>
-                {/each}
-            </div>
-            <span class="flex flex-col items-center">
-                <button class="mb-7 health-status" on:click={networkModal?.open}>
-                    <Icon
-                        width="24"
-                        height="24"
-                        icon="network"
-                        classes="text-{NETWORK_HEALTH_COLORS[healthStatus]}-500"
-                    />
-                </button>
-                <button
-                    class="w-8 h-8 relative flex items-center justify-center rounded-full bg-{profileColor}-500 leading-100"
-                    on:click={profileModal?.open}
-                >
-                    <span class="text-12 text-center text-white uppercase">{profileInitial}</span>
-                    {#if !$hasEverOpenedProfileModal && (!isBackupSafe || !$versionDetails.upToDate)}
-                        <PingingBadge innerColor="red-500" outerColor="red-500" />
-                    {/if}
-                </button>
-            </span>
-        </nav>
-        <NetworkIndicator bind:modal={networkModal} {locale} />
-        <ProfileActionsModal bind:modal={profileModal} {locale} />
-    </aside>
-{/if}
+        <span class="flex flex-col items-center">
+            <button class="mb-7 health-status" on:click={networkModal?.open}>
+                <Icon width="24" height="24" icon="network" classes="text-{NETWORK_HEALTH_COLORS[healthStatus]}-500" />
+            </button>
+            <button
+                class="w-8 h-8 relative flex items-center justify-center rounded-full bg-{profileColor}-500 leading-100"
+                on:click={profileModal?.open}
+            >
+                <span class="text-12 text-center text-white uppercase">{profileInitial}</span>
+                {#if !$hasEverOpenedProfileModal && (!isBackupSafe || !$versionDetails.upToDate)}
+                    <PingingBadge innerColor="red-500" outerColor="red-500" />
+                {/if}
+            </button>
+        </span>
+    </nav>
+    <NetworkIndicator bind:modal={networkModal} {locale} />
+    <ProfileActionsModal bind:modal={profileModal} {locale} />
+</aside>
 
 <style type="text/scss">
     :global(body.platform-win32) aside {
         @apply -top-0;
         @apply pt-10;
     }
-    .menu-button {
-        position: absolute;
-        top: calc(env(safe-area-inset-top) * 2.2);
-        right: 30px;
-    }
-    header {
-        position: sticky;
-        top: 0;
-        padding-top: calc(env(safe-area-inset-top) * 2.2);
-        z-index: 10;
-    }
 </style>

packages/shared/components/index.js

@@ -14,6 +14,7 @@ export { default as Checkbox } from './inputs/Checkbox.svelte'
 export { default as CollapsibleBlock } from './CollapsibleBlock.svelte'
 export { default as CopyButton } from './CopyButton.svelte'
 export { default as DashboardPane } from './DashboardPane.svelte'
+export { default as Drawer } from './Drawer.svelte'
 export { default as Dropdown } from './inputs/Dropdown.svelte'
 export { default as Dropzone } from './inputs/Dropzone.svelte'
 export { default as Error } from './Error.svelte'
@@ -25,6 +26,7 @@ export { default as ImportTextfield } from './inputs/ImportTextfield.svelte'
 export { default as Input } from './inputs/Input.svelte'
 export { default as Link } from './Link.svelte'
 export { default as Logo } from './Logo.svelte'
+export { default as MainMenu } from './MainMenu.svelte'
 export { default as Number } from './inputs/Number.svelte'
 export { default as OnboardingLayout } from './OnboardingLayout.svelte'
 export { default as Password } from './inputs/Password.svelte'
@@ -55,7 +57,6 @@ export { default as TransactionItem } from './TransactionItem.svelte'
 export { default as Transition } from './Transition.svelte'
 export { default as Video } from './Video.svelte'
 export { default as TransactionTabs } from './TransactionTabs.svelte'
-export { default as Drawer } from './Drawer.svelte'
 export { default as QRScanner } from './QRScanner.svelte'
 export { default as WalletPill } from './WalletPill.svelte'
 export { default as ColorPicker } from './ColorPicker.svelte'

packages/shared/lib/core/router/settings-router.ts

@@ -6,7 +6,7 @@ import { Router } from './router'
 export const settingsRouter = writable<SettingsRouter>(null)
 export const settingsRoute = writable<SettingsRoute>(null)
 
-const settingsChildRoute = writable<string>(null)
+export const settingsChildRoute = writable<string>(null)
 
 export class SettingsRouter extends Router<SettingsRoute> {
     constructor() {

packages/shared/routes/dashboard/Dashboard.svelte

@@ -6,7 +6,7 @@
     import { appSettings, isAwareOfCrashReporting } from 'shared/lib/appSettings'
     import { isPollingLedgerDeviceStatus, pollLedgerDeviceStatus, stopPollingLedgerStatus } from 'shared/lib/ledger'
     import { ongoingSnapshot, openSnapshotPopup } from 'shared/lib/migration'
-    import { Idle, Sidebar } from 'shared/components'
+    import { Idle, MainMenu, Sidebar } from 'shared/components'
     import { clearPollNetworkInterval, pollNetworkStatus } from 'shared/lib/networkStatus'
     import {
         NOTIFICATION_TIMEOUT_NEVER,
@@ -408,25 +408,29 @@
     }
 </script>
 
-<Idle />
-<div class="dashboard-wrapper flex flex-col w-full h-full">
-    {#if showTopNav}
-        <TopNavigation
-            {onCreateAccount}
-            classes={$popupState?.type === 'singleAccountGuide' && $popupState?.active ? 'z-50' : ''}
-        />
-    {/if}
-    <div class="flex flex-row flex-auto h-1">
-        <Sidebar {locale} />
+{#if $mobile}
+    <Idle />
+    <div class="flex flex-col w-full h-full">
+        <TopNavigation {onCreateAccount} />
+        <MainMenu {locale} />
         <!-- Dashboard Pane -->
-        <div class="flex flex-col w-full h-full">
-            <svelte:component this={tabs[$dashboardRoute]} {locale} on:next={$appRouter.next} />
+        <svelte:component this={tabs[$dashboardRoute]} {locale} on:next={$appRouter.next} />
+    </div>
+{:else}
+    <Idle />
+    <div class="dashboard-wrapper flex flex-col w-full h-full">
+        {#if showTopNav}
+            <TopNavigation
+                {onCreateAccount}
+                classes={$popupState?.type === 'singleAccountGuide' && $popupState?.active ? 'z-50' : ''}
+            />
+        {/if}
+        <div class="flex flex-row flex-auto h-1">
+            <Sidebar {locale} />
+            <!-- Dashboard Pane -->
+            <div class="flex flex-col w-full h-full">
+                <svelte:component this={tabs[$dashboardRoute]} {locale} on:next={$appRouter.next} />
+            </div>
         </div>
     </div>
-</div>
-
-<style type="text/scss">
-    :global(:not(body.platform-win32)) .dashboard-wrapper {
-        margin-top: calc(env(safe-area-inset-top) / 2);
-    }
-</style>
+{/if}