From 1e606d2f268e796a3efd2a995713c70a000daf62 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 03:14:41 +0300
Subject: split modal's content into another component, add lazy loading

---
 .../settings_modal/settings_modal_content.vue      | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/settings_modal/settings_modal_content.vue

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
new file mode 100644
index 00000000..1778c23b
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="settings-modal-panel panel">
+    <div class="panel-heading">
+      <span class="title">
+        {{ $t('settings.settings') }}
+      </span>
+      <button class="btn" @click="peekModal">
+        {{ $t('general.peek') }}
+      </button>
+      <button class="btn" @click="closeModal">
+        {{ $t('general.close') }}
+      </button>
+    </div>
+    <div class="panel-body">
+      <tab-switcher
+        class="settings_tab-switcher"
+        :sideTabBar="true"
+        :scrollableTabs="true"
+        ref="tabSwitcher"
+        >
+        <div
+          :label="$t('settings.general')"
+          >
+          <GeneralTab />
+        </div>
+        <div v-if="isLoggedIn"
+             :label="$t('settings.profile_tab')"
+             >
+          <ProfileTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.security_tab')"
+          >
+          <SecurityTab />
+        </div>
+        <div
+          :label="$t('settings.filtering')"
+          >
+          <FilteringTab />
+        </div>
+        <div
+          :label="$t('settings.theme')"
+          >
+          <ThemeTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.notifications')"
+          >
+          <NotificationsTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.data_import_export_tab')"
+          >
+          <DataImportExportTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.mutes_and_blocks')"
+          :fullHeight="true"
+          class="full-height"
+          >
+          <MutesAndBlocksTab />
+        </div>
+        <div
+          :label="$t('settings.version.title')"
+          >
+          <VersionTab />
+        </div>
+      </tab-switcher>
+    </div>
+  </div>
+</template>
+
+<script src="./settings_modal_content.js"></script>
+
+<style src="./settings_modal_content.scss" lang="scss"></style>
-- 
cgit v1.2.3-70-g09d2


From e7ba4255bbfdc199c513e83007fc6956166b6dc0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 03:43:55 +0300
Subject: eslint --fix + small fix

---
 src/components/settings_modal/settings_modal.js    |   2 +-
 src/components/settings_modal/settings_modal.vue   |  18 +-
 .../settings_modal/settings_modal_content.vue      |  41 ++-
 .../settings_modal/tabs/data_import_export_tab.vue |  64 ++--
 .../settings_modal/tabs/filtering_tab.vue          | 152 ++++-----
 src/components/settings_modal/tabs/general_tab.js  |   3 +-
 src/components/settings_modal/tabs/general_tab.vue | 306 +++++++++---------
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 296 ++++++++---------
 .../settings_modal/tabs/notifications_tab.vue      |  90 +++---
 src/components/settings_modal/tabs/profile_tab.js  |   2 +-
 src/components/settings_modal/tabs/profile_tab.vue | 358 ++++++++++-----------
 .../tabs/security_tab/security_tab.vue             | 242 +++++++-------
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 150 ++++-----
 src/components/settings_modal/tabs/version_tab.vue |  50 +--
 14 files changed, 890 insertions(+), 884 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 192ba5d3..d38c5751 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -12,7 +12,7 @@ const SettingsModal = {
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
-  },
+  }
 }
 
 export default SettingsModal
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b9c0689e..b6ca5c6b 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -1,15 +1,15 @@
 <template>
-<Modal
-  :is-open="modalActivated"
-  class="settings-modal"
-  :class="{ peek: modalPeeked }"
-  :no-background="modalPeeked"
+  <Modal
+    :is-open="modalActivated"
+    class="settings-modal"
+    :class="{ peek: modalPeeked }"
+    :no-background="modalPeeked"
   >
-  <SettingsModalContent
-    v-if="modalActivated"
-    class="modal-panel"
+    <SettingsModalContent
+      v-if="modalActivated"
+      class="modal-panel"
     />
-</Modal>
+  </Modal>
 </template>
 
 <script src="./settings_modal.js"></script>
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 1778c23b..013bf34f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,56 +4,63 @@
       <span class="title">
         {{ $t('settings.settings') }}
       </span>
-      <button class="btn" @click="peekModal">
+      <button
+        class="btn"
+        @click="peekModal"
+      >
         {{ $t('general.peek') }}
       </button>
-      <button class="btn" @click="closeModal">
+      <button
+        class="btn"
+        @click="closeModal"
+      >
         {{ $t('general.close') }}
       </button>
     </div>
     <div class="panel-body">
       <tab-switcher
-        class="settings_tab-switcher"
-        :sideTabBar="true"
-        :scrollableTabs="true"
         ref="tabSwitcher"
-        >
+        class="settings_tab-switcher"
+        :side-tab-bar="true"
+        :scrollable-tabs="true"
+      >
         <div
           :label="$t('settings.general')"
-          >
+        >
           <GeneralTab />
         </div>
-        <div v-if="isLoggedIn"
-             :label="$t('settings.profile_tab')"
-             >
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.profile_tab')"
+        >
           <ProfileTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.security_tab')"
-          >
+        >
           <SecurityTab />
         </div>
         <div
           :label="$t('settings.filtering')"
-          >
+        >
           <FilteringTab />
         </div>
         <div
           :label="$t('settings.theme')"
-          >
+        >
           <ThemeTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.notifications')"
-          >
+        >
           <NotificationsTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.data_import_export_tab')"
-          >
+        >
           <DataImportExportTab />
         </div>
         <div
@@ -61,12 +68,12 @@
           :label="$t('settings.mutes_and_blocks')"
           :fullHeight="true"
           class="full-height"
-          >
+        >
           <MutesAndBlocksTab />
         </div>
         <div
           :label="$t('settings.version.title')"
-          >
+        >
           <VersionTab />
         </div>
       </tab-switcher>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index 3ddc8b03..b5d0f5ed 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -1,42 +1,42 @@
 <template>
-<div
-  :label="$t('settings.data_import_export_tab')"
+  <div
+    :label="$t('settings.data_import_export_tab')"
   >
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_import') }}</h2>
-    <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importFollows"
-      :success-message="$t('settings.follows_imported')"
-      :error-message="$t('settings.follow_import_error')"
+    <div class="setting-item">
+      <h2>{{ $t('settings.follow_import') }}</h2>
+      <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importFollows"
+        :success-message="$t('settings.follows_imported')"
+        :error-message="$t('settings.follow_import_error')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_export') }}</h2>
-    <Exporter
-      :get-content="getFollowsContent"
-      filename="friends.csv"
-      :export-button-label="$t('settings.follow_export_button')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.follow_export') }}</h2>
+      <Exporter
+        :get-content="getFollowsContent"
+        filename="friends.csv"
+        :export-button-label="$t('settings.follow_export_button')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_import') }}</h2>
-    <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importBlocks"
-      :success-message="$t('settings.blocks_imported')"
-      :error-message="$t('settings.block_import_error')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.block_import') }}</h2>
+      <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importBlocks"
+        :success-message="$t('settings.blocks_imported')"
+        :error-message="$t('settings.block_import_error')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_export') }}</h2>
-    <Exporter
-      :get-content="getBlocksContent"
-      filename="blocks.csv"
-      :export-button-label="$t('settings.block_export_button')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.block_export') }}</h2>
+      <Exporter
+        :get-content="getBlocksContent"
+        filename="blocks.csv"
+        :export-button-label="$t('settings.block_export_button')"
       />
+    </div>
   </div>
-</div>
 </template>
 
 <script src="./data_import_export_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 647ec7b4..eea41514 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -1,86 +1,86 @@
 <template>
-<div :label="$t('settings.filtering')">
-  <div class="setting-item">
-    <div class="select-multiple">
-      <span class="label">{{ $t('settings.notification_visibility') }}</span>
-      <ul class="option-list">
-        <li>
-          <Checkbox v-model="notificationVisibility.likes">
-            {{ $t('settings.notification_visibility_likes') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.repeats">
-            {{ $t('settings.notification_visibility_repeats') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.follows">
-            {{ $t('settings.notification_visibility_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.mentions">
-            {{ $t('settings.notification_visibility_mentions') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.moves">
-            {{ $t('settings.notification_visibility_moves') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.emojiReactions">
-            {{ $t('settings.notification_visibility_emoji_reactions') }}
-          </Checkbox>
-        </li>
-      </ul>
-    </div>
-    <div>
-      {{ $t('settings.replies_in_timeline') }}
-      <label
-        for="replyVisibility"
-        class="select"
+  <div :label="$t('settings.filtering')">
+    <div class="setting-item">
+      <div class="select-multiple">
+        <span class="label">{{ $t('settings.notification_visibility') }}</span>
+        <ul class="option-list">
+          <li>
+            <Checkbox v-model="notificationVisibility.likes">
+              {{ $t('settings.notification_visibility_likes') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.repeats">
+              {{ $t('settings.notification_visibility_repeats') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.follows">
+              {{ $t('settings.notification_visibility_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.mentions">
+              {{ $t('settings.notification_visibility_mentions') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.moves">
+              {{ $t('settings.notification_visibility_moves') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.emojiReactions">
+              {{ $t('settings.notification_visibility_emoji_reactions') }}
+            </Checkbox>
+          </li>
+        </ul>
+      </div>
+      <div>
+        {{ $t('settings.replies_in_timeline') }}
+        <label
+          for="replyVisibility"
+          class="select"
         >
-        <select
-          id="replyVisibility"
-          v-model="replyVisibility"
+          <select
+            id="replyVisibility"
+            v-model="replyVisibility"
           >
-          <option
-            value="all"
-            selected
+            <option
+              value="all"
+              selected
             >{{ $t('settings.reply_visibility_all') }}</option>
-          <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-          <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-        </select>
-        <i class="icon-down-open" />
-      </label>
-    </div>
-    <div>
-      <Checkbox v-model="hidePostStats">
-        {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-      </Checkbox>
-    </div>
-    <div>
-      <Checkbox v-model="hideUserStats">
-        {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-      </Checkbox>
+            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
+            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
+          </select>
+          <i class="icon-down-open" />
+        </label>
+      </div>
+      <div>
+        <Checkbox v-model="hidePostStats">
+          {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
+        </Checkbox>
+      </div>
+      <div>
+        <Checkbox v-model="hideUserStats">
+          {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
+        </Checkbox>
+      </div>
     </div>
-  </div>
-  <div class="setting-item">
-    <div>
-      <p>{{ $t('settings.filtering_explanation') }}</p>
-      <textarea
-        id="muteWords"
-        v-model="muteWordsString"
+    <div class="setting-item">
+      <div>
+        <p>{{ $t('settings.filtering_explanation') }}</p>
+        <textarea
+          id="muteWords"
+          v-model="muteWordsString"
         />
-    </div>
-    <div>
-      <Checkbox v-model="hideFilteredStatuses">
-        {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-      </Checkbox>
+      </div>
+      <div>
+        <Checkbox v-model="hideFilteredStatuses">
+          {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
+        </Checkbox>
+      </div>
     </div>
   </div>
-</div>
 </template>
 <script src="./filtering_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 82bf6862..9df1da79 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -5,7 +5,6 @@ import SharedComputedObject from './helpers/shared_computed_object.js'
 
 const GeneralTab = {
   data () {
-    const instance = this.$store.state.instance
     return {
       loopSilentAvailable:
       // Firefox
@@ -13,7 +12,7 @@ const GeneralTab = {
       // Chrome-likes
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
       // Future spec, still not supported in Nightly 63 as of 08/2018
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
     }
   },
   components: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 0d2da07a..f89c0480 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -1,160 +1,160 @@
 <template>
-<div :label="$t('settings.general')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.interface') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <interface-language-switcher />
-      </li>
-      <li v-if="instanceSpecificPanelPresent">
-        <Checkbox v-model="hideISP">
-          {{ $t('settings.hide_isp') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('nav.timeline') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <Checkbox v-model="hideMutedPosts">
-          {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="collapseMessageWithSubject">
-          {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="streaming">
-          {{ $t('settings.streaming') }}
-        </Checkbox>
-        <ul
-          class="setting-list suboptions"
-          :class="[{disabled: !streaming}]"
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.interface') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <interface-language-switcher />
+        </li>
+        <li v-if="instanceSpecificPanelPresent">
+          <Checkbox v-model="hideISP">
+            {{ $t('settings.hide_isp') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('nav.timeline') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="hideMutedPosts">
+            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="streaming">
+            {{ $t('settings.streaming') }}
+          </Checkbox>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
           >
-          <li>
-            <Checkbox
-              v-model="pauseOnUnfocused"
-              :disabled="!streaming"
+            <li>
+              <Checkbox
+                v-model="pauseOnUnfocused"
+                :disabled="!streaming"
               >
-              {{ $t('settings.pause_on_unfocused') }}
-            </Checkbox>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <Checkbox v-model="useStreamingApi">
-          {{ $t('settings.useStreamingApi') }}
-          <br>
-          <small>
-            {{ $t('settings.useStreamingApiWarning') }}
-          </small>
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="autoLoad">
-          {{ $t('settings.autoload') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="hoverPreview">
-          {{ $t('settings.reply_link_preview') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="emojiReactionsOnTimeline">
-          {{ $t('settings.emoji_reactions_on_timeline') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
+                {{ $t('settings.pause_on_unfocused') }}
+              </Checkbox>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <Checkbox v-model="useStreamingApi">
+            {{ $t('settings.useStreamingApi') }}
+            <br>
+            <small>
+              {{ $t('settings.useStreamingApiWarning') }}
+            </small>
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="autoLoad">
+            {{ $t('settings.autoload') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="hoverPreview">
+            {{ $t('settings.reply_link_preview') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="emojiReactionsOnTimeline">
+            {{ $t('settings.emoji_reactions_on_timeline') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.composing') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <Checkbox v-model="scopeCopy">
-          {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="alwaysShowSubjectInput">
-          {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <div>
-          {{ $t('settings.subject_line_behavior') }}
-          <label
-            for="subjectLineBehavior"
-            class="select"
+    <div class="setting-item">
+      <h2>{{ $t('settings.composing') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="scopeCopy">
+            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <div>
+            {{ $t('settings.subject_line_behavior') }}
+            <label
+              for="subjectLineBehavior"
+              class="select"
             >
-            <select
-              id="subjectLineBehavior"
-              v-model="subjectLineBehavior"
+              <select
+                id="subjectLineBehavior"
+                v-model="subjectLineBehavior"
               >
-              <option value="email">
-                {{ $t('settings.subject_line_email') }}
-                {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="masto">
-                {{ $t('settings.subject_line_mastodon') }}
-                {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="noop">
-                {{ $t('settings.subject_line_noop') }}
-                {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </select>
-            <i class="icon-down-open" />
-          </label>
-        </div>
-      </li>
-      <li v-if="postFormats.length > 0">
-        <div>
-          {{ $t('settings.post_status_content_type') }}
-          <label
-            for="postContentType"
-            class="select"
+                <option value="email">
+                  {{ $t('settings.subject_line_email') }}
+                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+                <option value="masto">
+                  {{ $t('settings.subject_line_mastodon') }}
+                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+                <option value="noop">
+                  {{ $t('settings.subject_line_noop') }}
+                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
+        </li>
+        <li v-if="postFormats.length > 0">
+          <div>
+            {{ $t('settings.post_status_content_type') }}
+            <label
+              for="postContentType"
+              class="select"
             >
-            <select
-              id="postContentType"
-              v-model="postContentType"
+              <select
+                id="postContentType"
+                v-model="postContentType"
               >
-              <option
-                v-for="postFormat in postFormats"
-                :key="postFormat"
-                :value="postFormat"
+                <option
+                  v-for="postFormat in postFormats"
+                  :key="postFormat"
+                  :value="postFormat"
                 >
-                {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </select>
-            <i class="icon-down-open" />
-          </label>
-        </div>
-      </li>
-      <li>
-        <Checkbox v-model="minimalScopesMode">
-          {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="autohideFloatingPostButton">
-          {{ $t('settings.autohide_floating_post_button') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="padEmoji">
-          {{ $t('settings.pad_emoji') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
+                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
+        </li>
+        <li>
+          <Checkbox v-model="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="autohideFloatingPostButton">
+            {{ $t('settings.autohide_floating_post_button') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="padEmoji">
+            {{ $t('settings.pad_emoji') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
 
-  <div class="setting-item">
+    <div class="setting-item">
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
@@ -178,7 +178,7 @@
             type="number"
             min="0"
             step="1"
-            >
+          >
         </li>
         <li>
           <Checkbox v-model="hideNsfw">
@@ -190,7 +190,7 @@
             <Checkbox
               v-model="preloadImage"
               :disabled="!hideNsfw"
-              >
+            >
               {{ $t('settings.preload_images') }}
             </Checkbox>
           </li>
@@ -198,7 +198,7 @@
             <Checkbox
               v-model="useOneClickNsfw"
               :disabled="!hideNsfw"
-              >
+            >
               {{ $t('settings.use_one_click_nsfw') }}
             </Checkbox>
           </li>
@@ -215,18 +215,18 @@
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
-            >
+          >
             <li>
               <Checkbox
                 v-model="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
-                >
+              >
                 {{ $t('settings.loop_video_silent_only') }}
               </Checkbox>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
-                >
+              >
                 <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
               </div>
             </li>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 04f9c6dd..6884b7be 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -1,175 +1,175 @@
 <template>
-<tab-switcher
-  :scrollableTabs="true"
-  class="mutes-and-blocks-tab"
+  <tab-switcher
+    :scrollable-tabs="true"
+    class="mutes-and-blocks-tab"
   >
-  <div :label="$t('settings.blocks_tab')">
-    <div class="usersearch-wrapper">
-      <Autosuggest
-        :filter="filterUnblockedUsers"
-        :query="queryUserIds"
-        :placeholder="$t('settings.search_user_to_block')"
+    <div :label="$t('settings.blocks_tab')">
+      <div class="usersearch-wrapper">
+        <Autosuggest
+          :filter="filterUnblockedUsers"
+          :query="queryUserIds"
+          :placeholder="$t('settings.search_user_to_block')"
         >
-        <BlockCard
-          slot-scope="row"
-          :user-id="row.item"
+          <BlockCard
+            slot-scope="row"
+            :user-id="row.item"
           />
-      </Autosuggest>
-    </div>
-    <BlockList
-      :refresh="true"
-      :get-key="i => i"
+        </Autosuggest>
+      </div>
+      <BlockList
+        :refresh="true"
+        :get-key="i => i"
       >
-      <template
-        slot="header"
-        slot-scope="{selected}"
+        <template
+          slot="header"
+          slot-scope="{selected}"
         >
-        <div class="bulk-actions">
-          <ProgressButton
-            v-if="selected.length > 0"
-            class="btn btn-default bulk-action-button"
-            :click="() => blockUsers(selected)"
+          <div class="bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default bulk-action-button"
+              :click="() => blockUsers(selected)"
             >
-            {{ $t('user_card.block') }}
-            <template slot="progress">
-              {{ $t('user_card.block_progress') }}
-            </template>
-          </ProgressButton>
-          <ProgressButton
-            v-if="selected.length > 0"
-            class="btn btn-default"
-            :click="() => unblockUsers(selected)"
+              {{ $t('user_card.block') }}
+              <template slot="progress">
+                {{ $t('user_card.block_progress') }}
+              </template>
+            </ProgressButton>
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => unblockUsers(selected)"
             >
-            {{ $t('user_card.unblock') }}
-            <template slot="progress">
-              {{ $t('user_card.unblock_progress') }}
-            </template>
-          </ProgressButton>
-        </div>
-      </template>
-      <template
-        slot="item"
-        slot-scope="{item}"
+              {{ $t('user_card.unblock') }}
+              <template slot="progress">
+                {{ $t('user_card.unblock_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+        </template>
+        <template
+          slot="item"
+          slot-scope="{item}"
         >
-        <BlockCard :user-id="item" />
-      </template>
-      <template slot="empty">
-        {{ $t('settings.no_blocks') }}
-      </template>
-    </BlockList>
-  </div>
+          <BlockCard :user-id="item" />
+        </template>
+        <template slot="empty">
+          {{ $t('settings.no_blocks') }}
+        </template>
+      </BlockList>
+    </div>
 
-  <div :label="$t('settings.mutes_tab')">
-    <tab-switcher>
-      <div label="Users">
-        <div class="usersearch-wrapper">
-          <Autosuggest
-            :filter="filterUnMutedUsers"
-            :query="queryUserIds"
-            :placeholder="$t('settings.search_user_to_mute')"
+    <div :label="$t('settings.mutes_tab')">
+      <tab-switcher>
+        <div label="Users">
+          <div class="usersearch-wrapper">
+            <Autosuggest
+              :filter="filterUnMutedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_mute')"
             >
-            <MuteCard
-              slot-scope="row"
-              :user-id="row.item"
+              <MuteCard
+                slot-scope="row"
+                :user-id="row.item"
               />
-          </Autosuggest>
-        </div>
-        <MuteList
-          :refresh="true"
-          :get-key="i => i"
+            </Autosuggest>
+          </div>
+          <MuteList
+            :refresh="true"
+            :get-key="i => i"
           >
-          <template
-            slot="header"
-            slot-scope="{selected}"
+            <template
+              slot="header"
+              slot-scope="{selected}"
             >
-            <div class="bulk-actions">
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => muteUsers(selected)"
+              <div class="bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => muteUsers(selected)"
                 >
-                {{ $t('user_card.mute') }}
-                <template slot="progress">
-                  {{ $t('user_card.mute_progress') }}
-                </template>
-              </ProgressButton>
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => unmuteUsers(selected)"
+                  {{ $t('user_card.mute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteUsers(selected)"
                 >
-                {{ $t('user_card.unmute') }}
-                <template slot="progress">
-                  {{ $t('user_card.unmute_progress') }}
-                </template>
-              </ProgressButton>
-            </div>
-          </template>
-          <template
-            slot="item"
-            slot-scope="{item}"
+                  {{ $t('user_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
             >
-            <MuteCard :user-id="item" />
-          </template>
-          <template slot="empty">
-            {{ $t('settings.no_mutes') }}
-          </template>
-        </MuteList>
-      </div>
+              <MuteCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </MuteList>
+        </div>
 
-      <div :label="$t('settings.domain_mutes')">
-        <div class="domain-mute-form">
-          <input
-            v-model="newDomainToMute"
-            :placeholder="$t('settings.type_domains_to_mute')"
-            type="text"
-            @keyup.enter="muteDomain"
+        <div :label="$t('settings.domain_mutes')">
+          <div class="domain-mute-form">
+            <input
+              v-model="newDomainToMute"
+              :placeholder="$t('settings.type_domains_to_mute')"
+              type="text"
+              @keyup.enter="muteDomain"
             >
-          <ProgressButton
-            class="btn btn-default domain-mute-button"
-            :click="muteDomain"
+            <ProgressButton
+              class="btn btn-default domain-mute-button"
+              :click="muteDomain"
             >
-            {{ $t('domain_mute_card.mute') }}
-            <template slot="progress">
-              {{ $t('domain_mute_card.mute_progress') }}
-            </template>
-          </ProgressButton>
-        </div>
-        <DomainMuteList
-          :refresh="true"
-          :get-key="i => i"
+              {{ $t('domain_mute_card.mute') }}
+              <template slot="progress">
+                {{ $t('domain_mute_card.mute_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+          <DomainMuteList
+            :refresh="true"
+            :get-key="i => i"
           >
-          <template
-            slot="header"
-            slot-scope="{selected}"
+            <template
+              slot="header"
+              slot-scope="{selected}"
             >
-            <div class="bulk-actions">
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => unmuteDomains(selected)"
+              <div class="bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteDomains(selected)"
                 >
-                {{ $t('domain_mute_card.unmute') }}
-                <template slot="progress">
-                  {{ $t('domain_mute_card.unmute_progress') }}
-                </template>
-              </ProgressButton>
-            </div>
-          </template>
-          <template
-            slot="item"
-            slot-scope="{item}"
+                  {{ $t('domain_mute_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('domain_mute_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
             >
-            <DomainMuteCard :domain="item" />
-          </template>
-          <template slot="empty">
-            {{ $t('settings.no_mutes') }}
-          </template>
-        </DomainMuteList>
-      </div>
-    </tab-switcher>
-  </div>
-</tab-switcher>
+              <DomainMuteCard :domain="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </DomainMuteList>
+        </div>
+      </tab-switcher>
+    </div>
+  </tab-switcher>
 </template>
 
 <script src="./mutes_and_blocks_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 19181e24..b7a3cb37 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -1,53 +1,53 @@
 <template>
-<div :label="$t('settings.notifications')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.notification_setting_filters') }}</h2>
-    <div class="select-multiple">
-      <span class="label">{{ $t('settings.notification_setting') }}</span>
-      <ul class="option-list">
-        <li>
-          <Checkbox v-model="notificationSettings.follows">
-            {{ $t('settings.notification_setting_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.followers">
-            {{ $t('settings.notification_setting_followers') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_follows">
-            {{ $t('settings.notification_setting_non_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_followers">
-            {{ $t('settings.notification_setting_non_followers') }}
-          </Checkbox>
-        </li>
-      </ul>
+  <div :label="$t('settings.notifications')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
+      <div class="select-multiple">
+        <span class="label">{{ $t('settings.notification_setting') }}</span>
+        <ul class="option-list">
+          <li>
+            <Checkbox v-model="notificationSettings.follows">
+              {{ $t('settings.notification_setting_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.followers">
+              {{ $t('settings.notification_setting_followers') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.non_follows">
+              {{ $t('settings.notification_setting_non_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.non_followers">
+              {{ $t('settings.notification_setting_non_followers') }}
+            </Checkbox>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
-    <p>
-      <Checkbox v-model="notificationSettings.privacy_option">
-        {{ $t('settings.notification_setting_privacy_option') }}
-      </Checkbox>
-    </p>
-  </div>
-  <div class="setting-item">
-    <p>{{ $t('settings.notification_mutes') }}</p>
-    <p>{{ $t('settings.notification_blocks') }}</p>
-    <button
-      class="btn btn-default"
-      @click="updateNotificationSettings"
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
+      <p>
+        <Checkbox v-model="notificationSettings.privacy_option">
+          {{ $t('settings.notification_setting_privacy_option') }}
+        </Checkbox>
+      </p>
+    </div>
+    <div class="setting-item">
+      <p>{{ $t('settings.notification_mutes') }}</p>
+      <p>{{ $t('settings.notification_blocks') }}</p>
+      <button
+        class="btn btn-default"
+        @click="updateNotificationSettings"
       >
-      {{ $t('general.submit') }}
-    </button>
+        {{ $t('general.submit') }}
+      </button>
+    </div>
   </div>
-</div>
 </template>
 
 <script src="./notifications_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 0b4951d3..8658b097 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -32,7 +32,7 @@ const ProfileTab = {
       background: null,
       backgroundPreview: null,
       bannerUploadError: null,
-      backgroundUploadError: null,
+      backgroundUploadError: null
     }
   },
   components: {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 9dd89b99..fff4f970 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,212 +1,212 @@
 <template>
-<div class="profile-tab">
-  <div class="setting-item">
-    <h2>{{ $t('settings.name_bio') }}</h2>
-    <p>{{ $t('settings.name') }}</p>
-    <EmojiInput
-      v-model="newName"
-      enable-emoji-picker
-      :suggest="emojiSuggestor"
-      >
-      <input
-        id="username"
+  <div class="profile-tab">
+    <div class="setting-item">
+      <h2>{{ $t('settings.name_bio') }}</h2>
+      <p>{{ $t('settings.name') }}</p>
+      <EmojiInput
         v-model="newName"
-        classname="name-changer"
-        >
-    </EmojiInput>
-    <p>{{ $t('settings.bio') }}</p>
-    <EmojiInput
-      v-model="newBio"
-      enable-emoji-picker
-      :suggest="emojiUserSuggestor"
+        enable-emoji-picker
+        :suggest="emojiSuggestor"
       >
-      <textarea
+        <input
+          id="username"
+          v-model="newName"
+          classname="name-changer"
+        >
+      </EmojiInput>
+      <p>{{ $t('settings.bio') }}</p>
+      <EmojiInput
         v-model="newBio"
-        classname="bio"
+        enable-emoji-picker
+        :suggest="emojiUserSuggestor"
+      >
+        <textarea
+          v-model="newBio"
+          classname="bio"
         />
-    </EmojiInput>
-    <p>
-      <Checkbox v-model="newLocked">
-        {{ $t('settings.lock_account_description') }}
-      </Checkbox>
-    </p>
-    <div>
-      <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-      <div
-        id="default-vis"
-        class="visibility-tray"
+      </EmojiInput>
+      <p>
+        <Checkbox v-model="newLocked">
+          {{ $t('settings.lock_account_description') }}
+        </Checkbox>
+      </p>
+      <div>
+        <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+        <div
+          id="default-vis"
+          class="visibility-tray"
         >
-        <scope-selector
-          :show-all="true"
-          :user-default="newDefaultScope"
-          :initial-scope="newDefaultScope"
-          :on-scope-change="changeVis"
+          <scope-selector
+            :show-all="true"
+            :user-default="newDefaultScope"
+            :initial-scope="newDefaultScope"
+            :on-scope-change="changeVis"
           />
+        </div>
       </div>
-    </div>
-    <p>
-      <Checkbox v-model="newNoRichText">
-        {{ $t('settings.no_rich_text_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollows">
-        {{ $t('settings.hide_follows_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowsCount"
-        :disabled="!hideFollows"
+      <p>
+        <Checkbox v-model="newNoRichText">
+          {{ $t('settings.no_rich_text_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="hideFollows">
+          {{ $t('settings.hide_follows_description') }}
+        </Checkbox>
+      </p>
+      <p class="setting-subitem">
+        <Checkbox
+          v-model="hideFollowsCount"
+          :disabled="!hideFollows"
         >
-        {{ $t('settings.hide_follows_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollowers">
-        {{ $t('settings.hide_followers_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowersCount"
-        :disabled="!hideFollowers"
+          {{ $t('settings.hide_follows_count_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="hideFollowers">
+          {{ $t('settings.hide_followers_description') }}
+        </Checkbox>
+      </p>
+      <p class="setting-subitem">
+        <Checkbox
+          v-model="hideFollowersCount"
+          :disabled="!hideFollowers"
         >
-        {{ $t('settings.hide_followers_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="allowFollowingMove">
-        {{ $t('settings.allow_following_move') }}
-      </Checkbox>
-    </p>
-    <p v-if="role === 'admin' || role === 'moderator'">
-      <Checkbox v-model="showRole">
-        <template v-if="role === 'admin'">
-          {{ $t('settings.show_admin_badge') }}
-        </template>
-        <template v-if="role === 'moderator'">
-          {{ $t('settings.show_moderator_badge') }}
-        </template>
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="discoverable">
-        {{ $t('settings.discoverable') }}
-      </Checkbox>
-    </p>
-    <button
-      :disabled="newName && newName.length === 0"
-      class="btn btn-default"
-      @click="updateProfile"
+          {{ $t('settings.hide_followers_count_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="allowFollowingMove">
+          {{ $t('settings.allow_following_move') }}
+        </Checkbox>
+      </p>
+      <p v-if="role === 'admin' || role === 'moderator'">
+        <Checkbox v-model="showRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="discoverable">
+          {{ $t('settings.discoverable') }}
+        </Checkbox>
+      </p>
+      <button
+        :disabled="newName && newName.length === 0"
+        class="btn btn-default"
+        @click="updateProfile"
       >
-      {{ $t('general.submit') }}
-    </button>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.avatar') }}</h2>
-    <p class="visibility-notice">
-      {{ $t('settings.avatar_size_instruction') }}
-    </p>
-    <p>{{ $t('settings.current_avatar') }}</p>
-    <img
-      :src="user.profile_image_url_original"
-      class="current-avatar"
+        {{ $t('general.submit') }}
+      </button>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.avatar') }}</h2>
+      <p class="visibility-notice">
+        {{ $t('settings.avatar_size_instruction') }}
+      </p>
+      <p>{{ $t('settings.current_avatar') }}</p>
+      <img
+        :src="user.profile_image_url_original"
+        class="current-avatar"
       >
-    <p>{{ $t('settings.set_new_avatar') }}</p>
-    <button
-      v-show="pickAvatarBtnVisible"
-      id="pick-avatar"
-      class="btn"
-      type="button"
+      <p>{{ $t('settings.set_new_avatar') }}</p>
+      <button
+        v-show="pickAvatarBtnVisible"
+        id="pick-avatar"
+        class="btn"
+        type="button"
       >
-      {{ $t('settings.upload_a_photo') }}
-    </button>
-    <image-cropper
-      trigger="#pick-avatar"
-      :submit-handler="submitAvatar"
-      @open="pickAvatarBtnVisible=false"
-      @close="pickAvatarBtnVisible=true"
+        {{ $t('settings.upload_a_photo') }}
+      </button>
+      <image-cropper
+        trigger="#pick-avatar"
+        :submit-handler="submitAvatar"
+        @open="pickAvatarBtnVisible=false"
+        @close="pickAvatarBtnVisible=true"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_banner') }}</h2>
-    <p>{{ $t('settings.current_profile_banner') }}</p>
-    <img
-      :src="user.cover_photo"
-      class="banner"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.profile_banner') }}</h2>
+      <p>{{ $t('settings.current_profile_banner') }}</p>
+      <img
+        :src="user.cover_photo"
+        class="banner"
       >
-    <p>{{ $t('settings.set_new_profile_banner') }}</p>
-    <img
-      v-if="bannerPreview"
-      class="banner"
-      :src="bannerPreview"
+      <p>{{ $t('settings.set_new_profile_banner') }}</p>
+      <img
+        v-if="bannerPreview"
+        class="banner"
+        :src="bannerPreview"
       >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('banner', $event)"
+      <div>
+        <input
+          type="file"
+          @change="uploadFile('banner', $event)"
         >
-    </div>
-    <i
-      v-if="bannerUploading"
-      class=" icon-spin4 animate-spin uploading"
+      </div>
+      <i
+        v-if="bannerUploading"
+        class=" icon-spin4 animate-spin uploading"
       />
-    <button
-      v-else-if="bannerPreview"
-      class="btn btn-default"
-      @click="submitBanner"
+      <button
+        v-else-if="bannerPreview"
+        class="btn btn-default"
+        @click="submitBanner"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="bannerUploadError"
-      class="alert error"
+        {{ $t('general.submit') }}
+      </button>
+      <div
+        v-if="bannerUploadError"
+        class="alert error"
       >
-      Error: {{ bannerUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('banner')"
+        Error: {{ bannerUploadError }}
+        <i
+          class="button-icon icon-cancel"
+          @click="clearUploadError('banner')"
         />
+      </div>
     </div>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_background') }}</h2>
-    <p>{{ $t('settings.set_new_profile_background') }}</p>
-    <img
-      v-if="backgroundPreview"
-      class="bg"
-      :src="backgroundPreview"
+    <div class="setting-item">
+      <h2>{{ $t('settings.profile_background') }}</h2>
+      <p>{{ $t('settings.set_new_profile_background') }}</p>
+      <img
+        v-if="backgroundPreview"
+        class="bg"
+        :src="backgroundPreview"
       >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('background', $event)"
+      <div>
+        <input
+          type="file"
+          @change="uploadFile('background', $event)"
         >
-    </div>
-    <i
-      v-if="backgroundUploading"
-      class=" icon-spin4 animate-spin uploading"
+      </div>
+      <i
+        v-if="backgroundUploading"
+        class=" icon-spin4 animate-spin uploading"
       />
-    <button
-      v-else-if="backgroundPreview"
-      class="btn btn-default"
-      @click="submitBg"
+      <button
+        v-else-if="backgroundPreview"
+        class="btn btn-default"
+        @click="submitBg"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="backgroundUploadError"
-      class="alert error"
+        {{ $t('general.submit') }}
+      </button>
+      <div
+        v-if="backgroundUploadError"
+        class="alert error"
       >
-      Error: {{ backgroundUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('background')"
+        Error: {{ backgroundUploadError }}
+        <i
+          class="button-icon icon-cancel"
+          @click="clearUploadError('background')"
         />
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script src="./profile_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 45bacec1..3d32d73d 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -1,142 +1,142 @@
 <template>
-<div :label="$t('settings.security_tab')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_email') }}</h2>
-    <div>
-      <p>{{ $t('settings.new_email') }}</p>
-      <input
-        v-model="newEmail"
-        type="email"
-        autocomplete="email"
+  <div :label="$t('settings.security_tab')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.change_email') }}</h2>
+      <div>
+        <p>{{ $t('settings.new_email') }}</p>
+        <input
+          v-model="newEmail"
+          type="email"
+          autocomplete="email"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changeEmailPassword"
-        type="password"
-        autocomplete="current-password"
+      </div>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changeEmailPassword"
+          type="password"
+          autocomplete="current-password"
         >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changeEmail"
+      </div>
+      <button
+        class="btn btn-default"
+        @click="changeEmail"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedEmail">
-      {{ $t('settings.changed_email') }}
-    </p>
-    <template v-if="changeEmailError !== false">
-      <p>{{ $t('settings.change_email_error') }}</p>
-      <p>{{ changeEmailError }}</p>
-    </template>
-  </div>
+        {{ $t('general.submit') }}
+      </button>
+      <p v-if="changedEmail">
+        {{ $t('settings.changed_email') }}
+      </p>
+      <template v-if="changeEmailError !== false">
+        <p>{{ $t('settings.change_email_error') }}</p>
+        <p>{{ changeEmailError }}</p>
+      </template>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_password') }}</h2>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changePasswordInputs[0]"
-        type="password"
+    <div class="setting-item">
+      <h2>{{ $t('settings.change_password') }}</h2>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changePasswordInputs[0]"
+          type="password"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[1]"
-        type="password"
+      </div>
+      <div>
+        <p>{{ $t('settings.new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[1]"
+          type="password"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.confirm_new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[2]"
-        type="password"
+      </div>
+      <div>
+        <p>{{ $t('settings.confirm_new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[2]"
+          type="password"
         >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changePassword"
+      </div>
+      <button
+        class="btn btn-default"
+        @click="changePassword"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedPassword">
-      {{ $t('settings.changed_password') }}
-    </p>
-    <p v-else-if="changePasswordError !== false">
-      {{ $t('settings.change_password_error') }}
-    </p>
-    <p v-if="changePasswordError">
-      {{ changePasswordError }}
-    </p>
-  </div>
+        {{ $t('general.submit') }}
+      </button>
+      <p v-if="changedPassword">
+        {{ $t('settings.changed_password') }}
+      </p>
+      <p v-else-if="changePasswordError !== false">
+        {{ $t('settings.change_password_error') }}
+      </p>
+      <p v-if="changePasswordError">
+        {{ changePasswordError }}
+      </p>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.oauth_tokens') }}</h2>
-    <table class="oauth-tokens">
-      <thead>
-        <tr>
-          <th>{{ $t('settings.app_name') }}</th>
-          <th>{{ $t('settings.valid_until') }}</th>
-          <th />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="oauthToken in oauthTokens"
-          :key="oauthToken.id"
+    <div class="setting-item">
+      <h2>{{ $t('settings.oauth_tokens') }}</h2>
+      <table class="oauth-tokens">
+        <thead>
+          <tr>
+            <th>{{ $t('settings.app_name') }}</th>
+            <th>{{ $t('settings.valid_until') }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="oauthToken in oauthTokens"
+            :key="oauthToken.id"
           >
-          <td>{{ oauthToken.appName }}</td>
-          <td>{{ oauthToken.validUntil }}</td>
-          <td class="actions">
-            <button
-              class="btn btn-default"
-              @click="revokeToken(oauthToken.id)"
+            <td>{{ oauthToken.appName }}</td>
+            <td>{{ oauthToken.validUntil }}</td>
+            <td class="actions">
+              <button
+                class="btn btn-default"
+                @click="revokeToken(oauthToken.id)"
               >
-              {{ $t('settings.revoke_token') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <mfa />
-  <div class="setting-item">
-    <h2>{{ $t('settings.delete_account') }}</h2>
-    <p v-if="!deletingAccount">
-      {{ $t('settings.delete_account_description') }}
-    </p>
-    <div v-if="deletingAccount">
-      <p>{{ $t('settings.delete_account_instructions') }}</p>
-      <p>{{ $t('login.password') }}</p>
-      <input
-        v-model="deleteAccountConfirmPasswordInput"
-        type="password"
+                {{ $t('settings.revoke_token') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <mfa />
+    <div class="setting-item">
+      <h2>{{ $t('settings.delete_account') }}</h2>
+      <p v-if="!deletingAccount">
+        {{ $t('settings.delete_account_description') }}
+      </p>
+      <div v-if="deletingAccount">
+        <p>{{ $t('settings.delete_account_instructions') }}</p>
+        <p>{{ $t('login.password') }}</p>
+        <input
+          v-model="deleteAccountConfirmPasswordInput"
+          type="password"
+        >
+        <button
+          class="btn btn-default"
+          @click="deleteAccount"
         >
+          {{ $t('settings.delete_account') }}
+        </button>
+      </div>
+      <p v-if="deleteAccountError !== false">
+        {{ $t('settings.delete_account_error') }}
+      </p>
+      <p v-if="deleteAccountError">
+        {{ deleteAccountError }}
+      </p>
       <button
+        v-if="!deletingAccount"
         class="btn btn-default"
-        @click="deleteAccount"
-        >
-        {{ $t('settings.delete_account') }}
+        @click="confirmDelete"
+      >
+        {{ $t('general.submit') }}
       </button>
     </div>
-    <p v-if="deleteAccountError !== false">
-      {{ $t('settings.delete_account_error') }}
-    </p>
-    <p v-if="deleteAccountError">
-      {{ deleteAccountError }}
-    </p>
-    <button
-      v-if="!deletingAccount"
-      class="btn btn-default"
-      @click="confirmDelete"
-      >
-      {{ $t('general.submit') }}
-    </button>
   </div>
-</div>
 </template>
 
 <script src="./security_tab.js"></script>
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 6f6cf1d6..33098498 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,90 +1,90 @@
 <template>
-<div class="theme-tab">
-  <div class="presets-container">
-    <div class="save-load">
-      <div
-        v-if="themeWarning"
-        class="theme-warning"
+  <div class="theme-tab">
+    <div class="presets-container">
+      <div class="save-load">
+        <div
+          v-if="themeWarning"
+          class="theme-warning"
         >
-        <div class="alert warning">
-          {{ themeWarningHelp }}
-        </div>
-        <div class="buttons">
-          <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
-            <button
-              class="btn"
-              @click="forceLoad"
+          <div class="alert warning">
+            {{ themeWarningHelp }}
+          </div>
+          <div class="buttons">
+            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
+              <button
+                class="btn"
+                @click="forceLoad"
               >
-              {{ $t('settings.style.switcher.use_source') }}
-            </button>
-            <button
-              class="btn"
-              @click="forceSnapshot"
+                {{ $t('settings.style.switcher.use_source') }}
+              </button>
+              <button
+                class="btn"
+                @click="forceSnapshot"
               >
-              {{ $t('settings.style.switcher.use_snapshot') }}
-            </button>
-          </template>
-          <template v-else-if="themeWarning.noActionsPossible">
-            <button
-              class="btn"
-              @click="dismissWarning"
+                {{ $t('settings.style.switcher.use_snapshot') }}
+              </button>
+            </template>
+            <template v-else-if="themeWarning.noActionsPossible">
+              <button
+                class="btn"
+                @click="dismissWarning"
               >
-              {{ $t('general.dismiss') }}
-            </button>
-          </template>
-          <template v-else>
-            <button
-              class="btn"
-              @click="forceLoad"
+                {{ $t('general.dismiss') }}
+              </button>
+            </template>
+            <template v-else>
+              <button
+                class="btn"
+                @click="forceLoad"
               >
-              {{ $t('settings.style.switcher.load_theme') }}
-            </button>
-            <button
-              class="btn"
-              @click="dismissWarning"
+                {{ $t('settings.style.switcher.load_theme') }}
+              </button>
+              <button
+                class="btn"
+                @click="dismissWarning"
               >
-              {{ $t('settings.style.switcher.keep_as_is') }}
-            </button>
-          </template>
+                {{ $t('settings.style.switcher.keep_as_is') }}
+              </button>
+            </template>
+          </div>
         </div>
-      </div>
-      <ExportImport
-        :export-object="exportedTheme"
-        :export-label="$t(&quot;settings.export_theme&quot;)"
-        :import-label="$t(&quot;settings.import_theme&quot;)"
-        :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-        :on-import="onImport"
-        :validator="importValidator"
+        <ExportImport
+          :export-object="exportedTheme"
+          :export-label="$t(&quot;settings.export_theme&quot;)"
+          :import-label="$t(&quot;settings.import_theme&quot;)"
+          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+          :on-import="onImport"
+          :validator="importValidator"
         >
-        <template slot="before">
-          <div class="presets">
-            {{ $t('settings.presets') }}
-            <label
-              for="preset-switcher"
-              class="select"
+          <template slot="before">
+            <div class="presets">
+              {{ $t('settings.presets') }}
+              <label
+                for="preset-switcher"
+                class="select"
               >
-              <select
-                id="preset-switcher"
-                v-model="selected"
-                class="preset-switcher"
+                <select
+                  id="preset-switcher"
+                  v-model="selected"
+                  class="preset-switcher"
                 >
-                <option
-                  v-for="style in availableStyles"
-                  :key="style.name"
-                  :value="style"
-                  :style="{
-                          backgroundColor: style[1] || (style.theme || style.source).colors.bg,
-                          color: style[3] || (style.theme || style.source).colors.text
-                          }"
+                  <option
+                    v-for="style in availableStyles"
+                    :key="style.name"
+                    :value="style"
+                    :style="{
+                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                      color: style[3] || (style.theme || style.source).colors.text
+                    }"
                   >
-                  {{ style[0] || style.name }}
-                </option>
-              </select>
-              <i class="icon-down-open" />
-            </label>
-          </div>
-        </template>
-      </ExportImport>
+                    {{ style[0] || style.name }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+          </template>
+        </ExportImport>
       </div>
       <div class="save-load-options">
         <span class="keep-option">
diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue
index acc43569..d35ff25e 100644
--- a/src/components/settings_modal/tabs/version_tab.vue
+++ b/src/components/settings_modal/tabs/version_tab.vue
@@ -1,31 +1,31 @@
 <template>
-<div :label="$t('settings.version.title')">
-  <div class="setting-item">
-    <ul class="setting-list">
-      <li>
-        <p>{{ $t('settings.version.backend_version') }}</p>
-        <ul class="option-list">
-          <li>
-            <a
-              :href="backendVersionLink"
-              target="_blank"
+  <div :label="$t('settings.version.title')">
+    <div class="setting-item">
+      <ul class="setting-list">
+        <li>
+          <p>{{ $t('settings.version.backend_version') }}</p>
+          <ul class="option-list">
+            <li>
+              <a
+                :href="backendVersionLink"
+                target="_blank"
               >{{ backendVersion }}</a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <p>{{ $t('settings.version.frontend_version') }}</p>
-        <ul class="option-list">
-          <li>
-            <a
-              :href="frontendVersionLink"
-              target="_blank"
+            </li>
+          </ul>
+        </li>
+        <li>
+          <p>{{ $t('settings.version.frontend_version') }}</p>
+          <ul class="option-list">
+            <li>
+              <a
+                :href="frontendVersionLink"
+                target="_blank"
               >{{ frontendVersion }}</a>
-          </li>
-        </ul>
-      </li>
-    </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
 </template>
 <script src="./version_tab.js">
-- 
cgit v1.2.3-70-g09d2


From 6a4ad1fe624b2e2da68707ffffcc6a4cbe7e5e03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 14:04:36 +0300
Subject: added "settings saved" notice back

---
 .../settings_modal/settings_modal_content.js          |  3 +++
 .../settings_modal/settings_modal_content.vue         | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index bd8df672..b842ec7d 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -25,6 +25,9 @@ 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 013bf34f..737c3637 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,6 +4,25 @@
       <span class="title">
         {{ $t('settings.settings') }}
       </span>
+      <transition name="fade">
+        <template v-if="currentSaveStateNotice">
+          <div
+            v-if="currentSaveStateNotice.error"
+            class="alert error"
+            @click.prevent
+            >
+            {{ $t('settings.saving_err') }}
+          </div>
+
+          <div
+            v-if="!currentSaveStateNotice.error"
+            class="alert transparent"
+            @click.prevent
+            >
+            {{ $t('settings.saving_ok') }}
+          </div>
+        </template>
+      </transition>
       <button
         class="btn"
         @click="peekModal"
-- 
cgit v1.2.3-70-g09d2


From a6ca923a7695477f57367bf3dd95bdf41a4b64a4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:10:14 +0300
Subject: icons update

---
 src/components/settings_modal/settings_modal_content.vue |  9 +++++++++
 src/components/tab_switcher/tab_switcher.js              |  7 +++++--
 src/components/tab_switcher/tab_switcher.scss            |  5 +++++
 static/fontello.json                                     | 12 ++++++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 737c3637..847de1da 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -45,40 +45,47 @@
       >
         <div
           :label="$t('settings.general')"
+          icon="wrench"
         >
           <GeneralTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.profile_tab')"
+          icon="user"
         >
           <ProfileTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.security_tab')"
+          icon="lock"
         >
           <SecurityTab />
         </div>
         <div
           :label="$t('settings.filtering')"
+          icon="filter"
         >
           <FilteringTab />
         </div>
         <div
           :label="$t('settings.theme')"
+          icon="brush"
         >
           <ThemeTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.notifications')"
+          icon="chat"
         >
           <NotificationsTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.data_import_export_tab')"
+          icon="download"
         >
           <DataImportExportTab />
         </div>
@@ -87,11 +94,13 @@
           :label="$t('settings.mutes_and_blocks')"
           :fullHeight="true"
           class="full-height"
+          icon="eye-off"
         >
           <MutesAndBlocksTab />
         </div>
         <div
           :label="$t('settings.version.title')"
+          icon="info-circled"
         >
           <VersionTab />
         </div>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index bd1f51cb..2d04e15d 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -94,8 +94,11 @@ export default Vue.component('tab-switcher', {
             <button
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}
-              class={classesTab.join(' ')}>
-              {slot.data.attrs.label}</button>
+              class={classesTab.join(' ')}
+            >
+              {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
+              {slot.data.attrs.label}
+            </button>
           </div>
         )
       })
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index f994380f..129a68b7 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -3,6 +3,11 @@
 .tab-switcher {
   display: flex;
 
+  .tab-icon {
+    font-size: 2em;
+    display: block;
+  }
+
   &.top-tabs {
     flex-direction: column;
     > .tabs {
diff --git a/static/fontello.json b/static/fontello.json
index 7f0e7cdd..ac3f0a18 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -363,6 +363,18 @@
       "css": "ok",
       "code": 59431,
       "src": "fontawesome"
+    },
+    {
+      "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
+      "css": "filter",
+      "code": 61616,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
+      "css": "download",
+      "code": 59429,
+      "src": "fontawesome"
     }
   ]
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 5d1b539da20950f05bf062df1a0904437c204e97 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:48:23 +0300
Subject: lint

---
 src/components/settings_modal/settings_modal_content.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 847de1da..865a2adf 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2


From a8e013bd6517edb3a81eb5001e6ab948cb87bedb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 May 2020 23:58:55 +0300
Subject: Move modal frame parts away from modal-content into modal, improve
 error handling

---
 .../async_component_error.vue                      |  41 +++++
 src/components/big_spinner/big_spinner.vue         |  16 --
 src/components/error_window/error_window.vue       |  41 -----
 src/components/panel_loading/panel_loading.vue     |  29 ++++
 src/components/settings_modal/settings_modal.js    |  16 +-
 src/components/settings_modal/settings_modal.scss  |  28 +++-
 src/components/settings_modal/settings_modal.vue   |  45 +++++-
 .../settings_modal/settings_modal_content.js       |   8 -
 .../settings_modal/settings_modal_content.scss     |  30 +---
 .../settings_modal/settings_modal_content.vue      | 166 ++++++++-------------
 src/i18n/en.json                                   |   2 +
 11 files changed, 217 insertions(+), 205 deletions(-)
 create mode 100644 src/components/async_component_error/async_component_error.vue
 delete mode 100644 src/components/big_spinner/big_spinner.vue
 delete mode 100644 src/components/error_window/error_window.vue
 create mode 100644 src/components/panel_loading/panel_loading.vue

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
new file mode 100644
index 00000000..66b3fb53
--- /dev/null
+++ b/src/components/async_component_error/async_component_error.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="async-component-error">
+    <div>
+      <h4>
+        {{ $t('general.generic_error') }}
+      </h4>
+      <p>
+        {{ $t('general.error_retry') }}
+      </p>
+      <button
+        class="btn"
+        @click="retry"
+        >
+        {{ $t('general.retry') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    retry () {
+      this.$emit('resetAsyncComponent')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.async-component-error {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  .btn {
+    margin: .5em;
+    padding: .5em 2em;
+  }
+}
+</style>
diff --git a/src/components/big_spinner/big_spinner.vue b/src/components/big_spinner/big_spinner.vue
deleted file mode 100644
index 64f16e4d..00000000
--- a/src/components/big_spinner/big_spinner.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="big-spinner">
-    <i class="icon-spin4 animate-spin" />
-  </div>
-</template>
-
-<style lang="scss">
-.big-spinner {
-  font-size: 15em;
-  line-height: 0;
-  opacity: .6;
-  > i {
-    color: white;
-  }
-}
-</style>
diff --git a/src/components/error_window/error_window.vue b/src/components/error_window/error_window.vue
deleted file mode 100644
index ddb4ba00..00000000
--- a/src/components/error_window/error_window.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="error-window panel">
-    <div class="panel-heading">
-      <span class="title">
-        {{ $t('general.generic_error') }}
-      </span>
-    </div>
-    <div class="panel-body">
-      <p>
-        {{ $t('general.error_retry') }}
-      </p>
-      <button
-        class="btn"
-        @click="closeAllModals"
-      >
-        {{ $t('general.close') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    closeAllModals () {
-      // TODO make a global hook to close all modals?
-      this.$store.dispatch('closeSettingsModal')
-      this.$emit('resetAsyncComponent')
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.error-window {
-  .btn {
-    margin: .5em;
-    padding: .5em 2em;
-  }
-}
-</style>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
new file mode 100644
index 00000000..4efebb3c
--- /dev/null
+++ b/src/components/panel_loading/panel_loading.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="panel-loading">
+    <span class="loading-text">
+      <i class="icon-spin4 animate-spin" />
+      {{ $t('general.loading') }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+@import 'src/_variables.scss';
+
+.panel-loading {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 2em;
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  .loading-text i {
+    font-size: 3em;
+    line-height: 0;
+    vertical-align: middle;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 84d673a8..32ef38d6 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,6 +1,6 @@
 import Modal from 'src/components/modal/modal.vue'
-import BigSpinner from 'src/components/big_spinner/big_spinner.vue'
-import ErrorWindow from 'src/components/error_window/error_window.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 
 const SettingsModal = {
@@ -9,12 +9,20 @@ const SettingsModal = {
     SettingsModalContent: getResettableAsyncComponent(
       () => import('./settings_modal_content.vue'),
       {
-        loading: BigSpinner,
-        error: ErrorWindow,
+        loading: PanelLoading,
+        error: AsyncComponentError,
         delay: 0
       }
     )
   },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeSettingsModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekSettingsModal')
+    }
+  },
   computed: {
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index ece96364..833ff89a 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -3,7 +3,7 @@
   overflow: hidden;
 
   &.peek {
-    .modal-panel {
+    .settings-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
@@ -15,4 +15,30 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
+
+  .settings-modal-panel {
+    overflow: hidden;
+    transition: transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
+    width: 1000px;
+    max-width: 90vw;
+    height: 90vh;
+
+    @media all and (max-width: 800px) {
+      max-width: 100vw;
+      height: 100vh;
+    }
+
+    .panel-body {
+      height: 100%;
+      overflow-y: hidden;
+
+      .btn {
+        min-height: 28px;
+        min-width: 10em;
+        padding: 0 2em;
+      }
+    }
+  }
 }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b6ca5c6b..ded02f4a 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -5,10 +5,47 @@
     :class="{ peek: modalPeeked }"
     :no-background="modalPeeked"
   >
-    <SettingsModalContent
-      v-if="modalActivated"
-      class="modal-panel"
-    />
+    <div class="settings-modal-panel panel">
+      <div class="panel-heading">
+        <span class="title">
+          {{ $t('settings.settings') }}
+        </span>
+        <transition name="fade">
+          <template v-if="currentSaveStateNotice">
+            <div
+              v-if="currentSaveStateNotice.error"
+              class="alert error"
+              @click.prevent
+            >
+              {{ $t('settings.saving_err') }}
+            </div>
+
+            <div
+              v-if="!currentSaveStateNotice.error"
+              class="alert transparent"
+              @click.prevent
+            >
+              {{ $t('settings.saving_ok') }}
+            </div>
+          </template>
+        </transition>
+        <button
+          class="btn"
+          @click="peekModal"
+        >
+          {{ $t('general.peek') }}
+        </button>
+        <button
+          class="btn"
+          @click="closeModal"
+        >
+          {{ $t('general.close') }}
+        </button>
+      </div>
+      <div class="panel-body">
+        <SettingsModalContent v-if="modalActivated" />
+      </div>
+    </div>
   </Modal>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index b842ec7d..b27fbd28 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -31,14 +31,6 @@ const SettingsModalContent = {
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     }
-  },
-  methods: {
-    closeModal () {
-      this.$store.dispatch('closeSettingsModal')
-    },
-    peekModal () {
-      this.$store.dispatch('togglePeekSettingsModal')
-    }
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index 92e167a2..f80306c6 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -1,32 +1,6 @@
 @import 'src/_variables.scss';
-
-.settings-modal-panel {
-  overflow: hidden;
-  transition: transform;
-  transition-timing-function: ease-in-out;
-  transition-duration: 300ms;
-  width: 1000px;
-  max-width: 90vw;
-  height: 90vh;
-
-  @media all and (max-width: 800px) {
-    max-width: 100vw;
-    height: 100vh;
-  }
-
-  .settings_tab-switcher {
-    height: 100%;
-  }
-  .panel-body {
-    height: 100%;
-    overflow-y: hidden;
-
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-  }
+.settings_tab-switcher {
+  height: 100%;
 
   .full-height {
     height: 100%;
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 865a2adf..3e06148f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -1,112 +1,72 @@
 <template>
-  <div class="settings-modal-panel panel">
-    <div class="panel-heading">
-      <span class="title">
-        {{ $t('settings.settings') }}
-      </span>
-      <transition name="fade">
-        <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
-            {{ $t('settings.saving_err') }}
-          </div>
-
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
-            {{ $t('settings.saving_ok') }}
-          </div>
-        </template>
-      </transition>
-      <button
-        class="btn"
-        @click="peekModal"
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      >
+      <GeneralTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.profile_tab')"
+      icon="user"
+      >
+      <ProfileTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.security_tab')"
+      icon="lock"
+      >
+      <SecurityTab />
+    </div>
+    <div
+      :label="$t('settings.filtering')"
+      icon="filter"
       >
-        {{ $t('general.peek') }}
-      </button>
-      <button
-        class="btn"
-        @click="closeModal"
+      <FilteringTab />
+    </div>
+    <div
+      :label="$t('settings.theme')"
+      icon="brush"
+      >
+      <ThemeTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="chat"
+      >
+      <NotificationsTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.data_import_export_tab')"
+      icon="download"
+      >
+      <DataImportExportTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      class="full-height"
+      icon="eye-off"
       >
-        {{ $t('general.close') }}
-      </button>
+      <MutesAndBlocksTab />
     </div>
-    <div class="panel-body">
-      <tab-switcher
-        ref="tabSwitcher"
-        class="settings_tab-switcher"
-        :side-tab-bar="true"
-        :scrollable-tabs="true"
+    <div
+      :label="$t('settings.version.title')"
+      icon="info-circled"
       >
-        <div
-          :label="$t('settings.general')"
-          icon="wrench"
-        >
-          <GeneralTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.profile_tab')"
-          icon="user"
-        >
-          <ProfileTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.security_tab')"
-          icon="lock"
-        >
-          <SecurityTab />
-        </div>
-        <div
-          :label="$t('settings.filtering')"
-          icon="filter"
-        >
-          <FilteringTab />
-        </div>
-        <div
-          :label="$t('settings.theme')"
-          icon="brush"
-        >
-          <ThemeTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.notifications')"
-          icon="chat"
-        >
-          <NotificationsTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.data_import_export_tab')"
-          icon="download"
-        >
-          <DataImportExportTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.mutes_and_blocks')"
-          :fullHeight="true"
-          class="full-height"
-          icon="eye-off"
-        >
-          <MutesAndBlocksTab />
-        </div>
-        <div
-          :label="$t('settings.version.title')"
-          icon="info-circled"
-        >
-          <VersionTab />
-        </div>
-      </tab-switcher>
+      <VersionTab />
     </div>
-  </div>
+  </tab-switcher>
 </template>
 
 <script src="./settings_modal_content.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e3dc75d7..062af2c7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -59,8 +59,10 @@
     "apply": "Apply",
     "submit": "Submit",
     "more": "More",
+    "loading": "Loading…",
     "generic_error": "An error occured",
     "error_retry": "Please try again",
+    "retry": "Try again",
     "optional": "optional",
     "show_more": "Show more",
     "show_less": "Show less",
-- 
cgit v1.2.3-70-g09d2


From 3938ccb8e77afa33ebae2a00b74145399322a060 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 May 2020 00:02:36 +0300
Subject: lint

---
 .../async_component_error/async_component_error.vue  |  2 +-
 .../settings_modal/settings_modal_content.vue        | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index 66b3fb53..b68b98f9 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -10,7 +10,7 @@
       <button
         class="btn"
         @click="retry"
-        >
+      >
         {{ $t('general.retry') }}
       </button>
     </div>
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 3e06148f..8b83e48c 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,51 +4,51 @@
     class="settings_tab-switcher"
     :side-tab-bar="true"
     :scrollable-tabs="true"
-    >
+  >
     <div
       :label="$t('settings.general')"
       icon="wrench"
-      >
+    >
       <GeneralTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.profile_tab')"
       icon="user"
-      >
+    >
       <ProfileTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"
       icon="lock"
-      >
+    >
       <SecurityTab />
     </div>
     <div
       :label="$t('settings.filtering')"
       icon="filter"
-      >
+    >
       <FilteringTab />
     </div>
     <div
       :label="$t('settings.theme')"
       icon="brush"
-      >
+    >
       <ThemeTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
       icon="chat"
-      >
+    >
       <NotificationsTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.data_import_export_tab')"
       icon="download"
-      >
+    >
       <DataImportExportTab />
     </div>
     <div
@@ -57,13 +57,13 @@
       :fullHeight="true"
       class="full-height"
       icon="eye-off"
-      >
+    >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.version.title')"
       icon="info-circled"
-      >
+    >
       <VersionTab />
     </div>
   </tab-switcher>
-- 
cgit v1.2.3-70-g09d2


From 5ffcddd3b9b4b6600e4e51066b9410d7e852df11 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 May 2020 03:32:57 +0300
Subject: fixes. sorry for bad commit message i'm tired

---
 src/components/settings_modal/settings_modal.js    |  3 +
 .../settings_modal/settings_modal_content.js       |  3 -
 .../settings_modal/settings_modal_content.vue      |  2 +-
 .../settings_modal/tabs/theme_tab/theme_tab.scss   | 19 ++++--
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 26 ++++----
 src/components/tab_switcher/tab_switcher.js        | 19 +++++-
 src/components/tab_switcher/tab_switcher.scss      | 74 +++++++++++++++-------
 7 files changed, 96 insertions(+), 50 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

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;
+    }
+  }
 }
-- 
cgit v1.2.3-70-g09d2


From 9a20a9093287b1835d635398ea900e5dc2ca3484 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 May 2020 21:26:33 +0300
Subject: fixed the remaining issues

---
 src/components/settings_modal/settings_modal_content.scss |  4 ----
 src/components/settings_modal/settings_modal_content.vue  |  1 -
 src/components/tab_switcher/tab_switcher.js               | 15 ++++++---------
 src/components/tab_switcher/tab_switcher.scss             | 11 ++++++++++-
 4 files changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/components/settings_modal/settings_modal_content.vue')

diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index f80306c6..a3fef1cf 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -2,10 +2,6 @@
 .settings_tab-switcher {
   height: 100%;
 
-  .full-height {
-    height: 100%;
-  }
-
   .setting-item {
     border-bottom: 2px solid var(--fg, $fallback--fg);
     margin: 1em 1em 1.4em;
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 283b4ef8..2156844f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -55,7 +55,6 @@
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
-      class="full-height"
       icon="eye-off"
     >
       <MutesAndBlocksTab />
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 616f1a19..7891cb78 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -113,23 +113,20 @@ export default Vue.component('tab-switcher', {
       if (slot.data.attrs.fullHeight) {
         classes.push('full-height')
       }
-      const newSlot = (
+      const renderSlot = (!this.renderOnlyFocused || active)
+        ? slot
+        : ''
+
+      return (
         <div class={classes}>
           {
             this.sideTabBar
               ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
               : ''
           }
-          {slot}
+          {renderSlot}
         </div>
       )
-
-      if (this.renderOnlyFocused) {
-        return active
-          ? <div class={classes.join(' ')}>{newSlot}</div>
-          : <div class={classes.join(' ')}></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 db58f4cd..2a364731 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -125,8 +125,9 @@
         border-bottom-right-radius: 0;
         padding-left: 1em;
         padding-right: calc(1em + 200px);
-        margin-right: calc(1em - 200px);
+        margin-right: -200px;
         margin-left: 1em;
+
         @media all and (max-width: 800px) {
           padding-left: .25em;
           padding-right: calc(.25em + 200px);
@@ -147,6 +148,14 @@
     .hidden {
       display: none;
     }
+    .full-height {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      > *:not(.mobile-label) {
+        flex: 1;
+      }
+    }
 
     &.scrollable-tabs {
       overflow-y: auto;
-- 
cgit v1.2.3-70-g09d2

