Clean up user confirmation page

upmaru · Feb 24, 2024 · caa35f5 · caa35f5
1 parent 1d3c81a
commit caa35f5
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/lib/polar_web/live/user_confirmation_live.ex b/lib/polar_web/live/user_confirmation_live.ex
@@ -5,20 +5,28 @@ defmodule PolarWeb.UserConfirmationLive do
 
   def render(%{live_action: :edit} = assigns) do
     ~H"""
-    <div class="mx-auto max-w-sm">
-      <.header class="text-center">Confirm Account</.header>
+    <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <.header class="sm:mx-auto sm:w-full sm:max-w-md text-center">
+        <h1 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
+          <%= gettext("Confirm Account") %>
+        </h1>
+      </.header>
 
-      <.simple_form for={@form} id="confirmation_form" phx-submit="confirm_account">
-        <.input field={@form[:token]} type="hidden" />
-        <:actions>
-          <.button phx-disable-with="Confirming..." class="w-full">Confirm my account</.button>
-        </:actions>
-      </.simple_form>
-
-      <p class="text-center mt-4">
-        <.link href={~p"/users/register"}>Register</.link>
-        | <.link href={~p"/users/log_in"}>Log in</.link>
-      </p>
+      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
+        <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+          <.simple_form for={@form} id="confirmation_form" phx-submit="confirm_account">
+            <.input field={@form[:token]} type="hidden" />
+            <:actions>
+              <.button
+                class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold leading-6 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                phx-disable-with="Confirming..."
+              >
+                Confirm my account
+              </.button>
+            </:actions>
+          </.simple_form>
+        </div>
+      </div>
     </div>
     """
   end