From e8650d3409aa34a0195629d2077bad68bcade439 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 21:03:46 +0300
Subject: [PATCH] chevrons-downs, settings

---
 src/components/chat/chat.js                   |  8 ++++++
 src/components/chat/chat.vue                  |  5 ++--
 .../contrast_ratio/contrast_ratio.vue         | 26 ++++++++++++++-----
 src/components/font_control/font_control.js   |  8 ++++++
 src/components/font_control/font_control.vue  |  2 +-
 .../interface_language_switcher.vue           | 10 ++++++-
 .../settings_modal/tabs/filtering_tab.js      |  8 ++++++
 .../settings_modal/tabs/filtering_tab.vue     |  2 +-
 .../settings_modal/tabs/general_tab.js        |  8 ++++++
 .../settings_modal/tabs/general_tab.vue       |  4 +--
 .../tabs/theme_tab/theme_tab.js               |  8 ++++++
 .../tabs/theme_tab/theme_tab.vue              |  4 +--
 .../shadow_control/shadow_control.js          | 14 ++++++++++
 .../shadow_control/shadow_control.vue         | 10 +++----
 14 files changed, 97 insertions(+), 20 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 34e723d0fb..1630ba802e 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e4538c84c..0d44c92065 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -58,14 +58,15 @@
               :class="{ 'visible': jumpToBottomButtonVisible }"
               @click="scrollDown({ behavior: 'smooth' })"
             >
-              <i class="icon-down-open">
+              <span>
+                <FAIcon icon="chevron-down" />
                 <div
                   v-if="newMessageCount"
                   class="badge badge-notification unread-chat-count unread-message-count"
                 >
                   {{ newMessageCount }}
                 </div>
-              </i>
+              </span>
             </div>
             <PostStatusForm
               :disable-subject="true"
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 9dc871b6bf..374cb9ba22 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -8,13 +8,13 @@
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
     <span
@@ -23,19 +23,32 @@
       :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
   </span>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+)
+
 export default {
   props: {
     large: {
@@ -85,6 +98,7 @@ export default {
   .rating {
     display: inline-block;
     text-align: center;
+    margin-left: 0.5em;
   }
 }
 </style>
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 8e2b0e45f6..6274780b86 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,12 @@
 import { set } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
   props: [
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 61f0384b08..40aed190e9 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dd6800a302..2a3d4cbb86 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
   </div>
 </template>
@@ -28,6 +28,14 @@
 import languagesObject from '../../i18n/messages'
 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
+)
 
 export default {
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3b2df55604..5f38a5ae71 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.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 () {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eea41514dd..786f3618da 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down" />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44eb..a39d70716f 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,14 @@ import Checkbox from 'src/components/checkbox/checkbox.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
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const GeneralTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 13482de701..9fc1470e8d 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
@@ -127,7 +127,7 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index e3c5e80a20..6cf75fe710 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.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 = [
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 5328c35088..fb8b16ae7b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
           </template>
@@ -907,7 +907,7 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index f9e7b985ce..800c39d51b 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.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'
+import {
+  faTimes,
+  faChevronDown,
+  faChevronUp,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faChevronUp,
+  faTimes,
+  faPlus
+)
 
 const toModel = (object = {}) => ({
   x: 0,
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 815a9e595f..1f63f3f29e 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,35 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon icon="chevron-down" class="icon-down-open" />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <i class="icon-cancel" />
+          <FAIcon fixed-width icon="times" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <i class="icon-up-open" />
+          <FAIcon fixed-width icon="chevron-up" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <i class="icon-down-open" />
+          <FAIcon fixed-width icon="chevron-down" />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <i class="icon-plus" />
+          <FAIcon fixed-width icon="plus" />
         </button>
       </div>
       <div