fix transparent logout button

diff --git a/src/components/settings.vue b/src/components/settings.vue
index a70b797e751e425bb6254948ec7485c2f3835e05..51347b28ecfccd43519e6996aedd0e61781db13d 100644 (file)
--- a/src/components/settings.vue
+++ b/src/components/settings.vue
@@ -1,8 +1,8 @@
 <template>
-    
+
   <!-- Settings icon. -->
-  <button 
-    class="settingsIcon" 
+  <button
+    class="settingsIcon"
     v-if="toggleSettings == false"
     @click="onActive"
   >
@@ -13,13 +13,15 @@
 
   <!-- Settings div. -->
   <div id="settings" v-show="toggleSettings">
-    <button 
+  </div>
+
+    <button
+      v-if="toggleSettings"
       class="settingsOption"
       @click="onLogout"
     >
       Logout
     </button>
-  </div>
 
 </template>
 
@@ -27,7 +29,7 @@
 
   import { defineComponent, ref } from "vue";
   import  { useIpc } from "@/modules/ipc";
-  import { logoutRequest } from '@/modules/message'; 
+  import { logoutRequest } from '@/modules/message';
 
   export default defineComponent({
     name: "Settings",
@@ -58,7 +60,7 @@
       }
 
       return {
-        onActive, 
+        onActive,
         toggleSettings,
         onLogout
       }
@@ -141,6 +143,11 @@
   border: none;
   outline: none;
   text-decoration: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
 }
 
 .settingsOption:hover {