friends/lib/friends_web/templates/user_session/new.html.heex

@@ -6,23 +6,19 @@
       <p><%= @error_message %></p>
     </div>
   <% end %>
-  <ul class="w-1/2 pl-0 flex flex-col gap-6">
-    <li class="flex flex-row gap-4">
-      <%= label f, :email, class: "w-1/3" %>
-      <%= email_input f, :email, required: true %>
-    </li>
-    <li class="flex flex-row gap-4">
-      <%= label f, :password, class: "w-1/3"  %>
-      <%= password_input f, :password, required: true %>
-    </li>
-      <li class="flex flex-row gap-4">
-        <%= label f, :remember_me, "Keep me logged in for 60 days", class: "w-fit"  %>
-        <%= checkbox f, :remember_me %>
-      </li>
-    <li class="flex">
-      <%= submit "Log in", class: "btn btn-primary" %>
-    </li>
-  </ul>
+
+  <%= label f, :email %>
+  <%= email_input f, :email, required: true %>
+
+  <%= label f, :password %>
+  <%= password_input f, :password, required: true %>
+
+  <%= label f, :remember_me, "Keep me logged in for 60 days" %>
+  <%= checkbox f, :remember_me %>
+
+  <div>
+    <%= submit "Log in" %>
+  </div>
 </.form>
 
 <p>

friends/lib/friends_web/templates/user_settings/edit.html.heex

@@ -1,78 +1,53 @@
 <h1>Settings</h1>
 
-<div class="flex gap-16 flex-col md:flex-row justify-evenly">
-  <.form 
-    let={f} 
-    for={@email_changeset} 
-    action={Routes.user_settings_path(@conn, :update)} 
-    id="update_email"
-    class="w-max"
-    >
-    <%= if @email_changeset.action do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
-      </div>
-    <% end %>
+<h3>Change email</h3>
 
-    <%= hidden_input f, :action, name: "action", value: "update_email" %>
+<.form let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_email">
+  <%= if @email_changeset.action do %>
+    <div class="alert alert-danger">
+      <p>Oops, something went wrong! Please check the errors below.</p>
+    </div>
+  <% end %>
 
+  <%= hidden_input f, :action, name: "action", value: "update_email" %>
 
-    <h3>Change email</h3>
-        <ul class="w-full pl-0 flex flex-col gap-6">
+  <%= label f, :email %>
+  <%= email_input f, :email, required: true %>
+  <%= error_tag f, :email %>
 
-      <li class="flex flex-row gap-4">
-        <%= label f, :email, class: "w-1/3" %>
-        <%= email_input f, :email, required: true %>
-        <%= error_tag f, :email %>
-      </li>
-      <li class="flex flex-row gap-4">
-        <%= label f, :current_password, for: "current_password_for_email", class: "w-1/3"  %>
-        <%= password_input f, :password, required: true %>
-        <%= error_tag f, :current_password %>
-      </li>
-      <li class="flex place-self-stretch">
-        <%= submit "Change email", class: "btn btn-primary" %>
-      </li>
-    </ul>
-  </.form>
+  <%= label f, :current_password, for: "current_password_for_email" %>
+  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
+  <%= error_tag f, :current_password %>
 
-  <.form 
-  let={f} 
-  for={@password_changeset} 
-  action={Routes.user_settings_path(@conn, :update)} 
-  id="update_password"
-  class="w-max"
-  >
-  
-  <h3>Change password</h3>
-  
-    <ul class="w-full pl-0 flex flex-col gap-6 md:h-full">
-    <%= if @password_changeset.action do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
-      </div>
-    <% end %>
+  <div>
+    <%= submit "Change email" %>
+  </div>
+</.form>
 
-    <%= hidden_input f, :action, name: "action", value: "update_password" %>
+<h3>Change password</h3>
 
-      <li class="flex flex-row gap-4">
-        <%= label f, :current_password, for: "current_password_for_password", class: "w-1/3" %>
-        <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
-        <%= error_tag f, :current_password %>
-      </li>
-      <li class="flex flex-row gap-4">
-        <%= label f, :password, "New password", class: "w-1/3" %>
-        <%= password_input f, :password, required: true, class: "shrink-0" %>
-        <%= error_tag f, :password %>
-      </li>
-      <li class="flex flex-row gap-4">    
-        <%= label f, :password_confirmation, "Confirm new password", class: "w-1/3" %>
-        <%= password_input f, :password_confirmation, required: true %>
-        <%= error_tag f, :password_confirmation %>
-      </li>
-      <li class="flex">
-        <%= submit "Change password", class: "btn btn-primary" %>
-      </li>
-    </ul>
-  </.form>
-</div>
+<.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password">
+  <%= if @password_changeset.action do %>
+    <div class="alert alert-danger">
+      <p>Oops, something went wrong! Please check the errors below.</p>
+    </div>
+  <% end %>
+
+  <%= hidden_input f, :action, name: "action", value: "update_password" %>
+
+  <%= label f, :password, "New password" %>
+  <%= password_input f, :password, required: true %>
+  <%= error_tag f, :password %>
+
+  <%= label f, :password_confirmation, "Confirm new password" %>
+  <%= password_input f, :password_confirmation, required: true %>
+  <%= error_tag f, :password_confirmation %>
+
+  <%= label f, :current_password, for: "current_password_for_password" %>
+  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
+  <%= error_tag f, :current_password %>
+
+  <div>
+    <%= submit "Change password" %>
+  </div>
+</.form>