From 2c26ad9fb213f8e13ccf44147316dc9a63a7797b Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 23 Mar 2023 19:28:13 +0100
Subject: [PATCH 1/3] Remove unused bootswatch dependency

---
 package.json                             |  1 -
 src/components/BootswatchThemeSelect.vue | 92 ++----------------------
 yarn.lock                                |  5 --
 3 files changed, 5 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index cbd5e1c3..a5866377 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "axios": "^1.3.4",
     "bootstrap": "^5.2.3",
     "bootstrap-vue-next": "^0.7.3",
-    "bootswatch": "^5.2.3",
     "core-js": "^3.29.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/BootswatchThemeSelect.vue
index f63ca02c..0799ef49 100644
--- a/src/components/BootswatchThemeSelect.vue
+++ b/src/components/BootswatchThemeSelect.vue
@@ -1,49 +1,15 @@
 <template>
-  <div>
-    <b-nav-item-dropdown
-      v-if="!simple"
-      id="my-nav-dropdown"
-      text="Theme"
-      toggle-class="nav-link-custom"
-      right
-      lazy
-    >
-      <b-dropdown-item v-if="themeList1.length === 0">
-        <b-spinner small></b-spinner> Loading Themes...
-      </b-dropdown-item>
-
-      <!-- TODO Add  v-b-tooltip.hover.right=="{ variant: 'className' }" for tooltip class rendered from bootswatch-->
-      <b-dropdown-item-button
-        v-for="(theme, key) in themeList1"
-        :key="key"
-        :active="activeTheme === theme.name"
-        :title="theme.description"
-        @click="handleClick(theme.name)"
-        >{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
-      >
-    </b-nav-item-dropdown>
-    <b-link v-else variant="outline-primary" class="nav-link" @click="toggleNight">
-      <ThemeLightDark :size="16" />
-    </b-link>
-  </div>
+  <b-link variant="outline-primary" class="nav-link" @click="toggleNight">
+    <ThemeLightDark :size="16" />
+  </b-link>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import axios from 'axios';
 import ThemeLightDark from 'vue-material-design-icons/Brightness6.vue';
-import { FTHTMLStyleElement } from '@/types/styleElement';
 import { useSettingsStore } from '@/stores/settings';
-import { themeList, ThemeType } from '@/shared/themes';
 
-const props = defineProps({
-  simple: {
-    type: Boolean,
-    default: true,
-  },
-});
 const activeTheme = ref('');
-const themeList1 = ref<ThemeType[]>(themeList);
 const settingsStore = useSettingsStore();
 
 const setTheme = (themeName) => {
@@ -52,43 +18,18 @@ const setTheme = (themeName) => {
     return;
   }
   if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
-    const styles = document.getElementsByTagName('style');
-    const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
+    // const styles = document.getElementsByTagName('style');
     document.documentElement.setAttribute(
       'data-theme',
       themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
     );
-    // Reset all bootswatch styles
-    bw.forEach((style, index) => {
-      (bw[index] as FTHTMLStyleElement).disabled = true;
-    });
-    if (props.simple && activeTheme.value) {
+    if (activeTheme.value) {
       // Only transition if simple mode is active
       document.documentElement.classList.add('ft-theme-transition');
       window.setTimeout(() => {
         document.documentElement.classList.remove('ft-theme-transition');
       }, 1000);
     }
-  } else {
-    // Dynamic import for a different theme, to avoid loading ALL themes.
-    import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
-      console.log('theme', mod);
-      document.documentElement.removeAttribute('data-theme');
-      const styles = document.getElementsByTagName('style');
-      const bw = Array.from(styles).filter((w) => w.textContent?.includes('bootswatch'));
-      bw.forEach((style, index) => {
-        if (!style.id) {
-          // If its a style that was just imported and hasn't been assigned an id.
-          bw[index].id = themeName;
-        } else if (style.id === themeName) {
-          // If it's a style that has been imported already.
-          (bw[index] as FTHTMLStyleElement).disabled = false;
-        } else {
-          // All other style themes should be disabled.
-          (bw[index] as FTHTMLStyleElement).disabled = true;
-        }
-      });
-    });
   }
   // Save the theme as localstorage
   settingsStore.currentTheme = themeName;
@@ -99,32 +40,9 @@ onMounted(() => {
   if (settingsStore.currentTheme) setTheme(settingsStore.currentTheme);
 });
 
-const handleClick = (name: string) => {
-  setTheme(name.trim());
-};
 const toggleNight = () => {
   setTheme(activeTheme.value === 'bootstrap' ? 'bootstrap_dark' : 'bootstrap');
 };
-const fetchApi = () => {
-  // Fetches boostswatch api and dynamically sets themes.
-  // Not used, but useful for updating the static array of themes if bootswatch dependency is outdated.
-  axios
-    .get('https://bootswatch.com/api/4.json')
-    // .then((res) => {
-
-    // const { themes } = res.data;
-    // this.themes = themes;
-    // Use this code in the browser console and copy and paste the filteredThemes into this.themes
-    // console.log(themes);
-    // const filteredThemes = [];
-    // themes.forEach((item) =>
-    //   filteredThemes.push({ name: item.name, description: item.description }),
-    // );
-    // })
-    .catch((error) => {
-      console.error(error);
-    });
-};
 </script>
 
 <style scoped></style>
diff --git a/yarn.lock b/yarn.lock
index 997a83c1..09ca3767 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2001,11 +2001,6 @@ bootstrap@^5.2.3:
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
   integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
 
-bootswatch@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-5.2.3.tgz#a12bef6ea1a54f1b5b55b472c11a846d1cb77239"
-  integrity sha512-tvnW15WoOY2sEp1uT1ITDQiJy2TekQa+K+Q28WDXibleIxsY0nAoC9IylbnUPD7Q5vkCIclOuBHLVBblJYYPSA==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

From 646a160750c940271feb46c89ca9e8951b5382d8 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 23 Mar 2023 19:29:36 +0100
Subject: [PATCH 2/3] Rename Theme-select component

---
 src/components/{BootswatchThemeSelect.vue => ThemeSelect.vue} | 0
 src/components/layout/NavBar.vue                              | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/{BootswatchThemeSelect.vue => ThemeSelect.vue} (100%)

diff --git a/src/components/BootswatchThemeSelect.vue b/src/components/ThemeSelect.vue
similarity index 100%
rename from src/components/BootswatchThemeSelect.vue
rename to src/components/ThemeSelect.vue
diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue
index 427008ab..116833c8 100644
--- a/src/components/layout/NavBar.vue
+++ b/src/components/layout/NavBar.vue
@@ -23,7 +23,7 @@
           <router-link v-if="botStore.canRunBacktest" class="nav-link navbar-nav" to="/backtest"
             >Backtest</router-link
           >
-          <BootswatchThemeSelect />
+          <theme-select />
         </b-navbar-nav>
 
         <!-- Right aligned nav items -->
@@ -124,7 +124,7 @@
 
 <script setup lang="ts">
 import LoginModal from '@/views/LoginModal.vue';
-import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
+import ThemeSelect from '@/components/ThemeSelect.vue';
 import Favico from 'favico.js';
 import ReloadControl from '@/components/ftbot/ReloadControl.vue';
 import BotEntry from '@/components/BotEntry.vue';

From a4436a482ac6dd0bfb6f8ae90eea0888cdc3585f Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 24 Mar 2023 20:16:24 +0100
Subject: [PATCH 3/3] Remove bootswatch themes

---
 src/shared/themes.ts | 145 -------------------------------------------
 1 file changed, 145 deletions(-)

diff --git a/src/shared/themes.ts b/src/shared/themes.ts
index 94a5463c..267d0e2c 100644
--- a/src/shared/themes.ts
+++ b/src/shared/themes.ts
@@ -17,151 +17,6 @@ export const themeList: ThemeType[] = [
     dark: true,
     bootswatch: false,
   },
-  {
-    name: 'Cerulean',
-    description: 'A calm blue sky',
-    dark: false,
-    bootswatch: true,
-  },
-  {
-    name: 'Cosmo',
-    description: 'An ode to Metro',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Cyborg',
-    description: 'Jet black and electric blue',
-    dark: true,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Darkly',
-    description: 'Flatly in night mode',
-    dark: true,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Flatly',
-    description: 'Flat and modern',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Journal',
-    description: 'Crisp like a new sheet of paper',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Litera',
-    description: 'The medium is the message',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Lumen',
-    description: 'Light and shadow',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Lux',
-    description: 'A touch of class',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Materia',
-    description: 'Material is the metaphor',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Minty',
-    description: 'A fresh feel',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Pulse',
-    description: 'A trace of purple',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Sandstone',
-    description: 'A touch of warmth',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Simplex',
-    description: 'Mini and minimalist',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Sketchy',
-    description: 'A hand-drawn look for mockups and mirth',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Slate',
-    description: 'Shades of gunmetal gray',
-    dark: true,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Solar',
-    description: 'A spin on Solarized',
-    dark: true,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Spacelab',
-    description: 'Silvery and sleek',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Superhero',
-    description: 'The brave and the blue',
-    dark: true,
-    bootswatch: true,
-  },
-
-  {
-    name: 'United',
-    description: 'Ubuntu orange and unique font',
-    dark: false,
-    bootswatch: true,
-  },
-
-  {
-    name: 'Yeti',
-    description: 'A friendly foundation',
-    dark: false,
-    bootswatch: true,
-  },
 ];
 
 export function storeCurrentTheme(themeName: string) {