add more ui styles

app/views/devise/passwords/new.html.erb

@@ -1,12 +1,16 @@
-<h2>Forgot your password?</h2>
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render 'devise/shared/error_messages', resource: %>
-  <div class="field">
-    <%= f.label :email %><br>
-    <%= f.email_field :email, autofocus: true, autocomplete: 'email' %>
-  </div>
-  <div class="actions">
-    <%= f.submit 'Send me reset password instructions' %>
-  </div>
-<% end %>
-<%= render 'devise/shared/links' %>
+<div class="max-w-xl mx-auto px-2">
+  <h1 class="text-4xl font-bold text-center my-8">Forgot your password?</h1>
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'space-y-6' }) do |f| %>
+    <div class="space-y-2">
+      <%= render 'devise/shared/error_messages', resource: %>
+      <div class="form-control">
+        <%= f.label :email, class: 'label' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
+      </div>
+    </div>
+    <div class="form-control">
+      <%= f.submit 'Reset password', class: 'base-button' %>
+    </div>
+  <% end %>
+  <%= render 'devise/shared/links' %>
+</div>

app/views/devise/registrations/new.html.erb

@@ -1,34 +1,38 @@
-<h2>Sign up</h2>
-<%= form_for('', as: resource_name, url: registration_path) do |f| %>
-  <%= render 'devise/shared/error_messages', resource: %>
-  <%= f.fields_for resource do |ff| %>
-    <div>
-      <%= ff.label :first_name %>
-      <%= ff.text_field :first_name, required: true %>
+<div class="max-w-xl mx-auto px-2">
+  <h1 class="text-4xl font-bold text-center my-8">Sign up</h1>
+  <%= form_for('', as: resource_name, html: { class: 'space-y-6' }, url: registration_path) do |f| %>
+    <div class="space-y-2">
+      <%= render 'devise/shared/error_messages', resource: %>
+      <%= f.fields_for resource do |ff| %>
+        <div class="form-control">
+          <%= ff.label :first_name, class: 'label' %>
+          <%= ff.text_field :first_name, required: true, class: 'base-input' %>
+        </div>
+        <div class="form-control">
+          <%= ff.label :last_name, class: 'label' %>
+          <%= ff.text_field :last_name, required: true, class: 'base-input' %>
+        </div>
+      <% end %>
+      <%= f.fields_for resource.account do |ff| %>
+        <div class="form-control">
+          <%= ff.label :name, 'Company name', class: 'label' %>
+          <%= ff.text_field :name, required: true, class: 'base-input' %>
+        </div>
+      <% end %>
+      <%= f.fields_for resource do |ff| %>
+        <div class="form-control">
+          <%= ff.label :email, class: 'label' %>
+          <%= ff.email_field :email, required: true, class: 'base-input' %>
+        </div>
+        <div class="form-control">
+          <%= ff.label :password, class: 'label' %>
+          <%= ff.password_field :password, required: true, class: 'base-input' %>
+        </div>
+      <% end %>
     </div>
-    <div>
-      <%= ff.label :last_name %>
-      <%= ff.text_field :last_name, required: true %>
+    <div class="form-control">
+      <%= f.submit 'Sign up', class: 'base-button' %>
     </div>
   <% end %>
-  <%= f.fields_for resource.account do |ff| %>
-    <div>
-      <%= ff.label :name, 'Company name' %>
-      <%= ff.text_field :name, required: true %>
-    </div>
-  <% end %>
-  <%= f.fields_for resource do |ff| %>
-    <div>
-      <%= ff.label :email %>
-      <%= ff.email_field :email, required: true %>
-    </div>
-    <div>
-      <%= ff.label :password %>
-      <%= ff.password_field :password, required: true %>
-    </div>
-  <% end %>
-  <div class="actions">
-    <%= f.submit 'Sign up' %>
-  </div>
-<% end %>
-<%= render 'devise/shared/links' %>
+  <%= render 'devise/shared/links' %>
+</div>

app/views/devise/sessions/new.html.erb

@@ -1,23 +1,25 @@
 <div class="max-w-xl mx-auto px-2">
-  <h1 class="text-4xl font-bold text-center my-8">Log In 👋</h1>
-  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-    <div class="form-control">
-      <%= f.label :email, class: 'label' %>
-      <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
-    </div>
-    <div class="form-control mt-2">
-      <%= f.label :password, class: 'label' %>
-      <%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %>
-    </div>
-    <% if devise_mapping.rememberable? %>
-      <div class="form-control mt-2">
-        <%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %>
-          <%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %>
-          <span class="label">Remember me</span>
-        <% end %>
+  <h1 class="text-4xl font-bold text-center my-8">Log In</h1>
+  <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, url: session_path(resource_name)) do |f| %>
+    <div class="space-y-2">
+      <div class="form-control">
+        <%= f.label :email, class: 'label' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
       </div>
-    <% end %>
-    <div class="form-control my-4">
+      <div class="form-control">
+        <%= f.label :password, class: 'label' %>
+        <%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %>
+      </div>
+      <% if devise_mapping.rememberable? %>
+        <div class="form-control">
+          <%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %>
+            <%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %>
+            <span class="label">Remember me</span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <div class="form-control">
       <%= f.submit 'Log in', class: 'base-button' %>
     </div>
   <% end %>

app/views/devise/shared/_links.html.erb

@@ -1,25 +1,22 @@
-<%- if controller_name != 'sessions' %>
-  <%= link_to 'Log in', new_session_path(resource_name), class: 'link-hover' %><br>
-<% end %>
-
-<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-  <%= link_to 'Sign up', new_registration_path, class: 'link-hover' %><br>
-<% end %>
-
-<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-  <%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link-hover' %><br>
-<% end %>
-
-<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-  <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'link-hover' %><br>
-<% end %>
-
-<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-  <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: 'link-hover' %><br>
-<% end %>
-
-<%- if devise_mapping.omniauthable? %>
-  <%- resource_class.omniauth_providers.each do |provider| %>
-    <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br>
+<div class="flex justify-between mt-4">
+  <%- if controller_name != 'sessions' %>
+    <%= link_to 'Log in', new_session_path(resource_name), class: 'link link-hover' %>
   <% end %>
-<% end %>
+  <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
+    <%= link_to 'Sign up', new_registration_path, class: 'link link-hover' %>
+  <% end %>
+  <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
+    <%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link link-hover' %>
+  <% end %>
+  <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
+    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'link link-hover' %>
+  <% end %>
+  <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
+    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: 'link link-hover' %>
+  <% end %>
+  <%- if devise_mapping.omniauthable? %>
+    <%- resource_class.omniauth_providers.each do |provider| %>
+      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: 'link link-hover', data: { turbo: false } %>
+    <% end %>
+  <% end %>
+</div>