fix: ui improvements (#832)

- bring back pool units accordion paddings - align "other balance changes" column to right - fix margin inside tooltip
radixdlt · Nov 21, 2023 · 979e6a1 · 979e6a1
1 parent 53f3c22
commit 979e6a1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 32 deletions.
diff --git a/apps/dashboard/src/components/recent-transactions/ColumnDefinition.svelte b/apps/dashboard/src/components/recent-transactions/ColumnDefinition.svelte
@@ -71,6 +71,7 @@
       header: {
         label: label || 'Other Balance Changes'
       },
+      alignment: 'right' as const,
       component: OtherBalanceChangesColumn,
       componentProps: {
         ...(entityAddress ? { entityAddress } : undefined),

diff --git a/apps/dashboard/src/pages/search-pages/account/pool-units/PoolUnits.svelte b/apps/dashboard/src/pages/search-pages/account/pool-units/PoolUnits.svelte
@@ -89,36 +89,38 @@
   let contentWidth: number
 </script>
 
-<Accordion isOpened={true}>
-  <div class="radix-staking-header" slot="header">
-    <TokenIcon isXrd />
-    <span class="header-text">Radix Network XRD Stake</span>
-  </div>
-
-  <svelte:fragment slot="content">
-    {#await entries}
-      <SkeletonLoader />
-    {:then entries}
-      {#if entries.length > 0}
-        <BasicTable {entries} {columns} />
+<div class="pool-units">
+  <Accordion isOpened={true}>
+    <div class="radix-staking-header" slot="header">
+      <TokenIcon isXrd />
+      <span class="header-text">Radix Network XRD Stake</span>
+    </div>
+
+    <svelte:fragment slot="content">
+      {#await entries}
+        <SkeletonLoader />
+      {:then entries}
+        {#if entries.length > 0}
+          <BasicTable {entries} {columns} />
+        {/if}
+      {/await}
+    </svelte:fragment>
+  </Accordion>
+  <Accordion isOpened={true}>
+    <div class="header-text" slot="header">Pool Units</div>
+
+    <div class="flex-container" slot="content" bind:clientWidth={contentWidth}>
+      {#if contentWidth < 650}
+        <PoolUnitCards poolUnits={poolData} />
+      {:else}
+        <PoolUnitCards poolUnits={splitPoolUnits.then((arr) => arr[0])} />
+        <PoolUnitCards poolUnits={splitPoolUnits.then((arr) => arr[1])} />
       {/if}
-    {/await}
-  </svelte:fragment>
-</Accordion>
-<Accordion isOpened={true}>
-  <div class="header-text" slot="header">Pool Units</div>
-
-  <div class="flex-container" slot="content" bind:clientWidth={contentWidth}>
-    {#if contentWidth < 650}
-      <PoolUnitCards poolUnits={poolData} />
-    {:else}
-      <PoolUnitCards poolUnits={splitPoolUnits.then((arr) => arr[0])} />
-      <PoolUnitCards poolUnits={splitPoolUnits.then((arr) => arr[1])} />
-    {/if}
-  </div></Accordion
->
-
-<style>
+    </div></Accordion
+  >
+</div>
+
+<style lang="scss">
   .radix-staking-header {
     display: flex;
     align-items: center;
@@ -135,4 +137,25 @@
     gap: var(--spacing-2xl);
     justify-content: stretch;
   }
+
+  .pool-units {
+    :global(.header-wrapper) {
+      height: 8rem;
+
+      @include mixins.desktop {
+        height: 7rem;
+      }
+    }
+
+    :global(.accordion) {
+      border-top: 1px solid var(--theme-border-separator);
+
+      &:last-child {
+        border-bottom: 1px solid var(--theme-border-separator);
+      }
+    }
+    :global(.content) {
+      padding-bottom: 1rem;
+    }
+  }
 </style>
diff --git a/packages/ui/src/components/_base/tooltip/Tooltip.svelte b/packages/ui/src/components/_base/tooltip/Tooltip.svelte
@@ -35,20 +35,23 @@
   </div>
   <div class="content" slot="content">
     {#if headerText}<div class="header-text">{headerText}</div>{/if}
-    {#if text}<span class="text">{text}</span>{/if}
+    {#if text?.trim()}<span class="text">{text}</span>{/if}
   </div>
 </Popover>
 
-<style>
+<style lang="scss">
   .content {
     max-width: 500px;
   }
   .header-text {
     text-transform: capitalize;
     color: var(--color-light);
-    margin-bottom: var(--spacing-md);
     font-weight: var(--font-weight-bold-1);
     text-align: center;
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-md);
+    }
   }
 
   .text {