Replace link with text-button.

Needs some work since it uses the old tooltip style.
thunderbird · Jun 25, 2024 · d89fa7f · d89fa7f
1 parent 8ac72ef
commit d89fa7f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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);