make forms uniform and prevent signup

app/views/achievements/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(model: achievement, local: true, class: "max-w-md mx-auto p-4 bg-gray-800 rounded-lg shadow-md") do |form| %>
+<%= form_with(model: achievement, local: true, class: "max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md") do |form| %>
   <% if achievement.errors.any? %>
     <div id="error_explanation" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded">
       <h2 class="font-bold mb-2"><%= pluralize(achievement.errors.count, 'error') %> prohibited this achievement from being saved:</h2>
@@ -39,3 +39,7 @@
     <%= form.submit 'Save', class: 'bg-lime-500 hover:bg-lime-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out' %>
   </div>
 <% end %>
+
+<div class="mt-4 text-center">
+  <%= link_to 'Back', achievements_path, class: 'text-lime-300 hover:text-lime-100 transition duration-300 ease-in-out' %>
+</div>

app/views/achievements/edit.html.erb

@@ -1,3 +1,3 @@
 <h1>Edit achievement</h1>
 <%= render 'form', achievement: @achievement %>
-<%= link_to 'Back', achievements_path, class: 'text-white hover:text-lime-300' %>
+

app/views/achievements/new.html.erb

@@ -1,3 +1,2 @@
 <h1>New Achievement</h1>
 <%= render 'form', achievement: @achievement %>
-<%= link_to 'Back', achievements_path, class: 'text-white hover:text-lime-300' %>

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

@@ -1,16 +1,20 @@
-<h2>Resend confirmation instructions</h2>
+<div class="max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md">
+  <h2 class="text-2xl font-bold mb-6 text-lime-200">Resend confirmation instructions</h2>
 
-<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+  <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-  </div>
+    <div>
+      <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
-  <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
-  </div>
-<% end %>
+    <div class="actions text-center">
+      <%= f.submit "Resend confirmation instructions", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
+    </div>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <div class="mt-4 text-center">
+    <%= render "devise/shared/links" %>
+  </div>
+</div>

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

@@ -1,25 +1,29 @@
-<h2>Change your password</h2>
+<div class="max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md">
+  <h2 class="text-2xl font-bold mb-6 text-lime-200">Change your password</h2>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
-  <%= f.hidden_field :reset_password_token %>
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
+    <%= f.hidden_field :reset_password_token %>
 
-  <div class="field">
-    <%= f.label :password, "New password" %><br />
-    <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
-    <% end %>
-    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
-  </div>
+    <div>
+      <%= f.label :password, "New password", class: 'block text-lime-200 font-semibold mb-2' %>
+      <% if @minimum_password_length %>
+        <em class="text-gray-400 text-sm">(<%= @minimum_password_length %> characters minimum)</em>
+      <% end %>
+      <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
-  <div class="field">
-    <%= f.label :password_confirmation, "Confirm new password" %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
+    <div>
+      <%= f.label :password_confirmation, "Confirm new password", class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
-  <div class="actions">
-    <%= f.submit "Change my password" %>
-  </div>
-<% end %>
+    <div class="actions text-center">
+      <%= f.submit "Change my password", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
+    </div>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <div class="mt-4 text-center">
+    <%= render "devise/shared/links" %>
+  </div>
+</div>

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

@@ -1,16 +1,20 @@
-<h2>Forgot your password?</h2>
+<div class="max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md">
+  <h2 class="text-2xl font-bold mb-6 text-lime-200">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: resource %>
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+    <div>
+      <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
-  </div>
-<% end %>
+    <div class="actions text-center">
+      <%= f.submit "Send me reset password instructions", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
+    </div>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <div class="mt-4 text-center">
+    <%= render "devise/shared/links" %>
+  </div>
+</div>

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

@@ -2,7 +2,7 @@
   <h2 class="text-2xl font-bold mb-6 text-lime-200">Edit <%= resource_name.to_s.humanize %></h2>
 
   <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "space-y-6" }) do |f| %>
-    <%= devise_error_messages! %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
     <div>
       <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
@@ -29,13 +29,16 @@
       <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
     </div>
 
-    <%= f.select :avatar_border, options_for_select([
-  ['White', 'white'],
-  ['Black', 'black'],
-  ['None', 'none'],
-  ['Rainbow', 'rainbow'],
-  ['Rainbow Overlay', 'rainbow-overlay']
-], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    <div>
+      <%= f.label :avatar_border, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.select :avatar_border, options_for_select([
+        ['White', 'white'],
+        ['Black', 'black'],
+        ['None', 'none'],
+        ['Rainbow', 'rainbow'],
+        ['Rainbow Overlay', 'rainbow-overlay']
+      ], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
     <div>
       <%= f.label :banner, class: 'block text-lime-200 font-semibold mb-2' %>
@@ -77,7 +80,7 @@
     </div>
 
     <div class="actions text-center mt-8">
-      <%= f.submit "Update", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded-sm text-sm uppercase tracking-wide transition duration-300 ease-in-out focus:outline-none' %>
+      <%= f.submit "Update", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
     </div>
   <% end %>
 
@@ -88,4 +91,6 @@
   </div>
 </div>
 
-<%= link_to 'Back', user_links_path(username: current_user.username), class: 'text-white hover:text-lime-300' %>
+<div class="mt-4 text-center">
+  <%= link_to 'Back', :back, class: 'text-lime-300 hover:text-lime-100 transition duration-300 ease-in-out' %>
+</div>

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

@@ -1,57 +1,63 @@
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= devise_error_messages! %>
-
-  <div class="mb-2">
-    <%= f.label :email, class: 'block text-gray-300 mb-1' %>
-    <%= f.email_field :email, autofocus: true, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :password, class: 'block text-gray-300 mb-1' %>
-    <% if @minimum_password_length %>
-      <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %>
-    <%= f.password_field :password, autocomplete: "off", class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :password_confirmation, class: 'block text-gray-300 mb-1' %>
-    <%= f.password_field :password_confirmation, autocomplete: "off", class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :username, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_field :username, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :full_name, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_field :full_name, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :tags, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :avatar, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_field :avatar, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :banner, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_field :banner, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="mb-2">
-    <%= f.label :description, class: 'block text-gray-300 mb-1' %>
-    <%= f.text_area :description, class: 'w-full p-1 rounded text-black' %>
-  </div>
-
-  <div class="actions">
-    <%= f.submit "Sign up", class: 'bg-lime-500 hover:bg-lime-700 text-white font-bold py-1 px-2 rounded' %>
-  </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+<div class="max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md">
+  <h2 class="text-2xl font-bold mb-6 text-lime-200">Sign up</h2>
+
+  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
+
+    <div>
+      <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :password, class: 'block text-lime-200 font-semibold mb-2' %>
+      <% if @minimum_password_length %>
+        <em class="text-gray-400 text-sm">(<%= @minimum_password_length %> characters minimum)</em>
+      <% end %>
+      <%= f.password_field :password, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :password_confirmation, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :username, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_field :username, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :full_name, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_field :full_name, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :tags, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_field :tags, value: @user.parsed_tags.join(', '), class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :avatar, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_field :avatar, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :banner, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_field :banner, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div>
+      <%= f.label :description, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.text_area :description, rows: 3, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <div class="actions text-center">
+      <%= f.submit "Sign up", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
+    </div>
+  <% end %>
+
+  <div class="mt-4 text-center">
+    <%= render "devise/shared/links" %>
+  </div>
+</div>

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

@@ -1,26 +1,32 @@
-<h2 class="text-2xl font-bold mb-4">Log in</h2>
+<div class="max-w-2xl mx-auto p-6 bg-gray-800 rounded-lg shadow-md">
+  <h2 class="text-2xl font-bold mb-6 text-lime-200">Log in</h2>
 
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="mb-2">
-    <%= f.label :email, class: 'block text-gray-300 mb-1' %>
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'w-full p-1 rounded text-black' %>
-  </div>
+  <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "space-y-6" }) do |f| %>
+    <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="mb-2">
-    <%= f.label :password, class: 'block text-gray-300 mb-1' %>
-    <%= f.password_field :password, autocomplete: "current-password", class: 'w-full p-1 rounded text-black' %>
-  </div>
+    <div>
+      <%= f.label :email, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
 
-  <% if devise_mapping.rememberable? %>
-    <div class="mb-2 flex items-center">
-      <%= f.check_box :remember_me, class: 'mr-2' %>
-      <%= f.label :remember_me, class: 'text-gray-300' %>
+    <div>
+      <%= f.label :password, class: 'block text-lime-200 font-semibold mb-2' %>
+      <%= f.password_field :password, autocomplete: "current-password", class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+    </div>
+
+    <% if devise_mapping.rememberable? %>
+      <div class="flex items-center">
+        <%= f.check_box :remember_me, class: 'mr-2' %>
+        <%= f.label :remember_me, class: 'text-lime-200 font-semibold' %>
+      </div>
+    <% end %>
+
+    <div class="actions text-center">
+      <%= f.submit "Log in", class: 'bg-lime-500 hover:bg-lime-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none' %>
     </div>
   <% end %>
 
-  <div class="actions mb-2">
-    <%= f.submit "Log in", class: 'bg-lime-500 hover:bg-lime-700 text-white font-bold py-1 px-2 rounded' %>
+  <div class="mt-4 text-center">
+    <%= render "devise/shared/links" %>
   </div>
-<% end %>
-
-<%= render "devise/shared/links" %>
+</div>

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

@@ -1,15 +1,15 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false">
-    <h2>
+  <div id="error_explanation" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert" data-turbo-cache="false">
+    <strong class="font-bold">
       <%= I18n.t("errors.messages.not_saved",
                  count: resource.errors.count,
                  resource: resource.class.model_name.human.downcase)
        %>
-    </h2>
-    <ul>
+    </strong>
+    <ul class="mt-2 list-disc list-inside">
       <% resource.errors.full_messages.each do |message| %>
         <li><%= message %></li>
       <% end %>
     </ul>
   </div>
-<% end %>
+<% end %>