From d89fa7f95a0e55eef53d294e9d00cc197c267982 Mon Sep 17 00:00:00 2001
From: Melissa Autumn <melissa@thunderbird.net>
Date: Tue, 25 Jun 2024 14:23:38 -0700
Subject: [PATCH] Replace link with text-button.

Needs some work since it uses the old tooltip style.
---
 frontend/src/components/FTUE/Finish.vue    | 12 +++++++++++-
 frontend/src/tbpro/elements/BaseButton.vue |  1 -
 frontend/src/tbpro/elements/ToolTip.vue    |  8 --------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/FTUE/Finish.vue b/frontend/src/components/FTUE/Finish.vue
index 65802f8b9..a262c48d4 100644
--- a/frontend/src/components/FTUE/Finish.vue
+++ b/frontend/src/components/FTUE/Finish.vue
@@ -3,7 +3,7 @@
     <img src="@/assets/svg/ftue-finish.svg" alt="A user icon in front of two calendars."/>
     <div class="copy">
     <p>Before you close this screen, copy your shareable schedule link to start receiving appointments.</p>
-    <a class="link" :href="myLink">{{ myLink }}</a>
+    <text-button class="link" :copy="myLink" :label="myLink"/>
     </div>
   </div>
   <div class="absolute bottom-[5.75rem] flex w-full justify-end gap-4">
@@ -27,6 +27,9 @@ import { useFTUEStore } from '@/stores/ftue-store';
 import { useScheduleStore } from '@/stores/schedule-store';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import { useUserStore } from '@/stores/user-store';
+import { IconClipboardCheck, IconCopy } from '@tabler/icons-vue';
+import SecondaryButton from '@/tbpro/elements/SecondaryButton.vue';
+import TextButton from '@/elements/TextButton.vue';
 
 const { t } = useI18n();
 
@@ -43,6 +46,8 @@ const { nextStep } = ftueStore;
 
 const scheduleStore = useScheduleStore();
 
+const copied = ref(false);
+
 onMounted(async () => {
   await scheduleStore.fetch(call);
   myLink.value = userStore.myLink;
@@ -79,5 +84,10 @@ const onSubmit = async () => {
 .link {
   color: var(--tbpro-primary);
   text-decoration: underline;
+  border: none;
+  &:hover {
+    background-color: initial !important;
+    box-shadow: none !important;
+  }
 }
 </style>
diff --git a/frontend/src/tbpro/elements/BaseButton.vue b/frontend/src/tbpro/elements/BaseButton.vue
index b1ad3e4b9..2fe8b0a03 100644
--- a/frontend/src/tbpro/elements/BaseButton.vue
+++ b/frontend/src/tbpro/elements/BaseButton.vue
@@ -12,7 +12,6 @@
 <script setup>
 import { tooltipPosition } from '@/definitions';
 import ToolTip from '@/tbpro/elements/ToolTip.vue';
-import { ref } from 'vue';
 
 defineProps({
   type: {
diff --git a/frontend/src/tbpro/elements/ToolTip.vue b/frontend/src/tbpro/elements/ToolTip.vue
index 98d24e2db..6a9e347ac 100644
--- a/frontend/src/tbpro/elements/ToolTip.vue
+++ b/frontend/src/tbpro/elements/ToolTip.vue
@@ -27,11 +27,6 @@ defineProps({
 </script>
 
 <style scoped>
-/*
-
-      pointer-events-none absolute bottom-full z-50 -translate-y-2 whitespace-nowrap text-wrap rounded-lg bg-black/75 px-3
-      py-1.5 font-sans text-sm font-normal text-white focus:outline-none
- */
 .tooltip {
   position: absolute;
   text-wrap: wrap;
@@ -59,9 +54,6 @@ defineProps({
 
 }
 
-/*
-absolute left-1/2 top-full size-3 -translate-x-1/2 fill-black/75
- */
 .beak {
   position: absolute;
   color: var(--surface-subtle);