From d584f1f047672d42f478ae3258c48db85a5acd89 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 12 Dec 2022 02:39:11 -0500
Subject: [PATCH] update page text themed, install pages touchups

---
 NUXT/components/Settings/language.vue | 68 ++++++++++++--------
 NUXT/pages/activities/install.vue     | 93 ++++++++++++++++-----------
 NUXT/pages/mods/updates.vue           | 24 +++++--
 3 files changed, 116 insertions(+), 69 deletions(-)

diff --git a/NUXT/components/Settings/language.vue b/NUXT/components/Settings/language.vue
index bd2a4cd..f5ce7dd 100644
--- a/NUXT/components/Settings/language.vue
+++ b/NUXT/components/Settings/language.vue
@@ -1,27 +1,42 @@
 <template>
-<div>
-  <v-select
-    v-model="selectedLang"
-    background-color="background"
-    :items="langs"
-    label="App Language"
-    solo
-    rounded
-  />
+  <div>
+    <v-select
+      v-model="selectedLang"
+      background-color="background"
+      style="border-radius: 0.75rem"
+      :menu-props="{
+        bottom: true,
+        offsetY: true,
+        rounded: 'lg',
+        nudgeTop: -8,
+        maxHeight: 228,
+        transition: 'slide-y-transition',
+      }"
+      label="App Language"
+      :items="langs"
+      outlined
+    />
 
-  <v-dialog v-model="restart" width="500">
-    <v-card class="rounded-lg" :class=" $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1' " >
-      <v-card-title class="text-h5">{{ lang.global.restart }}</v-card-title>
-      <v-card-text>{{ lang.global.settingRestart }}</v-card-text>
-      <v-divider />
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn text @click="restart = false">{{ lang.global.later }}</v-btn>
-        <v-btn color="primary" text @click="restartApp()">{{ lang.global.restart }}</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</div>
+    <v-dialog v-model="restart" width="500">
+      <v-card
+        class="rounded-lg"
+        :class="
+          $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
+        "
+      >
+        <v-card-title class="text-h5">{{ lang.global.restart }}</v-card-title>
+        <v-card-text>{{ lang.global.settingRestart }}</v-card-text>
+        <v-divider />
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text @click="restart = false">{{ lang.global.later }}</v-btn>
+          <v-btn color="primary" text @click="restartApp()">{{
+            lang.global.restart
+          }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script>
@@ -34,16 +49,15 @@ export default {
       restart: false,
 
       //---   Required To Prvent Initial Popup   ---//
-      userChanged: false
+      userChanged: false,
     };
   },
 
   watch: {
     //---   Update Stored Language Value   ---//
     selectedLang: function (newVal) {
-
       //---   Required To Prvent Initial Popup   ---//
-      if (this.userChanged == false) return this.userChanged = true;
+      if (this.userChanged == false) return (this.userChanged = true);
 
       //---   Change Lang Stuff   ---//
       const langs = this.$lang(null, true);
@@ -73,7 +87,7 @@ export default {
   methods: {
     restartApp() {
       this.$router.replace("/");
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/NUXT/pages/activities/install.vue b/NUXT/pages/activities/install.vue
index ae8d763..b812a1a 100644
--- a/NUXT/pages/activities/install.vue
+++ b/NUXT/pages/activities/install.vue
@@ -1,22 +1,23 @@
 <template>
   <div>
-    <center class="container" ref="stage0">
+    <center ref="stage0" class="container">
       <v-img
         src="/icon.svg"
         width="10rem"
         height="10rem"
         :class="$vuetify.theme.dark ? '' : 'invert'"
       />
+      <div style="height: 3rem" />
       <h1>{{ lang.welcome }}</h1>
-      <p>{{ lang.tagline }}</p>
+      <div>{{ lang.tagline }}</div>
     </center>
 
-    <center class="container hidden" ref="stage1">
-      <h1>{{ lang.langsetup }}</h1>
+    <center ref="stage1" class="container hidden">
+      <h2 class="mb-8">{{ lang.langsetup }}</h2>
       <language style="width: 80%" />
     </center>
 
-<!--
+    <!--
     <center class="container hidden" ref="stage2">
       <v-autocomplete
       label="API"
@@ -29,50 +30,47 @@
     </center>
 -->
 
-    <center class="container hidden" ref="stage2">
-      <h1>{{ lang.featuresetup }}</h1>
-      <v-checkbox disabled v-model="ryd" :label="lang.enableryd" />
-      <v-checkbox disabled v-model="sponsorBlock" :label="lang.enablespb" />
+    <center ref="stage2" class="container hidden">
+      <h2 class="mb-2">{{ lang.featuresetup }}</h2>
+      <v-checkbox
+        v-model="ryd"
+        :label="lang.enableryd"
+        style="width: 80%"
+        disabled
+      />
+      <v-checkbox
+        v-model="sponsorBlock"
+        :label="lang.enablespb"
+        style="width: 80%"
+        disabled
+      />
     </center>
-    <center class="container hidden" ref="stage3">
-      <h1>{{ lang.thanks }}</h1>
-      <h3>{{ lang.enjoy }}</h3>
+    <center ref="stage3" class="container hidden" style="width: 80%">
+      <h2 class="mb-2">💕</h2>
+      <h2 class="mb-2">
+        {{ lang.thanks }}
+      </h2>
+      <h4>{{ lang.enjoy }}</h4>
     </center>
 
-    <v-btn @click="next()" class="rounded-xl primary nextButton"
-      >{{ lang.next }}
-      <v-icon style="margin-left: 0.5em">mdi-arrow-right</v-icon></v-btn
+    <v-btn
+      class="primary nextButton"
+      style="border-radius: 0.75rem"
+      @click="next()"
     >
+      {{ lang.next }}
+      <v-icon style="margin-left: 0.5em">mdi-arrow-right</v-icon>
+    </v-btn>
   </div>
 </template>
 
-<style scoped>
-.nextButton {
-  position: absolute;
-  bottom: 1em;
-  right: 2em;
-}
-
-.hidden {
-  display: none;
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.container {
-  width: 100%;
-}
-</style>
-
 <script>
 import language from "~/components/Settings/language.vue";
 export default {
-  layout: "empty",
   components: {
     language,
   },
+  layout: "empty",
   data() {
     return {
       lang: {},
@@ -80,7 +78,7 @@ export default {
 
       ryd: true,
       sponsorBlock: true,
-      apis: ["youtube.com", "twitch.tv", "odysee.com"]
+      apis: ["youtube.com", "twitch.tv", "odysee.com"],
     };
   },
   mounted() {
@@ -102,3 +100,24 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.nextButton {
+  padding-right: 0.5rem !important;
+  position: absolute;
+  bottom: 1rem;
+  right: 10%;
+}
+
+.hidden {
+  display: none;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+}
+</style>
diff --git a/NUXT/pages/mods/updates.vue b/NUXT/pages/mods/updates.vue
index b9fa68b..0a9c385 100644
--- a/NUXT/pages/mods/updates.vue
+++ b/NUXT/pages/mods/updates.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="padding: 2em">
-    <v-icon x-large color="primary" style="padding-bottom: 0.25em">
+  <div style="padding: 2rem; padding-bottom: 4rem">
+    <v-icon x-large color="primary" style="padding-bottom: 0.25rem">
       mdi-cellphone-arrow-down
     </v-icon>
 
@@ -48,7 +48,11 @@
       </div>
       <div>{{ lang.latest }}: {{ latestVersion.tag_name }}</div>
 
-      <div style="margin-top: 1em; color: #999">
+      <div
+        style="margin-top: 1em"
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
         <div>
           {{ lang.published }}:
           {{ new Date(update.created_at).toLocaleString() }}
@@ -60,8 +64,18 @@
         <div>{{ lang.users }}: {{ update.download_count }}</div>
       </div>
 
-      <div style="margin-top: 1em; color: #999"><b>Changelog</b></div>
-      <p style="white-space: pre-line; color: #999">
+      <div
+        style="margin-top: 1em"
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
+        <b>Changelog</b>
+      </div>
+      <p
+        style="white-space: pre-line"
+        class="background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      >
         {{ latestVersion.body.trim() }}
       </p>