From 73d30b7f6907e9358cccaf5b5de1dd747aea9dbf Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 13 May 2021 15:39:10 +0530
Subject: [PATCH] chore: Refactor sidebar button with woot-button (#2231)

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
---
 .../components/layout/AvailabilityStatus.vue  | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index c993c64c8..72488b82e 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -20,22 +20,28 @@
               :key="status.value"
               class="status-items"
             >
-              <button
-                class="button clear status-change--dropdown-button"
-                :disabled="status.disabled"
+              <woot-button
+                variant="clear"
+                class-names="status-change--dropdown-button"
+                :is-disabled="status.disabled"
                 @click="changeAvailabilityStatus(status.value)"
               >
                 <availability-status-badge :status="status.value" />
                 {{ status.label }}
-              </button>
+              </woot-button>
             </woot-dropdown-item>
           </woot-dropdown-menu>
         </div>
       </transition>
 
-      <button class="status-change--change-button" @click="openStatusMenu">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        class-names="status-change--change-button link"
+        @click="openStatusMenu"
+      >
         {{ $t('SIDEBAR_ITEMS.CHANGE_AVAILABILITY_STATUS') }}
-      </button>
+      </woot-button>
     </div>
   </div>
 </template>
@@ -156,15 +162,5 @@ export default {
     display: flex;
     align-items: baseline;
   }
-  & &--change-button {
-    color: var(--b-600);
-    font-size: var(--font-size-small);
-    cursor: pointer;
-    outline: none;
-
-    &:hover {
-      color: var(--w-600);
-    }
-  }
 }
 </style>