aboutsummaryrefslogtreecommitdiff
path: root/src/components/settings_modal/tabs/theme_tab
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/settings_modal/tabs/theme_tab')
-rw-r--r--src/components/settings_modal/tabs/theme_tab/preview.vue41
-rw-r--r--src/components/settings_modal/tabs/theme_tab/theme_tab.js8
-rw-r--r--src/components/settings_modal/tabs/theme_tab/theme_tab.vue10
3 files changed, 49 insertions, 10 deletions
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 9d984659..3174fd7c 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -39,21 +39,29 @@
</i18n>
<div class="icons">
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cBlue)"
- class="button-icon icon-reply"
+ class="fa-scale-110 fa-old-padding"
+ icon="reply"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cGreen)"
- class="button-icon icon-retweet"
+ class="fa-scale-110 fa-old-padding"
+ icon="retweet"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cOrange)"
- class="button-icon icon-star"
+ class="fa-scale-110 fa-old-padding"
+ icon="star"
/>
- <i
+ <FAIcon
+ fixed-width
style="color: var(--cRed)"
- class="button-icon icon-cancel"
+ class="fa-scale-110 fa-old-padding"
+ icon="times"
/>
</div>
</div>
@@ -103,6 +111,23 @@
</div>
</template>
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faTimes,
+ faStar,
+ faRetweet,
+ faReply
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faTimes,
+ faStar,
+ faRetweet,
+ faReply
+)
+</script>
+
<style lang="scss">
.preview-container {
position: relative;
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 e3c5e80a..6cf75fe7 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 5328c350..280e1955 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,10 @@
{{ style[0] || style.name }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon
+ class="select-down-icon"
+ icon="chevron-down"
+ />
</label>
</div>
</template>
@@ -907,7 +910,10 @@
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
- <i class="icon-down-open" />
+ <FAIcon
+ class="select-down-icon"
+ icon="chevron-down"
+ />
</label>
</div>
<div class="override">