Merge branch 'better-selects' into 'develop'

Better <select> components See merge request pleroma/pleroma-fe!1373
2021-05-31 11:08:56 +00:00 · 2021-05-31 11:08:56 +00:00 · 4e96af0442
parent dc611dffdb c039656460
commit 4e96af0442
25 changed files with 366 additions and 386 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -187,7 +187,7 @@ a {
  }
 }

-input, textarea, .select, .input {
+input, textarea, .input {

  &.unstyled {
    border-radius: 0;
@ -217,47 +217,11 @@ input, textarea, .select, .input {
  hyphens: none;
  padding: 8px .5em;

-  &.select {
-    padding: 0;
-  }
-
-  &:disabled, &[disabled=disabled] {
+  &:disabled, &[disabled=disabled], &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

-  .select-down-icon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
-    line-height: 28px;
-    z-index: 0;
-    pointer-events: none;
-  }
-
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
-    margin: 0;
-    padding: 0 2em 0 .2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
-    width: 100%;
-    z-index: 1;
-    height: 28px;
-    line-height: 16px;
-  }
-
  &[type=range] {
    background: none;
    border: none;
@ -830,13 +794,6 @@ nav {
  }
 }

-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
  list-style-type: none;
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@ -1,14 +1,10 @@
 import { set } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import Select from '../select/select.vue'

 export default {
+  components: {
+    Select
+  },
  props: [
    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
  ],
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@ -22,30 +22,20 @@
      class="opt-l"
      :for="name + '-o'"
    />
-    <label
-      :for="name + '-font-switcher'"
-      class="select"
+    <Select
+      :id="name + '-font-switcher'"
+      v-model="preset"
      :disabled="!present"
+      class="font-switcher"
    >
-      <select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
+      <option
+        v-for="option in availableOptions"
+        :key="option"
+        :value="option"
      >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </Select>
    <input
      v-if="isCustom"
      :id="name"
@ -65,7 +55,8 @@
    min-width: 10em;
  }
  &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -3,27 +3,18 @@
    <label for="interface-language-switcher">
      {{ $t('settings.interfaceLanguage') }}
    </label>
-    <label
-      for="interface-language-switcher"
-      class="select"
+    <Select
+      id="interface-language-switcher"
+      v-model="language"
    >
-      <select
-        id="interface-language-switcher"
-        v-model="language"
+      <option
+        v-for="lang in languages"
+        :key="lang.code"
+        :value="lang.code"
      >
-        <option
-          v-for="lang in languages"
-          :key="lang.code"
-          :value="lang.code"
-        >
-          {{ lang.name }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
+        {{ lang.name }}
+      </option>
+    </Select>
  </div>
 </template>

@ -32,16 +23,12 @@ import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
+import Select from '../select/select.vue'

 export default {
+  components: {
+    Select
+  },
  computed: {
    languages () {
      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
  faTimes,
-  faChevronDown,
  faPlus
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
  faTimes,
-  faChevronDown,
  faPlus
 )

 export default {
+  components: {
+    Select
+  },
  name: 'PollForm',
  props: ['visible'],
  data: () => ({
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@ -46,23 +46,19 @@
        class="poll-type"
        :title="$t('polls.type')"
      >
-        <label
-          for="poll-type-selector"
-          class="select"
+        <Select
+          v-model="pollType"
+          class="poll-type-select"
+          unstyled="true"
+          @change="updatePollToParent"
        >
-          <select
-            v-model="pollType"
-            class="select"
-            @change="updatePollToParent"
-          >
-            <option value="single">{{ $t('polls.single_choice') }}</option>
-            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+          <option value="single">
+            {{ $t('polls.single_choice') }}
+          </option>
+          <option value="multiple">
+            {{ $t('polls.multiple_choices') }}
+          </option>
+        </Select>
      </div>
      <div
        class="poll-expiry"
@ -76,24 +72,20 @@
          :max="maxExpirationInCurrentUnit"
          @change="expiryAmountChange"
        >
-        <label class="expiry-unit select">
-          <select
-            v-model="expiryUnit"
-            @change="expiryAmountChange"
+        <Select
+          v-model="expiryUnit"
+          unstyled="true"
+          class="expiry-unit"
+          @change="expiryAmountChange"
+        >
+          <option
+            v-for="unit in expiryUnits"
+            :key="unit"
+            :value="unit"
          >
-            <option
-              v-for="unit in expiryUnits"
-              :key="unit"
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
+            {{ $t(`time.${unit}_short`, ['']) }}
+          </option>
+        </Select>
      </div>
    </div>
  </div>
@ -147,10 +139,8 @@
  .poll-type {
    margin-right: 0.75em;
    flex: 1 1 60%;
-    .select {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
+
+    .poll-type-select {
      padding-right: 0.75em;
    }
  }
@ -162,12 +152,6 @@
      width: 3em;
      text-align: right;
    }
-
-    .expiry-unit {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
  }
 }
 </style>
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -11,10 +11,10 @@ import { reject, map, uniqBy, debounce } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
+import Select from '../select/select.vue'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
  faSmileBeam,
  faPollH,
  faUpload,
@ -24,7 +24,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown,
  faSmileBeam,
  faPollH,
  faUpload,
@ -84,6 +83,7 @@ const PostStatusForm = {
    PollForm,
    ScopeSelector,
    Checkbox,
+    Select,
    Attachment,
    StatusContent
  },
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -189,28 +189,19 @@
            v-if="postFormats.length > 1"
            class="text-format"
          >
-            <label
-              for="post-content-type"
-              class="select"
+            <Select
+              id="post-content-type"
+              v-model="newStatus.contentType"
+              class="form-control"
            >
-              <select
-                id="post-content-type"
-                v-model="newStatus.contentType"
-                class="form-control"
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+              </option>
+            </Select>
          </div>
          <div
            v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@ -0,0 +1,21 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
+
+export default {
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: [
+    'value',
+    'disabled',
+    'unstyled',
+    'kind'
+  ]
+}
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@ -0,0 +1,62 @@
+
+<template>
+  <label
+    class="Select input"
+    :class="{ disabled, unstyled }"
+  >
+    <select
+      :disabled="disabled"
+      :value="value"
+      @change="$emit('change', $event.target.value)"
+    >
+      <slot />
+    </select>
+    <FAIcon
+      class="select-down-icon"
+      icon="chevron-down"
+    />
+  </label>
+</template>
+
+<script src="./select.js"> </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.Select {
+  padding: 0;
+
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent;
+    border: none;
+    color: $fallback--text;
+    color: var(--inputText, --text, $fallback--text);
+    margin: 0;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
+    width: 100%;
+    z-index: 1;
+    height: 28px;
+    line-height: 16px;
+  }
+
+  .select-down-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 5px;
+    height: 100%;
+    color: $fallback--text;
+    color: var(--inputText, $fallback--text);
+    line-height: 28px;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+}
+</style>
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@ -0,0 +1,30 @@
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Checkbox,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@ -18,40 +18,4 @@
  </label>
 </template>

-<script>
-import { get, set } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIndicator from './modified_indicator.vue'
-export default {
-  components: {
-    Checkbox,
-    ModifiedIndicator
-  },
-  props: [
-    'path',
-    'disabled'
-  ],
-  computed: {
-    pathDefault () {
-      const [firstSegment, ...rest] = this.path.split('.')
-      return [firstSegment + 'DefaultValue', ...rest].join('.')
-    },
-    state () {
-      return get(this.$parent, this.path)
-    },
-    isChanged () {
-      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
-    }
-  },
-  methods: {
-    update (e) {
-      set(this.$parent, this.path, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.BooleanSetting {
-}
-</style>
+<script src="./boolean_setting.js"></script>
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@ -0,0 +1,34 @@
+import { get, set } from 'lodash'
+import Select from 'src/components/select/select.vue'
+import ModifiedIndicator from './modified_indicator.vue'
+export default {
+  components: {
+    Select,
+    ModifiedIndicator
+  },
+  props: [
+    'path',
+    'disabled',
+    'options'
+  ],
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@ -0,0 +1,29 @@
+<template>
+  <label
+    class="ChoiceSetting"
+  >
+    <slot />
+    <Select
+      :value="state"
+      :disabled="disabled"
+      @change="update"
+    >
+      <option
+        v-for="option in options"
+        :key="option.key"
+        :value="option.value"
+      >
+        {{ option.label }}
+        {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+      </option>
+    </Select>
+    <ModifiedIndicator :changed="isChanged" />
+  </label>
+</template>
+
+<script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting {
+}
+</style>
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@ -7,13 +7,24 @@
    margin: 1em 1em 1.4em;
    padding-bottom: 1.4em;

-    > div {
+    > div,
+    > label {
+      display: block;
      margin-bottom: .5em;
      &:last-child {
        margin-bottom: 0;
      }
    }

+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: .5em;
+      }
+    }
+
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@ -1,24 +1,23 @@
 import { filter, trim } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)

 const FilteringTab = {
  data () {
    return {
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
+      replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.reply_visibility_${mode}`)
+      }))
    }
  },
  components: {
-    BooleanSetting
+    BooleanSetting,
+    ChoiceSetting
  },
  computed: {
    ...SharedComputedObject(),
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@ -36,29 +36,13 @@
          </li>
        </ul>
      </div>
-      <div>
+      <ChoiceSetting
+        id="replyVisibility"
+        path="replyVisibility"
+        :options="replyVisibilityOptions"
+      >
        {{ $t('settings.replies_in_timeline') }}
-        <label
-          for="replyVisibility"
-          class="select"
-        >
-          <select
-            id="replyVisibility"
-            v-model="replyVisibility"
-          >
-            <option
-              value="all"
-              selected
-            >{{ $t('settings.reply_visibility_all') }}</option>
-            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
-      </div>
+      </ChoiceSetting>
      <div>
        <BooleanSetting path="hidePostStats">
          {{ $t('settings.hide_post_stats') }}
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -1,21 +1,25 @@
 import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown,
  faGlobe
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown,
  faGlobe
 )

 const GeneralTab = {
  data () {
    return {
+      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+      })),
      loopSilentAvailable:
      // Firefox
      Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@ -27,12 +31,20 @@ const GeneralTab = {
  },
  components: {
    BooleanSetting,
+    ChoiceSetting,
    InterfaceLanguageSwitcher
  },
  computed: {
    postFormats () {
      return this.$store.state.instance.postFormats || []
    },
+    postContentOptions () {
+      return this.postFormats.map(format => ({
+        key: format,
+        value: format,
+        label: this.$t(`post_status.content_type["${format}"]`)
+      }))
+    },
    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
    instanceWallpaperUsed () {
      return this.$store.state.instance.background &&
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -90,62 +90,22 @@
          </BooleanSetting>
        </li>
        <li>
-          <div>
+          <ChoiceSetting
+            id="subjectLineBehavior"
+            path="subjectLineBehavior"
+            :options="subjectLineOptions"
+          >
            {{ $t('settings.subject_line_behavior') }}
-            <label
-              for="subjectLineBehavior"
-              class="select"
-            >
-              <select
-                id="subjectLineBehavior"
-                v-model="subjectLineBehavior"
-              >
-                <option value="email">
-                  {{ $t('settings.subject_line_email') }}
-                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="masto">
-                  {{ $t('settings.subject_line_mastodon') }}
-                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-                <option value="noop">
-                  {{ $t('settings.subject_line_noop') }}
-                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
+          </ChoiceSetting>
        </li>
        <li v-if="postFormats.length > 0">
-          <div>
+          <ChoiceSetting
+            id="postContentType"
+            path="postContentType"
+            :options="postContentOptions"
+          >
            {{ $t('settings.post_status_content_type') }}
-            <label
-              for="postContentType"
-              class="select"
-            >
-              <select
-                id="postContentType"
-                v-model="postContentType"
-              >
-                <option
-                  v-for="postFormat in postFormats"
-                  :key="postFormat"
-                  :value="postFormat"
-                >
-                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
-          </div>
+          </ChoiceSetting>
        </li>
        <li>
          <BooleanSetting path="minimalScopesMode">
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -36,16 +36,9 @@ import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Select from 'src/components/select/select.vue'

 import Preview from './preview.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)

 // List of color values used in v1
 const v1OnlyNames = [
@ -395,7 +388,8 @@ export default {
    FontControl,
    TabSwitcher,
    Preview,
-    Checkbox
+    Checkbox,
+    Select
  },
  methods: {
    loadTheme (
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -55,7 +55,7 @@
              for="preset-switcher"
              class="select"
            >
-              <select
+              <Select
                id="preset-switcher"
                v-model="selected"
                class="preset-switcher"
@ -71,11 +71,7 @@
                >
                  {{ style[0] || style.name }}
                </option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
+              </Select>
            </label>
          </div>
          <div class="export-import">
@ -907,28 +903,19 @@
          <div class="tab-header shadow-selector">
            <div class="select-container">
              {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
+              <Select
+                id="shadow-switcher"
+                v-model="shadowSelected"
+                class="shadow-switcher"
              >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
+                <option
+                  v-for="shadow in shadowsAvailable"
+                  :key="shadow"
+                  :value="shadow"
                >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
+                  {{ $t('settings.style.shadows.components.' + shadow) }}
+                </option>
+              </Select>
            </div>
            <div class="override">
              <label
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@ -1,5 +1,6 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
+import Select from '../select/select.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@ -45,7 +46,8 @@ export default {
  },
  components: {
    ColorInput,
-    OpacityInput
+    OpacityInput,
+    Select
  },
  methods: {
    add () {
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -59,30 +59,20 @@
        :disabled="usingFallback"
        class="id-control style-control"
      >
-        <label
-          for="shadow-switcher"
-          class="select"
+        <Select
+          id="shadow-switcher"
+          v-model="selectedId"
+          class="shadow-switcher"
          :disabled="!ready || usingFallback"
        >
-          <select
-            id="shadow-switcher"
-            v-model="selectedId"
-            class="shadow-switcher"
-            :disabled="!ready || usingFallback"
+          <option
+            v-for="(shadow, index) in cValue"
+            :key="index"
+            :value="index"
          >
-            <option
-              v-for="(shadow, index) in cValue"
-              :key="index"
-              :value="index"
-            >
-              {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-            </option>
-          </select>
-          <FAIcon
-            icon="chevron-down"
-            class="select-down-icon"
-          />
-        </label>
+            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+          </option>
+        </Select>
        <button
          class="btn button-default"
          :disabled="!ready || !present"
@ -316,20 +306,20 @@

    .id-control {
      align-items: stretch;
-      .select, .btn {
+
+      .shadow-switcher {
+        flex: 1;
+      }
+
+      .shadow-switcher, .btn {
        min-width: 1px;
        margin-right: 5px;
      }
+
      .btn {
        padding: 0 .4em;
        margin: 0 .1em;
      }
-      .select {
-        flex: 1;
-        select {
-          align-self: initial;
-        }
-      }
    }
  }
 }
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@ -4,13 +4,13 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
+import Select from '../select/select.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faBell,
  faRss,
-  faChevronDown,
  faSearchPlus,
  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
@ -18,7 +18,6 @@ import {
 library.add(
  faRss,
  faBell,
-  faChevronDown,
  faSearchPlus,
  faExternalLinkAlt
 )
@ -118,7 +117,8 @@ export default {
    ModerationTools,
    AccountActions,
    ProgressButton,
-    FollowButton
+    FollowButton,
+    Select
  },
  methods: {
    muteUser () {
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -132,25 +132,24 @@
              class="userHighlightCl"
              type="color"
            >
-            <label
-              for="theme_tab"
-              class="userHighlightSel select"
+            <Select
+              :id="'userHighlightSel'+user.id"
+              v-model="userHighlightType"
+              class="userHighlightSel"
            >
-              <select
-                :id="'userHighlightSel'+user.id"
-                v-model="userHighlightType"
-                class="userHighlightSel"
-              >
-                <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
-                <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
-                <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
-                <option value="side">{{ $t('user_card.highlight.side') }}</option>
-              </select>
-              <FAIcon
-                class="select-down-icon"
-                icon="chevron-down"
-              />
-            </label>
+              <option value="disabled">
+                {{ $t('user_card.highlight.disabled') }}
+              </option>
+              <option value="solid">
+                {{ $t('user_card.highlight.solid') }}
+              </option>
+              <option value="striped">
+                {{ $t('user_card.highlight.striped') }}
+              </option>
+              <option value="side">
+                {{ $t('user_card.highlight.side') }}
+              </option>
+            </Select>
          </div>
        </div>
        <div
@ -541,15 +540,11 @@
        flex: 1 0 auto;
      }

-      .userHighlightSel,
-      .userHighlightSel.select {
+      .userHighlightSel {
        padding-top: 0;
        padding-bottom: 0;
        flex: 1 0 auto;
      }
-      .userHighlightSel.select svg {
-        line-height: 22px;
-      }

      .userHighlightText {
        width: 70px;
@ -558,9 +553,7 @@

      .userHighlightCl,
      .userHighlightText,
-      .userHighlightSel,
-      .userHighlightSel.select {
-        height: 22px;
+      .userHighlightSel {
        vertical-align: top;
        margin-right: .5em;
        margin-bottom: .25em;