2 files changed, 53 insertions, 30 deletions
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 8a42ee7b..e9ccdefc 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -29,10 +29,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: {selected: this.currentScope === 'public'},
-        unlisted: {selected: this.currentScope === 'unlisted'},
-        private: {selected: this.currentScope === 'private'},
-        direct: {selected: this.currentScope === 'direct'}
+        public: { selected: this.currentScope === 'public' },
+        unlisted: { selected: this.currentScope === 'unlisted' },
+        private: { selected: this.currentScope === 'private' },
+        direct: { selected: this.currentScope === 'direct' }
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 33ea488f..291236f2 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,30 +1,53 @@
 <template>
-<div v-if="!showNothing">
-  <i class="icon-mail-alt"
-     :class="css.direct"
-     :title="$t('post_status.scope.direct')"
-     v-if="showDirect"
-     @click="changeVis('direct')">
-  </i>
-  <i class="icon-lock"
-     :class="css.private"
-     :title="$t('post_status.scope.private')"
-     v-if="showPrivate"
-     v-on:click="changeVis('private')">
-  </i>
-  <i class="icon-lock-open-alt"
-     :class="css.unlisted"
-     :title="$t('post_status.scope.unlisted')"
-     v-if="showUnlisted"
-     @click="changeVis('unlisted')">
-  </i>
-  <i class="icon-globe"
-     :class="css.public"
-     :title="$t('post_status.scope.public')"
-     v-if="showPublic"
-     @click="changeVis('public')">
-  </i>
-</div>
+  <div
+    v-if="!showNothing"
+    class="scope-selector"
+  >
+    <i
+      v-if="showDirect"
+      class="icon-mail-alt"
+      :class="css.direct"
+      :title="$t('post_status.scope.direct')"
+      @click="changeVis('direct')"
+    />
+    <i
+      v-if="showPrivate"
+      class="icon-lock"
+      :class="css.private"
+      :title="$t('post_status.scope.private')"
+      @click="changeVis('private')"
+    />
+    <i
+      v-if="showUnlisted"
+      class="icon-lock-open-alt"
+      :class="css.unlisted"
+      :title="$t('post_status.scope.unlisted')"
+      @click="changeVis('unlisted')"
+    />
+    <i
+      v-if="showPublic"
+      class="icon-globe"
+      :class="css.public"
+      :title="$t('post_status.scope.public')"
+      @click="changeVis('public')"
+    />
+  </div>
 </template>
 
 <script src="./scope_selector.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.scope-selector {
+  i {
+    font-size: 1.2em;
+    cursor: pointer;
+
+    &.selected {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+</style>