ui: various qol/design improvements

app/account/layout.tsx

@@ -6,7 +6,7 @@ export default function AccountLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-screen bg-gray-900">{children}</div>
+    <div className="min-h-screen bg-background">{children}</div>
   )
 }
 

app/account/login/page.tsx

@@ -1,9 +1,10 @@
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
 import { auth, signIn } from "@/auth"
 import { redirect } from "next/navigation";
 import { SiAuthentik } from "react-icons/si"
+import { UserPlus } from "lucide-react"
 
 export default async function Login() {
   const session = await auth()
@@ -16,8 +17,7 @@ export default async function Login() {
     <div className="flex h-screen items-center justify-center">
       <Card className="w-full max-w-md">
         <CardHeader>
-          <CardTitle>Log in to your account</CardTitle>
+          <CardTitle className="text-4xl text-center">LibreCloud</CardTitle>
-          <CardDescription>If you still have a p0ntus mail account, select &#34;I don&apos;t have an account&#34;</CardDescription>
         </CardHeader>
         <CardContent>
           <form
@@ -28,16 +28,20 @@ export default async function Login() {
             }}
           >
             <Button type="submit" className="w-full">
-              <SiAuthentik className="h-4 w-4" />
+              <SiAuthentik />
               Sign in with Authentik
             </Button>
-            <div className="text-center">
             <Link href="/account/signup" className="text-sm underline">
-                I don&apos;t have an account
+              <Button variant="outline" className="w-full">
+                <UserPlus />
+                Create an Account
+              </Button>
             </Link>
-            </div>
           </form>
         </CardContent>
+        <CardFooter className="text-center">
+          <p className="text-sm text-muted-foreground -mt-3">If you still have a p0ntus mail account, select &#34;Create an Account&#34;</p>
+        </CardFooter>
       </Card>
     </div>
   )

app/account/signup/page.tsx

@@ -417,7 +417,7 @@ export default function Signup() {
                     </Select>
                   </div>
                   <p className="text-xs text-muted-foreground">
-                    A username for Authentik will be generated based on your email. Contact support if a username isn&apos;t available.
+                    A username for Authentik will be generated based on your email. <Link href="mailto:support@librecloud.cc" className="underline">Contact support</Link> if a username isn&apos;t available.
                   </p>
                 </div>
                 <div className="space-y-2">

components/cards/dashboard/Settings/ChangePassword.tsx

@@ -1,11 +1,11 @@
-"use client";
+"use client"
 
-import { useState } from "react";
+import React, { useState } from "react"
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label";
+import { Label } from "@/components/ui/label"
-import Link from "next/link";
+import { Mail, Key, Loader } from "lucide-react"
 
 export function ChangePassword() {
   const [newPassword, setNewPassword] = useState("");
@@ -46,8 +46,9 @@ export function ChangePassword() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Change Email Password</CardTitle>
+        <CardTitle className="flex items-center"><Mail size={18} className="mr-1" /> Change Email Password</CardTitle>
-        <CardDescription>Please note, this will <b>NOT</b> change your Authentik password. You can change that <Link href="">here</Link>.</CardDescription>
+        <CardDescription>Please note, this will <b>NOT</b> change your Authentik password.</CardDescription>
+        {/* TODO: please tell me you added password resets to authentik by now */}
       </CardHeader>
       <CardContent>
         <form onSubmit={handlePasswordChange} className="space-y-4">
@@ -61,7 +62,7 @@ export function ChangePassword() {
             />
           </div>
           <Button type="submit" disabled={loading}>
-            {loading ? "Changing..." : "Change Password"}
+            {loading ? <><Loader className="animate-spin" /> Changing...</> : <><Key /> Change Password</>}
           </Button>
           {message && <p className="text-sm text-center">{message}</p>}
         </form>