Merge branch 'settings-modal' into shigusegubu

* settings-modal:
  fix for a previous fix
  improve big spinner visibility
  Change flex for tab switcher lines to always have some small space reserved
  increase gap between buttons in titlebars
  fix icon changing color
  fix sidebar not closing in mobile
  lint
  lint

src/App.scss

@@ -566,7 +566,7 @@ main-router {
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
-    margin-left: .25em;
+    margin-left: .5em;
     min-width: 1px;
     align-self: stretch;
   }

src/components/big_spinner/big_spinner.vue

@@ -9,5 +9,8 @@
   font-size: 15em;
   line-height: 0;
   opacity: .6;
+  > i {
+    color: white;
+  }
 }
 </style>

src/components/settings_modal/settings_modal_content.vue

@@ -10,7 +10,7 @@
             v-if="currentSaveStateNotice.error"
             class="alert error"
             @click.prevent
-            >
+          >
             {{ $t('settings.saving_err') }}
           </div>
 
@@ -18,7 +18,7 @@
             v-if="!currentSaveStateNotice.error"
             class="alert transparent"
             @click.prevent
-            >
+          >
             {{ $t('settings.saving_ok') }}
           </div>
         </template>

src/components/side_drawer/side_drawer.js

@@ -65,7 +65,7 @@ const SideDrawer = {
     },
     openSettingsModal () {
       this.$store.dispatch('openSettingsModal')
-    },
+    }
   }
 }
 

src/components/side_drawer/side_drawer.vue

@@ -124,7 +124,7 @@
         <li @click="toggleDrawer">
           <a
             href="#"
-            @click.stop="openSettingsModal"
+            @click="openSettingsModal"
           >
             <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
           </a>

src/components/tab_switcher/tab_switcher.scss

@@ -65,19 +65,16 @@
       overflow-y: auto;
       overflow-x: hidden;
       flex-direction: column;
-      &::after {
-        flex: 1 1 auto;
-      }
-      &::before {
-        flex: 0 0 auto;
-        height: 0.5em;
-      }
       &::after, &::before {
+        flex: 1 0 .5em;
         content: '';
         border-right: 1px solid;
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
       }
+      &::before {
+        flex-grow: 0;
+      }
       .tab-wrapper {
         min-width: 10em;
         display: flex;
@@ -147,8 +144,10 @@
     white-space: nowrap;
 
     padding: 6px 1em;
-    color: $fallback--text;
-    color: var(--tabText, $fallback--text);
+    &, &:active .tab-icon {
+      color: $fallback--text;
+      color: var(--tabText, $fallback--text);
+    }
     background-color: $fallback--fg;
     background-color: var(--tab, $fallback--fg);