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)
  ...

2 files changed, 56 insertions, 17 deletions

diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index e9ccdefc..74bf7284 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -1,3 +1,18 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEnvelope,
+  faLock,
+  faLockOpen,
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEnvelope,
+  faGlobe,
+  faLock,
+  faLockOpen
+)
+
 const ScopeSelector = {
   props: [
     'showAll',
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 291236f2..66ac612e 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,36 +1,56 @@
 <template>
   <div
     v-if="!showNothing"
-    class="scope-selector"
+    class="ScopeSelector"
   >
-    <i
+    <button
       v-if="showDirect"
-      class="icon-mail-alt"
+      class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-    />
-    <i
+    >
+      <FAIcon
+        icon="envelope"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </button>
+    <button
       v-if="showPrivate"
-      class="icon-lock"
+      class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-    />
-    <i
+    >
+      <FAIcon
+        icon="lock"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </button>
+    <button
       v-if="showUnlisted"
-      class="icon-lock-open-alt"
+      class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-    />
-    <i
+    >
+      <FAIcon
+        icon="lock-open"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </button>
+    <button
       v-if="showPublic"
-      class="icon-globe"
+      class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-    />
+    >
+      <FAIcon
+        icon="globe"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </button>
   </div>
 </template>
 
@@ -39,12 +59,16 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.scope-selector {
-  i {
-    font-size: 1.2em;
+.ScopeSelector {
+
+  .scope {
+    display: inline-block;
     cursor: pointer;
+    min-width: 1.3em;
+    min-height: 1.3em;
+    text-align: center;
 
-    &.selected {
+    &.selected svg {
       color: $fallback--lightText;
       color: var(--lightText, $fallback--lightText);
     }