refactor: OnboardingLayout (#5979)

* refactor: removes mobile code and adds code conventions

* refactor: move OnboardingLayout to desktop

* fixes from review

---------

Co-authored-by: Begoña Alvarez <balvarez@boxfish.studio>

packages/desktop/components/OnboardingLayout.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { Icon } from '@ui'
+    import { localize } from '@core/i18n'
+    import { platform, PlatformOption } from '@core/app'
+    import { Icon as IconEnum } from '@auxiliary/icon'
+
+    export let busy = false
+    export let allowBack = true
+    export let onBackClick = (): void => {}
+</script>
+
+<onboarding-layout data-label="onboarding-layout" class="relative w-full h-full flex flex-row">
+    <leftpane-container data-label="leftpane" class="h-full flex justify-center p-12 pt-8 bg-white dark:bg-gray-800">
+        <div class="w-full h-full flex flex-col justify-between">
+            <div class="flex flex-col h-full">
+                <action-placeholder class="block mb-8" class:mt-9={$platform === PlatformOption.MacOs}>
+                    {#if allowBack}
+                        <button
+                            on:click={onBackClick}
+                            class:busy
+                            disabled={busy}
+                            aria-label={localize('actions.back')}
+                            type="button"
+                        >
+                            <icon-container class:busy>
+                                <Icon icon={IconEnum.ArrowLeft} />
+                            </icon-container>
+                        </button>
+                    {/if}
+                </action-placeholder>
+                <leftpane-content-container data-label="leftpane-content" class="h-full flex flex-col">
+                    {#if $$slots.title}
+                        <div class="mb-5">
+                            <slot name="title" />
+                        </div>
+                    {/if}
+                    <slot name="leftpane__content" />
+                </leftpane-content-container>
+            </div>
+            <leftpane-action-container data-label="leftpane-action" class="block mt-6">
+                <slot name="leftpane__action" />
+            </leftpane-action-container>
+        </div>
+    </leftpane-container>
+    <rightpane-container data-label="rightpane" class="block relative bg-gray-100 dark:bg-gray-900">
+        <slot name="rightpane" />
+    </rightpane-container>
+</onboarding-layout>
+
+<style lang="scss">
+    leftpane-container {
+        width: 38%;
+
+        > div {
+            max-width: 406px;
+        }
+    }
+
+    rightpane-container {
+        width: 62%;
+    }
+
+    button {
+        @apply w-6 h-6;
+        transition: filter 0.2s;
+
+        &:focus {
+            filter: brightness(1.3);
+        }
+
+        &.busy {
+            @apply pointer-events-none opacity-50;
+        }
+    }
+
+    icon-container {
+        @apply block cursor-pointer text-blue-500;
+
+        &.busy {
+            @apply cursor-default pointer-events-none text-gray-500;
+        }
+    }
+</style>

packages/desktop/components/index.js

@@ -5,6 +5,7 @@ export * from './popups'
 
 export { default as AccountActivity } from './AccountActivity.svelte'
 export { default as AccountSwitcher } from './AccountSwitcher.svelte'
+export { default as OnboardingLayout } from './OnboardingLayout.svelte'
 export { default as SendButton } from './SendButton.svelte'
 export { default as SettingsMenu } from './SettingsMenu.svelte'
 export { default as SidebarTab } from './SidebarTab.svelte'

packages/desktop/views/onboarding/views/CongratulationsView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, Button, Icon, OnboardingLayout, Text, TextHint } from 'shared/components'
+    import { Animation, Button, Icon, Text, TextHint } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { onDestroy, onMount } from 'svelte'
     import { mobile } from '@core/app'
     import { onboardingRouter, ledgerSetupRouter } from '@core/router'

packages/desktop/views/onboarding/views/app-setup/views/LanguageAndAppearanceView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, ButtonRadio, Dropdown, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, ButtonRadio, Dropdown, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { appSettings, AppTheme, hasCompletedAppSetup, mobile, shouldBeDarkMode } from '@core/app'
     import { localize, setLanguage, SUPPORTED_LOCALES } from '@core/i18n'
     import { appSetupRouter } from '@core/router'

packages/desktop/views/onboarding/views/app-setup/views/LegalView.svelte

@@ -7,7 +7,8 @@
     } from '@core/app'
     import { localize } from '@core/i18n'
     import { appSetupRouter } from '@core/router'
-    import { Button, Checkbox, ConditionsOfUse, OnboardingLayout, Text, TextType } from '@ui'
+    import { Button, Checkbox, ConditionsOfUse, Text, TextType } from '@ui'
+    import { OnboardingLayout } from '@components'
 
     let checked = false
     let termsAccepted = false

packages/desktop/views/onboarding/views/app-setup/views/WelcomeView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, Button, Logo, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Logo, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'

packages/desktop/views/onboarding/views/ledger-setup/views/ConnectLedgerView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Button, Icon, LedgerAnimation, Link, OnboardingLayout, Text } from 'shared/components'
+    import { Button, Icon, LedgerAnimation, Link, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { localize } from '@core/i18n'
     import {
         displayNotificationForLedgerProfile,

packages/desktop/views/onboarding/views/ledger-setup/views/LedgerInstallationGuideView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { LedgerAnimation, Button, Icon, Link, OnboardingLayout, Text } from 'shared/components'
+    import { LedgerAnimation, Button, Icon, Link, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { localize } from '@core/i18n'
     import { openPopup, PopupId } from '@auxiliary/popup'
     import { LedgerAppName } from '@core/ledger'

packages/desktop/views/onboarding/views/network-setup/views/ChooseNetworkView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text, TextType } from 'shared/components'
+    import { Animation, OnboardingButton, Text, TextType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import {
         initialiseOnboardingProfile,

packages/desktop/views/onboarding/views/network-setup/views/ChooseProtocolView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import { cleanupOnboarding, onboardingProfile, updateOnboardingProfile } from '@contexts/onboarding'
     import { mobile } from '@core/app'

packages/desktop/views/onboarding/views/network-setup/views/SetupPrivateNetworkConnectionView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingLayout, Text, Button, NodeConfigurationForm, HTMLButtonType } from 'shared/components'
+    import { Animation, Text, Button, NodeConfigurationForm, HTMLButtonType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import {
         cleanupOnboardingProfileManager,
         initialiseProfileManagerFromOnboardingProfile,

packages/desktop/views/onboarding/views/profile-backup/views/BackupMnemonicView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { profileBackupRouter } from '@core/router'

packages/desktop/views/onboarding/views/profile-backup/views/BackupStrongholdView.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
-    import {
-        Animation,
-        Button,
-        OnboardingLayout,
-        PasswordInput,
-        Text,
-        TextType,
-        HTMLButtonType,
-    } from 'shared/components'
+    import { Animation, Button, PasswordInput, Text, TextType, HTMLButtonType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { profileBackupRouter } from '@core/router'

packages/desktop/views/onboarding/views/profile-backup/views/VerifyMnemonicView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Button, Icon, OnboardingLayout, RecoveryPhrase, Text } from 'shared/components'
+    import { Button, Icon, RecoveryPhrase, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { english } from '@auxiliary/wordlists'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'

packages/desktop/views/onboarding/views/profile-backup/views/ViewMnemonicView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Button, Icon, OnboardingLayout, RecoveryPhrase, Text } from 'shared/components'
+    import { Button, Icon, RecoveryPhrase, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { profileBackupRouter } from '@core/router'

packages/desktop/views/onboarding/views/profile-recovery/views/BackupPasswordView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, OnboardingLayout, PasswordInput, Text } from 'shared/components'
+    import { Animation, Button, PasswordInput, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { profileRecoveryRouter } from '@core/router'

packages/desktop/views/onboarding/views/profile-recovery/views/ImportMnemonicPhraseView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, ImportTextfield, OnboardingLayout, Text, HTMLButtonType } from 'shared/components'
+    import { Animation, Button, ImportTextfield, Text, HTMLButtonType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { setStrongholdPassword } from '@core/profile-manager'

packages/desktop/views/onboarding/views/profile-recovery/views/ImportStrongholdBackupView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, Button, Dropzone, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Dropzone, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { profileRecoveryRouter } from '@core/router'

packages/desktop/views/onboarding/views/profile-recovery/views/LedgerView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from 'shared/components'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { NetworkProtocol } from '@core/network'

packages/desktop/views/onboarding/views/profile-recovery/views/SuccessView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, Icon, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Icon, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import {

packages/desktop/views/onboarding/views/profile-setup/views/EnterNameView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, Button, Input, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Input, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { formatProtocolName } from '@core/network'

packages/desktop/views/onboarding/views/profile-setup/views/SetupClaimedView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'

packages/desktop/views/onboarding/views/profile-setup/views/SetupNewView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'

packages/desktop/views/onboarding/views/profile-setup/views/SetupRecoveredView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'

packages/desktop/views/onboarding/views/profile-setup/views/SetupView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { Animation, OnboardingButton, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, OnboardingButton, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import features from '@features/features'
     import {
         initialiseOnboardingProfile,

packages/desktop/views/onboarding/views/shimmer-claiming/views/ClaimRewardsView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte'
-    import { Animation, Button, OnboardingLayout, ShimmerClaimingAccountList, Text } from 'shared/components'
+    import { Animation, Button, ShimmerClaimingAccountList, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { localize } from '@core/i18n'
     import {
         checkOrConnectLedger,

packages/desktop/views/onboarding/views/shimmer-claiming/views/SuccessView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, Button, Icon, OnboardingLayout, Text } from 'shared/components'
+    import { Animation, Button, Icon, Text } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { BASE_TOKEN, NetworkProtocol } from '@core/network'

packages/desktop/views/onboarding/views/storage-protection-setup/views/SetupPinProtectionView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Animation, Button, OnboardingLayout, PinInput, Text, HTMLButtonType } from 'shared/components'
+    import { Animation, Button, PinInput, Text, HTMLButtonType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { onMount } from 'svelte'
     import {
         initialiseFirstShimmerClaimingAccount,

packages/desktop/views/onboarding/views/stronghold-setup/views/SetupStrongholdPasswordView.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
     import zxcvbn from 'zxcvbn'
-    import {
-        Animation,
-        Button,
-        OnboardingLayout,
-        PasswordInput,
-        Text,
-        HTMLButtonType,
-        TextType,
-    } from 'shared/components'
+    import { Animation, Button, PasswordInput, Text, HTMLButtonType, TextType } from '@ui'
+    import { OnboardingLayout } from '@components'
     import { mobile } from '@core/app'
     import { localize } from '@core/i18n'
     import { MAX_STRONGHOLD_PASSWORD_LENGTH } from '@core/profile'