From 1fc37f0912f476940bb30f6e09fd86a6dd35e4ee Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Thu, 31 Mar 2022 02:01:29 -0400
Subject: [PATCH] theming adjustments throughout the app

---
 .../compactChannelRenderer.vue                |  6 ++-
 .../CompactRenderers/compactVideoRenderer.vue |  6 ++-
 .../SectionRenderers/itemSectionRenderer.vue  |  3 +-
 .../SectionRenderers/shelfRenderer.vue        |  3 +-
 NUXT/components/topNavigation.vue             |  4 +-
 NUXT/layouts/error.vue                        |  7 +++-
 NUXT/pages/library.vue                        | 18 ++++++++-
 NUXT/pages/mods/tweaks.vue                    | 40 ++++++++++---------
 NUXT/pages/subscriptions.vue                  | 18 ++++++++-
 9 files changed, 76 insertions(+), 29 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactChannelRenderer.vue b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
index 4ca289e..a0adc38 100644
--- a/NUXT/components/CompactRenderers/compactChannelRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
@@ -29,7 +29,11 @@
           {{ title.text }}
         </div>
 
-        <div class="grey--text caption" v-text="parseBottom(video)" />
+        <div
+          class="caption background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="parseBottom(video)"
+        />
       </v-card-text>
     </div>
   </v-card>
diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index 88a2a60..89cf445 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -52,7 +52,11 @@
           {{ title.text }}
         </div>
 
-        <div class="grey--text caption" v-text="parseBottom(video)" />
+        <div
+          class="background--text caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="parseBottom(video)"
+        />
       </v-card-text>
     </div>
   </v-card>
diff --git a/NUXT/components/SectionRenderers/itemSectionRenderer.vue b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
index b31aa59..f786cdc 100644
--- a/NUXT/components/SectionRenderers/itemSectionRenderer.vue
+++ b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
@@ -16,7 +16,8 @@
       v-if="
         render.separatorDetails && render.separatorDetails.hasBottomSeparator
       "
-      class="separator-bottom grey"
+      class="separator-bottom background"
+      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
       :style="{ height: render.separatorDetails.height + 'px' }"
     ></div>
   </div>
diff --git a/NUXT/components/SectionRenderers/shelfRenderer.vue b/NUXT/components/SectionRenderers/shelfRenderer.vue
index f0c4913..14f108f 100644
--- a/NUXT/components/SectionRenderers/shelfRenderer.vue
+++ b/NUXT/components/SectionRenderers/shelfRenderer.vue
@@ -13,7 +13,8 @@
     ></component>
     <div
       v-if="render.separator && render.separator.hasBottomSeparator"
-      class="separator-bottom grey"
+      class="separator-bottom background"
+      :class="$vuetify.theme.dark ? 'lighten-4' : 'darken-4'"
       :style="{ height: render.separator.height + 'px' }"
     ></div>
   </div>
diff --git a/NUXT/components/topNavigation.vue b/NUXT/components/topNavigation.vue
index 9f80c0d..2db250e 100644
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@@ -22,7 +22,9 @@
       flat
       label="Search"
       style="margin-top: 1px"
-      background-color="background lighten-1"
+      :background-color="
+        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+      "
       @input="$emit('text-changed', text)"
       @keyup.enter="$emit('search-btn', text)"
     />
diff --git a/NUXT/layouts/error.vue b/NUXT/layouts/error.vue
index 5e24331..df04e8e 100644
--- a/NUXT/layouts/error.vue
+++ b/NUXT/layouts/error.vue
@@ -2,7 +2,12 @@
   <v-app>
     <center>
       <v-icon size="100">mdi-alert-circle</v-icon>
-      <h1 class="grey--text">An error occured!</h1>
+      <h1
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        An error occured!
+      </h1>
       <v-btn to="/">Reload Application</v-btn>
       <v-btn to="/logs">Show Logs</v-btn>
 
diff --git a/NUXT/pages/library.vue b/NUXT/pages/library.vue
index a835c0a..b06568b 100644
--- a/NUXT/pages/library.vue
+++ b/NUXT/pages/library.vue
@@ -5,7 +5,21 @@
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1 class="grey--text">Page Under Construction</h1>
-    <p class="grey--text">Please read the VueTube FAQ for more information.</p>
+    <h1
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Page Under Construction
+    </h1>
+    <p
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Please read the VueTube FAQ for more information.
+    </p>
   </center>
 </template>
+
+<script>
+export default {};
+</script>
diff --git a/NUXT/pages/mods/tweaks.vue b/NUXT/pages/mods/tweaks.vue
index e32809d..1395bce 100644
--- a/NUXT/pages/mods/tweaks.vue
+++ b/NUXT/pages/mods/tweaks.vue
@@ -1,25 +1,27 @@
 <template>
   <div class="d-flex flex-column justify-end" style="min-height: 100%">
-    <h4 class="mx-10">Layout</h4>
-    <v-card flat class="px-4 mx-4 mb-4 mt-2 background lighten-1 rounded-xl">
-      <v-switch disabled label="Dense Navbars" />
-      <v-switch class="mt-0" disabled label="Disable Top Bar" />
-      <!-- <v-switch class="mt-6" disabled label="Reverse (disabled)" /> -->
-    </v-card>
-    <h4 class="mx-10">Rounded Corners</h4>
-    <v-card flat class="px-4 mx-4 mb-4 mt-2 background lighten-1 rounded-xl">
-      <v-switch disabled label="Reverse (disabled)" />
-      <v-slider
-        disabled
-        class="mr-2"
-        label="Outer (disabled)"
-        :max="4"
-        step="1"
-        thumb-size="64"
-      ></v-slider>
+    <v-card
+      flat
+      class="px-4 ma-4 mt-2 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{
+        borderRadius: `${roundTweak / 2}rem`,
+      }"
+    >
+      <h3 class="mt-4">Rounded Corners</h3>
+      <div
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        applies to only a few elements for now
+      </div>
+      <!-- TODO: outer radius -->
+      <!-- TODO: Dense Navbar -->
+      <!-- TODO: Disable Top Bar -->
+      <!-- TODO: Top and Bottom bar color selection -->
       <v-slider
         v-model="roundTweak"
-        class="mr-2"
+        class="mr-2 mt-5"
         label="Inner"
         :max="4"
         step="1"
@@ -28,7 +30,7 @@
       >
         <template #thumb-label="{ value }">
           <div
-            class="pa-4 white text-red red-text red--text"
+            class="pa-4 background text-red red-text red--text"
             :style="{ borderRadius: value * 3 + 'px !important' }"
           ></div>
         </template>
diff --git a/NUXT/pages/subscriptions.vue b/NUXT/pages/subscriptions.vue
index a835c0a..b06568b 100644
--- a/NUXT/pages/subscriptions.vue
+++ b/NUXT/pages/subscriptions.vue
@@ -5,7 +5,21 @@
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1 class="grey--text">Page Under Construction</h1>
-    <p class="grey--text">Please read the VueTube FAQ for more information.</p>
+    <h1
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Page Under Construction
+    </h1>
+    <p
+      class="background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+    >
+      Please read the VueTube FAQ for more information.
+    </p>
   </center>
 </template>
+
+<script>
+export default {};
+</script>