feat: add profile actions buttons and use it for settings (#5489)

Co-authored-by: MarkNerdi <105642810+MarkNerdi@users.noreply.github.com>

packages/mobile/components/TopBar.svelte

@@ -1,12 +1,12 @@
 <script lang="typescript">
-    import { AccountActionsButton, AccountSwitcherButton, ProfileActionsButton } from './'
+    import { AccountActionsButton, AccountSwitcherButton, DashboardProfileButton } from './'
     import features from '@features/features'
 </script>
 
 <div class="grid grid-cols-4 h-10">
     <div class="col-span-1">
         {#if features?.dashboard?.profileActions?.enabled}
-            <ProfileActionsButton />
+            <DashboardProfileButton />
         {/if}
     </div>
     <div class="flex justify-center col-span-2 content-center">

packages/mobile/components/buttons/ProfileActionButton.svelte

@@ -0,0 +1,81 @@
+<script lang="typescript">
+    import { Icon as IconEnum } from '@lib/auxiliary/icon'
+    import { FontWeight, Icon, Text, TextType } from 'shared/components'
+
+    export let primaryText: string = ''
+    export let secondaryText: string = ''
+    export let icon: IconEnum = undefined
+    export let iconColor: string = 'blue-500'
+    export let disabled: boolean = false
+    export let classes: string = ''
+    export let color: string = 'transparent'
+
+    export let onClick: () => unknown
+
+    const secondaryIcon = IconEnum.ChevronRight
+    const secondaryIconColor = 'gray-500'
+</script>
+
+<button
+    type="button"
+    {disabled}
+    class="w-full rounded-xl p-4 cursor-pointer text-left border border-solid border-{color === 'transparent'
+        ? 'gray-200'
+        : color} dark:border-{color === 'transparent' ? 'gray-600' : color} bg-{color} bg-opacity-30 {classes}"
+    on:click|stopPropagation={onClick}
+>
+    <div class="grid grid-cols-12 gap-4">
+        {#if icon}
+            <div class="col-span-1 h-full flex justify-center items-center justify-items-center">
+                <Icon height={24} width={24} {icon} classes="text-{iconColor}" />
+            </div>
+        {/if}
+        <div
+            class="
+                h-full flex items-center
+                {icon ? 'col-start-2' : 'col-start-1'}
+                {!disabled ? 'col-end-12' : 'col-end-13'}
+            "
+        >
+            <span class="flex flex-col justify-center space-y-0.5">
+                <Text
+                    type={TextType.p}
+                    color="gray-800"
+                    darkColor="white"
+                    fontSize="14"
+                    fontWeight={FontWeight.semibold}
+                    lineHeight="5"
+                >
+                    {primaryText}
+                </Text>
+                {#if secondaryText}
+                    <Text
+                        type={TextType.p}
+                        color="gray-600"
+                        darkColor="gray-400"
+                        fontSize="12"
+                        fontWeight={FontWeight.normal}
+                        lineHeight="3.5"
+                    >
+                        {secondaryText}
+                    </Text>
+                {/if}
+            </span>
+        </div>
+        <div class="col-span-1 col-end-13 h-full flex justify-center items-center justify-items-center">
+            <Icon icon={secondaryIcon} classes="text-{secondaryIconColor}" />
+        </div>
+    </div>
+</button>
+
+<style type="text/scss">
+    button {
+        &:disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
+            :global(svg) {
+                @apply text-gray-500;
+            }
+        }
+    }
+</style>

packages/mobile/components/buttons/index.js

@@ -1,4 +1,5 @@
 export { default as AccountActionsButton } from './AccountActionsButton.svelte'
 export { default as AccountSwitcherButton } from './AccountSwitcherButton.svelte'
-export { default as ProfileActionsButton } from './ProfileActionsButton.svelte'
+export { default as DashboardProfileButton } from './DashboardProfileButton.svelte'
+export { default as ProfileActionButton } from './ProfileActionButton.svelte'
 export { default as ProfileButton } from './ProfileButton.svelte'

packages/mobile/views/dashboard/drawers/profile/views/ActionsView.svelte

@@ -7,6 +7,7 @@
     import { FontWeight, Icon, NetworkIcon, Text, TextType } from 'shared/components'
     import { profileRouter } from '../../../../../lib/routers'
     import features from '@features/features'
+    import { ProfileActionButton } from '../../../../../components/'
 
     let networkProtocol: NetworkProtocol
     $: networkProtocol = $activeProfile.networkProtocol
@@ -20,37 +21,48 @@
 </script>
 
 {#if $activeProfile?.id}
-    <div class="flex flex-col">
-        <div class="flex flex-row justify-center">
-            <div class="relative">
-                <div class="h-16 w-16 rounded-full bg-blue-500 flex items-center justify-center">
-                    <Text type={TextType.h5} classes="text-white">{initials}</Text>
-                </div>
-                <div class="absolute right-0 bottom-0">
-                    <NetworkIcon {networkProtocol} height={14} width={14} />
+    <div class="w-full flex flex-col space-y-14">
+        <div class="flex flex-col">
+            <div class="flex flex-row justify-center">
+                <div class="relative">
+                    <div class="h-16 w-16 rounded-full bg-blue-500 flex items-center justify-center">
+                        <Text type={TextType.h5} classes="text-white">{initials}</Text>
+                    </div>
+                    <div class="absolute right-0 bottom-0">
+                        <NetworkIcon {networkProtocol} height={14} width={14} />
+                    </div>
                 </div>
             </div>
+            <Text
+                type={TextType.h4}
+                color="gray-800"
+                darkColor="white"
+                fontWeight={FontWeight.semibold}
+                lineHeight="5"
+                classes="text-center pt-4"
+            >
+                {$activeProfile.name}
+            </Text>
+            <div class="flex justify-center">
+                <button class="inline-flex p-1" on:click={handleLogoutClick}>
+                    <Icon width="16" height="16" icon={IconTypes.Logout} classes="text-blue-500 my-auto" />
+                    <Text type={TextType.p} overrideColor classes="text-blue-500 pl-1">
+                        {localize('views.dashboard.profileModal.logout')}
+                    </Text>
+                </button>
+            </div>
         </div>
-        <Text
-            type={TextType.h4}
-            color="gray-800"
-            darkColor="white"
-            fontWeight={FontWeight.semibold}
-            lineHeight="5"
-            classes="text-center pt-4"
-        >
-            {$activeProfile.name}
-        </Text>
-        <div class="flex justify-center">
-            <button class="inline-flex p-1" on:click={handleLogoutClick}>
-                <Icon width="16" height="16" icon={IconTypes.Logout} classes="text-blue-500 my-auto" />
-                <Text type={TextType.p} overrideColor classes="text-blue-500 pl-1">
-                    {localize('views.dashboard.profileModal.logout')}
-                </Text>
-            </button>
+        <div class="flex flex-col space-y-6">
+            {#if features?.settings?.enabled}
+                <ProfileActionButton
+                    primaryText={localize('views.dashboard.profileModal.allSettings')}
+                    secondaryText={localize('views.dashboard.profileModal.profileApplication')}
+                    icon={IconTypes.Settings}
+                    iconColor="blue-500"
+                    color="transparent"
+                    onClick={() => $profileRouter.next({ settings: true })}
+                />
+            {/if}
         </div>
     </div>
 {/if}
-{#if features?.settings?.enabled}
-    <button on:click={$profileRouter.next({ settings: true })}>Settings</button>
-{/if}

packages/shared/locales/en.json

@@ -463,6 +463,7 @@
             },
             "profileModal": {
                 "allSettings": "All settings",
+                "profileApplication": "Profile, application, security",
                 "logout": "Log out",
                 "stronghold": {
                     "title": "Profile lock",