fixes. sorry for bad commit message i'm tired

7 files changed, 96 insertions, 50 deletions

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 32ef38d6..caa7c48c 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -24,6 +24,9 @@ const SettingsModal = {
     }
   },
   computed: {
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
+    },
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index b27fbd28..48101a90 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -25,9 +25,6 @@ const SettingsModalContent = {
     ThemeTab
   },
   computed: {
-    currentSaveStateNotice () {
-      return this.$store.state.interface.settings.currentSaveStateNotice
-    },
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     }
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 8b83e48c..283b4ef8 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -40,7 +40,7 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
-      icon="chat"
+      icon="bell-ringing-o"
     >
       <NotificationsTab />
     </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index e0b1a2df..926eceff 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -95,20 +95,25 @@
     align-items: baseline;
     width: 100%;
     min-height: 30px;
-
-    .btn {
-      min-width: 1px;
-      flex: 0 auto;
-      padding: 0 1em;
-    }
+    margin-bottom: 1em;
 
     p {
       flex: 1;
       margin: 0;
       margin-right: .5em;
     }
+  }
 
-    margin-bottom: 1em;
+  .tab-header-buttons {
+    display: flex;
+    flex-direction: column;
+
+    .btn {
+      min-width: 1px;
+      flex: 0 auto;
+      padding: 0 1em;
+      margin-bottom: .5em;
+    }
   }
 
   .shadow-selector {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 33098498..fcfad23b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -126,18 +126,20 @@
         >
           <div class="tab-header">
             <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
+            <div class="tab-header-buttons">
+              <button
+                class="btn"
+                @click="clearOpacity"
+              >
+                {{ $t('settings.style.switcher.clear_opacity') }}
+              </button>
+              <button
+                class="btn"
+                @click="clearV1"
+              >
+                {{ $t('settings.style.switcher.clear_all') }}
+              </button>
+            </div>
           </div>
           <p>{{ $t('settings.theme_help_v2_1') }}</p>
           <h4>{{ $t('settings.style.common_colors.main') }}</h4>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 2d04e15d..616f1a19 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -95,9 +95,12 @@ export default Vue.component('tab-switcher', {
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}
               class={classesTab.join(' ')}
+              type="button"
             >
               {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
-              {slot.data.attrs.label}
+              <span class="text">
+                {slot.data.attrs.label}
+              </span>
             </button>
           </div>
         )
@@ -110,13 +113,23 @@ export default Vue.component('tab-switcher', {
       if (slot.data.attrs.fullHeight) {
         classes.push('full-height')
       }
+      const newSlot = (
+        <div class={classes}>
+          {
+            this.sideTabBar
+              ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
+              : ''
+          }
+          {slot}
+        </div>
+      )
 
       if (this.renderOnlyFocused) {
         return active
-          ? <div class={classes.join(' ')}>{slot}</div>
+          ? <div class={classes.join(' ')}>{newSlot}</div>
           : <div class={classes.join(' ')}></div>
       }
-      return <div class={classes.join(' ')}>{slot}</div>
+      return <div class={classes.join(' ')}>{newSlot}</div>
     })
 
     return (
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d60e065b..db58f4cd 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -10,12 +10,14 @@
 
   &.top-tabs {
     flex-direction: column;
+
     > .tabs {
       width: 100%;
       overflow-y: hidden;
       overflow-x: auto;
       padding-top: 5px;
       flex-direction: row;
+
       &::after, &::before {
         content: '';
         flex: 1 1 auto;
@@ -51,34 +53,47 @@
 
   &.side-tabs {
     flex-direction: row;
+
     @media all and (max-width: 800px) {
       overflow-x: auto;
     }
+
     > .contents {
-      flex: 0 1 80%;
-      @media all and (max-width: 800px) {
-        min-width: 96vw;
-      }
+      flex: 1 1 auto;
     }
+
     > .tabs {
-      flex: 1 0 auto;
+      flex: 0 0 auto;
       overflow-y: auto;
       overflow-x: hidden;
       flex-direction: column;
+
       &::after, &::before {
-        flex: 1 0 .5em;
+        flex-shrink: 0;
+        flex-basis: .5em;
         content: '';
         border-right: 1px solid;
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
       }
+
+      &::after {
+        flex-grow: 1;
+      }
+
       &::before {
         flex-grow: 0;
       }
+
       .tab-wrapper {
         min-width: 10em;
         display: flex;
         flex-direction: column;
+
+        @media all and (max-width: 800px) {
+          min-width: 1em;
+        }
+
         &:not(.active)::after {
           top: 0;
           right: 0;
@@ -87,6 +102,7 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+
         &::before {
           flex: 0 0 6px;
           content: '';
@@ -94,6 +110,7 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+
         &:last-child .tab {
           margin-bottom: 0;
         }
@@ -106,26 +123,23 @@
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+        padding-left: 1em;
         padding-right: calc(1em + 200px);
-        margin-right: 6px - 200px;
-        margin-left: 6px;
-      }
-
-      .tab-wrapper {
-        min-width: 10em;
-        &:not(.active)::after {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+        margin-right: calc(1em - 200px);
+        margin-left: 1em;
+        @media all and (max-width: 800px) {
+          padding-left: .25em;
+          padding-right: calc(.25em + 200px);
+          margin-right: calc(.25em - 200px);
+          margin-left: .25em;
+          .text {
+            display: none
+          }
         }
       }
     }
   }
 
-
   .contents {
     flex: 1 0 auto;
     min-height: 0px;
@@ -142,14 +156,14 @@
   .tab {
     position: relative;
     white-space: nowrap;
-
     padding: 6px 1em;
+    background-color: $fallback--fg;
+    background-color: var(--tab, $fallback--fg);
+
     &, &:active .tab-icon {
       color: $fallback--text;
       color: var(--tabText, $fallback--text);
     }
-    background-color: $fallback--fg;
-    background-color: var(--tab, $fallback--fg);
 
     &:not(.active) {
       z-index: 4;
@@ -173,7 +187,6 @@
     }
   }
 
-
   .tabs {
     display: flex;
     position: relative;
@@ -198,4 +211,17 @@
       }
     }
   }
+
+  .mobile-label {
+    padding-left: .3em;
+    padding-bottom: .25em;
+    margin-top: .5em;
+    margin-left: .2em;
+    margin-bottom: .25em;
+    border-bottom: 1px solid var(--border, $fallback--border);
+
+    @media all and (min-width: 800px) {
+      display: none;
+    }
+  }
 }