explorer: Fix CTA variants on the details page

Resolves #1740
dusk-network · May 17, 2024 · 9a1244f · 9a1244f
1 parent 36e1946
commit 9a1244f
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 16 deletions.
diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap
@@ -16,7 +16,7 @@ exports[`Block Details > renders the Block Details component 1`] = `
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         type="button"
       >
         <span

diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionDetails.spec.js.snap
@@ -16,7 +16,7 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         type="button"
       >
         <span
@@ -369,7 +369,7 @@ exports[`Transaction Details > renders the Transaction Details component with th
       </h1>
        
       <button
-        class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+        class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
         type="button"
       >
         <span

diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte
@@ -58,6 +58,7 @@
     action: () => history.back(),
     disabled: false,
     label: "Back",
+    variant: "tertiary",
   }}
 >
   <dl class="block-details__list">

diff --git a/explorer/src/lib/components/data-card/DataCard.svelte b/explorer/src/lib/components/data-card/DataCard.svelte
@@ -19,8 +19,8 @@
   /** @type {String}*/
   export let title;
 
-  /** @type {{action:(e: MouseEvent) => void, disabled:boolean, label: String}}*/
-  export let headerButtonDetails;
+  /** @type {{action:(e: MouseEvent) => void, disabled: boolean, label: String, variant?: ButtonVariant } | undefined}*/
+  export let headerButtonDetails = undefined;
 
   /** @type {string | Undefined} */
   export let className = undefined;
@@ -33,12 +33,14 @@
 <Card className={classes}>
   <header slot="header" class="data-card__header">
     <h1 class="data-card__header-title">{title}</h1>
-    <Button
-      on:click={headerButtonDetails.action}
-      text={headerButtonDetails.label}
-      variant="secondary"
-      disabled={headerButtonDetails.disabled}
-    />
+    {#if headerButtonDetails}
+      <Button
+        on:click={headerButtonDetails.action}
+        text={headerButtonDetails.label}
+        variant={headerButtonDetails.variant || "secondary"}
+        disabled={headerButtonDetails.disabled}
+      />
+    {/if}
   </header>
   {#if loading && data === null}
     <p class="data-card__loading-notice">Loading...</p>

diff --git a/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte b/explorer/src/lib/components/latest-transactions-card/LatestTransactionsCard.svelte
@@ -24,6 +24,9 @@
   /** @type {number} */
   let clientWidth;
 
+  /** @type {Boolean} */
+  export let isOnHomeScreen = true;
+
   $: classes = makeClassName(["latest-transactions-card", className]);
 </script>
 
@@ -35,11 +38,14 @@
   {loading}
   className={classes}
   title="Transactions"
-  headerButtonDetails={{
-    action: () => goto("/transactions"),
-    disabled: false,
-    label: "All Transactions",
-  }}
+  headerButtonDetails={isOnHomeScreen
+    ? {
+        action: () => goto("/transactions"),
+        disabled: false,
+        label: "All Transactions",
+        variant: "secondary",
+      }
+    : undefined}
 >
   {#if clientWidth > 768}
     <TransactionsTable data={txs} />

diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte
@@ -69,6 +69,7 @@
     action: () => history.back(),
     disabled: false,
     label: "Back",
+    variant: "tertiary",
   }}
 >
   <dl class="transaction-details__list">

diff --git a/explorer/src/routes/blocks/block/+page.svelte b/explorer/src/routes/blocks/block/+page.svelte
@@ -32,6 +32,7 @@
       txs={data?.transactions.data}
       {error}
       loading={isLoading}
+      isOnHomeScreen={false}
     />
   </div>
 </section>
-Original file line number
+Diff line change
@@ Expand Up @@
           </h1>
           <button
-            class="dusk-button dusk-button--type--button dusk-button--variant--secondary dusk-button--size--normal"
+            class="dusk-button dusk-button--type--button dusk-button--variant--tertiary dusk-button--size--normal"
             type="button"
           >
             <span
@@ Expand Down @@