feat(Themes): added custom flair color selector (#802)

* feat(Friends): combine friends routes

* feat(themeColor): added flair color picker to themes

* feat(Flair): add flair color support to select inputs

assets/styles/themes/moonless_night.less

@@ -1,7 +1,10 @@
+:root {
+  --flair-color: #B53471;
+}
+
 .moonless_night {
   //------------- Colors -------------
   @white: #fff;
-  @flair: #B53471;
 
   @background: #15161d;
   @midground: #000;
@@ -11,7 +14,7 @@
 
   //------------- Ui Colors -------------
   @border-color: @gray;
-  @flair-glow: 0 5px 14px -5px @flair;
+  @flair-glow: 0 5px 14px -5px var(--flair-color);
 
   //------------- Ui Flair -------------
   @border: 1px solid @border-color;
@@ -20,7 +23,7 @@
   .background { background: @midground !important; }
   .background-alt { background: @graydient !important; }
 
-  .flair { background: @flair !important; }
+  .flair { background: var(--flair-color) !important; }
   .flair-glow { box-shadow: @flair-glow !important; }
 
   .flair-glowing {
@@ -35,7 +38,7 @@
   }
 
   .menu-list li a.is-active {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow !important;
   }
 
@@ -44,7 +47,7 @@
       color: @white !important;
       .selected {
         color: @white !important;
-        background: @flair !important;
+        background: var(--flair-color) !important;
         box-shadow: @flair-glow !important;
       }
     }
@@ -53,32 +56,32 @@
 
   //------------- Navigation -------------
 
-  a {
-    color: @flair !important;
+  .a_link {
+    color: var(--flair-color) !important;
 
     &:hover {
-      color: @flair !important;
+      color: var(--flair-color) !important;
     }
   }
 
   .alpha-divider {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   li .is-active,
   li.active {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow !important;
   }
 
   .breadcrumb a {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   .toggle-sidebar,
   .toggle--sidebar,
   .menu-toggle {
-    color: @flair !important;
+    color: var(--flair-color) !important;
   }
 
   .sidebar-inner, .controls {
@@ -92,29 +95,29 @@
   }
 
   .multiselect__tags {
-    background: @flair !important;
+    background: var(--flair-color) !important;
     box-shadow: @flair-glow;
-    border: @flair;
+    border: var(--flair-color);
   }
 
   .chip-item {
-    background: @flair !important;
-    border: @flair;
+    background: var(--flair-color) !important;
+    border: var(--flair-color);
   }
 
   .switch-button {
-    border-color: @flair !important;
+    border-color: var(--flair-color) !important;
     .sw-button {
-      border-color: @flair !important;
-      background: @flair !important;
+      border-color: var(--flair-color) !important;
+      background: var(--flair-color) !important;
     }
     &.enabled{
       .sw-button {
         border-color: @white !important;
         background: @white !important;
       }
-      background: @flair !important;
-      border-color: @flair !important;
+      background: var(--flair-color) !important;
+      border-color: var(--flair-color) !important;
     }
   }
   #sidebar {
@@ -132,7 +135,7 @@
         }
 
         &.is-primary {
-          background: @flair !important;
+          background: var(--flair-color) !important;
           box-shadow: @flair-glow !important;
         }
         .tag-inverted {
@@ -158,9 +161,9 @@
       }
       &.active {
         border-radius: @half;
-        color: @flair !important;
+        color: var(--flair-color) !important;
         svg {
-          color: @flair !important;
+          color: var(--flair-color) !important;
         }
       }
       &:extend(.inline-flex-centered);
@@ -179,7 +182,7 @@
 
   .file {
     .file-icon {
-      color: @flair !important;
+      color: var(--flair-color) !important;
     }
   }
 
@@ -193,38 +196,38 @@
   #chatbar {
     .chatbar-controls {
       div[data-tooltip="Send"] {
-        color: @flair !important;
+        color: var(--flair-color) !important;
       }
     }
   }
 
   // Buttons
   .button {
     &.is-primary {
-      background: @flair !important;
+      background: var(--flair-color) !important;
       box-shadow: @flair-glow !important;
       color: @white !important;
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     &.is-dark {
       background: @gray;
     }
     &.active {
-      background: @flair !important;
+      background: var(--flair-color) !important;
       box-shadow: @flair-glow !important;
       color: @white !important;
     }
   }
 
   // Labels
   .label {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   // Media 
   #mediastream {
     .user, .tag {
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     .tag {
       box-shadow: @flair-glow !important;
@@ -233,24 +236,24 @@
 
   // Progress
   .progress {
-    border: @flair;
+    border: var(--flair-color);
 
     &.is-primary {
-      border-color: @flair !important;
+      border-color: var(--flair-color) !important;
       &::-webkit-progress-value {
-        background: @flair !important;
+        background: var(--flair-color) !important;
       }
       &::-moz-progress-bar {
-        background: @flair !important;
+        background: var(--flair-color) !important;
       }
       &::-ms-fill {
-        background: @flair !important;
+        background: var(--flair-color) !important;
         border: none;
       }
     }
 
 
-    border: 1px solid @flair;
+    border: 1px solid var(--flair-color);
     background: transparent;
     margin-bottom: @light-spacing;
   }
@@ -261,9 +264,9 @@
   .volume-slider .vue-slider-process,
   .vue-slider-dot-tooltip-inner {
     &::after {
-      border-left-color: @flair !important;
+      border-left-color: var(--flair-color) !important;
     }
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   // Scrollbars
@@ -275,19 +278,19 @@
   .ps__rail-y:hover > .ps__thumb-y,
   .ps__rail-y:focus > .ps__thumb-y,
   .ps__rail-y.ps--clicking .ps__thumb-y {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 
   .auto-scroll {
     /* Scroll Handle */
     &::-webkit-scrollbar-thumb {
-      background: @flair !important;
+      background: var(--flair-color) !important;
     }
     /* Custom Scroll for Firefox */
-    scrollbar-color: @flair transparent !important;
+    scrollbar-color: var(--flair-color) transparent !important;
   }
 
   .new-message-alert {
-    background: @flair !important;
+    background: var(--flair-color) !important;
   }
 }

components/interactables/Select/Select.html

@@ -3,17 +3,22 @@
   v-click-outside="() => open = false"
 >
   <div :class="{'custom-select': true, open, up, down: !up}">
-    <div class="selected" @click="toggleOpen()">
-      {{ getSelectLabel() }}
-    </div>
+    <div class="selected" @click="toggleOpen()">{{ getSelectLabel() }}</div>
     <div class="items">
       <div
         v-for="(option, i) of options"
         :key="i"
         :disabled="option.disabled"
         @click="change(option)"
       >
-        {{ option.text }}
+        <div
+          class="color"
+          v-if="colorSupport"
+          :style="{ background: option.value }"
+        >
+          {{ option.text }}
+        </div>
+        <span v-else>{{ option.text }}</span>
       </div>
     </div>
   </div>

components/interactables/Select/Select.less

@@ -42,6 +42,7 @@
     &:extend(.round-corners);
     &:extend(.bordered);
     &:extend(.blur);
+    min-width: 8rem;
     position: absolute;
     display: none;
     color: #fff;

components/interactables/Select/Select.vue

@@ -12,6 +12,10 @@ export default Vue.extend({
     event: 'change',
   },
   props: {
+    colorSupport: {
+      type: Boolean,
+      default: false,
+    },
     placeholder: {
       type: String,
       default: '',

components/ui/Chat/Image/Image.html

@@ -7,7 +7,7 @@
         :class="`is-image-in-mask`"
         :src="image.url"
         v-click-outside="() => $data.showfull = !$data.showfull" />
-      <a :href="image.url" target="_blank">
+      <a class="a_link" :href="image.url" target="_blank">
         {{ $t('files.view_original') }}
       </a>
     </div>

components/views/settings/pages/personalize/Personalize.html

@@ -19,6 +19,20 @@
     </div>
   </div>
 
+  <div class="columns is-desktop">
+    <div class="column">
+      <TypographyLabel :text="$t('pages.settings.personalize.flair')" />
+      <br />
+      <InteractablesSelect 
+        v-model="flair"
+        size="small"
+        :options="flairs"
+        colorSupport
+        :selected="ui.theme.flair.value"
+      />
+    </div>
+  </div>
+
   <div class="columns is-desktop">
     <div class="column">
       <TypographyLabel :text="$t('pages.settings.personalize.language')" />

components/views/settings/pages/personalize/index.vue

@@ -3,13 +3,14 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { Themes } from '~/store/ui/types.ts'
+import { Themes, Flairs } from '~/store/ui/types.ts'
 export default Vue.extend({
   name: 'PersonalizeSettings',
   layout: 'settings',
   data() {
     return {
       themes: Themes,
+      flairs: Flairs,
     }
   },
   computed: {
@@ -18,19 +19,26 @@ export default Vue.extend({
     // the state accordingly with the mutation
     theme: {
       set(state) {
-        console.log('themes', Themes)
         const activeTheme = Themes.find((th) => {
-          console.log('th', th)
           return th.value === state
         })
-        console.log('activeTheme', activeTheme)
-        console.log('state', state)
         this.$store.commit('ui/updateTheme', activeTheme)
       },
       get() {
         return this.ui.theme.base.value
       },
     },
+    flair: {
+      set(state) {
+        const activeFlair = Flairs.find((fl) => {
+          return fl.value === state
+        })
+        this.$store.commit('ui/updateFlair', activeFlair)
+      },
+      get() {
+        return this.ui.theme.flair.value
+      },
+    },
   },
 })
 </script>