internalization half-done

13 files changed, 223 insertions, 185 deletions

diff --git a/Website/_locales/en.ts b/Website/_locales/en.ts
index b255f99..4c5c5ee 100644
--- a/Website/_locales/en.ts
+++ b/Website/_locales/en.ts
@@ -2,81 +2,68 @@ import { en } from 'vuetify/src/locale'
 
 export default {
     ...en,
-    home: 'Home',
-    menu: {
-      install: 'Install',
-      api: 'API',
-      help: 'Help',
-      faq: 'FAQ',
-      donate: 'Donate',
-      links: 'Links',
-    },
     home: {
+        name: 'Home',
         title: 'Return YouTube Dislike',
         subtitle: 'Browser extension and an API that shows you dislikes on Youtube',
         install: 'Install',
-        supportUkraine: 'Support Ukraine',
+        ukraine: 'Support Ukraine',
         sponsors: 'Sponsors',
     },
     install: {
+        name: 'Install',
         title: 'Select Your Platform',
         subtitle: 'Available for Firefox and all Chromium browsers',
-        "other-platforms": 'Other Platforms',
-    }
-
-// INSTALL
-
-// Select Your Platform > Elige tu plataforma
-// Available for Firefox and all Chromium browsers > Disponible para Firefox y todos los navegadores Chromium
-// Other Platforms > Otras plataformas
-// If your browser is not yet supported, try this UserScript > Si tu navegador aún no es compatible, usa este UserScript
-// Third Party Implementations > Implementaciones de terceros
-// No liability on our side, use at your own risk > No nos hacemos responsables, úsalas bajo tu propio riesgo
-
-// API
-
-// Welcome to the official RYD docs! > ¡Bienvenido a la documentación oficial de RYD!
-// To get started, select a section from the menu. > Para empezar, elige una sección del menú.
-
-// - USAGE RIGHTS > Derechos de uso (1)
-// - URL INFORMATION > Información de URL (2)
-// - AVAIABLE ENDPOINTS > Endpoints disponibles (3)
-// - BASIC FETCHING TUTORIAL > Tutorial de consulta básica (4)
-
-// (1)
-
-// Usage Rights > Derechos de uso
-// Third party use of this open API is allowed with the following restrictions > El uso de terceros de esta API abierta se permite bajo las siguientes restricciones
-// Attribution: > Atribución
-// This project should be clearly attributed with either a link to this repo or a link to returnyoutubedislike.com > El proyecto debe estar claramente atribuido con un link a esta página o a returnyoutubedislike.com
-// Rate Limiting > Límites de velocidad
-// There are per client rate limits in place of 100 per minute and 10'000 per day > Hay límites de velocidad por cliente de 100 por minuto y 10.000 por día
-// This will return a 429 status code indicating that your application should back off > Esto regresará un código de estado 409 indicando que tu aplicación debe bajar la velocidad.
-
-// (2)
-
-// URL Information > Información de URL
-// The API is accessible over the following base URL > Esta API es accesible sobre la siguiente URL base
-// https://returnyoutubedislikeapi.com
-
-// (3)
-
-// Available Endpoints > Endpoints disponibles
-// List of available endpoints is available here: > La lista de los endpoints disponibles está disponible aquí:
-// https://returnyoutubedislikeapi.com/swagger/index.html
-
-// (4)
-
-// Basic Fetching Tutorial > Tutorial de consulta básica
-// Example to get votes of a given YouTube video ID > Ejemplo para obtener los votos del ID de un vídeo de YouTube
-// Example Request: > Consulta de ejemplo:
-// Request URL > URL de la consulta
-// Request Method > Método de la consulta
-// Headers: > Encabezados:
-// Response: > Respuesta:
-// An invalid YouTube ID will return status code 404 "Not Found" > Un ID de YouTube inválido responderá con el código de estado 404 "Not Found"
-// An incorrectly formatted YouTube ID will return 400 "Bad Request" > Un ID de YouTube con mal formato responderá con 400 "Bad Request"
-
+        title2: 'Other Platforms',
+        subtitle2: 'If your browser is not yet supported, try this UserScript',
+        title3: 'Third Party Implementations',
+        subtitle3: 'No liability on our side, use at your own risk',
+    },
+    api: {
+        name: 'API',
+        title: 'Welcome to the official RYD docs',
+        subtitle: 'To get started, select a section from the menu.',
+        rights: {
+            title: 'Usage Rights',
+            subtitle: 'Third party use of this open API is allowed with the following restrictions:',
+            bullet1: 'Attribution: ',
+            bullet1text: 'This project should be clearly attributed with either a link to this repo or a link to returnyoutubedislike.com',
+            bullet2: 'Rate Limiting',
+            bullet2text: 'There are per client rate limits in place of 100 per minute and 10,000 per day. This will return a 429 status code indicating that your application should back off',
+        },
+        url: {
+            title: 'URL Information',
+            subtitle: 'The API is accessible over the following base URL: ',
+        },
+        endpoints: {
+            title: 'Available Endpoints',
+            subtitle: 'List of available endpoints is available here: ',
+        },
+        fetching: {
+            title: 'Basic Fetching Tutorial',
+            subtitle: 'Example to get votes of a given YouTube video ID: ',
+            title2: 'Example Request: ',
+            url: 'Request URL: ',
+            method: 'Request Method: ',
+            headers: 'Headers: ',
+            response: 'Response: ',
+            error1: 'An invalid YouTube ID will return status code 404 "Not Found"',
+            error2: 'An incorrectly formatted YouTube ID will return 400 "Bad Request"'
+        },
+    },
+    help: {
+        name: 'Help',
+    },
+    faq: {
+        name: 'FAQ',
+    },
+    donate: {
+        name: 'Donate',
+    },
+    links: {
+        name: 'Links',
+    },
+}
 // HELP
 
 // Troubleshooting > Solución de problemas
@@ -134,5 +121,4 @@ export default {
 
 // Project Links > Links del proyecto
 // Links to the project and its developers > Links al proyecto y sus desarrolladores
-// Contact Me > Contactame
-}
\ No newline at end of file
+// Contact Me > Contactame
\ No newline at end of file
diff --git a/Website/_locales/es.ts b/Website/_locales/es.ts
index abcd0f1..ea3d368 100644
--- a/Website/_locales/es.ts
+++ b/Website/_locales/es.ts
@@ -1 +1,38 @@
 // BY ALEJANDRO GAYOL
+import { es } from 'vuetify/src/locale'
+
+export default {
+    ...es,
+    home: {
+        name: 'Inicio',
+        title: 'Regresar los Dislikes de YouTube',
+        subtitle: 'Una extensión de navegador y una API que te muestra los dislikes en YouTube',
+        install: 'Instalar',
+        ukraine: 'Apoya a Ucrania',
+        sponsors: 'Patrocinadores',
+    },
+    install: {
+        name: 'Instalar',
+        title: 'Elige tu plataforma',
+        subtitle: 'Disponible para Firefox y todos los navegadores Chromium',
+        title2: 'Otras plataformas',
+        subtitle2: 'Si tu navegador aún no es compatible, usa este UserScript',
+        title3: 'Implementaciones de terceros',
+        subtitle3: 'No nos hacemos responsables, úsalas bajo tu propio riesgo',
+    },
+    api: {
+        name: 'API',
+    },
+    help: {
+        name: 'Ayuda',
+    },
+    faq: {
+        name: 'FAQ',
+    },
+    donate: {
+        name: 'Donar',
+    },
+    links: {
+        name: 'Enlaces',
+    },
+}
\ No newline at end of file
diff --git a/Website/_locales/translation.txt b/Website/_locales/translation.txt
index c5fdb46..2b5dbb1 100644
--- a/Website/_locales/translation.txt
+++ b/Website/_locales/translation.txt
@@ -1,5 +1,4 @@
 TRANSLATION OF RYD WEBSITE TO SPANISH - BY ALEJANDRO GAYOL
-If something doesn't appear translated, it's the same in English and Spanish.
 
 MENU
 
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index f302605..761e357 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -8,7 +8,7 @@
       <!-- Translator desktop -->
       <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
-          {{ link.name }}
+          {{ $vuetify.lang.t(`$vuetify.${link.name}.name`) }}
         </v-tab>
       </v-tabs>
     </v-app-bar>
@@ -102,13 +102,13 @@
 export default {
   data: () => ({
     links: [
-      { name: "Home", path: "/" },
-      { name: "Install", path: "/install" },
-      { name: "API", path: "/docs" },
-      { name: "Help", path: "/help" },
-      { name: "FAQ", path: "/faq" },
-      { name: "Donate", path: "/donate" },
-      { name: "Links", path: "/links" },
+      { name: "home", path: "/" },
+      { name: "install", path: "/install" },
+      { name: "api", path: "/docs" },
+      { name: "help", path: "/help" },
+      { name: "faq", path: "/faq" },
+      { name: "donate", path: "/donate" },
+      { name: "links", path: "/links" },
     ],
     langs: [
       { name: "English", locale: "en" },
@@ -128,7 +128,6 @@ export default {
     if (process.client && navigator.language) {
       this.$vuetify.lang.current = navigator.language.slice(0, 2);
     }
-    console.log(this.$vuetify.lang);
     setTimeout(() => {
       // Chrome < 70 or FF < 60
       if (
diff --git a/Website/nuxt.config.js b/Website/nuxt.config.js
index 8ae58cb..f1171aa 100644
--- a/Website/nuxt.config.js
+++ b/Website/nuxt.config.js
@@ -2,6 +2,7 @@ import en from "./_locales/en";
 import es from "./_locales/es";
 import tr from "./_locales/tr";
 import ru from "./_locales/ru";
+
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue
index 2237af7..adb2a68 100644
--- a/Website/pages/docs.vue
+++ b/Website/pages/docs.vue
@@ -15,32 +15,34 @@
       "
     >
       <v-list-item
-        v-for="(item, i) in links"
+        v-for="(link, i) in links"
         :key="i"
-        :to="item.to"
+        :to="link.to"
         router
         class="mb-4"
         color="primary"
         style="overflow: hidden !important; border-radius: 0.75rem"
       >
         <v-list-item-title style="text-align: right">
-          <v-list-item-title v-text="item.text" />
+          <v-list-item-title
+            v-text="$vuetify.lang.t(`$vuetify.api.${link.name}.title`)"
+          />
         </v-list-item-title>
         <v-list-item-icon>
-          <v-icon v-text="item.icon" />
+          <v-icon v-text="link.icon" />
         </v-list-item-icon>
       </v-list-item>
     </v-list>
 
     <!-- docs content -->
     <v-card
-      class="text-left pa-8"
+      class="text-left pa-6"
       style="
         flex-grow: 2;
         height: max-content;
         max-width: 90vw !important;
         background-color: #222;
-        border-radius: 1rem;
+        border-radius: 0.75rem;
       "
     >
       <NuxtChild />
@@ -64,22 +66,22 @@ export default {
       //---   Links To Generate Above    ---//
       links: [
         {
-          text: "Usage Rights",
+          name: "rights",
           icon: "mdi-book-open-variant",
           to: "/docs/usage-rights",
         },
         {
-          text: "URL Information",
+          name: "url",
           icon: "mdi-web",
           to: "/docs/url",
         },
         {
-          text: "Available Endpoints",
+          name: "endpoints",
           icon: "mdi-transit-connection-variant",
           to: "/docs/endpoints",
         },
         {
-          text: "Basic Fetching Tutorial",
+          name: "fetching",
           icon: "mdi-school",
           to: "/docs/fetching",
         },
diff --git a/Website/pages/docs/endpoints.vue b/Website/pages/docs/endpoints.vue
index 2933af1..985a50f 100644
--- a/Website/pages/docs/endpoints.vue
+++ b/Website/pages/docs/endpoints.vue
@@ -1,8 +1,12 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Available Endpoints</h1>
-    List of available endpoints is available here:<br />
-    <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.endpoints.title") }}
+    </h2>
+    <div class="mt-4">
+      {{ $vuetify.lang.t("$vuetify.api.endpoints.subtitle") }}
+      <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
+    </div>
   </div>
 </template>
 
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index f3d9d1b..2f6562a 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -1,38 +1,46 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Basic Fetching Tutorial</h1>
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.title") }}
+    </h2>
 
-    <span>Example to get votes of a given YouTube video ID:</span>
-    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
-      >kxOuG8jMIgI</a
-    >
+    <div class="ma-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.subtitle") }}
 
-    <h2>Example Request:</h2>
-    <span>Request URL:</span>
-    <a
-      :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-      target="_blank"
-      v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    />
-    <br />
-    <span>
-      Request Method:
+      <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">
+        kxOuG8jMIgI
+      </a>
+    </div>
+
+    <h2 class="mt-4">{{ $vuetify.lang.t("$vuetify.api.fetching.title2") }}</h2>
+    <div class="ma-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.url") }}
+      <a
+        :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+        target="_blank"
+        v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
+      />
+      <br />
+      {{ $vuetify.lang.t("$vuetify.api.fetching.method") }}
       <a
         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
         target="_blank"
-        >HTTP/GET</a
       >
-    </span>
-    <br />
-    <span>Headers:</span>
-    <br />
+        HTTP/GET
+      </a>
+    </div>
+    <div class="mt-4 ml-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.headers") }}
+    </div>
     <div class="code pa-4">
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
       Pragma: no-cache<br />
       Cache-Control: no-cache<br />
       Connection: keep-alive
     </div>
-    <span>Response:</span><br />
+    <div class="mt-4 ml-2">
+      {{ $vuetify.lang.t("$vuetify.api.fetching.response") }}
+    </div>
     <div class="code pa-4">
       {
       <br />
@@ -46,13 +54,10 @@
       }
     </div>
     <br />
-    <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
-      ><br />
-      <span
-        >An incorrectly formatted YouTube ID will return 400 "Bad
-        Request".</span
-      >
+    <v-alert border="left" color="orange" text type="info" class="mb-0">
+      <span>{{ $vuetify.lang.t("$vuetify.api.fetching.error1") }}</span>
+      <br />
+      <span>{{ $vuetify.lang.t("$vuetify.api.fetching.error2") }}</span>
     </v-alert>
 
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
diff --git a/Website/pages/docs/index.vue b/Website/pages/docs/index.vue
index 1a18bb8..6df1d54 100644
--- a/Website/pages/docs/index.vue
+++ b/Website/pages/docs/index.vue
@@ -1,8 +1,6 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1>
-      Welcome to the <span class="primary--text">official RYD docs</span>!
-    </h1>
-    To get started, select a section from the menu.
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">{{ $vuetify.lang.t("$vuetify.api.title") }}!</h2>
+    <div class="mt-4">{{ $vuetify.lang.t("$vuetify.api.subtitle") }}</div>
   </div>
 </template>
diff --git a/Website/pages/docs/url.vue b/Website/pages/docs/url.vue
index 3de1158..5f83fa1 100644
--- a/Website/pages/docs/url.vue
+++ b/Website/pages/docs/url.vue
@@ -1,8 +1,12 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">URL Information</h1>
-    The API is accessible over the following base URL:<br />
-    <a :href="apiUrl" target="_blank" v-text="apiUrl" />
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.url.title") }}
+    </h2>
+    <div class="mt-4">
+      {{ $vuetify.lang.t("$vuetify.api.url.subtitle") }}
+      <a :href="apiUrl" target="_blank" v-text="apiUrl" />
+    </div>
   </div>
 </template>
 
diff --git a/Website/pages/docs/usage-rights.vue b/Website/pages/docs/usage-rights.vue
index 25fa8c1..60eabdf 100644
--- a/Website/pages/docs/usage-rights.vue
+++ b/Website/pages/docs/usage-rights.vue
@@ -1,30 +1,20 @@
 <template>
-  <div style="line-height: 3rem">
-    <h1 class="primary--text">Usage Rights</h1>
-    <p>
-      Third party use of this open API is allowed with the following
-      restrictions:
-    </p>
+  <div style="line-height: 2rem">
+    <h2 class="primary--text">
+      {{ $vuetify.lang.t("$vuetify.api.rights.title") }}
+    </h2>
+    <div class="my-4">
+      {{ $vuetify.lang.t("$vuetify.api.rights.subtitle") }}
+    </div>
     <ul>
-      <li>
-        <b>Attribution:</b> This project should be clearly attributed with
-        either a link to this repo or a link to returnyoutubedislike.com.
+      <li class="my-4">
+        <b>{{ $vuetify.lang.t("$vuetify.api.rights.bullet1") }}</b>
+        {{ $vuetify.lang.t("$vuetify.api.rights.bullet1text") }}
       </li>
-      <li>
-        <b>Rate Limiting:</b> There are per client rate limits in place of 100
-        per minute and 10'000 per day. This will return a 429 status code
-        indicating that your application should back off.
+      <li class="my-4">
+        <b>{{ $vuetify.lang.t("$vuetify.api.rights.bullet2") }}</b>
+        {{ $vuetify.lang.t("$vuetify.api.rights.bullet2text") }}
       </li>
     </ul>
   </div>
 </template>
-
-<style scoped>
-li {
-  margin-top: 0.5em;
-}
-
-b {
-  font-weight: 900 !important;
-}
-</style>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index 43773b0..d79e9b7 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -25,12 +25,12 @@
         />
       </svg>
 
-      <h1 class="title-text">Return YouTube Dislike</h1>
-      <div class="mb-4" style="color: #999">
-        <p style="margin-top: 0">
-          Browser extension and an API that shows you dislikes on Youtube
-        </p>
-      </div>
+      <h1 class="title-text">
+        {{ $vuetify.lang.t("$vuetify.home.title") }}
+      </h1>
+      <p class="mb-4" style="color: #999; margin-top: 0">
+        {{ $vuetify.lang.t("$vuetify.home.subtitle") }}
+      </p>
 
       <v-btn
         :to="installLink"
@@ -38,7 +38,7 @@
         style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em"
       >
         <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon>
-        Install
+        {{ $vuetify.lang.t("$vuetify.home.install") }}
       </v-btn>
 
       <br />
@@ -63,14 +63,16 @@
     <div id="support-ukraine" class="d-flex flex-column items-center py-2">
       <h3 class="mb-2">
         <v-img src="/ukraine-flag-xs.webp" width="42px" height="28px"></v-img>
-        <a href="https://helpukrainewin.org/">Support Ukraine</a>
+        <a href="https://helpukrainewin.org/">
+          {{ $vuetify.lang.t("$vuetify.home.ukraine") }}
+        </a>
       </h3>
     </div>
 
     <div id="biggest-supporters" class="d-flex flex-column items-center py-8">
       <h3 class="mb-4">
         <v-icon class="mb-2">mdi-heart</v-icon>
-        Sponsors
+        {{ $vuetify.lang.t("$vuetify.home.sponsors") }}
       </h3>
       <v-row class="justify-center mx-auto">
         <p v-for="sponsor in sponsors" :key="sponsor.name" class="sponsor">
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 7e030c9..5b7b9b6 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -2,12 +2,9 @@
   <div>
     <h1 class="title-text">{{ $vuetify.lang.t("$vuetify.install.title") }}</h1>
 
-    <div style="color: #999">
-      <p style="margin-bottom: 1rem">
-        Available for Firefox and all Chromium browsers
-        (Chrome/Edge/Opera/Brave).
-      </p>
-    </div>
+    <p style="color: #999; margin-bottom: 1rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle") }}
+    </p>
 
     <v-btn class="mainAltButton mb-2" :href="firefoxLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-firefox</v-icon>
@@ -46,12 +43,13 @@
       Brave
     </v-btn>
 
-    <h3 style="margin-top: 3em; margin-bottom: 0">Other Platforms</h3>
-    <div style="color: #999">
-      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
-        If your browser is not yet supported, try this UserScript.
-      </p>
-    </div>
+    <!-- Userscript -->
+    <h3 style="margin-top: 3em; margin-bottom: 0">
+      {{ $vuetify.lang.t("$vuetify.install.title2") }}
+    </h3>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 0.5rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle2") }}
+    </p>
 
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-script-text-outline</v-icon>
@@ -59,23 +57,36 @@
       <div style="font-size: 0.55rem">(Tampermonkey)</div>
     </v-btn>
 
-    <h3 style="margin-top: 3em">Third Party Implementations</h3>
-    <div style="color: #999">
-      <p style="margin-top: 0.5rem; margin-bottom: 0.5rem">
-        No liability on our side, use at your own risk.
-      </p>
-    </div>
+    <!-- 3rd party clients -->
+    <h3 style="margin-top: 3em">
+      {{ $vuetify.lang.t("$vuetify.install.title3") }}
+    </h3>
+    <p style="color: #999; margin-top: 0.5rem; margin-bottom: 0.5rem">
+      {{ $vuetify.lang.t("$vuetify.install.subtitle3") }}
+    </p>
     <v-btn class="mainAltButton" :href="androidNewPipe" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-android</v-icon>
-      Android (NewPipe fork)
+      Android &nbsp; <span style="font-size: 0.55rem">(NewPipe fork)</span>
     </v-btn>
-    <v-btn class="mainAltButton" :href="androidVueTube" target="_blank">
-      <v-icon style="margin-right: 0.5em">mdi-android</v-icon>
-      Android (VueTube)
+    <v-btn
+      class="mainAltButton"
+      style="color: #999"
+      :href="androidVueTube"
+      target="_blank"
+    >
+      <v-icon class="white--text">mdi-android</v-icon>
+      <v-icon>mdi-apple</v-icon>
+      <v-icon>mdi-linux</v-icon>
+      <v-icon style="margin-right: 0.5em">mdi-microsoft-windows</v-icon>
+      <div style="font-size: 0.75rem">
+        VueTube (WIP) <br />
+        <span style="font-size: 0.55rem">pre-alpha</span>
+      </div>
+      <v-icon style="margin-left: 0.5rem">mdi-hammer-wrench</v-icon>
     </v-btn>
     <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
       <v-icon style="margin-right: 0.5em">mdi-apple</v-icon>
-      iOS (Jailbroken)
+      iOS &nbsp; <span style="font-size: 0.55rem">(Jailbroken)</span>
     </v-btn>
   </div>
 </template>