From 9d6c771525ac1a2e6e6268940a8c6539a264da96 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Sat, 19 Aug 2023 18:29:24 +0200
Subject: [PATCH] refactor: cleanup `Pane` (#7153)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: update Pane component and remove classes

* fix: remove debris

* fix: remove string concatenation

* fix: add width

* fix: remove unnecessary div

* fix: remove debris export error

* style: polish css to match production version

---------

Co-authored-by: Jean Carlo Noguera <jcnoguera@boxfish.studio>
Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
---
 .../desktop/components/AccountActivity.svelte |   2 +-
 .../desktop/components/AccountSummary.svelte  |   2 +-
 .../panes/ProposalInformationPane.svelte      |   4 +-
 .../views/CollectiblesDetailsView.svelte      | 164 +++++++++--------
 .../dashboard/developer/Developer.svelte      |  56 +++---
 .../views/GovernanceDashboardView.svelte      |   6 +-
 .../views/ProposalDetailsView.svelte          | 170 +++++++++---------
 .../views/dashboard/wallet/Wallet.svelte      |  20 ++-
 packages/shared/components/AssetList.svelte   |   2 +-
 packages/shared/components/Pane.svelte        |  10 ++
 packages/shared/components/atoms/Pane.svelte  |  16 --
 packages/shared/components/atoms/index.js     |   1 -
 .../shared/components/enums/height.enum.ts    |   5 +
 packages/shared/components/enums/index.ts     |  16 +-
 .../shared/components/enums/overflow.enum.ts  |   6 +
 packages/shared/components/index.js           |  68 +++----
 16 files changed, 289 insertions(+), 259 deletions(-)
 create mode 100644 packages/shared/components/Pane.svelte
 delete mode 100644 packages/shared/components/atoms/Pane.svelte
 delete mode 100644 packages/shared/components/atoms/index.js
 create mode 100644 packages/shared/components/enums/height.enum.ts
 create mode 100644 packages/shared/components/enums/overflow.enum.ts

diff --git a/packages/desktop/components/AccountActivity.svelte b/packages/desktop/components/AccountActivity.svelte
index a5e294360c6..616dacc00b3 100644
--- a/packages/desktop/components/AccountActivity.svelte
+++ b/packages/desktop/components/AccountActivity.svelte
@@ -62,7 +62,7 @@
     }
 </script>
 
-<div class="activity-list h-full p-6 flex flex-col flex-auto flex-grow shrink-0">
+<div class="activity-list h-full flex flex-col flex-auto flex-grow shrink-0">
     <div class="mb-4">
         <div class="relative flex flex-1 flex-row justify-between">
             <Text type="h5">{localize('general.activity')}</Text>
diff --git a/packages/desktop/components/AccountSummary.svelte b/packages/desktop/components/AccountSummary.svelte
index b8971690d2f..536a4b24c72 100644
--- a/packages/desktop/components/AccountSummary.svelte
+++ b/packages/desktop/components/AccountSummary.svelte
@@ -16,7 +16,7 @@
     $: ({ baseCoin } = $selectedAccountAssets[$activeProfile?.network.id])
 </script>
 
-<account-summary class="block relative p-6 space-y-4">
+<account-summary class="block relative space-y-4">
     <div class="flex flex-row items-center justify-between">
         <Text type={TextType.h5} classes="text-left">
             {localize('general.balanceWithNetwork', { values: { network: fomattedNetworkName } })}
diff --git a/packages/desktop/components/panes/ProposalInformationPane.svelte b/packages/desktop/components/panes/ProposalInformationPane.svelte
index 6b950123f87..900dea47e49 100644
--- a/packages/desktop/components/panes/ProposalInformationPane.svelte
+++ b/packages/desktop/components/panes/ProposalInformationPane.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { KeyValueBox, Pane, Text } from '@ui'
+    import { Height, KeyValueBox, Pane, Text } from '@ui'
     import { formatDate, localize } from '@core/i18n'
     import { DATE_FORMAT, IKeyValueBoxList, milestoneToDate, truncateString } from '@core/utils'
     import { networkStatus } from '@core/network/stores'
@@ -61,7 +61,7 @@
     }
 </script>
 
-<Pane classes="p-6 h-fit {classes}">
+<Pane height={Height.Fit}>
     <Text smaller classes="mb-5">
         {localize('views.governance.details.proposalInformation.title')}
     </Text>
diff --git a/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte b/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte
index 75d9befea42..2617a29d04f 100644
--- a/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte
+++ b/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte
@@ -38,7 +38,7 @@
         Pane,
         Text,
     } from '@ui'
-    import { FontWeight, TextType } from '@ui/enums'
+    import { FontWeight, Height, TextType } from '@ui/enums'
 
     let modal: Modal
 
@@ -154,88 +154,96 @@
             </div>
         </div>
     </div>
-    <Pane classes="flex flex-col p-6 space-y-3 w-full h-full max-w-lg">
-        <nft-title class="flex justify-between items-center">
-            <Text type={TextType.h3} fontWeight={FontWeight.semibold}>{name}</Text>
-            <MeatballMenuButton onClick={modal?.toggle} />
-            <CollectibleActionsModal bind:modal {nft} />
-        </nft-title>
-        {#if description}
-            <nft-description>
-                <Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700">
-                    {description}
-                </Text>
-            </nft-description>
-        {/if}
-        <div class="overflow-y-scroll h-full flex flex-col space-y-4 pr-2 -mr-4">
-            <nft-details class="flex flex-col space-y-4">
-                <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
-                    {localize('general.details')}
-                </Text>
-                <key-value-list class="flex flex-col space-y-2">
-                    {#each Object.entries(detailsList) as [key, value]}
-                        {#key value}
-                            <KeyValueBox
-                                keyText={localize('general.' + key)}
-                                copyValue={value.copyValue ?? value.data}
-                                isCopyable={value.isCopyable}
-                                valueText={value.data}
-                                isPreText={value.isPreText}
-                                maxHeight={value.maxHeight}
-                            />
-                        {/key}
-                    {/each}
-                </key-value-list>
-            </nft-details>
-            {#if attributes?.length > 0}
-                <nft-attributes class="flex flex-col space-y-4">
-                    <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
-                        {localize('general.attributes')}
-                    </Text>
-                    <div class="flex flex-wrap gap-3">
-                        {#each Object.values(attributes) as attribute}
-                            <KeyValueBox keyText={attribute.trait_type} valueText={String(attribute.value)} shrink />
-                        {/each}
-                    </div>
-                </nft-attributes>
-            {:else}
-                {#if soonaverseAttributes?.props}
-                    <nft-attributes class="flex flex-col space-y-4">
-                        <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
-                            {localize('general.properties')}
+    <div class="max-w-lg">
+        <Pane height={Height.Full}>
+            <collectibles-details class="flex flex-col space-y-3 w-full max-w-lg h-full">
+                <nft-title class="flex justify-between items-center">
+                    <Text type={TextType.h3} fontWeight={FontWeight.semibold} classes="break-words">{name}</Text>
+                    <MeatballMenuButton onClick={modal?.toggle} />
+                    <CollectibleActionsModal bind:modal {nft} />
+                </nft-title>
+                {#if description}
+                    <nft-description class="break-words">
+                        <Text type={TextType.h5} fontWeight={FontWeight.normal} color="gray-700">
+                            {description}
                         </Text>
-                        <div class="flex flex-wrap gap-3">
-                            {#each Object.entries(soonaverseAttributes?.props) as [_key, { label, value }]}
-                                <KeyValueBox keyText={label} valueText={String(value)} shrink />
-                            {/each}
-                        </div>
-                    </nft-attributes>
+                    </nft-description>
                 {/if}
-                {#if soonaverseAttributes?.stats}
-                    <nft-attributes class="flex flex-col space-y-4">
+                <div class="overflow-y-scroll h-full flex flex-col space-y-4 pr-2 -mr-4">
+                    <nft-details class="flex flex-col space-y-4">
                         <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
-                            {localize('general.statistics')}
+                            {localize('general.details')}
                         </Text>
-                        <div class="flex flex-wrap gap-3">
-                            {#each Object.entries(soonaverseAttributes?.stats) as [_key, { label, value }]}
-                                <KeyValueBox keyText={label} valueText={String(value)} shrink />
+                        <key-value-list class="flex flex-col space-y-2">
+                            {#each Object.entries(detailsList) as [key, value]}
+                                {#key value}
+                                    <KeyValueBox
+                                        keyText={localize('general.' + key)}
+                                        copyValue={value.copyValue ?? value.data}
+                                        isCopyable={value.isCopyable}
+                                        valueText={value.data}
+                                        isPreText={value.isPreText}
+                                        maxHeight={value.maxHeight}
+                                    />
+                                {/key}
                             {/each}
-                        </div>
-                    </nft-attributes>
-                {/if}
-            {/if}
-        </div>
-        <buttons-container class="flex w-full space-x-4 self-end mt-auto pt-4">
-            <Button outline classes="flex-1" onClick={onExplorerClick} disabled={!explorerUrl}>
-                {localize('general.viewOnExplorer')}
-            </Button>
-            <Button classes="flex-1" onClick={onSendClick} disabled={!!timeDiff}>
-                {timeDiff
-                    ? localize('popups.balanceBreakdown.locked.title') + ' ' + String(timeDiff)
-                    : localize('actions.send')}
-            </Button>
-        </buttons-container>
-    </Pane>
+                        </key-value-list>
+                    </nft-details>
+                    {#if attributes?.length > 0}
+                        <nft-attributes class="flex flex-col space-y-4">
+                            <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
+                                {localize('general.attributes')}
+                            </Text>
+                            <div class="flex flex-wrap gap-3">
+                                {#each Object.values(attributes) as attribute}
+                                    <KeyValueBox
+                                        keyText={attribute.trait_type}
+                                        valueText={String(attribute.value)}
+                                        shrink
+                                    />
+                                {/each}
+                            </div>
+                        </nft-attributes>
+                    {:else}
+                        {#if soonaverseAttributes?.props}
+                            <nft-attributes class="flex flex-col space-y-4">
+                                <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
+                                    {localize('general.properties')}
+                                </Text>
+                                <div class="flex flex-wrap gap-3">
+                                    {#each Object.entries(soonaverseAttributes?.props) as [_key, { label, value }]}
+                                        <KeyValueBox keyText={label} valueText={String(value)} shrink />
+                                    {/each}
+                                </div>
+                            </nft-attributes>
+                        {/if}
+                        {#if soonaverseAttributes?.stats}
+                            <nft-attributes class="flex flex-col space-y-4">
+                                <Text type={TextType.h5} fontWeight={FontWeight.semibold}>
+                                    {localize('general.statistics')}
+                                </Text>
+                                <div class="flex flex-wrap gap-3">
+                                    {#each Object.entries(soonaverseAttributes?.stats) as [_key, { label, value }]}
+                                        <KeyValueBox keyText={label} valueText={String(value)} shrink />
+                                    {/each}
+                                </div>
+                            </nft-attributes>
+                        {/if}
+                    {/if}
+                </div>
+                <buttons-container class="flex w-full space-x-4 self-end mt-auto pt-4">
+                    <Button outline classes="flex-1" onClick={onExplorerClick} disabled={!explorerUrl}>
+                        {localize('general.viewOnExplorer')}
+                    </Button>
+                    <Button classes="flex-1" onClick={onSendClick} disabled={!!timeDiff}>
+                        {timeDiff
+                            ? localize('popups.balanceBreakdown.locked.title') + ' ' + String(timeDiff)
+                            : localize('actions.send')}
+                    </Button>
+                </buttons-container>
+            </collectibles-details>
+        </Pane>
+    </div>
 </collectibles-details-view>
 
 <style lang="scss">
diff --git a/packages/desktop/views/dashboard/developer/Developer.svelte b/packages/desktop/views/dashboard/developer/Developer.svelte
index 15bc35bbce8..e349d9865b6 100644
--- a/packages/desktop/views/dashboard/developer/Developer.svelte
+++ b/packages/desktop/views/dashboard/developer/Developer.svelte
@@ -21,33 +21,37 @@
     >
         {#key $selectedAccount?.index}
             <div class="flex columns-3 gap-4 min-h-0 min-w-0 max-w-7xl">
-                <Pane classes="flex flex-col p-6 space-y-6">
-                    <Text type={TextType.h5} classes="text-left">
-                        {localize('general.assets')}
-                    </Text>
-                    {#if features.developerTools.alias.enabled}
-                        <CreateAliasButton />
-                    {/if}
-                    {#if features.developerTools.mintNativeTokens.enabled}
-                        <MintNativeTokenButton />
-                    {/if}
-                    {#if features.developerTools.mintNft.enabled}
-                        <MintNftButton />
-                    {/if}
+                <Pane>
+                    <div class="flex flex-col space-y-6">
+                        <Text type={TextType.h5} classes="text-left">
+                            {localize('general.assets')}
+                        </Text>
+                        {#if features.developerTools.alias.enabled}
+                            <CreateAliasButton />
+                        {/if}
+                        {#if features.developerTools.mintNativeTokens.enabled}
+                            <MintNativeTokenButton />
+                        {/if}
+                        {#if features.developerTools.mintNft.enabled}
+                            <MintNftButton />
+                        {/if}
+                    </div>
                 </Pane>
-                <Pane classes="flex flex-col p-6 space-y-6">
-                    <Text type={TextType.h5} classes="text-left">
-                        {localize('general.developerTools')}
-                    </Text>
-                    {#if features.developerTools.faucet.enabled}
-                        <FaucetRequestButton />
-                    {/if}
-                    {#if features.developerTools.deeplink.enabled}
-                        <TestDeepLinkButton />
-                    {/if}
-                    {#if features.developerTools.refreshTokens.enabled}
-                        <RefreshTokenMetadataButton />
-                    {/if}
+                <Pane>
+                    <div class="flex flex-col space-y-6">
+                        <Text type={TextType.h5} classes="text-left">
+                            {localize('general.developerTools')}
+                        </Text>
+                        {#if features.developerTools.faucet.enabled}
+                            <FaucetRequestButton />
+                        {/if}
+                        {#if features.developerTools.deeplink.enabled}
+                            <TestDeepLinkButton />
+                        {/if}
+                        {#if features.developerTools.refreshTokens.enabled}
+                            <RefreshTokenMetadataButton />
+                        {/if}
+                    </div>
                 </Pane>
             </div>
         {/key}
diff --git a/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
index b3e4dcf7139..267b3c05f9e 100644
--- a/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Proposals, ProposalsDetails, VotingPower } from '@components'
     import { Illustration, Pane, Text } from '@ui'
-    import { FontWeight } from '@ui/enums'
+    import { FontWeight, Height } from '@ui/enums'
 
     import { localize } from '@core/i18n'
 
@@ -11,10 +11,10 @@
 
 <governance-dashboard class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-6 bg-gray-50 dark:bg-gray-900">
     <div class="w-1/3 flex flex-col space-y-4">
-        <Pane classes="p-6 h-fit">
+        <Pane height={Height.Fit}>
             <VotingPower />
         </Pane>
-        <Pane classes="p-6 h-fit">
+        <Pane height={Height.Fit}>
             <ProposalsDetails />
         </Pane>
     </div>
diff --git a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
index 87f7eee1159..4e96ef37ed7 100644
--- a/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/ProposalDetailsView.svelte
@@ -3,7 +3,7 @@
 
     import { onMount, onDestroy } from 'svelte'
 
-    import { Button, KeyValueBox, MarkdownBlock, Pane, ProposalStatusPill, Text, TextHint, TextType } from '@ui'
+    import { Button, Height, KeyValueBox, MarkdownBlock, Pane, ProposalStatusPill, Text, TextHint, TextType } from '@ui'
     import { ProposalDetailsButton, ProposalInformationPane, ProposalQuestion } from '@components'
 
     import { selectedAccount } from '@core/account/stores'
@@ -212,88 +212,98 @@
 
 <proposal-details class="w-full h-full flex flex-nowrap p-8 relative flex-1 space-x-4 bg-gray-50 dark:bg-gray-900">
     <div class="w-2/5 flex flex-col space-y-4 relative">
-        <Pane classes="p-6 flex flex-col h-fit overflow-hidden">
-            <header-container class="flex justify-between items-center mb-4">
-                <ProposalStatusPill proposal={$selectedProposal} />
-                <ProposalDetailsButton proposal={$selectedProposal} />
-            </header-container>
-            <div class="flex flex-1 flex-col space-y-4 justify-between scrollable-y">
-                <Text type={TextType.h2}>{$selectedProposal?.title}</Text>
-                {#if $selectedProposal?.additionalInfo}
-                    <MarkdownBlock text={$selectedProposal?.additionalInfo} />
-                {/if}
+        <Pane height={Height.Fit}>
+            <div class="flex flex-col overflow-hidden h-full">
+                <header-container class="flex justify-between items-center mb-4">
+                    <ProposalStatusPill proposal={$selectedProposal} />
+                    <ProposalDetailsButton proposal={$selectedProposal} />
+                </header-container>
+                <div class="flex flex-1 flex-col space-y-4 justify-between scrollable-y">
+                    <Text type={TextType.h2}>{$selectedProposal?.title}</Text>
+                    {#if $selectedProposal?.additionalInfo}
+                        <MarkdownBlock text={$selectedProposal?.additionalInfo} />
+                    {/if}
+                </div>
             </div>
         </Pane>
-        <Pane classes="p-6 h-fit shrink-0">
-            <Text smaller classes="mb-5">
-                {localize('views.governance.details.yourVote.title')}
-            </Text>
-            <ul class="space-y-2">
-                <li>
-                    <KeyValueBox
-                        keyText={localize('views.governance.details.yourVote.total')}
-                        valueText={formatTokenAmountBestMatch(totalVotes, metadata)}
-                        isLoading={!overviewLoaded}
-                    />
-                </li>
-                <li>
-                    <KeyValueBox
-                        keyText={localize('views.governance.details.yourVote.power')}
-                        valueText={formatTokenAmountBestMatch(parseInt($selectedAccount?.votingPower), metadata)}
-                    />
-                </li>
-            </ul>
+        <Pane height={Height.Fit}>
+            <div class="shrink-0">
+                <Text smaller classes="mb-5">
+                    {localize('views.governance.details.yourVote.title')}
+                </Text>
+                <ul class="space-y-2">
+                    <li>
+                        <KeyValueBox
+                            keyText={localize('views.governance.details.yourVote.total')}
+                            valueText={formatTokenAmountBestMatch(totalVotes, metadata)}
+                            isLoading={!overviewLoaded}
+                        />
+                    </li>
+                    <li>
+                        <KeyValueBox
+                            keyText={localize('views.governance.details.yourVote.power')}
+                            valueText={formatTokenAmountBestMatch(parseInt($selectedAccount?.votingPower), metadata)}
+                        />
+                    </li>
+                </ul>
+            </div>
         </Pane>
-        <ProposalInformationPane classes="shrink-0" />
+        <div class="shrink-0">
+            <ProposalInformationPane />
+        </div>
     </div>
-    <Pane classes="w-3/5 h-full p-6 pr-3 flex flex-col justify-between">
-        <proposal-questions
-            class="relative flex flex-1 flex-col space-y-5 overflow-y-scroll pr-3"
-            bind:this={proposalQuestions}
-        >
-            {#if questions}
-                {#each questions as question, questionIndex}
-                    <ProposalQuestion
-                        {question}
-                        {questionIndex}
-                        isOpened={openedQuestionIndex === questionIndex}
-                        isLoading={!overviewLoaded || !statusLoaded}
-                        selectedAnswerValue={selectedAnswerValues[questionIndex]}
-                        votedAnswerValue={votedAnswerValues[questionIndex]}
-                        answerStatuses={$selectedParticipationEventStatus?.questions[questionIndex]?.answers}
-                        {onQuestionClick}
-                        {onAnswerClick}
-                    />
-                {/each}
-            {/if}
-        </proposal-questions>
-        {#if $selectedProposal?.status === ProposalStatus.Upcoming}
-            <TextHint variant={TextHintVariant.Info} text={textHintString} />
-        {:else if [ProposalStatus.Commencing, ProposalStatus.Holding].includes($selectedProposal?.status)}
-            {@const isLoaded = questions && overviewLoaded && statusLoaded}
-            {@const isStoppingVote = lastAction === 'stopVote' && hasGovernanceTransactionInProgress}
-            {@const isStopVotingDisabled = !isLoaded || !isVotingForProposal || isUpdatingVotedAnswerValues}
-            {@const isVoting = lastAction === 'vote' && hasGovernanceTransactionInProgress}
-            {@const isVotingDisabled =
-                !isLoaded ||
-                !isProposalVotable($selectedProposal?.status) ||
-                hasSelectedNoAnswers(selectedAnswerValues) ||
-                isUpdatingVotedAnswerValues ||
-                areSelectedAndVotedAnswersEqual}
-            <buttons-container class="flex w-full space-x-4 mt-6">
-                <Button
-                    outline
-                    classes="w-full"
-                    onClick={onStopVotingClick}
-                    disabled={isStopVotingDisabled}
-                    isBusy={isStoppingVote}
+    <div class="w-3/5">
+        <Pane height={Height.Full}>
+            <div class="flex flex-col justify-between">
+                <proposal-questions
+                    class="relative flex flex-1 flex-col space-y-5 overflow-y-scroll"
+                    bind:this={proposalQuestions}
                 >
-                    {localize('actions.stopVoting')}
-                </Button>
-                <Button classes="w-full" onClick={onVoteClick} disabled={isVotingDisabled} isBusy={isVoting}>
-                    {localize('actions.vote')}
-                </Button>
-            </buttons-container>
-        {/if}
-    </Pane>
+                    {#if questions}
+                        {#each questions as question, questionIndex}
+                            <ProposalQuestion
+                                {question}
+                                {questionIndex}
+                                isOpened={openedQuestionIndex === questionIndex}
+                                isLoading={!overviewLoaded || !statusLoaded}
+                                selectedAnswerValue={selectedAnswerValues[questionIndex]}
+                                votedAnswerValue={votedAnswerValues[questionIndex]}
+                                answerStatuses={$selectedParticipationEventStatus?.questions[questionIndex]?.answers}
+                                {onQuestionClick}
+                                {onAnswerClick}
+                            />
+                        {/each}
+                    {/if}
+                </proposal-questions>
+                {#if $selectedProposal?.status === ProposalStatus.Upcoming}
+                    <TextHint variant={TextHintVariant.Info} text={textHintString} />
+                {:else if [ProposalStatus.Commencing, ProposalStatus.Holding].includes($selectedProposal?.status)}
+                    {@const isLoaded = questions && overviewLoaded && statusLoaded}
+                    {@const isStoppingVote = lastAction === 'stopVote' && hasGovernanceTransactionInProgress}
+                    {@const isStopVotingDisabled = !isLoaded || !isVotingForProposal || isUpdatingVotedAnswerValues}
+                    {@const isVoting = lastAction === 'vote' && hasGovernanceTransactionInProgress}
+                    {@const isVotingDisabled =
+                        !isLoaded ||
+                        !isProposalVotable($selectedProposal?.status) ||
+                        hasSelectedNoAnswers(selectedAnswerValues) ||
+                        isUpdatingVotedAnswerValues ||
+                        areSelectedAndVotedAnswersEqual}
+                    <buttons-container class="flex w-full space-x-4 mt-6">
+                        <Button
+                            outline
+                            classes="w-full"
+                            onClick={onStopVotingClick}
+                            disabled={isStopVotingDisabled}
+                            isBusy={isStoppingVote}
+                        >
+                            {localize('actions.stopVoting')}
+                        </Button>
+                        <Button classes="w-full" onClick={onVoteClick} disabled={isVotingDisabled} isBusy={isVoting}>
+                            {localize('actions.vote')}
+                        </Button>
+                    </buttons-container>
+                {/if}
+            </div>
+        </Pane>
+    </div>
 </proposal-details>
diff --git a/packages/desktop/views/dashboard/wallet/Wallet.svelte b/packages/desktop/views/dashboard/wallet/Wallet.svelte
index 8b114b6651f..0a371662431 100644
--- a/packages/desktop/views/dashboard/wallet/Wallet.svelte
+++ b/packages/desktop/views/dashboard/wallet/Wallet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AssetList, Pane, ReceiveAddressButton } from '@ui'
+    import { AssetList, Overflow, Pane, ReceiveAddressButton } from '@ui'
     import { AccountSummary, AccountActivity, SendButton } from '@components'
     import { selectedAccountAssets } from '@core/wallet'
     import { selectedAccount } from '@core/account/stores'
@@ -14,24 +14,26 @@
         {#key $selectedAccount?.index}
             <div class="h-full grid grid-cols-3 gap-x-4 min-h-0 min-w-0 max-w-7xl">
                 <div class="flex flex-col space-y-4">
-                    <Pane overflow="visible" classes="flex-none">
+                    <Pane overflow={Overflow.Visible}>
                         {#if features?.wallet?.accountSummary?.enabled}
                             <AccountSummary />
                         {/if}
                     </Pane>
-                    <Pane classes="flex flex-col p-6 space-y-6">
-                        {#if features?.wallet?.sendAndReceive?.enabled}
-                            <SendButton />
-                            <ReceiveAddressButton />
-                        {/if}
+                    <Pane>
+                        <div class="flex flex-col space-y-6">
+                            {#if features?.wallet?.sendAndReceive?.enabled}
+                                <SendButton />
+                                <ReceiveAddressButton />
+                            {/if}
+                        </div>
                     </Pane>
                 </div>
-                <Pane classes="h-full">
+                <Pane>
                     {#if features?.wallet?.assets?.enabled}
                         <AssetList assets={$selectedAccountAssets} />
                     {/if}
                 </Pane>
-                <Pane classes="h-full">
+                <Pane>
                     {#if features?.wallet?.activityHistory?.enabled}
                         <AccountActivity />
                     {/if}
diff --git a/packages/shared/components/AssetList.svelte b/packages/shared/components/AssetList.svelte
index 9a7bcae1ab7..2de7def0d31 100644
--- a/packages/shared/components/AssetList.svelte
+++ b/packages/shared/components/AssetList.svelte
@@ -50,7 +50,7 @@
 </script>
 
 {#if assets}
-    <div class="asset-list h-full p-6 flex flex-auto flex-col flex-grow shrink-0">
+    <div class="asset-list h-full flex flex-auto flex-col flex-grow shrink-0">
         <div class="w-full flex flex-row justify-between items-center mb-4">
             <Text classes="text-left" type={TextType.h5}>{localize('general.assets')}</Text>
             <Filter filterStore={assetFilter} />
diff --git a/packages/shared/components/Pane.svelte b/packages/shared/components/Pane.svelte
new file mode 100644
index 00000000000..cfc7d28fb00
--- /dev/null
+++ b/packages/shared/components/Pane.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { Height, Overflow } from './enums'
+
+    export let overflow: Overflow = Overflow.Hidden
+    export let height: Height = Height.Auto
+</script>
+
+<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-elevation-1 {overflow} {height}">
+    <slot />
+</div>
diff --git a/packages/shared/components/atoms/Pane.svelte b/packages/shared/components/atoms/Pane.svelte
deleted file mode 100644
index cb8a1ab814c..00000000000
--- a/packages/shared/components/atoms/Pane.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { appSettings } from '@core/app'
-
-    export let classes = ''
-    export let overflow = 'hidden'
-
-    let darkModeEnabled: boolean
-    $: darkModeEnabled = $appSettings.darkMode
-</script>
-
-<div
-    class:darkmode={darkModeEnabled}
-    class="bg-white dark:bg-gray-800 rounded-2xl overflow-{overflow} shadow-elevation-1 {classes}"
->
-    <slot />
-</div>
diff --git a/packages/shared/components/atoms/index.js b/packages/shared/components/atoms/index.js
deleted file mode 100644
index 719baf075a2..00000000000
--- a/packages/shared/components/atoms/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Pane } from './Pane.svelte'
diff --git a/packages/shared/components/enums/height.enum.ts b/packages/shared/components/enums/height.enum.ts
new file mode 100644
index 00000000000..461a9a5e6aa
--- /dev/null
+++ b/packages/shared/components/enums/height.enum.ts
@@ -0,0 +1,5 @@
+export enum Height {
+    Full = 'h-full',
+    Fit = 'h-fit',
+    Auto = 'h-auto',
+}
diff --git a/packages/shared/components/enums/index.ts b/packages/shared/components/enums/index.ts
index f9e60789934..097ed13ad4f 100644
--- a/packages/shared/components/enums/index.ts
+++ b/packages/shared/components/enums/index.ts
@@ -1,15 +1,17 @@
+export * from './asset-icon-size.enum'
+export * from './button-size.enum'
 export * from './button-type.enum'
 export * from './button-variant.enum'
-export * from './button-size.enum'
 export * from './font-weight.enum'
+export * from './height.enum'
+export * from './input-type.enum'
+export * from './logo.enum'
+export * from './menu-item-variant.enum'
 export * from './nft-media-size.enum'
+export * from './nft-size.enum'
+export * from './overflow.enum'
 export * from './position.enum'
 export * from './tab.enum'
-export * from './text-type.enum'
-export * from './logo.enum'
 export * from './text-hint-variant.enum'
-export * from './nft-size.enum'
-export * from './menu-item-variant.enum'
+export * from './text-type.enum'
 export * from './tooltip-type.enum'
-export * from './input-type.enum'
-export * from './asset-icon-size.enum'
diff --git a/packages/shared/components/enums/overflow.enum.ts b/packages/shared/components/enums/overflow.enum.ts
new file mode 100644
index 00000000000..7b6d31a7b94
--- /dev/null
+++ b/packages/shared/components/enums/overflow.enum.ts
@@ -0,0 +1,6 @@
+export enum Overflow {
+    Hidden = 'overflow-hidden',
+    Visible = 'overflow-visible',
+    Scroll = 'overflow-scroll',
+    Auto = 'overflow-auto',
+}
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
index 1fc85e40b67..6e057c75408 100644
--- a/packages/shared/components/index.js
+++ b/packages/shared/components/index.js
@@ -1,58 +1,58 @@
+export { default as ActivityInformation } from './ActivityInformation.svelte'
 export { default as Alert } from './Alert.svelte'
+export { default as AliasActivityDetails } from './AliasActivityDetails.svelte'
+export { default as AmountBox } from './AmountBox.svelte'
 export { default as Animation } from './Animation.svelte'
+export { default as AssetIcon } from './AssetIcon.svelte'
+export { default as AssetList } from './AssetList.svelte'
+export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
+export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
+export { default as BasicActivityDetails } from './BasicActivityDetails.svelte'
+export { default as BoxedIcon } from './BoxedIcon.svelte'
 export { default as Button } from './Button.svelte'
+export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as ColorPicker } from './ColorPicker.svelte'
-export { default as InformationTooltip } from './InformationTooltip.svelte'
+export { default as ConsolidationActivityDetails } from './ConsolidationActivityDetails.svelte'
+export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as Error } from './Error.svelte'
+export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'
+export { default as FoundryActivityDetails } from './FoundryActivityDetails.svelte'
+export { default as GovernanceActivityDetails } from './GovernanceActivityDetails.svelte'
+export { default as Icon } from './Icon.svelte'
 export { default as Idle } from './Idle.svelte'
 export { default as Illustration } from './Illustration.svelte'
+export { default as InformationTooltip } from './InformationTooltip.svelte'
+export { default as LedgerAnimation } from './LedgerAnimation.svelte'
 export { default as Link } from './Link.svelte'
 export { default as Logo } from './Logo.svelte'
+export { default as MarkdownBlock } from './MarkdownBlock.svelte'
+export { default as MediaDisplay } from './MediaDisplay.svelte'
+export { default as MediaPlaceholder } from './MediaPlaceholder.svelte'
+export { default as MenuItem } from './MenuItem.svelte'
+export { default as NetworkIcon } from './NetworkIcon.svelte'
+export { default as NftActivityDetails } from './NftActivityDetails.svelte'
+export { default as NftGalleryItem } from './NftGalleryItem.svelte'
+export { default as NftImageOrIconBox } from './NftImageOrIconBox.svelte'
+export { default as NftMedia } from './NftMedia.svelte'
+export { default as NodeConfigurationForm } from './NodeConfigurationForm.svelte'
+export { default as NodeListTable } from './NodeListTable.svelte'
+export { default as NotificationManager } from './NotificationManager.svelte'
+export { default as Pane } from './Pane.svelte'
 export { default as Profile } from './Profile.svelte'
 export { default as ProfilePicture } from './ProfilePicture.svelte'
 export { default as ProgressBar } from './ProgressBar.svelte'
 export { default as QR } from './QR.svelte'
 export { default as RecoveryPhrase } from './RecoveryPhrase.svelte'
+export { default as SelectorInput } from './SelectorInput.svelte'
 export { default as Spinner } from './Spinner.svelte'
+export { default as SubjectBox } from './SubjectBox.svelte'
+export { default as Tabs } from './Tabs.svelte'
 export { default as Text } from './Text.svelte'
 export { default as TextHint } from './TextHint.svelte'
 export { default as Toast } from './Toast.svelte'
-export { default as NotificationManager } from './NotificationManager.svelte'
 export { default as Tooltip } from './Tooltip.svelte'
 export { default as Transition } from './Transition.svelte'
-export { default as NftGalleryItem } from './NftGalleryItem.svelte'
-export { default as NftMedia } from './NftMedia.svelte'
-export { default as MediaDisplay } from './MediaDisplay.svelte'
-export { default as NodeConfigurationForm } from './NodeConfigurationForm.svelte'
-export { default as NodeListTable } from './NodeListTable.svelte'
-export { default as BalanceSummaryRow } from './BalanceSummaryRow.svelte'
-export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
-export { default as ColoredCircle } from './ColoredCircle.svelte'
-export { default as Icon } from './Icon.svelte'
-export { default as BoxedIcon } from './BoxedIcon.svelte'
-export { default as AmountBox } from './AmountBox.svelte'
-export { default as NftActivityDetails } from './NftActivityDetails.svelte'
-export { default as NftImageOrIconBox } from './NftImageOrIconBox.svelte'
-export { default as DateInputButton } from './DateInputButton.svelte'
-export { default as ExpirationTimePicker } from './ExpirationTimePicker.svelte'
-export { default as AssetIcon } from './AssetIcon.svelte'
-export { default as AssetList } from './AssetList.svelte'
-export { default as ActivityInformation } from './ActivityInformation.svelte'
-export { default as AliasActivityDetails } from './AliasActivityDetails.svelte'
-export { default as BasicActivityDetails } from './BasicActivityDetails.svelte'
-export { default as ConsolidationActivityDetails } from './ConsolidationActivityDetails.svelte'
-export { default as FoundryActivityDetails } from './FoundryActivityDetails.svelte'
-export { default as GovernanceActivityDetails } from './GovernanceActivityDetails.svelte'
-export { default as Tabs } from './Tabs.svelte'
-export { default as SubjectBox } from './SubjectBox.svelte'
-export { default as NetworkIcon } from './NetworkIcon.svelte'
-export { default as MenuItem } from './MenuItem.svelte'
-export { default as LedgerAnimation } from './LedgerAnimation.svelte'
-export { default as SelectorInput } from './SelectorInput.svelte'
-export { default as MarkdownBlock } from './MarkdownBlock.svelte'
-export { default as MediaPlaceholder } from './MediaPlaceholder.svelte'
 
-export * from './atoms'
 export * from './enums'
 export * from './inputs'
 export * from './interfaces'