Modify button to disabled

osoc24 · Jul 24, 2024 · c0ea0b4 · c0ea0b4
1 parent c61375e
commit c0ea0b4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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>
+</style>