fix conflict, keep the touchable button big

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..a22a4fda 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
+    <span
       v-if="showDirect"
-      class="icon-mail-alt"
+      class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-    />
-    <i
+    >
+      <FAIcon
+        icon="envelope"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </span>
+    <span
       v-if="showPrivate"
-      class="icon-lock"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-    />
-    <i
+    >
+      <FAIcon
+        icon="lock"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </span>
+    <span
       v-if="showUnlisted"
-      class="icon-lock-open-alt"
+      class="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"
+      />
+    </span>
+    <span
       v-if="showPublic"
-      class="icon-globe"
+      class="scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-    />
+    >
+      <FAIcon
+        icon="globe"
+        class="fa-scale-110 fa-old-padding"
+      />
+    </span>
   </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);
     }