minor style changes

frontend/layouts/default.vue

@@ -129,13 +129,17 @@
           </NuxtLink>
 
           <div class="navbar-item">
-            <button class="button is-dark" @click="selectedTheme = 'light'" v-if="'dark' === selectedTheme"
-                    v-tooltip="'Switch to light theme'">
-              <span class="icon has-text-warning"><i class="fas fa-sun"></i></span>
+            <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
+                    v-if="'auto' === selectedTheme" @click="selectTheme('light')">
+              <span class="icon has-text-warning"><i class="fas fa-sun"/></span>
             </button>
-            <button class="button is-dark" @click="selectedTheme = 'dark'" v-if="'light' === selectedTheme"
-                    v-tooltip="'Switch to dark theme'">
-              <span class="icon"><i class="fas fa-moon"></i></span>
+            <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
+                    v-if="'light' === selectedTheme" @click="selectTheme('dark')">
+              <span class="icon"><i class="fas fa-moon"/></span>
+            </button>
+            <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
+                    v-if="'dark' === selectedTheme" @click="selectTheme('auto')">
+              <span class="icon"><i class="fas fa-microchip"/></span>
             </button>
           </div>
 
@@ -374,6 +378,10 @@ const exposeToken = ref(false)
 const loadFile = ref()
 
 const applyPreferredColorScheme = scheme => {
+  if (!scheme || 'auto' === scheme) {
+    return
+  }
+
   for (let s = 0; s < document.styleSheets.length; s++) {
     for (let i = 0; i < document.styleSheets[s].cssRules.length; i++) {
       try {
@@ -561,4 +569,11 @@ const changeRoute = async (_, callback) => {
     callback()
   }
 }
+
+const selectTheme = theme => {
+  selectedTheme.value = theme
+  if ('auto' === theme) {
+    return window.location.reload()
+  }
+}
 </script>

frontend/pages/backup.vue

@@ -78,17 +78,20 @@
                  @toggle="show_page_tips = !show_page_tips" :use-toggle="true" title="Tips" icon="fas fa-info-circle">
           <ul>
             <li>
-              Backups that are tagged <code>Automatic</code> are subject to auto deletion after <code>9</code> days from
-              the date of creation.
+              Backups that are tagged <code>Automatic</code> are subject to auto deletion after <code>90</code> days
+              from the date of creation.
             </li>
             <li>
               You can trigger a backup task to run in the background by clicking the
               <code><span class="icon"><i class="fas fa-sd-card"></i></span> Queue backup</code> button. on top right.
               Those backups will be tagged as <code>Automatic</code>.
             </li>
             <li>
-              To generate a manual backup, you need to use the <code>state:backup</code> command from the console.
-              or by <span class="icon"><i class="fas fa-terminal"></i></span>
+              To generate a manual backup, go to the
+              <NuxtLink to="/backends"><span class="icon"><i class="fas fa-server"></i></span> Backends</NuxtLink>
+              page and from the drop down menu select the 4th option `Backup this backend play state`, or via cli using
+              <code>state:backup</code> command from the console. or by <span class="icon"><i
+                class="fas fa-terminal"></i></span>
               <NuxtLink :to="makeConsoleCommand('state:backup -s [backend] --file /config/backup/[file]')"
                         v-text="'Web Console'"/>
               page.