From 2d9dc4f5b0e68d39d57246563f7fe01f22735ef0 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Fri, 28 Oct 2022 19:35:00 -0700
Subject: [PATCH] Remove settings cards, use regular buttons instead

---
 src/components/Settings/SettingsCard.vue |  34 ---
 src/settings/pages/DashboardPage.vue     | 284 ++++++++++++-----------
 2 files changed, 145 insertions(+), 173 deletions(-)
 delete mode 100644 src/components/Settings/SettingsCard.vue

diff --git a/src/components/Settings/SettingsCard.vue b/src/components/Settings/SettingsCard.vue
deleted file mode 100644
index 5d5a1d0e..00000000
--- a/src/components/Settings/SettingsCard.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template lang="html">
-  <b-card
-    body-class="settings-card field"
-    class="cursor-pointer mb-3"
-  >
-    <i v-if="icon" :class="`fa-2x fa-solid ${icon} fa-fw`" aria-hidden />
-
-    <aside v-if="title || description">
-      <h4 class="mb-0 strong">{{ title }}</h4>
-      <small class="text-muted">{{ description }}</small>
-    </aside>
-
-    <slot />
-  </b-card>
-</template>
-
-<script>
-export default {
-  props: {
-    title: String,
-    to: Object,
-    icon: String,
-    description: String,
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.settings-card {
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: auto 1fr;
-}
-</style>
diff --git a/src/settings/pages/DashboardPage.vue b/src/settings/pages/DashboardPage.vue
index 113266fc..7c3ee55a 100644
--- a/src/settings/pages/DashboardPage.vue
+++ b/src/settings/pages/DashboardPage.vue
@@ -27,9 +27,9 @@
 
       <b-row>
         <b-col>
-          <b-form-row>
+          <b-form-row class="boards scrollbox">
             <b-col
-              v-for="board in recentBoards"
+              v-for="board in sortedBoards"
               :key="board.id"
               cols="12"
               sm="6"
@@ -57,69 +57,6 @@
         </b-col>
       </b-row>
 
-      <b-row class="mt-3">
-        <b-col cols="12" sm="6" md="3">
-          <settings-card
-            title="Wallpapers"
-            description="Manage your wallpapers"
-            icon="fa-images"
-            @click.native="$router.push({ name: 'wallpapers' })"
-          />
-        </b-col>
-        <b-col cols="12" sm="6" md="3">
-          <settings-card
-            title="Notes"
-            description="View all your notes"
-            icon="fa-note-sticky"
-            @click.native="$router.push({ name: 'notes' })"
-          />
-        </b-col>
-
-        <b-col cols="12" sm="6" md="3">
-          <settings-card
-            title="Tags"
-            description="Manage your tags"
-            icon="fa-tags"
-            @click.native="$router.push({ name: 'tags' })"
-          />
-        </b-col>
-
-        <b-col cols="12" sm="6" md="3">
-          <settings-card @click.native="$router.push({ name: 'account' })">
-            <b-avatar
-              rounded
-              v-if="avatarImage"
-              :src="avatarImage"
-              v-b-tooltip.hover
-              :title="`@${profile.userName}`"
-            />
-
-            <i
-              v-else
-              class="fa-2x fa-solid fa-user fa-fw"
-              aria-hidden
-            />
-
-
-            <aside>
-              <h4 class="mb-0 strong">Account</h4>
-              <small class="text-muted">
-                <b-link
-                  v-if="profile.userName"
-                  :to="{ name: 'public.profile', params: { userName: profile.userName } }"
-                >
-                  @{{ profile.userName }}
-                </b-link>
-
-                <template v-else>
-                  Manage your account, create your profile.
-                </template>
-              </small>
-            </aside>
-          </settings-card>
-        </b-col>
-      </b-row>
-
       <!-- <div
         data-form-slug="6148881969433360"
         data-env="production"
@@ -127,83 +64,135 @@
         class="keap-custom-form"
       /> -->
 
-      <footer class="d-flex justify-content-between pb-5">
-        <div class="footer-links">
-          <b-button
-            variant="transparent"
-            size="sm"
-            v-b-modal.keyboard-shortcuts
+      <footer class="d-flex align-items-center mt-2 pb-5">
+        <b-button
+          :to="{ name: 'wallpapers' }"
+          class="mr-2">
+          <i class="fa fa-images" aria-hidden="true" />
+          Wallpapers
+        </b-button>
+
+        <b-button :to="{ name: 'notes' }" class="mr-2" id="notes">
+          <i class="fa fa-note-sticky" aria-hidden="true" />
+          Notes
+        </b-button>
+
+        <b-button :to="{ name: 'tags' }" class="mr-2" id="tags">
+          <i class="fa fa-tags" aria-hidden="true" />
+          Tags
+        </b-button>
+
+        <b-button
+          :to="{ name: 'account' }"
+          v-b-tooltip.hover
+          title="Tooltip content"
+        >
+          <b-avatar
+            rounded
+            v-if="avatarImage"
+            :src="avatarImage"
             v-b-tooltip.hover
-            title="Keyboard shortcuts"
-          >
-            <i class="fa-solid fa-keyboard fa-fw" />
-          </b-button>
+            size="22"
+            class="mr-1"
+            :title="`@${profile.userName}`"
+          />
 
-          <b-button
-            href="https://github.com/romancm/gamebrary"
-            target="_blank"
-            size="sm"
-            v-b-tooltip.hover
-            title="Gamebrary on GitHub"
-            variant="transparent"
-          >
-            <i class="fab fa-github fa-fw" />
-          </b-button>
-
-          <b-button
-            variant="transparent"
-            href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
-            target="_blank"
-            title="Submit feedback"
-            v-b-tooltip.hover
-          >
-            <i class="fa-regular fa-comment-dots fa-fw" />
-          </b-button>
-
-          <b-button
-            href="https://www.paypal.me/RomanCervantes/5"
-            target="_blank"
-            size="sm"
-            variant="transparent"
-            v-b-tooltip.hover
-            title="Donate"
-          >
-            <i class="fa-solid fa-circle-dollar-to-slot fa-fw" />
-          </b-button>
-
-          <b-button
-            size="sm"
-            variant="transparent"
-            v-b-tooltip.hover
-            title="Donate"
-          >
-            <i class="fa-solid fa-language fa-fw" />
-          </b-button>
-
-
-          <!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
-            <i class="mr-2 fab fa-steam fa-fw" aria-hidde fa-fwn />
-            <small>Steam</small>
-          </b-list-group-item> -->
-        </div>
-
-        <div>
-          <small>&copy; 2022 Gamebrary</small>
+          <i
+            v-else
+            class="fa fa-solid fa-user"
+            aria-hidden
+          />
 
           <b-link
-            :to="{ name: 'releases' }"
-            class="px-1 text-dark"
+            v-if="profile.userName"
+            :to="{ name: 'public.profile', params: { userName: profile.userName } }"
           >
-            <small>{{ latestRelease }}</small>
+            @{{ profile.userName }}
           </b-link>
-        </div>
+
+          <template v-else>
+            Account
+          </template>
+        </b-button>
+
+        <b-button
+          class="ml-2"
+          v-b-modal.keyboard-shortcuts
+          id="shortcuts"
+        >
+          <i class="fa-solid fa-keyboard" />
+        </b-button>
+
+        <b-button
+          class="ml-2"
+          href="https://github.com/romancm/gamebrary"
+          target="_blank"
+          v-b-tooltip.hover
+          title="Gamebrary on GitHub"
+        >
+          <i class="fab fa-github" />
+        </b-button>
+
+        <b-button
+          class="ml-2"
+          href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
+          target="_blank"
+          title="Submit feedback"
+          v-b-tooltip.hover
+        >
+          <i class="fa-regular fa-comment-dots" />
+        </b-button>
+
+        <b-button
+          class="ml-2"
+          title="Toggle theme"
+          @click="toggleTheme"
+          v-b-tooltip.hover
+        >
+          <i v-if="settings.darkTheme" class="fa-solid fa-sun" />
+          <i v-else class="fa-solid fa-moon" />
+        </b-button>
+
+        <b-button
+          class="ml-2"
+          href="https://www.paypal.me/RomanCervantes/5"
+          target="_blank"
+          v-b-tooltip.hover
+          title="Donate"
+        >
+          <i class="fa-solid fa-circle-dollar-to-slot" />
+        </b-button>
+
+        <!-- <b-button
+          class="ml-2"
+          v-b-tooltip.hover
+          title="Change language"
+        >
+          <i class="fa-solid fa-language" />
+        </b-button> -->
+
+        <!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
+          <i class="mr-2 fab fa-steam" aria-hidden />
+          <small>Steam</small>
+        </b-list-group-item> -->
+
+        <small class="ml-auto">
+          &copy; 2022 Gamebrary
+
+          <b-link
+            href="https://github.com/romancm/gamebrary/releases"
+            target="_blank"
+            :class="darkTheme ? 'text-light' : 'text-dark'"
+          >
+            {{ latestRelease }}
+          </b-link>
+        </small>
       </footer>
     </b-container>
   </section>
 </template>
 
 <script>
-import SettingsCard from '@/components/Settings/SettingsCard';
 import MiniBoard from '@/components/Board/MiniBoard';
 // import SteamSettingsPage from '@/pages/SteamSettingsPage';
 // import LanguageSettings from '@/components/Settings/LanguageSettings';
@@ -214,7 +203,6 @@ export default {
   components: {
     MiniBoard,
     // LanguageSettings,
-    SettingsCard,
     // SteamSettingsPage,
   },
 
@@ -247,21 +235,32 @@ export default {
   },
 
   computed: {
-    ...mapState(['user', 'releases', 'tags']),
-    ...mapGetters(['sortedBoards']),
-
-    latestRelease() {
-      return this.releases?.[0]?.tag_name;
-    },
+    ...mapState(['user', 'tags', 'settings']),
+    ...mapGetters(['sortedBoards', 'darkTheme', 'latestRelease']),
   },
 
   methods: {
+    async toggleTheme() {
+      const { settings } = this;
+      const darkTheme = settings?.darkTheme || false;
+
+      const payload = {
+        ...settings,
+        darkTheme: !darkTheme,
+      };
+
+      await this.$store.dispatch('SAVE_SETTINGS', payload)
+        .catch(() => {
+          this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
+          this.saving = false;
+        });
+
+    },
+
     async load() {
       await this.$store.dispatch('LOAD_BOARDS');
       await this.$store.dispatch('LOAD_TAGS');
 
-      this.recentBoards = this.sortedBoards.slice(0, 8);
-
       this.profile = await this.$store.dispatch('LOAD_PROFILE').catch(() => null);
       if (this.profile?.avatar) this.loadAvatarImage();
     },
@@ -274,3 +273,10 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.boards {
+  max-height: calc(100vh - 300px);
+  overflow-y: auto;
+}
+</style>