From 6de439598308b7086a2ae6730b00fc91c0d80f05 Mon Sep 17 00:00:00 2001
From: vittoriaThinkst <126554007+vittoriaThinkst@users.noreply.github.com>
Date: Fri, 14 Jun 2024 13:34:59 +0200
Subject: [PATCH] Update UI Card Token (#490)

* Add token card button, fix test for code snippet

* Remove consolelog on BaseCodeSnippet.spec.ts
---
 .../components/base/BaseCodeSnippet.spec.ts   | 21 ++++-
 .../__snapshots__/BaseCopyButton.spec.ts.snap |  2 +-
 .../src/components/ui/CardToken.spec.ts       |  3 +-
 frontend_vue/src/components/ui/CardToken.vue  | 88 +++++++++----------
 4 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/frontend_vue/src/components/base/BaseCodeSnippet.spec.ts b/frontend_vue/src/components/base/BaseCodeSnippet.spec.ts
index 3beafdc9b..74641b40e 100644
--- a/frontend_vue/src/components/base/BaseCodeSnippet.spec.ts
+++ b/frontend_vue/src/components/base/BaseCodeSnippet.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { vi } from 'vitest';
+import { vi, beforeEach } from 'vitest';
 import BaseCodeSnippet from '@/components/base/BaseCodeSnippet.vue';
 import BaseCopyButton from './BaseCopyButton.vue';
 import BaseRefreshButton from './BaseRefreshButton.vue';
@@ -15,6 +15,17 @@ const tooltip = vi.fn();
 library.add(faRotateRight, faCheck, faCopy);
 
 describe('BaseCodeSnippet', () => {
+  beforeEach(() => {
+    vi.mock('@highlightjs/vue-plugin', async () => {
+      const hljsVuePlugin = {
+        hljsVuePlugin: {
+          component: vi.fn(),
+        },
+      };
+      return { default: hljsVuePlugin };
+    });
+  });
+
   it('renders label when passed', () => {
     const label = 'Test Label';
     const code = 'const example = () => { return "Hello World"; }';
@@ -23,14 +34,20 @@ describe('BaseCodeSnippet', () => {
         code: code,
         lang: 'javascript',
         showExpandButton: false,
+        label: label,
       },
       global: {
-        stubs: { BaseCopyButton, BaseRefreshButton, FontAwesomeIcon },
+        stubs: {
+          BaseCopyButton,
+          BaseRefreshButton,
+          FontAwesomeIcon,
+        },
       },
       directives: {
         tooltip,
       },
     });
+
     expect(wrapper.text()).toMatch(label);
   });
 
diff --git a/frontend_vue/src/components/base/__snapshots__/BaseCopyButton.spec.ts.snap b/frontend_vue/src/components/base/__snapshots__/BaseCopyButton.spec.ts.snap
index 17492b23c..268d86fcc 100644
--- a/frontend_vue/src/components/base/__snapshots__/BaseCopyButton.spec.ts.snap
+++ b/frontend_vue/src/components/base/__snapshots__/BaseCopyButton.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BaseCopyButton > render correctly 1`] = `
-"<button data-v-e7e863f3="" class="h-[2rem] w-[2rem] font-semibold text-white rounded-full bg-green hover:bg-green-300" aria-label="Copy to clipboard">
+"<button data-v-e7e863f3="" class="h-[2rem] w-[2rem] font-semibold text-white rounded-full bg-green hover:bg-green-300 transition duration-100" aria-label="Copy to clipboard">
   <transition-stub data-v-e7e863f3="" name="fade" mode="out-in" appear="false" persisted="false" css="true"><svg data-v-e7e863f3="" class="svg-inline--fa fa-copy" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copy" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
       <path class="" fill="currentColor" d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"></path>
     </svg></transition-stub>
diff --git a/frontend_vue/src/components/ui/CardToken.spec.ts b/frontend_vue/src/components/ui/CardToken.spec.ts
index 6d617baff..1d9cafffe 100644
--- a/frontend_vue/src/components/ui/CardToken.spec.ts
+++ b/frontend_vue/src/components/ui/CardToken.spec.ts
@@ -1,5 +1,4 @@
-import { mount, flushPromises } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowRight, faQuestion } from '@fortawesome/free-solid-svg-icons';
diff --git a/frontend_vue/src/components/ui/CardToken.vue b/frontend_vue/src/components/ui/CardToken.vue
index d187226df..bdd76682e 100644
--- a/frontend_vue/src/components/ui/CardToken.vue
+++ b/frontend_vue/src/components/ui/CardToken.vue
@@ -1,51 +1,42 @@
 <template>
-  <li class="relative flex token-card-wrapper">
-    <button
-      class="relative group border flex-1 group flex flex-col px-16 pt-16 pb-24 bg-white rounded-xl top-[0px] shadow-solid-shadow-grey border-grey-200 items-center duration-100 ease-in-out token-card"
-      @click.stop="handleClickToken"
+  <li class="relative flex flex-col token-card-wrapper">
+    <div
+      class="relative group border flex flex-col flex-1 group bg-white rounded-xl top-[0px] shadow-solid-shadow-grey border-grey-200 duration-100 ease-in-out token-card justify-between"
     >
-      <div v-if="isLoading">
-        <BaseSkeletonLoader
-          type="circle"
-          class="w-[4rem] h-[4rem]"
+      <!-- content -->
+      <div class="flex flex-col items-center px-16 pt-16 pb-24">
+        <div v-if="isLoading">
+          <BaseSkeletonLoader
+            type="circle"
+            class="w-[4rem] h-[4rem]"
+          />
+        </div>
+        <img
+          v-if="!isLoading"
+          :src="src"
+          class="h-[4.5rem] transition-transform duration-150 group-hover:scale-105"
+          aria-hidden="true"
+          :alt="`${title} logo`"
         />
+        <h3
+          class="flex-grow py-16 font-semibold leading-5 text-center text-grey-800"
+        >
+          {{ title }}
+        </h3>
+        <p
+          class="flex-grow text-sm leading-5 text-center text-grey-400 text-pretty"
+        >
+          {{ description }}
+        </p>
       </div>
-      <img
-        v-if="!isLoading"
-        :src="src"
-        class="h-[4rem] transition-transform duration-150 group-hover:scale-95"
-        aria-hidden="true"
-        :alt="`${title} logo`"
-      />
-      <span
-        class="flex-grow py-16 font-semibold leading-5 text-center text-grey-800"
-      >
-        {{ title }}
-      </span>
-      <span
-        class="flex-grow text-sm leading-5 text-center text-grey-400 text-pretty"
-      >
-        {{ description }}
-      </span>
-      <span
-        class="absolute border-none group-hover:right-[8px] group-focus:right-[8px] hover:right-[8px] focus:right-[8px] focus:opacity-100 py-8 px-8 focus:border opacity-0 right-[0] bottom-[0] group-hover:opacity-100 group-focus:opacity-100 transition-all"
+      <!--- cta --->
+      <button
+        class="w-full font-semibold bg-grey-50 text-grey-400 h-[3rem] rounded-b-xl transition duration-100 hover-card shadow-solid-shadow-grey card-button"
+        @click.stop="handleClickToken"
       >
-        <font-awesome-icon
-          icon="arrow-right"
-          class="hidden text-green-500 sm:block"
-          aria-hidden="true"
-        />
-        <span class="hidden fa-sr-only sm:block">Add {{ title }}</span>
-      </span>
-      <span
-        class="flex flex-row items-center gap-8 mt-24 font-semibold text-green-600 sm:hidden"
-        >Add Canarytoken
-        <font-awesome-icon
-          icon="arrow-right"
-          class="text-green-500"
-          aria-hidden="true"
-      /></span>
-    </button>
+        Create Token
+      </button>
+    </div>
 
     <BaseLinkDocumentation
       v-if="documentationLink"
@@ -105,7 +96,16 @@ watch(logoUrl, () => {
 
 <style scoped>
 .token-card:hover,
-.token-card:focus {
+.token-card:focus,
+.token-card:focus-within {
   @apply border-green shadow-solid-shadow-green-500-sm;
 }
+
+.card-button:focus {
+  @apply from-green to-green-200 text-white border-b-green shadow-solid-shadow-green-500-sm bg-gradient-to-b outline-none;
+}
+
+.hover-card {
+  @apply group-hover:from-green group-hover:to-green-200 group-hover:text-white group-hover:border-b-green group-hover:shadow-solid-shadow-green-500-sm group-hover:bg-gradient-to-b;
+}
 </style>