From c0ea0b4b82b75b30d09b4f74d42778167802b05e Mon Sep 17 00:00:00 2001
From: Zelzahn <friedrich@friedrichvdb.be>
Date: Wed, 24 Jul 2024 10:02:41 +0200
Subject: [PATCH] Modify button to disabled

---
 loama/src/components/LoButton.vue          | 15 +++++++++++++--
 loama/src/components/header/HeaderBase.vue |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue
index 46e3d17..a4d4334 100644
--- a/loama/src/components/LoButton.vue
+++ b/loama/src/components/LoButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button :class="classList">
+    <button :class="classList" :disabled="disabled">
         <component :v-if="leftIcon" :is="leftIcon" :size="24" />
         <span>
             <slot></slot>
@@ -23,7 +23,11 @@ const props = withDefaults(defineProps<{
     /**
      * The variant of the button; defaults to primary.
      */
-    variant?: "primary" | "secondary"
+    variant?: "primary" | "secondary",
+    /**
+     * If the button is disabled or not.
+     */
+    disabled?: boolean
 }>(), {
     variant: "primary"
 })
@@ -60,6 +64,13 @@ button:hover {
     color: var(--off-white);
 }
 
+button:disabled {
+    background-color: color-mix(in srgb, var(--off-black) 60%, transparent);
+    border: none;
+    color: var(--off-white);
+    cursor: not-allowed;
+}
+
 .primary {
     background-color: var(--solid-purple);
     border-color: var(--solid-purple);
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 042963a..8dead23 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -6,7 +6,7 @@
         </div>
         <nav>
             <slot></slot>
-            <LoButton :rightIcon="PhShareFat" class="share">Share access</LoButton>
+            <LoButton :rightIcon="PhShareFat" class="share" disabled>Share access</LoButton>
         </nav>
         <img :src="pfpSrc" alt="User profile picture" @click="toggleContextMenu" />
         <Suspense>
@@ -115,4 +115,4 @@ img:hover {
     max-width: 25vw;
     max-height: 50vw;
 }
-</style>
\ No newline at end of file
+</style>