From 8d618d5e7f27787278dd15c69733c66b49d2652f Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 2 Dec 2024 23:03:38 +0100
Subject: [PATCH] refactor: :recycle: Rewrite code page

---
 pages/about/apps.vue | 41 -----------------------------------------
 pages/oauth/code.vue | 40 ++++++++++++++++++++--------------------
 2 files changed, 20 insertions(+), 61 deletions(-)
 delete mode 100644 pages/about/apps.vue

diff --git a/pages/about/apps.vue b/pages/about/apps.vue
deleted file mode 100644
index 25c17eb..0000000
--- a/pages/about/apps.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <div class="px-4 py-20 prose prose-invert mx-auto max-w-md">
-        <h2>Where is the mobile app?</h2>
-        <p>Versia Server is compatible with the Mastodon API, meaning it can be used with any Mastodon-compatible
-            client. This
-            includes the official Mastodon app, as well as many third-party clients.</p>
-        <h2>Recommended Clients</h2>
-        <ul class="w-full flex flex-col gap-3 mt-4 not-prose">
-            <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
-                <a :href="client.link" target="_blank"
-                    class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                    <img crossorigin="anonymous" :src="client.icon" class="h-10 w-10" :alt="`${client.name}'s logo'`" />
-                    <div class="flex flex-col justify-between items-start">
-                        <h2 class="text-gray-100 font-semibold">{{ client.name }}</h2>
-                        <span class="underline text-primary2-700">{{ client.link }}</span>
-                    </div>
-                </a>
-            </li>
-        </ul>
-        <p>
-            Many other clients exist, but <strong class="font-bold">they have not been tested for
-                compatibility</strong>. Bug reports are nevertheless welcome.
-        </p>
-
-        <h2>Main Issues</h2>
-        <ul>
-            <li>File uploads are inconsistent and don't work a lot of the time</li>
-        </ul>
-
-        <p>
-            Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                target="_blank" class="underline text-primary2-700">the issue tracker</a>.
-        </p>
-    </div>
-</template>
-
-<script lang="ts" setup>
-definePageMeta({
-    layout: "app",
-});
-</script>
\ No newline at end of file
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index a8dbed2..96a44d5 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -1,28 +1,28 @@
 <template>
-    <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
-
-        <div class="mx-auto max-w-md mt-10">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
-            </h1>
-            <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
-            </p>
-            <div class="prose prose-invert select-all mt-6">
-                <pre
-                    class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
-            </div>
-            <p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
-                to.
-            </p>
-
-            <p class="mt-6 text-lg leading-8 text-gray-300">
-                Found a problem? Report it on <a href="https://github.com/versia-pub/server/issues/new/choose"
-                    target="_blank" class="underline text-primary2-700">the issue tracker</a>.
-            </p>
-        </div>
+    <div class="h-svh flex items-center justify-center px-4">
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>Here's your code</CardTitle>
+                <CardDescription>You have signed in successfully.<br />Paste the following code into your app:
+                </CardDescription>
+            </CardHeader>
+            <CardContent class="grid">
+                <code
+                    class="rounded bg-muted px-4 py-2 border text-center w-full font-mono text-sm font-semibold select-all">{{ code }}</code>
+            </CardContent>
+        </Card>
     </div>
 </template>
 
 <script setup lang="ts">
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+
 const params = useUrlSearchParams();
 
 const code = params.code;