Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits) fallback if shadows aren't defined Translated using Weblate (Chinese (Traditional)) Translated using Weblate (Ukrainian) Translated using Weblate (Italian) Translated using Weblate (Ukrainian) Translated using Weblate (Portuguese) Translated using Weblate (Italian) Translated using Weblate (Russian) Translated using Weblate (Portuguese) Translated using Weblate (Russian) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) Translated using Weblate (Portuguese) ...
2021-02-01 19:39:57 +02:00 · 2021-02-01 19:39:57 +02:00 · 8958f386be
commit 8958f386be
parent e695506c51 de66267a07
222 changed files with 11463 additions and 4132 deletions
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@ -30,13 +30,13 @@
          </template>
        </transition>
        <button
-          class="btn"
+          class="btn button-default"
          @click="peekModal"
        >
          {{ $t('general.peek') }}
        </button>
        <button
-          class="btn"
+          class="btn button-default"
          @click="closeModal"
        >
          {{ $t('general.close') }}
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'

+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
 const SettingsModalContent = {
  components: {
    TabSwitcher,
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@ -31,7 +31,7 @@
    }

    .unavailable,
-    .unavailable i {
+    .unavailable svg {
      color: var(--cRed, $fallback--cRed);
      color: $fallback--cRed;
    }
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@ -37,7 +37,7 @@
    </div>
    <div
      :label="$t('settings.theme')"
-      icon="brush"
+      icon="paint-brush"
      data-tab-name="theme"
    >
      <ThemeTab />
@ -45,7 +45,7 @@
    <div
      v-if="isLoggedIn"
      :label="$t('settings.notifications')"
-      icon="bell-ringing-o"
+      icon="bell"
      data-tab-name="notifications"
    >
      <NotificationsTab />
@ -62,14 +62,14 @@
      v-if="isLoggedIn"
      :label="$t('settings.mutes_and_blocks')"
      :fullHeight="true"
-      icon="eye-off"
+      icon="eye-slash"
      data-tab-name="mutesAndBlocks"
    >
      <MutesAndBlocksTab />
    </div>
    <div
      :label="$t('settings.version.title')"
-      icon="info-circled"
+      icon="info"
      data-tab-name="version"
    >
      <VersionTab />
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)

 const FilteringTab = {
  data () {
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@ -53,7 +53,10 @@
            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
          </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
        </label>
      </div>
      <div>
@ -72,6 +75,7 @@
        <p>{{ $t('settings.filtering_explanation') }}</p>
        <textarea
          id="muteWords"
+          class="resize-height"
          v-model="muteWordsString"
        />
      </div>
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -2,6 +2,16 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown,
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faGlobe
+)

 const GeneralTab = {
  data () {
@ -24,6 +34,10 @@ const GeneralTab = {
      return this.$store.state.instance.postFormats || []
    },
    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
    ...SharedComputedObject()
  }
 }
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -11,6 +11,11 @@
            {{ $t('settings.hide_isp') }}
          </BooleanSetting>
        </li>
+        <li v-if="instanceWallpaperUsed">
+          <Checkbox v-model="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </Checkbox>
+        </li>
      </ul>
    </div>
    <div class="setting-item">
@ -103,7 +108,10 @@
                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                </option>
              </select>
-              <i class="icon-down-open" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
            </label>
          </div>
        </li>
@ -127,7 +135,10 @@
                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                </option>
              </select>
-              <i class="icon-down-open" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
            </label>
          </div>
        </li>
@ -222,7 +233,7 @@
                v-if="!loopSilentAvailable"
                class="unavailable"
              >
-                <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+                <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
              </div>
            </li>
          </ul>
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@ -27,7 +27,7 @@
          <div class="bulk-actions">
            <ProgressButton
              v-if="selected.length > 0"
-              class="btn btn-default bulk-action-button"
+              class="btn button-default bulk-action-button"
              :click="() => blockUsers(selected)"
            >
              {{ $t('user_card.block') }}
@ -37,7 +37,7 @@
            </ProgressButton>
            <ProgressButton
              v-if="selected.length > 0"
-              class="btn btn-default"
+              class="btn button-default"
              :click="() => unblockUsers(selected)"
            >
              {{ $t('user_card.unblock') }}
@ -85,7 +85,7 @@
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => muteUsers(selected)"
                >
                  {{ $t('user_card.mute') }}
@ -95,7 +95,7 @@
                </ProgressButton>
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => unmuteUsers(selected)"
                >
                  {{ $t('user_card.unmute') }}
@ -141,7 +141,7 @@
              <div class="bulk-actions">
                <ProgressButton
                  v-if="selected.length > 0"
-                  class="btn btn-default"
+                  class="btn button-default"
                  :click="() => unmuteDomains(selected)"
                >
                  {{ $t('domain_mute_card.unmute') }}
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@ -21,7 +21,7 @@
      <p>{{ $t('settings.notification_mutes') }}</p>
      <p>{{ $t('settings.notification_blocks') }}</p>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="updateNotificationSettings"
      >
        {{ $t('general.submit') }}
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -8,6 +8,18 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faPlus,
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faPlus,
+  faCircleNotch
+)

 const ProfileTab = {
  data () {
@ -33,9 +45,7 @@ const ProfileTab = {
      banner: null,
      bannerPreview: null,
      background: null,
-      backgroundPreview: null,
-      bannerUploadError: null,
-      backgroundUploadError: null
+      backgroundPreview: null
    }
  },
  components: {
@ -56,8 +66,7 @@ const ProfileTab = {
          ...this.$store.state.instance.emoji,
          ...this.$store.state.instance.customEmoji
        ],
-        users: this.$store.state.users.users,
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
+        store: this.$store
      })
    },
    emojiSuggestor () {
@ -67,10 +76,7 @@ const ProfileTab = {
      ] })
    },
    userSuggestor () {
-      return suggestor({
-        users: this.$store.state.users.users,
-        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
-      })
+      return suggestor({ store: this.$store })
    },
    fieldsLimits () {
      return this.$store.state.instance.fieldsLimits
@ -154,18 +160,18 @@ const ProfileTab = {
      if (file.size > this.$store.state.instance[slot + 'limit']) {
        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = [
-          this.$t('upload.error.base'),
-          this.$t(
-            'upload.error.file_too_big',
-            {
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'upload.error.message',
+          messageArgs: [
+            this.$t('upload.error.file_too_big', {
              filesize: filesize.num,
              filesizeunit: filesize.unit,
              allowedsize: allowedsize.num,
              allowedsizeunit: allowedsize.unit
-            }
-          )
-        ].join(' ')
+            })
+          ],
+          level: 'error'
+        })
        return
      }
      // eslint-disable-next-line no-undef
@ -205,8 +211,9 @@ const ProfileTab = {
              that.$store.commit('setCurrentUser', user)
              resolve()
            })
-            .catch((err) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+            .catch((error) => {
+              that.displayUploadError(error)
+              reject(error)
            })
        }

@ -227,24 +234,27 @@ const ProfileTab = {
          this.$store.commit('setCurrentUser', user)
          this.bannerPreview = null
        })
-        .catch((err) => {
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
-        })
-        .then(() => { this.bannerUploading = false })
+        .catch(this.displayUploadError)
+        .finally(() => { this.bannerUploading = false })
    },
    submitBackground (background) {
      if (!this.backgroundPreview && background !== '') { return }

      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
-        if (!data.error) {
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
          this.$store.commit('addNewUsers', [data])
          this.$store.commit('setCurrentUser', data)
          this.backgroundPreview = null
-        } else {
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
-        }
-        this.backgroundUploading = false
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
+    },
+    displayUploadError (error) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'upload.error.message',
+        messageArgs: [error.message],
+        level: 'error'
      })
    }
  }
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@ -111,18 +111,17 @@
  .profile-fields {
    display: flex;

-    &>.emoji-input {
+    & > .emoji-input {
      flex: 1 1 auto;
-      margin: 0 .2em .5em;
+      margin: 0 0.2em 0.5em;
      min-width: 0;
    }

-    &>.icon-container {
+    .delete-field {
      width: 20px;
-
-      &>.icon-cancel {
-        vertical-align: sub;
-      }
+      align-self: center;
+      margin: 0 0.2em 0.5em;
+      padding: 0 0.5em;
    }
  }
 }
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -11,7 +11,7 @@
        <input
          id="username"
          v-model="newName"
-          classname="name-changer"
+          class="name-changer"
        >
      </EmojiInput>
      <p>{{ $t('settings.bio') }}</p>
@ -22,7 +22,7 @@
      >
        <textarea
          v-model="newBio"
-          classname="bio"
+          class="bio resize-height"
        />
      </EmojiInput>
      <p>
@ -124,24 +124,24 @@
              :placeholder="$t('settings.profile_fields.value')"
            >
          </EmojiInput>
-          <div
-            class="icon-container"
+          <button
+            class="delete-field button-unstyled -hover-highlight"
+            @click="deleteField(i)"
          >
-            <i
+            <FAIcon
              v-show="newFields.length > 1"
-              class="icon-cancel"
-              @click="deleteField(i)"
+              icon="times"
            />
-          </div>
+          </button>
        </div>
-        <a
+        <button
          v-if="newFields.length < maxFields"
-          class="add-field faint"
+          class="add-field faint button-unstyled -hover-highlight"
          @click="addField"
        >
-          <i class="icon-plus" />
+          <FAIcon icon="plus" />
          {{ $t("settings.profile_fields.add_field") }}
-        </a>
+        </button>
      </div>
      <p>
        <Checkbox v-model="bot">
@ -150,7 +150,7 @@
      </p>
      <button
        :disabled="newName && newName.length === 0"
-        class="btn btn-default"
+        class="btn button-default"
        @click="updateProfile"
      >
        {{ $t('general.submit') }}
@ -166,10 +166,11 @@
          :src="user.profile_image_url_original"
          class="current-avatar"
        >
-        <i
+        <FAIcon
          v-if="!isDefaultAvatar && pickAvatarBtnVisible"
          :title="$t('settings.reset_avatar')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
          type="button"
          @click="resetAvatar"
        />
@ -178,7 +179,7 @@
      <button
        v-show="pickAvatarBtnVisible"
        id="pick-avatar"
-        class="btn"
+        class="button-default btn"
        type="button"
      >
        {{ $t('settings.upload_a_photo') }}
@ -194,10 +195,11 @@
      <h2>{{ $t('settings.profile_banner') }}</h2>
      <div class="banner-background-preview">
        <img :src="user.cover_photo">
-        <i
+        <FAIcon
          v-if="!isDefaultBanner"
          :title="$t('settings.reset_profile_banner')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
          type="button"
          @click="resetBanner"
        />
@ -214,36 +216,29 @@
          @change="uploadFile('banner', $event)"
        >
      </div>
-      <i
+      <FAIcon
        v-if="bannerUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
      />
      <button
        v-else-if="bannerPreview"
-        class="btn btn-default"
+        class="btn button-default"
        @click="submitBanner(banner)"
      >
        {{ $t('general.submit') }}
      </button>
-      <div
-        v-if="bannerUploadError"
-        class="alert error"
-      >
-        Error: {{ bannerUploadError }}
-        <i
-          class="button-icon icon-cancel"
-          @click="clearUploadError('banner')"
-        />
-      </div>
    </div>
    <div class="setting-item">
      <h2>{{ $t('settings.profile_background') }}</h2>
      <div class="banner-background-preview">
        <img :src="user.background_image">
-        <i
+        <FAIcon
          v-if="!isDefaultBackground"
          :title="$t('settings.reset_profile_background')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
          type="button"
          @click="resetBackground"
        />
@ -260,27 +255,19 @@
          @change="uploadFile('background', $event)"
        >
      </div>
-      <i
+      <FAIcon
        v-if="backgroundUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
      />
      <button
        v-else-if="backgroundPreview"
-        class="btn btn-default"
+        class="btn button-default"
        @click="submitBackground(background)"
      >
        {{ $t('general.submit') }}
      </button>
-      <div
-        v-if="backgroundUploadError"
-        class="alert error"
-      >
-        Error: {{ backgroundUploadError }}
-        <i
-          class="button-icon icon-cancel"
-          @click="clearUploadError('background')"
-        />
-      </div>
    </div>
  </div>
 </template>
--- a/src/components/settings_modal/tabs/security_tab/confirm.vue
+++ b/src/components/settings_modal/tabs/security_tab/confirm.vue
@ -2,14 +2,14 @@
  <div>
    <slot />
    <button
-      class="btn btn-default"
+      class="btn button-default"
      :disabled="disabled"
      @click="confirm"
    >
      {{ $t('general.confirm') }}
    </button>
    <button
-      class="btn btn-default"
+      class="btn button-default"
      :disabled="disabled"
      @click="cancel"
    >
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@ -29,7 +29,7 @@
          />
          <button
            v-if="!confirmNewBackupCodes"
-            class="btn btn-default"
+            class="btn button-default"
            @click="getBackupCodes"
          >
            {{ $t('settings.mfa.generate_new_recovery_codes') }}
@ -61,7 +61,7 @@

        <button
          v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
          @click="cancelSetup"
        >
          {{ $t('general.cancel') }}
@ -69,7 +69,7 @@

        <button
          v-if="canSetupOTP"
-          class="btn btn-default"
+          class="btn button-default"
          @click="setupOTP"
        >
          {{ $t('settings.mfa.setup_otp') }}
@ -108,13 +108,13 @@
                >
                <div class="confirm-otp-actions">
                  <button
-                    class="btn btn-default"
+                    class="btn button-default"
                    @click="doConfirmOTP"
                  >
                    {{ $t('settings.mfa.confirm_and_enable') }}
                  </button>
                  <button
-                    class="btn btn-default"
+                    class="btn button-default"
                    @click="cancelSetup"
                  >
                    {{ $t('general.cancel') }}
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@ -4,7 +4,7 @@
      <strong>{{ $t('settings.mfa.otp') }}</strong>
      <button
        v-if="!isActivated"
-        class="btn btn-default"
+        class="btn button-default"
        @click="doActivate"
      >
        {{ $t('general.enable') }}
@ -12,7 +12,7 @@

      <button
        v-if="isActivated"
-        class="btn btn-default"
+        class="btn button-default"
        :disabled="deactivate"
        @click="doDeactivate"
      >
--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@ -1,6 +1,7 @@
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Mfa from './mfa.vue'
+import localeService from 'src/services/locale/locale.service.js'

 const SecurityTab = {
  data () {
@ -37,7 +38,7 @@ const SecurityTab = {
        return {
          id: oauthToken.id,
          appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
        }
      })
    }
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@ -19,7 +19,7 @@
        >
      </div>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="changeEmail"
      >
        {{ $t('general.submit') }}
@ -57,7 +57,7 @@
        >
      </div>
      <button
-        class="btn btn-default"
+        class="btn button-default"
        @click="changePassword"
      >
        {{ $t('general.submit') }}
@ -92,7 +92,7 @@
            <td>{{ oauthToken.validUntil }}</td>
            <td class="actions">
              <button
-                class="btn btn-default"
+                class="btn button-default"
                @click="revokeToken(oauthToken.id)"
              >
                {{ $t('settings.revoke_token') }}
@ -116,7 +116,7 @@
          type="password"
        >
        <button
-          class="btn btn-default"
+          class="btn button-default"
          @click="deleteAccount"
        >
          {{ $t('settings.delete_account') }}
@ -130,7 +130,7 @@
      </p>
      <button
        v-if="!deletingAccount"
-        class="btn btn-default"
+        class="btn button-default"
        @click="confirmDelete"
      >
        {{ $t('general.submit') }}
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -15,7 +15,7 @@
        <span class="alert error">
          {{ $t('settings.style.preview.error') }}
        </span>
-        <button class="btn">
+        <button class="btn button-default">
          {{ $t('settings.style.preview.button') }}
        </button>
      </div>
@ -39,21 +39,29 @@
            </i18n>

            <div class="icons">
-              <i
+              <FAIcon
+                fixed-width
                style="color: var(--cBlue)"
-                class="button-icon icon-reply"
+                class="fa-scale-110 fa-old-padding"
+                icon="reply"
              />
-              <i
+              <FAIcon
+                fixed-width
                style="color: var(--cGreen)"
-                class="button-icon icon-retweet"
+                class="fa-scale-110 fa-old-padding"
+                icon="retweet"
              />
-              <i
+              <FAIcon
+                fixed-width
                style="color: var(--cOrange)"
-                class="button-icon icon-star"
+                class="fa-scale-110 fa-old-padding"
+                icon="star"
              />
-              <i
+              <FAIcon
+                fixed-width
                style="color: var(--cRed)"
-                class="button-icon icon-cancel"
+                class="fa-scale-110 fa-old-padding"
+                icon="times"
              />
            </div>
          </div>
@ -94,7 +102,7 @@
            >
            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
          </span>
-          <button class="btn">
+          <button class="btn button-default">
            {{ $t('settings.style.preview.button') }}
          </button>
        </div>
@ -103,6 +111,25 @@
  </div>
 </template>

+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
+)
+
+export default {}
+</script>
+
 <style lang="scss">
 .preview-container {
  position: relative;
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'

 import Preview from './preview.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)

 // List of color values used in v1
 const v1OnlyNames = [
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@ -165,7 +165,8 @@
    border-color: var(--border, $fallback--border);
    margin: 1em 0;
    padding: 1em;
-    background: var(--body-background-image);
+    background-color: var(--wallpaper);
+    background-image: var(--body-background-image);
    background-size: cover;
    background-position: 50% 50%;

--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -12,13 +12,13 @@
          <div class="buttons">
            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceLoad"
              >
                {{ $t('settings.style.switcher.use_source') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceSnapshot"
              >
                {{ $t('settings.style.switcher.use_snapshot') }}
@ -26,7 +26,7 @@
            </template>
            <template v-else-if="themeWarning.noActionsPossible">
              <button
-                class="btn"
+                class="btn button-default"
                @click="dismissWarning"
              >
                {{ $t('general.dismiss') }}
@ -34,13 +34,13 @@
            </template>
            <template v-else>
              <button
-                class="btn"
+                class="btn button-default"
                @click="forceLoad"
              >
                {{ $t('settings.style.switcher.load_theme') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="dismissWarning"
              >
                {{ $t('settings.style.switcher.keep_as_is') }}
@ -80,7 +80,10 @@
                    {{ style[0] || style.name }}
                  </option>
                </select>
-                <i class="icon-down-open" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
              </label>
            </div>
          </template>
@ -128,13 +131,13 @@
            <p>{{ $t('settings.theme_help') }}</p>
            <div class="tab-header-buttons">
              <button
-                class="btn"
+                class="btn button-default"
                @click="clearOpacity"
              >
                {{ $t('settings.style.switcher.clear_opacity') }}
              </button>
              <button
-                class="btn"
+                class="btn button-default"
                @click="clearV1"
              >
                {{ $t('settings.style.switcher.clear_all') }}
@ -235,13 +238,13 @@
          <div class="tab-header">
            <p>{{ $t('settings.theme_help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearOpacity"
            >
              {{ $t('settings.style.switcher.clear_opacity') }}
            </button>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearV1"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -613,6 +616,15 @@
              :disabled="underlayOpacityLocal === 'transparent'"
            />
          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
+            <ColorInput
+              v-model="wallpaperColorLocal"
+              name="wallpaper"
+              :label="$t('settings.style.advanced_colors.wallpaper')"
+              :fallback="previewTheme.colors.wallpaper"
+            />
+          </div>
          <div class="color-item">
            <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
            <ColorInput
@ -803,7 +815,7 @@
          <div class="tab-header">
            <p>{{ $t('settings.radii_help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearRoundness"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -907,7 +919,10 @@
                    {{ $t('settings.style.shadows.components.' + shadow) }}
                  </option>
                </select>
-                <i class="icon-down-open" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
              </label>
            </div>
            <div class="override">
@ -930,7 +945,7 @@
              />
            </div>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearShadows"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -974,7 +989,7 @@
          <div class="tab-header">
            <p>{{ $t('settings.style.fonts.help') }}</p>
            <button
-              class="btn"
+              class="btn button-default"
              @click="clearFonts"
            >
              {{ $t('settings.style.switcher.clear_all') }}
@ -1011,14 +1026,14 @@

    <div class="apply-container">
      <button
-        class="btn submit"
+        class="btn button-default submit"
        :disabled="!themeValid"
        @click="setCustomTheme"
      >
        {{ $t('general.apply') }}
      </button>
      <button
-        class="btn"
+        class="btn button-default"
        @click="clearAll"
      >
        {{ $t('settings.style.switcher.reset') }}