Moved the dark mode switch to the user options menu and removed the need to

unlock dark mode.

frontend/src/components/BaseLayout.vue

@@ -37,23 +37,6 @@
       </v-toolbar>
       <slot name="sidebar-content" />
       <div class="sidebar-footer">
-        <v-tooltip
-          top
-          style="min-width: 150px"
-        >
-          <template #activator="{ on }">
-            <div v-on="on">
-              <v-switch
-                v-model="$vuetify.theme.dark"
-                class="dark-mode-switch"
-                :disabled="!darkModeUnlocked"
-                :label="mini ? '' : 'dark mode'"
-              />
-            </div>
-          </template>
-          <span v-if="darkModeUnlocked">Experimental: styling issues may occur!</span>
-          <span v-else>You need to visit the feedback site below first!</span>
-        </v-tooltip>
         <v-btn
           id="feedback-btn"
           href="https://gitlab.gwdg.de/j.michal/grady/issues"
@@ -64,7 +47,6 @@
           :tile="!mini"
           depressed
           :class="{ 'fab-button': mini, 'fab-button-white': !darkMode }"
-          @click.native="logFeedbackClick"
         >
           <v-icon :left="!mini">
             feedback
@@ -112,10 +94,6 @@ export default {
     ...mapStateToComputedGetterSetter({
       pathPrefix: 'UI',
       items: [
-        {
-          name: 'darkModeUnlocked',
-          mutation: UI.SET_DARK_MODE_UNLOCKED
-        },
         {
           name: 'mini',
           path: 'sideBarCollapsed',
@@ -124,11 +102,6 @@ export default {
       ]
     })
   },
-  methods: {
-    logFeedbackClick () {
-      this.darkModeUnlocked = true
-    }
-  }
 }
 </script>
 
@@ -154,10 +127,6 @@ export default {
   .fab-button-white {
     color: grey !important;
   }
-
-  .dark-mode-switch {
-    margin-left: 22px;
-  }
 </style>
 
 <style>

frontend/src/components/UserOptions.vue

@@ -24,6 +24,16 @@
         >
           Change password
         </v-list-item>
+        <v-list-item @click.capture.stop="$vuetify.theme.dark = !$vuetify.theme.dark">
+          <v-list-item-content>
+            <v-list-item-title>
+              Dark mode (experimental)
+            </v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-switch v-model="$vuetify.theme.dark" />
+          </v-list-item-action>
+        </v-list-item>
         <v-divider class="my-2" />
         <v-list-item @click="logout">
           <v-icon left>

frontend/src/store/modules/ui.ts

@@ -3,7 +3,6 @@ import { RootState } from '@/store/store'
 
 export interface UIState {
   sideBarCollapsed: boolean
-  darkModeUnlocked: boolean
   showJumbotron: boolean,
   showSubmissionType: boolean,
 }
@@ -11,7 +10,6 @@ export interface UIState {
 function initialState (): UIState {
   return {
     sideBarCollapsed: false,
-    darkModeUnlocked: false,
     showJumbotron: true,
     showSubmissionType: true,
   }
@@ -24,9 +22,6 @@ const stateGetter = mb.state()
 function SET_SIDEBAR_COLLAPSED (state: UIState, collapsed: boolean) {
   state.sideBarCollapsed = collapsed
 }
-function SET_DARK_MODE_UNLOCKED (state: UIState, val: boolean) {
-  state.darkModeUnlocked = val
-}
 function SET_SHOW_JUMBOTRON (state: UIState, val: boolean) {
   state.showJumbotron = val
 }
@@ -38,7 +33,6 @@ export const UI = {
   get state () { return stateGetter() },
 
   SET_SIDEBAR_COLLAPSED: mb.commit(SET_SIDEBAR_COLLAPSED),
-  SET_DARK_MODE_UNLOCKED: mb.commit(SET_DARK_MODE_UNLOCKED),
   SET_SHOW_JUMBOTRON: mb.commit(SET_SHOW_JUMBOTRON),
   SET_SHOW_SUBMISSIONTYPE: mb.commit(SET_SHOW_SUBMISSIONTYPE),
 }