fix: Older button becomes broken in payingfor tx + UI fixes (#708)

aeternity · Apr 3, 2024 · 85e55cc · 85e55cc
1 parent 1e4d0b1
commit 85e55cc
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 30 deletions.
diff --git a/src/components/MenuItem.vue b/src/components/MenuItem.vue
@@ -11,8 +11,7 @@
       class="menu-item__list">
       <li
         v-for="submenu in menu.submenu"
-        :key="submenu.name"
-        class="menu-item__item">
+        :key="submenu.name">
         <app-link
           v-if="!submenu.isDisabled"
           :to="submenu.path"
@@ -91,21 +90,20 @@ defineProps({
     }
   }
 
-  &__item {
-    padding: var(--space-0) var(--space-3) var(--space-0) var(--space-4);
-
-    @media (--desktop) {
-      padding: var(--space-2) var(--space-1);
-    }
-  }
-
   &__link {
+    display: inline-block;
+    width: 100%;
+    padding: var(--space-0) var(--space-3) var(--space-0) var(--space-4);
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.002em;
     color: var(--color-midnight);
     cursor: pointer;
 
+    @media (--desktop) {
+      padding: var(--space-2) var(--space-1);
+    }
+
     &:hover {
       text-decoration: underline;
     }

diff --git a/src/components/OracleEventsTableCondensed.vue b/src/components/OracleEventsTableCondensed.vue
@@ -53,36 +53,36 @@
           </td>
         </tr>
         <tr class="oracle-events-table-condensed__row">
-          <th
-            :class="[
-              'oracle-events-table-condensed__header',
-              {'oracle-events-table-condensed__header--expanded': isExpanded.includes(index)}]">
+          <th class="oracle-events-table-condensed__header">
             <app-tooltip>
               Respond Tx
               <template #tooltip>
                 {{ oraclesHints.respondTx }}
               </template>
             </app-tooltip>
           </th>
-          <td
-            :class="[
-              'oracle-events-table-condensed__data',
-              {'oracle-events-table-condensed__data--expanded': isExpanded.includes(index)}]">
+          <td class="oracle-events-table-condensed__data">
             <value-hash-ellipsed
               :hash="event.respondTx"
               :link-to="`/transactions/${event.respondTx}`"/>
           </td>
         </tr>
         <tr class="oracle-events-table-condensed__row">
-          <th class="oracle-events-table-condensed__header">
+          <th
+            :class="[
+              'oracle-events-table-condensed__header',
+              {'oracle-events-table-condensed__header--expanded': isExpanded.includes(index)}]">
             <app-tooltip>
               Responded At
               <template #tooltip>
                 {{ oraclesHints.queriedAt }}
               </template>
             </app-tooltip>
           </th>
-          <td class="oracle-events-table-condensed__data">
+          <td
+            :class="[
+              'oracle-events-table-condensed__data',
+              {'oracle-events-table-condensed__data--expanded': isExpanded.includes(index)}]">
             <block-time-cell
               :height="event.respondedHeight"
               :datetime="event.respondedAt"/>
@@ -141,16 +141,17 @@ function toggle(id) {
     }
   }
 
-  &__row:last-of-type &__header {
-    border-bottom: 0;
-  }
-
   &__data {
     text-align: right;
 
     &--expanded {
       border-bottom: 0;
+      padding-bottom: 0;
     }
   }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
 }
 </style>
diff --git a/src/components/TransactionCellContractCreateTx.vue b/src/components/TransactionCellContractCreateTx.vue
@@ -3,11 +3,13 @@
     :hash="transactionData.ownerId"
     :link-to="`/accounts/${transactionData.ownerId}`"/>
 
-  <transaction-arrow-right-icon/>
+  <template v-if="transactionData.contractId">
+    <transaction-arrow-right-icon/>
 
-  <value-hash-ellipsed
-    :hash="transactionData.contractId"
-    :link-to="`/contracts/${transactionData.contractId}`"/>
+    <value-hash-ellipsed
+      :hash="transactionData.contractId"
+      :link-to="`/contracts/${transactionData.contractId}`"/>
+  </template>
 </template>
 
 <script setup>

diff --git a/src/components/TransactionTypePanel.vue b/src/components/TransactionTypePanel.vue
@@ -19,7 +19,9 @@
           :label="formatEllipseHash(transactionData.payerId)"
           :clipboard-text="transactionData.payerId"
           class="u-hidden-desktop"/>
-        <app-chip variant="primary">
+        <app-chip
+          variant="primary"
+          size="sm">
           {{ transactionData.tx.tx.type }}
         </app-chip>
       </template>

diff --git a/src/components/TransactionTypeTableContractCreateTx.vue b/src/components/TransactionTypeTableContractCreateTx.vue
@@ -21,7 +21,7 @@
         </th>
         <td class="transaction-type-panel-contract-create-tx__data">
           <app-link :to="`/contracts/${transactionData.contractId}`">
-            {{ transactionData.contractId }}
+            {{ formatNullable(transactionData.contractId) }}
           </app-link>
         </td>
       </tr>