From 414470873802ad8637d00110f75755af1bdea1f1 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 8 Oct 2020 13:55:26 -0400
Subject: [PATCH] use octicons instead of bootstrap's

---
 src/components/Board/AddList.vue             |  3 +-
 src/components/Game/AddRemoveGame.vue        |  4 +-
 src/components/Game/GameNotes.vue            |  2 +-
 src/components/Game/GameProgress.vue         |  2 +-
 src/components/Game/GameTags.vue             |  6 +--
 src/components/GameCards/GameCardCompact.vue |  7 ++--
 src/components/GameCards/GameCardDefault.vue |  8 ++--
 src/components/GameCards/GameCardGrid.vue    |  8 ++--
 src/components/GameCards/GameCardText.vue    |  7 ++--
 src/components/Icon.vue                      | 43 ++++++++++++++++++++
 src/components/Lists/AddGameModal.vue        |  9 ++--
 src/components/Lists/ChangeListView.vue      |  2 +-
 src/components/Lists/List.vue                |  8 ++--
 src/components/Lists/ListPreferences.vue     |  2 +-
 src/components/Lists/ListSettings.vue        | 10 +++--
 src/components/Lists/RenameList.vue          |  2 +-
 src/components/Lists/SortList.vue            |  2 +-
 src/components/PageHeader.vue                | 21 +++++-----
 src/components/Settings/BoardSettings.vue    |  3 +-
 src/i18n/en.json                             |  4 +-
 src/main.js                                  | 10 ++---
 src/pages/Auth.vue                           |  4 +-
 src/pages/Tags.vue                           |  4 +-
 src/pages/Wallpapers.vue                     |  2 +-
 24 files changed, 110 insertions(+), 63 deletions(-)
 create mode 100644 src/components/Icon.vue

diff --git a/src/components/Board/AddList.vue b/src/components/Board/AddList.vue
index af89e814..15f832ca 100644
--- a/src/components/Board/AddList.vue
+++ b/src/components/Board/AddList.vue
@@ -2,10 +2,11 @@
   <b-button
     v-b-modal="modalId"
     :title="$t('board.addList.title')"
+    size="sm"
     v-b-tooltip.hover.left
     ref="addList"
   >
-    <b-icon-plus />
+    <icon name="plus" white />
 
     <b-modal
       :id="modalId"
diff --git a/src/components/Game/AddRemoveGame.vue b/src/components/Game/AddRemoveGame.vue
index 42195c14..3e7f5978 100644
--- a/src/components/Game/AddRemoveGame.vue
+++ b/src/components/Game/AddRemoveGame.vue
@@ -6,7 +6,7 @@
     v-b-tooltip.hover
     @click="addGame"
   >
-    <b-icon-plus />
+    <icon name="plus" white />
   </b-button>
 
   <b-button
@@ -16,7 +16,7 @@
     :title="$t('board.gameModal.removeFromList')"
     @click="removeGame"
   >
-    <b-icon-trash />
+    <icon name="trash" white />
   </b-button>
 </template>
 
diff --git a/src/components/Game/GameNotes.vue b/src/components/Game/GameNotes.vue
index 172430ec..5838ecf4 100644
--- a/src/components/Game/GameNotes.vue
+++ b/src/components/Game/GameNotes.vue
@@ -5,7 +5,7 @@
     v-b-tooltip.hover
     title="Game notes"
    >
-    <b-icon-file-earmark-text />
+    <icon name="note" white />
 
     <b-modal
       id="notes"
diff --git a/src/components/Game/GameProgress.vue b/src/components/Game/GameProgress.vue
index ce817f92..ee0019ae 100644
--- a/src/components/Game/GameProgress.vue
+++ b/src/components/Game/GameProgress.vue
@@ -5,7 +5,7 @@
     variant="info"
     title="Set game progress"
   >
-    <b-icon-clock-history />
+    <icon name="clock" white />
 
     <b-modal
       id="progress"
diff --git a/src/components/Game/GameTags.vue b/src/components/Game/GameTags.vue
index a56eef81..86d17288 100644
--- a/src/components/Game/GameTags.vue
+++ b/src/components/Game/GameTags.vue
@@ -5,7 +5,7 @@
     v-b-tooltip.hover
     title="Apply tags"
    >
-    <b-icon-tag />
+    <icon name="tag" white />
 
     <b-popover
       target="tags-popover"
@@ -46,7 +46,7 @@
             size="sm"
             @click="removeTag(name)"
           >
-            <b-icon-trash />
+            <icon name="dash" />
           </b-button>
 
           <b-button
@@ -55,7 +55,7 @@
             size="sm"
             @click="addTag(name)"
           >
-            <b-icon-plus font-scale="1" />
+            <icon name="plus" />
           </b-button>
 
         </b-list-group-item>
diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index c8a4486c..02ddbcd9 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/src/components/GameCards/GameCardCompact.vue
@@ -2,10 +2,9 @@
   <b-card no-body class="clickable mb-2" @click="openDetails">
     <b-row no-gutters v-if="game && game.name">
       <b-col cols="3">
-        <b-icon-check-circle
+        <icon name="check-circle"
+          white
           class="position-absolute rounded bg-success p-1 m-1"
-          variant="white"
-          font-scale="1.5"
           v-if="showCompletedBadge"
         />
 
@@ -27,7 +26,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </b-card-title>
 
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index e97e996a..e0f4223f 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -5,10 +5,10 @@
       v-if="game && game.name"
     >
       <b-col cols="4">
-        <b-icon-check-circle
+        <icon
+          name="verified"
+          white
           class="position-absolute rounded bg-success p-1 m-1"
-          variant="white"
-          font-scale="1.5"
           v-if="showCompletedBadge"
         />
 
@@ -29,7 +29,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </b-card-title>
 
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index e38452a4..bf5bf6aa 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -8,10 +8,10 @@
   >
     <b-card-body body-class="p-2" v-if="game && game.name">
       <b-card-title class="mb-0" title-tag="h6">
-        <b-icon-check-circle
+        <icon
+          name="verified"
           class="rounded bg-success p-1"
-          variant="white"
-          font-scale="1.5"
+          white
           v-if="showCompletedBadge"
         />
 
@@ -61,7 +61,7 @@
       </template>
 
       <b-badge variant="warning" v-if="gameNotes">
-        <b-icon-file-earmark-text />
+        <icon name="note" />
       </b-badge>
     </b-card-body>
   </b-card>
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 2c21b7c3..56a0aaca 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -3,9 +3,10 @@
     <b-row no-gutters v-if="game && game.name">
         <b-card-body body-class="pt-0 pb-1 px-2">
           <small>
-            <b-icon-check-circle
+            <icon
+              name="verified"
               class="rounded bg-success p-1"
-              variant="white"
+              white
               font-scale="1.5"
               v-if="showCompletedBadge"
             />
@@ -13,7 +14,7 @@
             {{ game.name }}
 
             <b-badge variant="warning" v-if="gameNotes">
-              <b-icon-file-earmark-text />
+              <icon name="note" />
             </b-badge>
           </small>
 
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
new file mode 100644
index 00000000..228b3f6e
--- /dev/null
+++ b/src/components/Icon.vue
@@ -0,0 +1,43 @@
+<template lang="html">
+  <img
+    :src="`static/octicons/${name}.svg`"
+    :class="{ white, animated, small }"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: 'sun',
+    },
+    white: Boolean,
+    animated: Boolean,
+    small: Boolean,
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+@keyframes spin {
+    from { transform:rotate(0deg); }
+    to { transform:rotate(360deg); }
+}
+
+img {
+  &.white {
+    filter: invert(1);
+  }
+
+  &.small {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.animated {
+    animation: spin 500ms linear infinite;
+    transform:rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/Lists/AddGameModal.vue b/src/components/Lists/AddGameModal.vue
index 7680cbe7..4cbe1798 100755
--- a/src/components/Lists/AddGameModal.vue
+++ b/src/components/Lists/AddGameModal.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button @click="$bvModal.show(`game-modal-${list.name}`)">
-    <b-icon-plus class="mr-1" />
+    <icon name="plus" />
     {{ $t('board.addGame.title') }}
 
     <b-modal
@@ -20,8 +20,11 @@
 
           <b-input-group-append>
             <b-button variant="primary" @click="search">
-              <b-spinner v-if="loading" small />
-              <b-icon-search v-else />
+              <icon
+                :name="loading ? 'sync' : 'search'"
+                :animated="loading"
+                white
+              />
             </b-button>
           </b-input-group-append>
         </b-input-group>
diff --git a/src/components/Lists/ChangeListView.vue b/src/components/Lists/ChangeListView.vue
index c279d1cf..8372508e 100644
--- a/src/components/Lists/ChangeListView.vue
+++ b/src/components/Lists/ChangeListView.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-grid1x2 class="mr-1" />
+    <icon name="versions" />
     {{ $t('board.list.view') }}
 
     <b-modal
diff --git a/src/components/Lists/List.vue b/src/components/Lists/List.vue
index 39f729d3..4187d87e 100644
--- a/src/components/Lists/List.vue
+++ b/src/components/Lists/List.vue
@@ -9,14 +9,14 @@
         :header-bg-variant="showDuplicateWarning ? 'warning' : null"
       >
         <h6 class="m-0" v-b-modal="`rename-list-${listIndex}`">
-          <b-badge v-if="autoSortEnabled">
-            <b-icon-sort-up />
-          </b-badge>
-
           <b-badge v-if="showGameCount">
               {{ list.games.length }}
           </b-badge>
 
+          <b-badge v-if="autoSortEnabled">
+            <icon small white name="list-ordered" />
+          </b-badge>
+
           {{ showDuplicateWarning ? 'Game already in list' : list.name }}
         </h6>
 
diff --git a/src/components/Lists/ListPreferences.vue b/src/components/Lists/ListPreferences.vue
index d5e2b52e..06f98f96 100644
--- a/src/components/Lists/ListPreferences.vue
+++ b/src/components/Lists/ListPreferences.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-toggles class="mr-1" />
+    <icon name="tools" />
     {{ $t('board.list.settings') }}
 
     <b-modal
diff --git a/src/components/Lists/ListSettings.vue b/src/components/Lists/ListSettings.vue
index f09a0015..3066fa9a 100644
--- a/src/components/Lists/ListSettings.vue
+++ b/src/components/Lists/ListSettings.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-dropdown size="sm" class="m-1" right>
+  <b-dropdown size="sm" class="m-1" right variant="transparent">
     <add-game-modal :list="list" />
     <b-dd-divider />
     <sort-list :list="list" :list-index="listIndex" />
@@ -13,18 +13,20 @@
           v-b-tooltip.hover
           :title="$t('board.list.moveLeft')"
           :disabled="isFirst"
+          variant="light"
           @click="moveList(listIndex, listIndex - 1)"
         >
-          <b-icon-arrow-left-short />
+          <icon name="triangle-left" />
         </b-button>
 
         <b-button
           v-b-tooltip.hover
           :title="$t('board.list.moveRight')"
           :disabled="isLast"
+          variant="light"
           @click="moveList(listIndex, listIndex + 1)"
         >
-          <b-icon-arrow-right-short />
+          <icon name="triangle-right" />
         </b-button>
       </b-button-group>
     </b-dropdown-item>
@@ -34,7 +36,7 @@
       variant="outline-danger"
       @click="promptDeleteList"
     >
-      <b-icon-trash class="mr-1" />
+      <icon name="trash" />
       {{ $t('board.list.delete') }}
     </b-dropdown-item>
   </b-dropdown>
diff --git a/src/components/Lists/RenameList.vue b/src/components/Lists/RenameList.vue
index 2fd6b21b..5401ef7c 100644
--- a/src/components/Lists/RenameList.vue
+++ b/src/components/Lists/RenameList.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-pencil class="mr-1" />
+    <icon name="pencil" />
     {{ $t('board.list.renameList') }}
 
     <b-modal
diff --git a/src/components/Lists/SortList.vue b/src/components/Lists/SortList.vue
index 34ad81f3..6703a2b2 100644
--- a/src/components/Lists/SortList.vue
+++ b/src/components/Lists/SortList.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <b-dropdown-item-button v-b-modal="modalId">
-    <b-icon-sort-up class="mr-1" />
+    <icon name="list-ordered" />
     {{ $t('board.list.sortList') }}
 
     <b-modal
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 4aa2a79e..37f6e2b8 100755
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -11,10 +11,10 @@
         right
         no-caret
         boundary="viewport"
-        variant="link"
+        variant="transparent"
       >
         <template v-slot:button-content>
-          <b-icon-arrow-left-right />
+          <icon name="arrow-switch" />
         </template>
 
         <b-dropdown-item
@@ -34,37 +34,38 @@
         right
         no-caret
         boundary="viewport"
-        variant="link"
+        variant="transparent"
       >
         <template v-slot:button-content>
-          <b-icon-gear />
+          <icon name="gear" />
         </template>
 
         <b-dropdown-item title="Tags" :to="{ name: 'tags' }">
-          <b-icon-tags />
+          <icon name="tag" />
+
           {{ $t('settings.tags') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="Wallpapers" :to="{ name: 'wallpapers' }">
-          <b-icon-file-richtext />
+          <icon name="image" />
           {{ $t('settings.wallpapers') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="Language" :to="{ name: 'language' }">
-          <b-icon-chat-left-text />
+          <icon name="globe" />
           {{ $t('settings.language') }}
         </b-dropdown-item>
         <b-dropdown-item title="Themes" :to="{ name: 'themes' }">
-          <b-icon-droplet />
+          <icon name="sun" />
           {{ $t('settings.themes') }}
         </b-dropdown-item>
         <b-dropdown-item title="Releases" :to="{ name: 'releases' }">
-          <b-icon-mailbox />
+          <icon name="megaphone" />
           {{ $t('settings.releases') }}
         </b-dropdown-item>
 
         <b-dropdown-item title="About" :to="{ name: 'about' }">
-          <b-icon-question />
+          <icon name="info" />
           {{ $t('settings.about') }}
         </b-dropdown-item>
       </b-dropdown>
diff --git a/src/components/Settings/BoardSettings.vue b/src/components/Settings/BoardSettings.vue
index 10e7c432..a6ddeacc 100644
--- a/src/components/Settings/BoardSettings.vue
+++ b/src/components/Settings/BoardSettings.vue
@@ -4,9 +4,10 @@
     v-b-tooltip.hover.left
     title="Board settings"
     class="mt-3"
+    size="sm"
     ref="addList"
   >
-    <b-icon-gear-fill />
+    <icon name="gear" white />
 
     <b-modal
       id="board-settings"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bc4278c2..f683174a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -103,9 +103,9 @@
             "addGames": "Add games to {listName}",
             "view": "List view",
             "moveList": "Move list",
-            "renameList": "Rename list",
+            "renameList": "Rename",
             "renameListPlaceholder": "Enter your name",
-            "sortList": "Auto sort list",
+            "sortList": "Sort",
             "sortWarning": "Auto sorting list will affect how drag and drop works",
             "coversSizeTitle": "Covers across",
             "showReleaseDates": "Show release date for unreleased games",
diff --git a/src/main.js b/src/main.js
index 2b868e40..3d0dc66b 100755
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import Vue from 'vue';
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
+import { BootstrapVue } from 'bootstrap-vue';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import VueAxios from 'vue-axios';
 import VueFire from 'vuefire';
 import VueI18n from 'vue-i18n';
+import Icon from '@/components/Icon';
 import axios from 'axios';
 import VueAnalytics from 'vue-analytics';
 import Raven from 'raven-js';
@@ -25,12 +26,11 @@ Object.defineProperties(Vue.prototype, {
 });
 
 Vue.use(BootstrapVue, bootstrapSettings);
-
-Vue.use(BootstrapVueIcons);
 Vue.use(VueAnalytics, { id: 'UA-120053966-1', router });
 Vue.use(VueAxios, axios);
 Vue.use(VueFire);
 Vue.use(VueI18n);
+Vue.component('icon', Icon);
 
 if (process.env.NODE_ENV !== 'development') {
   Raven
@@ -53,10 +53,6 @@ const vuexStorage = localStorage && localStorage.vuex
   ? JSON.parse(localStorage.vuex)
   : {};
 
-if (vuexStorage.settings && vuexStorage.settings.theme && vuexStorage.settings.theme.cssCdn) {
-  document.querySelector('link[rel="stylesheet"').href = vuexStorage.settings.theme.cssCdn;
-}
-
 if (vuexStorage && vuexStorage.user && window.FS && window.location.origin.indexOf('localhost') === -1) {
   const { displayName, email, dateJoined } = vuexStorage.user;
 
diff --git a/src/pages/Auth.vue b/src/pages/Auth.vue
index 8f9f5ebf..08589b73 100644
--- a/src/pages/Auth.vue
+++ b/src/pages/Auth.vue
@@ -2,8 +2,8 @@
   <b-overlay show no-center no-wrap>
     <template v-slot:overlay>
       <div class="text-center p-4">
-        <b-icon-arrow-clockwise font-scale="3" animation="spin" />
-        <p id="cancel-label">Please wait...</p>
+        <icon name="sync" animated />
+        <p>Please wait...</p>
       </div>
     </template>
   </b-overlay>
diff --git a/src/pages/Tags.vue b/src/pages/Tags.vue
index 85c49912..df91a2c0 100644
--- a/src/pages/Tags.vue
+++ b/src/pages/Tags.vue
@@ -94,14 +94,14 @@
                   variant="primary"
                   @click="editTag(name)"
                 >
-                  <b-icon-pencil />
+                  <icon name="pencil" white />
                 </b-button>
 
                 <b-button
                   variant="danger"
                   @click="deleteTag(name)"
                 >
-                  <b-icon-trash />
+                  <icon name="trash" white />
                 </b-button>
               </div>
             </b-list-group-item>
diff --git a/src/pages/Wallpapers.vue b/src/pages/Wallpapers.vue
index 9a9d4c4f..daaeaaa7 100644
--- a/src/pages/Wallpapers.vue
+++ b/src/pages/Wallpapers.vue
@@ -70,7 +70,7 @@
               size="sm"
               @click="confirmDeleteWallpaper(wallpaper)"
             >
-              <b-icon-trash />
+              <icon name="trash" white />
             </b-button>
           </b-card>
         </b-col>