From 9a1244f0e5581d6acdfa92bc6c460de3e41e9e27 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Tue, 14 May 2024 19:38:56 +0300
Subject: [PATCH] explorer: Fix CTA variants on the details page

Resolves #1740
---
 .../__snapshots__/BlockDetails.spec.js.snap    |  2 +-
 .../TransactionDetails.spec.js.snap            |  4 ++--
 .../block-details/BlockDetails.svelte          |  1 +
 .../lib/components/data-card/DataCard.svelte   | 18 ++++++++++--------
 .../LatestTransactionsCard.svelte              | 16 +++++++++++-----
 .../TransactionDetails.svelte                  |  1 +
 explorer/src/routes/blocks/block/+page.svelte  |  1 +
 7 files changed, 27 insertions(+), 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
index 60ab0862ff..c4c919f1fb 100644
--- 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
index 3dfac36e17..18014df7b2 100644
--- 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
index 3524a169e7..30c27bf557 100644
--- 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
index 4652b8745f..6188b2c80e 100644
--- 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
index 851c906c99..086a51cc03 100644
--- 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
index 901899a91a..92b3f483d2 100644
--- 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
index f1a3b9751d..41bd6a5b06 100644
--- 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>