From c753373a1f4b0b4c06d912aee00e21a85fd55f80 Mon Sep 17 00:00:00 2001
From: weeb <weeb@lolispace.moe>
Date: Fri, 2 May 2025 12:12:20 +0200
Subject: [PATCH] Improve design

---
 .../views/livewire/application-form.blade.php | 37 ++++-----
 .../livewire/application-status.blade.php     | 77 ++++++++-----------
 2 files changed, 50 insertions(+), 64 deletions(-)

diff --git a/resources/views/livewire/application-form.blade.php b/resources/views/livewire/application-form.blade.php
index 1e76bac..41c1cce 100644
--- a/resources/views/livewire/application-form.blade.php
+++ b/resources/views/livewire/application-form.blade.php
@@ -1,36 +1,31 @@
-<div class="max-w-2xl mx-auto mt-10 flex flex-col gap-6">
+<div class="max-w-2xl w-full md:w-xl mx-auto mt-10 flex flex-col gap-6">
     @if (session()->has('message'))
         @if ($applicationUuid)
-            <div class="p-5 mb-4 dark:bg-green-600/50 rounded-lg">
-                <flux:heading>Your application has been submitted</flux:heading>
-                <flux:text class="mt-2">
-                    You can check its status here: <flux:link
+            <flux:callout variant="success" icon="check-circle">
+                <flux:callout.heading>Your application has been submitted.</flux:callout.heading>
+                <flux:callout.text>
+                    You can check its status here: <flux:callout.link
                         href="{{ route('application', ['uuid' => $applicationUuid]) }}">View Application Status
-                    </flux:link>
-                </flux:text>
-                <flux:text class="mt-2">
-                    Please save or bookmark that link, as the approval process can take roughly 24-48 hours.
-                </flux:text>
-            </div>
+                    </flux:callout.link>
+                    <br>Please save or bookmark that link, as the approval process can take 24-48 hours.
+                </flux:callout.text>
+            </flux:callout>
         @endif
     @endif
 
     @if (!$applicationUuid)
         <form wire:submit.prevent="submit" enctype="multipart/form-data">
-            <div class="mb-6">
-                <div class="p-5 mb-4 dark:bg-pink-950/50 rounded-lg">
-                    <flux:heading>Here you can submit your application</flux:heading>
-                    <flux:text class="mt-2">
-                        To apply, simply fill out the form below and upload at least one loli photo.
+            <div class="flex flex-col gap-4 mb-6">
+                <flux:callout variant="secondary" icon="information-circle" heading="Here you can submit your application."
+                    text="To apply, simply fill out the form below and upload at least one loli photo.
                         After submitting, you'll receive a unique link — make sure to save it! You can use that
                         link to check the status of your application, and if everything is approved, you'll also
-                        receive
-                        your registration token there.
-                    </flux:text>
-                </div>
+                        receive your registration token there." />
+
                 <flux:textarea wire:model="message" label="Why do you want to join?" placeholder="Cunny 😭" />
-                <br>
+
                 <flux:input type="file" wire:model="photos" label="Loli Photos (max. 8MB)" multiple />
+
                 <div class="mt-4">
                     <div class="flex">
                         <flux:input label="Captcha" wire:model.defer="captchaInput" />
diff --git a/resources/views/livewire/application-status.blade.php b/resources/views/livewire/application-status.blade.php
index 24bc873..7eb7e40 100644
--- a/resources/views/livewire/application-status.blade.php
+++ b/resources/views/livewire/application-status.blade.php
@@ -1,47 +1,16 @@
-<div wire:poll.10s="loadApplication" class="max-w-2xl mx-auto mt-10 flex flex-col gap-6">
-    <div class="max-w-2xl md:w-2xl mx-auto mt-10">
-        @if ($application->status === 0)
-            <div class="p-5 mb-4 dark:bg-pink-950/50 rounded-lg">
-            @elseif ($application->status === 1)
-                <div class="p-5 mb-4 dark:bg-green-950/50 rounded-lg">
-                @elseif ($application->status === 2)
-                    <div class="p-5 mb-4 dark:bg-red-950/50 rounded-lg">
-        @endif
-
-        <flux:heading size="xl">Application</flux:heading>
-        @php
-            $status = [
-                0 => 'Pending Review',
-                1 => 'Approved',
-                2 => 'Denied',
-            ];
-        @endphp
-        <flux:text class="mt-2">
-            <p>
-                <strong>Status:</strong>
-                {{ $status[$application->status] }}
-            </p>
-            @if ($application->registration_token)
-                <p class="pt-2 pb-2">
-                    <strong>Registration Token (valid until
-                        {{ $application->updated_at->addWeek()->format('Y-m-d') }})</strong>
-                </p>
-                <flux:input class="mb-2" icon="key" value="{{ $application->registration_token }}" readonly
-                    copyable />
-                To sign up, you should use <flux:link href="https://element.lolispace.moe">Element Web</flux:link> or
-                Element Desktop, as the authentication token is not compatible
-                with the mobile clients.
-            @endif
-        </flux:text>
-    </div>
+<div wire:poll.10s="loadApplication" class="max-w-2xl w-full md:w-xl mx-auto mt-10 flex flex-col gap-6">
 
     @if ($application->status === 0)
-        <div class="p-5 mb-4 dark:bg-pink-950/50 rounded-lg">
-            <flux:heading size="xl">Message</flux:heading>
-            <flux:text class="mt-2">
-                {{ $application->message }}
-            </flux:text>
-        </div>
+        <flux:callout variant="warning" icon="exclamation-circle">
+            <flux:callout.heading>Application pending</flux:callout.heading>
+            <flux:callout.text>
+                Your application is waiting for review. This process can take 24-48 hours.
+                <br>
+                This site automatically refreshes, no need to reload manually.
+            </flux:callout.text>
+        </flux:callout>
+
+        <flux:callout variant="secondary" icon="information-circle" heading="Message" text="{{ $application->message }}" />
 
         <h2 class="mt-4 font-semibold">Uploaded Photos:</h2>
         <div class="flex flex-wrap gap-4 mt-4">
@@ -52,6 +21,28 @@
                 </div>
             @endforeach
         </div>
+    @elseif($application->status === 1)
+        <flux:callout variant="success" icon="check-circle">
+            <flux:callout.heading>Application approved</flux:callout.heading>
+            <flux:callout.text>
+                @if ($application->registration_token)
+                    <p class="pt-2 pb-2">
+                        <strong>Registration Token (valid until
+                            {{ $application->updated_at->addWeek()->format('Y-m-d') }})</strong>
+                    </p>
+                    <flux:input class="mb-2" icon="key" value="{{ $application->registration_token }}" readonly
+                        copyable />
+                    To sign up, you should use <flux:callout.link href="https://element.lolispace.moe">Element Web
+                    </flux:callout.link>
+                    or
+                    Element Desktop, as the registration token is not compatible
+                    with the mobile clients.
+                @endif
+            </flux:callout.text>
+        </flux:callout>
+    @elseif($application->status === 2)
+        <flux:callout variant="danger" icon="x-circle" heading="Application denied"
+            text="Your application has been denied. You can create a new application." />
     @endif
-</div>
+
 </div>