From c92c914769130e266a8471a397cffd43ac109257 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 6 Apr 2022 12:08:43 -0400
Subject: [PATCH] feat: :sparkles: Update About Page

About page now uses material you :)
---
 NUXT/pages/mods/about.vue | 81 +++++++++++++++++++++++++++++----------
 1 file changed, 60 insertions(+), 21 deletions(-)

diff --git a/NUXT/pages/mods/about.vue b/NUXT/pages/mods/about.vue
index 44bdcfe..37e8638 100644
--- a/NUXT/pages/mods/about.vue
+++ b/NUXT/pages/mods/about.vue
@@ -1,5 +1,6 @@
 <template>
-  <center style="padding: 1em">
+  <div style="padding: 1em">
+    <center>
     <div class="row pa-4" style="flex-direction: column">
       <div>
         <v-img
@@ -8,28 +9,48 @@
           :class="$vuetify.theme.dark ? '' : 'invert'"
         />
       </div>
-      <v-spacer />
-      <div>
-        <h1 class="pageTitle mb-3">VueTube</h1>
-        <v-btn @click="openExternal('https://github.com/Frontesque/VueTube')"
-          ><v-icon>mdi-github</v-icon></v-btn
-        >
-        <v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')"
-          ><v-icon>mdi-discord</v-icon></v-btn
-        >
-      </div>
+      <h1 class="pageTitle mb-3">VueTube</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-title>App Information</v-card-title>
+      <v-card-text>App Version: {{ version.substring(0, 7) }}</v-card-text>
+    </v-card>
+    <!--   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-title>Device Information</v-card-title>
+      <v-card-text>
+        <h3>Platform</h3>
+        {{ deviceInfo.platform || "Unknown" }}<br>
+        <h3>Operating System</h3>
+        {{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
+        <h3>Model</h3>
+        {{ deviceInfo.model || "Unknown" }}<br>
+        <h3>Manufacturer</h3>
+        {{ deviceInfo.manufacturer || "Unknown" }}<br>
+        <h3>Emulator</h3>
+        {{ deviceInfo.isVirtual ? "yes" : "no" }}
+      </v-card-text>
+    </v-card>
+    <!--   End Device Information   -->
+
+    <!--   App Links   --->
+    <div class="obj">
+      <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-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-icon x-large class="actionIcon">mdi-discord</v-icon>
+        Discord
+      </v-btn>
     </div>
 
-    <h3 style="margin-top: 2em">App Information</h3>
-    <div>App Version: {{ version.substring(0, 7) }}</div>
-
-    <h3 style="margin-top: 1em">Device Information</h3>
-    <div>Platform: {{ deviceInfo.platform }}</div>
-    <div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
-    <div>Model: {{ deviceInfo.model }}</div>
-    <div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
-    <div>Emulator: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
-  </center>
+  </div>
 </template>
 
 <script>
@@ -37,6 +58,13 @@ 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,
@@ -60,4 +88,15 @@ export default {
 .pageTitle {
   margin-bottom: 1em;
 }
+.obj {
+  margin-top: 1em;
+}
+.action {
+  min-width: 100% !important;
+  min-height: 5em;
+  padding: 0 !important;
+}
+.actionIcon {
+  margin-right: 0.5em;
+}
 </style>