From 38142182774ea772aacc88f26586512d6279267f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 19:38:49 +0300
Subject: Some initial work on replacing icons with FA5

---
 src/components/scope_selector/scope_selector.vue | 48 +++++++++++++++---------
 1 file changed, 30 insertions(+), 18 deletions(-)

(limited to 'src/components/scope_selector/scope_selector.vue')

diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 291236f2..5b9abd64 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,36 +1,44 @@
 <template>
   <div
     v-if="!showNothing"
-    class="scope-selector"
-  >
-    <i
+    class="ScopeSelector"
+    >
+    <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="button-icon" size="lg" />
+    </span>
+    <span
+      class="scope"
       v-if="showPrivate"
-      class="icon-lock"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-    />
-    <i
+      >
+      <FAIcon icon="lock" class="button-icon" size="lg" />
+    </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="button-icon" size="lg" />
+    </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-europe" class="button-icon" size="lg" />
+    </span>
   </div>
 </template>
 
@@ -39,12 +47,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);
     }
-- 
cgit v1.2.3-70-g09d2