Redesign user settings form

Motivation is that I wanna add NeoPass stuff to here! But also like,
it's looked bad for a long time, let's clean it up!! (I just used the
Devise default without any styling at all lol)

app/assets/stylesheets/_layout.sass

@@ -82,7 +82,7 @@ $container_width: 800px
 input, button, select, label
   cursor: pointer
 
-input[type=text], input[type=password], input[type=search], input[type=number], select, textarea
+input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
   border-radius: 3px
   background: #fff
   border: 1px solid $input-border-color

app/assets/stylesheets/devise/registrations/edit.sass

@@ -0,0 +1,46 @@
+@import "../../partials/clean/constants"
+
+.settings-form
+	border: 1px solid $module-border-color
+	background: $module-bg-color
+	border-radius: 1em
+	padding: 1em 1.25em
+
+	h2
+		font-size: 1.5rem
+		margin-bottom: .25em
+
+	.hint
+		font-style: italic
+		font-size: .85em
+		opacity: .9
+
+	fieldset
+		padding-block: .5em
+
+	fieldset:not(:last-of-type)
+		border-bottom: 1px solid $module-border-color
+		margin-bottom: .5em
+
+	.field
+		margin-bottom: 1em
+
+		.field_with_errors
+			display: inline
+
+		label
+			font-weight: bold
+
+	.error-explanation
+		color: $error-color
+		background: $error-bg-color
+		border: 1px solid $error-border-color
+		border-radius: .5em
+		padding: .5em
+		margin-bottom: .5em
+
+		header
+			font-weight: bold
+
+		ul
+			padding-left: 2em

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

@@ -1,44 +1,57 @@
 <h2>Settings</h2>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
+<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, class: "settings-form" }) do |f| %>
+  <h2>Your info</h2>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
+  <fieldset>
-    <%= f.label :name, 'Username' %><br />
+    <div class="field">
-    <%= f.text_field :name, autofocus: true, autocomplete: "username" %>
+      <%= f.label :name, 'DTI Username' %>
-  </div>
+      <span class="hint">Use this to log in to Dress to Impress!</span>
-
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
-
-  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
-    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
-  <% end %>
-
-  <div class="field">
-    <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-    <% if @minimum_password_length %>
       <br />
-      <em><%= @minimum_password_length %> characters minimum</em>
+      <%= f.text_field :name, autocomplete: "username" %>
-    <% end %>
+    </div>
-  </div>
 
-  <div class="field">
+    <div class="field">
-    <%= f.label :password_confirmation %><br />
+      <%= f.label :email %>
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+      <span class="hint">This can help you recover your account later.</span>
-  </div>
+      <br />
+      <%= f.email_field :email, autocomplete: "email" %>
+    </div>
+  </fieldset>
 
-  <div class="field">
+  <fieldset>
-    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+    <div class="field">
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
+      <%= f.label :password, "New password" %>
-  </div>
+      <span class="hint">Leave blank if you don't want to change it.</span>
+      <br />
+      <%= f.password_field :password, autocomplete: "new-password" %>
+      <% if @minimum_password_length %>
+        <br />
+        <span class="hint"><%= @minimum_password_length %> characters minimum</span>
+      <% end %>
+    </div>
+
+    <div class="field">
+      <%= f.label :password_confirmation, "New password confirmation" %><br />
+      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+    </div>
+  </fieldset>
+
+  <fieldset>
+    <div class="field">
+      <%= f.label :current_password %>
+      <span class="hint">We need your current password to confirm your changes.</span>
+      <br />
+      <%= f.password_field :current_password, autocomplete: "current-password" %>
+    </div>
+  </fieldset>
 
   <div class="actions">
-    <%= f.submit "Update" %>
+    <%= f.submit "Save changes" %>
   </div>
 <% end %>
 
-<%= link_to "Back", :back %>
+<% content_for :stylesheets do %>
+  <%= stylesheet_link_tag "devise/registrations/edit" %>
+<% end %>

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

@@ -1,11 +1,9 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false">
+  <div class="error-explanation" data-turbo-cache="false">
-    <h2>
+    <header>
-      <%= I18n.t("errors.messages.not_saved",
+      <%= I18n.t("errors.messages.not_saved", count: resource.errors.count,
-                 count: resource.errors.count,
+                 resource: "user") %>
-                 resource: resource.class.model_name.human.downcase)
+    </header>
-       %>
-    </h2>
     <ul>
       <% resource.errors.full_messages.each do |message| %>
         <li><%= message %></li>