feat: Improve UI and readability of panels in detail pages (#717)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>

src/assets/styles/elements/_table.css

@@ -1,7 +1,7 @@
 table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: var(--space-4);
+  margin-bottom: var(--space-1);
 }
 
 
@@ -12,14 +12,13 @@ th {
   line-height: 22px;
 
   vertical-align: middle;
-  padding: 7px 0;
+  padding: 7px 7px 7px 0;
 
 
   @media (--desktop) {
     font-size: 16px;
     line-height: 18px;
-    vertical-align: top;
-    padding: 10px 0 var(--space-1);
+    padding: 10px 10px var(--space-1) 0;
   }
 }
 

src/assets/styles/settings/_variables.css

@@ -22,6 +22,7 @@
   --font-primary: clashdisplay, arial, sans-serif;
   --font-monospaced: 'Roboto Mono', monospaced, sans-serif;
   --container-width: 1280px;
+  --detail-column-width: 380px;
 }
 
 @custom-media --desktop (min-width: 1280px);

src/assets/styles/utilities/_responsive.css

@@ -10,4 +10,4 @@
   @media (--desktop) {
     display: revert !important;
   }
-}
+}

src/components/AccountDetailsPanel.vue

@@ -1,76 +1,102 @@
 <template>
   <app-panel class="account-details-panel">
-    <template #heading>
-      DETAILS
-    </template>
-    <template #header>
-      <app-chip
-        v-if="accountDetails.isGeneralized"
-        size="sm">
-        Generalized
-      </app-chip>
+    <template v-if="accountDetails.isExistent === false">
+      <div class="u-hidden-mobile">
+        <copy-chip :label="accountDetails.id"/>
+      </div>
+      <div class="u-hidden-desktop">
+        <copy-chip
+          :label="formatEllipseHash(accountDetails.id)"
+          :clipboard-text="accountDetails.id"/>
+      </div>
 
-      <copy-chip
-        :label="accountDetails.id"
-        class="u-hidden-mobile"/>
-      <copy-chip
-        :label="formatEllipseHash(accountDetails.id)"
-        :clipboard-text="accountDetails.id"
-        class="u-hidden-desktop"/>
+      <p class="account-details-panel__not-existent">
+        The account has never been seen in the network.
+        <br>
+        Details will be displayed once the account is directly involved in a native transaction, but the account can
+        already receive custom tokens.
+      </p>
     </template>
-    <p
-      v-if="accountDetails.isExistent === false"
-      class="account-details-panel__not-existent">
-      The account has never been seen in the network.
-      <br>
-      Details will be displayed once the account is directly involved in a native transaction, but the account can
-      already receive custom tokens.
-    </p>
     <table v-else>
       <tbody>
         <tr class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            Balance
+            <hint-tooltip>
+              {{ accountHints.address }}
+            </hint-tooltip>
+            Address
+          </th>
+          <td>
+            <div class="u-hidden-mobile">
+              <copy-chip :label="accountDetails.id"/>
+            </div>
+            <div class="u-hidden-desktop">
+              <copy-chip
+                :label="formatEllipseHash(accountDetails.id)"
+                :clipboard-text="accountDetails.id"/>
+            </div>
+          </td>
+        </tr>
+        <tr class="account-details-panel__row">
+          <th class="account-details-panel__table-header">
             <hint-tooltip>
               {{ accountHints.balance }}
             </hint-tooltip>
+            Balance
           </th>
-          <td class="account-details-panel__data">
+          <td>
             {{ formatAePrice(accountDetails.balance, null) }}
           </td>
         </tr>
+
         <tr class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            Value
             <hint-tooltip>
               {{ accountHints.value }}
             </hint-tooltip>
+            Value
           </th>
-          <td class="account-details-panel__data">
+          <td>
             {{ sanitizedPrice }}
           </td>
         </tr>
         <tr class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            Transactions
             <hint-tooltip>
               {{ accountHints.transactions }}
             </hint-tooltip>
+            Transactions
           </th>
-          <td class="account-details-panel__data">
+          <td>
             {{ formatNumber(accountDetails.totalTransactionsCount) }}
           </td>
         </tr>
         <tr
           v-if="accountDetails.isGeneralized"
           class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            Contract Id
+            <hint-tooltip>
+              {{ accountHints.generalized }}
+            </hint-tooltip>
+            Is Generalized
+          </th>
+          <td>
+            <app-chip
+              size="sm">
+              Generalized
+            </app-chip>
+          </td>
+        </tr>
+        <tr
+          v-if="accountDetails.isGeneralized"
+          class="account-details-panel__row">
+          <th class="account-details-panel__table-header">
             <hint-tooltip>
               {{ accountHints.contractId }}
             </hint-tooltip>
+            Contract Id
           </th>
-          <td class="account-details-panel__data">
+          <td>
             <app-link :to="`/contracts/${accountDetails.contractId}`">
               {{ accountDetails.contractId }}
             </app-link>
@@ -80,33 +106,31 @@
           v-else
           class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            Nonce
             <hint-tooltip>
               {{ accountHints.nonce }}
             </hint-tooltip>
+            Nonce
           </th>
-          <td class="account-details-panel__data">
+          <td>
             {{ accountDetails.nonce }}
           </td>
         </tr>
         <tr class="account-details-panel__row">
           <th class="account-details-panel__table-header">
-            API Links
             <hint-tooltip>
               {{ accountHints.apiLinks }}
             </hint-tooltip>
+            API Links
           </th>
-          <td class="account-details-panel__data">
-            <div class="account-details-panel__container">
-              <app-link
-                :to="accountNodeUrl"
-                class="account-details-panel__link">
-                <app-icon
-                  name="file-cloud"
-                  :size="22"/>
-                Node
-              </app-link>
-            </div>
+          <td>
+            <app-link
+              :to="accountNodeUrl"
+              class="account-details-panel__link">
+              <app-icon
+                name="file-cloud"
+                :size="22"/>
+              Node
+            </app-link>
           </td>
         </tr>
       </tbody>
@@ -121,7 +145,7 @@ import AppPanel from '@/components/AppPanel'
 import CopyChip from '@/components/CopyChip'
 import AppIcon from '@/components/AppIcon'
 import AppLink from '@/components/AppLink'
-import { formatAePrice, formatNullable, formatNumber } from '@/utils/format'
+import { formatAePrice, formatEllipseHash, formatNullable, formatNumber } from '@/utils/format'
 import { useMarketStatsStore } from '@/stores/marketStats'
 import HintTooltip from '@/components/HintTooltip'
 import AppChip from '@/components/AppChip'
@@ -150,21 +174,16 @@ const sanitizedPrice = computed(() =>
 .account-details-panel {
   &__table-header {
     border-bottom: 1px solid var(--color-midnight-25);
+
+    @media (--desktop) {
+      width: var(--detail-column-width);
+    }
   }
 
   &__row:last-of-type &__table-header {
     border-bottom: 0;
   }
 
-  &__data {
-    text-align: right;
-  }
-
-  &__container {
-    display: flex;
-    justify-content: flex-end;
-  }
-
   &__link {
     display: inline-flex;
     align-items: center;

src/components/AppPanel.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="panel">
     <header
-      v-if="$slots.heading"
+      v-if="$slots.title"
       class="panel__header">
       <h2 class="panel__heading h3">
-        <slot name="heading"/>
+        <slot name="title"/>
       </h2>
-      <div class="panel__container">
-        <slot name="header"/>
+      <div class="panel__end">
+        <slot name="end"/>
       </div>
     </header>
     <slot/>
@@ -40,7 +40,7 @@
     margin-bottom: var(--space-1);
   }
 
-  &__container {
+  &__end {
     padding: var(--space-1) 0;
     display: flex;
     gap: var(--space-1);