minor fixes

NUXT/components/bottomNavigation.vue

@@ -75,6 +75,7 @@ export default {
 <style scoped>
 .bottomNav {
   /* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
+  box-shadow: none !important;
   /* ios gesture nav */
   bottom: env(safe-area-inset-bottom) !important;
   height: 4rem !important;

NUXT/components/topNavigation.vue

@@ -114,6 +114,7 @@ export default {
 <style scoped>
 .topNav {
   /* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
+  box-shadow: none !important;
   /* ios notch */
   top: env(safe-area-inset-top) !important;
   position: fixed;

NUXT/layouts/default.vue

@@ -10,7 +10,7 @@
       @scroll-to-top="$refs.pgscroll.scrollTop = 0"
     />
 
-    <div style="height: 100%; margin-top: 4rem">
+    <div style="height: 100%; margin-top: 4rem; padding-bottom: 4rem">
       <div v-show="!search">
         <!-- class="scrollcontainer" -->
         <!-- style="overflow: hidden; height: calc(100vh - 8rem)" -->
@@ -56,7 +56,6 @@
   </v-app>
 </template>
 
-
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
@@ -94,7 +93,7 @@ export default {
   },
 
   mounted() {
-    this.$vuetube.resetBackActions();
+    if (!process.browser) this.$vuetube.resetBackActions();
 
     // ---   External URL Handling   --- //
     CapacitorApp.addListener("appUrlOpen", (event) => {

NUXT/pages/home.vue

@@ -22,6 +22,9 @@ import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import Observer from "~/components/observer.vue";
 export default {
   components: { horizontalListRenderer, VidLoadRenderer, Observer },
+  data: () => ({
+    loading: false,
+  }),
 
   computed: {
     recommends: {
@@ -33,11 +36,6 @@ export default {
       },
     },
   },
-
-  data: () => ({
-    loading: false,
-  }),
-
   methods: {
     paginate() {
       this.loading = true;

NUXT/pages/mods/about.vue

@@ -1,20 +1,30 @@
 <template>
-  <div style="padding: 1em">
+  <div style="padding: 1rem">
     <center>
-    <div class="row pa-4" style="flex-direction: column">
+      <div class="d-flex justify-center pa-4">
         <div>
           <v-img
+            width="27px"
             src="/icon.svg"
-          width="100px"
+            style="transform: rotate(90deg); filter: drop-shadow(0.1px 0.1px 0px #fff) drop-shadow(0.1px -0.1px 0px #fff);"
             :class="$vuetify.theme.dark ? '' : 'invert'"
           />
         </div>
-      <h1 class="pageTitle mb-3">VueTube</h1>
+        <h1 style="font-size: 2rem; margin-left: -1px; margin-top: -9px">
+          ueTube
+        </h1>
       </div>
     </center>
 
     <!--   App Information   -->
-    <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+    <v-card
+      flat
+      class="obj"
+      :class="
+        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+      "
+      :style="{ borderRadius: `${roundTweak / 2}rem` }"
+    >
       <v-card-title>App Information</v-card-title>
       <v-card-text>
         <h3>App Version</h3>
@@ -24,17 +34,26 @@
     <!--   End App Information   -->
 
     <!--   Device Information   -->
-    <v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+    <v-card
+      flat
+      class="obj"
+      :class="
+        $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+      "
+      :style="{ borderRadius: `${roundTweak / 2}rem` }"
+    >
       <v-card-title>Device Information</v-card-title>
       <v-card-text>
         <h3>Platform</h3>
-        {{ deviceInfo.platform || "Unknown" }}<br>
+        {{ deviceInfo.platform || "Unknown" }}<br />
         <h3>Operating System</h3>
-        {{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
+        {{ deviceInfo.operatingSystem || "Unknown" }} ({{
+          deviceInfo.osVersion || "Unknown"
+        }})<br />
         <h3>Model</h3>
-        {{ deviceInfo.model || "Unknown" }}<br>
+        {{ deviceInfo.model || "Unknown" }}<br />
         <h3>Manufacturer</h3>
-        {{ deviceInfo.manufacturer || "Unknown" }}<br>
+        {{ deviceInfo.manufacturer || "Unknown" }}<br />
         <h3>Emulator</h3>
         {{ deviceInfo.isVirtual ? "yes" : "no" }}
       </v-card-text>
@@ -42,17 +61,32 @@
     <!--   End Device Information   -->
 
     <!--   App Links   --->
-    <div class="obj">
+    <div class="obj d-flex flex-row gap-1">
-      <v-btn @click="openExternal('https://github.com/Frontesque/VueTube')" class="action"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+      <v-btn
+        depressed
+        class="action col"
+        :class="
+          $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+        "
+        :style="{ borderRadius: `${roundTweak / 2}rem` }"
+        @click="openExternal('https://github.com/Frontesque/VueTube')"
+      >
         <v-icon x-large class="actionIcon">mdi-github</v-icon>
         Github
       </v-btn>
-      <v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')" class="action obj"  :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+      <v-btn
+        depressed
+        class="action col ml-4"
+        :class="
+          $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+        "
+        :style="{ borderRadius: `${roundTweak / 2}rem` }"
+        @click="openExternal('https://discord.gg/7P8KJrdd5W')"
+      >
         <v-icon x-large class="actionIcon">mdi-discord</v-icon>
         Discord
       </v-btn>
     </div>
-
   </div>
 </template>
 
@@ -61,19 +95,17 @@ import { Browser } from "@capacitor/browser";
 import { Device } from "@capacitor/device";
 
 export default {
-
-  computed: {
-    roundTweak() {
-      return this.$store.state.tweaks.roundTweak;
-    }
-  },
-
   data() {
     return {
       version: process.env.appVersion,
       deviceInfo: "",
     };
   },
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
+    },
+  },
 
   async mounted() {
     const info = await Device.getInfo();
@@ -88,16 +120,12 @@ export default {
 </script>
 
 <style scoped>
-.pageTitle {
-  margin-bottom: 1em;
-}
 .obj {
   margin-top: 1em;
 }
 .action {
-  min-width: 100% !important;
   min-height: 5em;
-  padding: 0 !important;
+  padding: 1rem;
 }
 .actionIcon {
   margin-right: 0.5em;

NUXT/pages/mods/theme.vue

@@ -1,6 +1,9 @@
 <template>
   <client-only>
-    <div class="d-flex flex-column justify-end" style="min-height: 100%">
+    <div
+      class="d-flex flex-column justify-end"
+      style="min-height: calc(100vh - 8rem)"
+    >
       <!-- ----------------------------------------------Background Colors------------------------ -->
       <v-radio-group v-model="$vuetify.theme.currentTheme.background">
         <div
@@ -103,7 +106,7 @@
       <!-- ----------------------------------------------Mode Switch------------------------ -->
       <v-card
         flat
-        class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
+        class="d-flex flex-row justify-between mx-8 mb-8 px-4 background rounded-lg"
         :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
         @click="
           ($vuetify.theme.dark = !$vuetify.theme.dark),

NUXT/pages/mods/tweaks.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="d-flex flex-column justify-end" style="min-height: 100%">
+  <div
+    class="d-flex flex-column justify-end"
+    style="min-height: calc(100vh - 8rem)"
+  >
     <v-card
       flat
       class="mb-4 background"
@@ -38,9 +41,9 @@
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
-        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
       }"
     >
+      <!-- margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0', -->
       <h3 class="mt-5">Rounded Corners</h3>
       <div
         class="background--text"