Implement suggestions

cesium · Sep 17, 2023 · 0f9f4df · 0f9f4df
1 parent bb88414
commit 0f9f4df
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/lib/atomic_web/templates/user_registration/new.html.heex b/lib/atomic_web/templates/user_registration/new.html.heex
@@ -24,35 +24,39 @@
         ) %>
         <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :email) %></span>
       </div>
-      <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
-        <%= label(f, :password, class: "sr-only") %>
-        <%= password_input(f, :password,
-          required: true,
-          placeholder: gettext("Password"),
-          autocomplete: "current-password",
-          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0"
-        ) %>
-        <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye class="w-5 h-auto fill-black hover:fill-black" />
-        </div>
-        <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye_off class="w-5 h-auto fill-black hover:fill-black" />
+      <div class="flex flex-col items-center justify-center">
+        <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
+          <%= label(f, :password, class: "sr-only") %>
+          <%= password_input(f, :password,
+            required: true,
+            placeholder: gettext("Password"),
+            autocomplete: "current-password",
+            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+          ) %>
+          <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
+            <Ionicons.Filled.eye class="w-5 h-auto fill-black hover:fill-black" />
+          </div>
+          <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
+            <Ionicons.Filled.eye_off class="w-5 h-auto fill-black hover:fill-black" />
+          </div>
         </div>
       </div>
       <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password) %></span>
-      <div x-data="{ hide_confirm: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none  sm:text-sm">
-        <%= label(f, :password_confirmation, class: "sr-only") %>
-        <%= password_input(f, :password_confirmation,
-          required: true,
-          placeholder: gettext("Confirm password"),
-          autocomplete: "current-password",
-          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0"
-        ) %>
-        <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye class="w-5 h-auto fill-black hover:fill-black" />
-        </div>
-        <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye_off class="w-5 h-auto fill-black hover:fill-black" />
+      <div class="flex flex-col items-center justify-center">
+        <div x-data="{ hide_confirm: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1  sm:text-sm">
+          <%= label(f, :password_confirmation, class: "sr-only") %>
+          <%= password_input(f, :password_confirmation,
+            required: true,
+            placeholder: gettext("Confirm password"),
+            autocomplete: "current-password",
+            class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:outline-none focus:ring-0 sm:text-sm"
+          ) %>
+          <div x-show="hide_confirm" x-on:click="hide_confirm = false; document.getElementById('user_password_confirmation').type = 'text';" class="px-2 w-fit cursor-pointer">
+            <Ionicons.Filled.eye class="w-5 h-auto fill-black hover:fill-black" />
+          </div>
+          <div x-show="!hide_confirm" x-on:click="hide_confirm = true; document.getElementById('user_password_confirmation').type = 'password';" class="px-2 w-fit cursor-pointer">
+            <Ionicons.Filled.eye_off class="w-5 h-auto fill-black hover:fill-black" />
+          </div>
         </div>
       </div>
       <span class="text-sm w-full sm:w-96 mx-4 text-red-600"><%= error_tag(f, :password_confirmation) %></span>

diff --git a/lib/atomic_web/templates/user_session/new.html.heex b/lib/atomic_web/templates/user_session/new.html.heex
@@ -23,19 +23,19 @@
           class: "relative w-96 appearance-none rounded border border-zinc-300 text-zinc-900 placeholder-zinc-500 focus:z-10 focus:border-orange-400 focus:ring-orange-400 focus:outline-none sm:text-sm"
         ) %>
       </div>
-      <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:outline-none sm:text-sm">
+      <div x-data="{ hide: true }" class="flex flex-row items-center justify-center w-full block border border-zinc-300 rounded placeholder-zinc-500 focus-within:z-10 focus-within:border-orange-400 focus-within:ring-orange-400 focus-within:ring-1 sm:text-sm">
         <%= label(f, :password, class: "sr-only") %>
         <%= password_input(f, :password,
           required: true,
           placeholder: gettext("Password"),
           autocomplete: "current-password",
-          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0"
+          class: "relative w-full border-0 text-zinc-900 rounded appearance-none outline-none focus:ring-0 sm:text-sm"
         ) %>
         <div x-show="hide" x-on:click="hide = false; document.getElementById('user_password').type = 'text';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye class="w-5 h-auto fill-black hover:fill-black" />
+          <Ionicons.Filled.eye class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
         <div x-show="!hide" x-on:click="hide = true; document.getElementById('user_password').type = 'password';" class="px-2 w-fit cursor-pointer">
-          <Ionicons.Filled.eye_off class="w-5 h-auto fill-black hover:fill-black" />
+          <Ionicons.Filled.eye_off class="w-5 h-auto fill-zinc-900 hover:fill-black" />
         </div>
       </div>
     </div>