Clean up forgot password page

upmaru · Feb 23, 2024 · e677aab · e677aab
1 parent 3260e2d
commit e677aab
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/lib/polar_web/components/core_components.ex b/lib/polar_web/components/core_components.ex
@@ -434,9 +434,7 @@ defmodule PolarWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8 text-slate-800">
-          <%= render_slot(@inner_block) %>
-        </h1>
+        <%= render_slot(@inner_block) %>
         <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-slate-50">
           <%= render_slot(@subtitle) %>
         </p>

diff --git a/lib/polar_web/live/user_forgot_password_live.ex b/lib/polar_web/live/user_forgot_password_live.ex
@@ -5,23 +5,41 @@ defmodule PolarWeb.UserForgotPasswordLive do
 
   def render(assigns) do
     ~H"""
-    <div class="mx-auto max-w-sm">
-      <.header class="text-center">
-        Forgot your password?
-        <:subtitle>We'll send a password reset link to your inbox</:subtitle>
+    <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">
+        <img class="mx-auto h-10 w-auto" src={~p"/images/opsmaru-logo.png"} alt="opsmaru.com" />
+        <h1 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
+          <%= gettext("Forgot your password?") %>
+        </h1>
+        <:subtitle><%= gettext("We'll send a password reset link to your inbox") %></:subtitle>
       </.header>
 
-      <.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
-        <.input field={@form[:email]} type="email" placeholder="Email" required />
-        <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
-            Send password reset instructions
-          </.button>
-        </:actions>
-      </.simple_form>
-      <p class="text-center text-sm mt-4">
-        <.link href={~p"/users/register"}>Register</.link>
-        | <.link href={~p"/users/log_in"}>Log in</.link>
+      <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="reset_password_form" phx-submit="send_email">
+            <.input field={@form[:email]} type="email" placeholder="Email" required />
+            <:actions>
+              <.button phx-disable-with="Sending..." class="w-full bg-indigo-600 hover:bg-indigo-500">
+                Send password reset instructions
+              </.button>
+            </:actions>
+          </.simple_form>
+        </div>
+      </div>
+      <p class="text-center text-sm mt-8">
+        <.link
+          class="font-semibold text-brand hover:underline text-indigo-400"
+          href={~p"/users/register"}
+        >
+          <%= gettext("Register") %>
+        </.link>
+        <.icon name="hero-ellipsis-vertical-solid" class="h-4 w-4 text-white" />
+        <.link
+          class="font-semibold text-brand hover:underline text-indigo-400"
+          href={~p"/users/log_in"}
+        >
+          <%= gettext("Log in") %>
+        </.link>
       </p>
     </div>
     """

diff --git a/lib/polar_web/live/user_login_live.ex b/lib/polar_web/live/user_login_live.ex
@@ -6,9 +6,9 @@ defmodule PolarWeb.UserLoginLive do
     <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">
         <img class="mx-auto h-10 w-auto" src={~p"/images/opsmaru-logo.png"} alt="opsmaru.com" />
-        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
+        <h1 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
           <%= gettext("Sign in to your account") %>
-        </h2>
+        </h1>
         <:subtitle>
           <%= gettext("Don't have an account?") %>
           <.link navigate={~p"/users/register"} class="font-semibold text-brand hover:underline">

diff --git a/lib/polar_web/live/user_registration_live.ex b/lib/polar_web/live/user_registration_live.ex
@@ -9,9 +9,9 @@ defmodule PolarWeb.UserRegistrationLive do
     <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">
         <img class="mx-auto h-10 w-auto" src={~p"/images/opsmaru-logo.png"} alt="opsmaru.com" />
-        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
+        <h1 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-white">
           <%= gettext("Register for an account") %>
-        </h2>
+        </h1>
         <:subtitle>
           <%= gettext("Already registered?") %>
           <.link navigate={~p"/users/log_in"} class="font-semibold text-brand hover:underline">