Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (306 commits)
  fallback if shadows aren't defined
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Italian)
  Translated using Weblate (Ukrainian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Italian)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Russian)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Portuguese)
  ...

3 files changed, 41 insertions, 19 deletions

diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 5f54b416..42819c19 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -42,14 +42,15 @@
           :value="index"
         >
         <label class="option-vote">
-          <div>{{ option.title }}</div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="option.title_html" />
         </label>
       </div>
     </div>
     <div class="footer faint">
       <button
         v-if="!showResults"
-        class="btn btn-default poll-vote-button"
+        class="btn button-default poll-vote-button"
         type="button"
         :disabled="isDisabled"
         @click="vote"
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index df93f038..1f8df3f9 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,17 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faChevronDown,
+  faPlus
+)
 
 export default {
   name: 'PollForm',
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d53f3837..09496105 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -12,6 +12,7 @@
         <input
           :id="`poll-${index}`"
           v-model="options[index]"
+          size="1"
           class="poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
@@ -20,24 +21,26 @@
           @keydown.enter.stop.prevent="nextOption(index)"
         >
       </div>
-      <div
+      <button
         v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
       >
-        <i
-          class="icon-cancel"
-          @click="deleteOption(index)"
-        />
-      </div>
+        <FAIcon icon="times" />
+      </button>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
-      <i class="icon-plus" />
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
+
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
@@ -55,7 +58,10 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div
@@ -83,7 +89,10 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
     </div>
@@ -103,7 +112,7 @@
   .add-option {
     align-self: flex-start;
     padding-top: 0.25em;
-    cursor: pointer;
+    padding-left: 0.1em;
   }
 
   .poll-option {
@@ -122,10 +131,10 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
-    width: 2em;
-    margin-left: -2em;
+    width: 1.5em;
+    margin-left: -1.5em;
     z-index: 1;
   }