Refactor form input styles

* Fix issue where button is rendered taller in flexbox, due to default
  margin on input elements
* Refactor/improve all login and signup views

app/views/signup/steps.html.erb

@@ -5,19 +5,20 @@
      when 1 %>
     <h2>Choose a username</h2>
     <%= form_for @user, :url => signup_validate_url do |f| %>
-      <p>
-        <%= f.label :cn, 'Username', class: 'hidden' %>
-        <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-              class: 'text-xl w-full md:w-3/5 mb-1' %>
-        <span class="text-base md:text-xl text-gray-500 ml-1">@</span>
-        <span class="text-base md:text-xl text-gray-500">kosmos.org</span>
-      </p>
+      <div class="mb-6">
+        <p class="flex gap-2 items-center">
+          <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                                required: true, class: "relative grow text-xl"%>
+          <span class="relative shrink-0 text-gray-500 md:text-xl">
+            @ kosmos.org
+          </span>
+        </p>
+      </div>
       <% if @validation_error.present? %>
         <p class="error-msg">Username <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
 
@@ -27,14 +28,13 @@
       <p>
         <%= f.label :email, 'Email address', class: 'hidden' %>
         <%= f.email_field :email, autofocus: true, autocomplete: 'email',
-                                  class: 'text-xl w-full' %>
+                                  required: true, class: 'text-xl w-full' %>
       </p>
       <% if @validation_error.present? %>
         <p class="error-msg">Email <%= @validation_error %></p>
       <% end %>
       <p class="mt-12">
-        <%= f.submit "Continue",
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
 
@@ -44,8 +44,7 @@
     <%= form_for @user, :url => signup_validate_url do |f| %>
       <p>
         <%= f.label :password, 'Password', class: 'hidden' %>
-        <%= f.password_field :password, autofocus: true,
-                                        class: 'text-xl w-full' %>
+        <%= f.password_field :password, autofocus: true, class: 'text-xl w-full' %>
       </p>
       <% if @validation_error.present? %>
         <p class="error-msg">Password <%= @validation_error %></p>
@@ -55,8 +54,7 @@
         and Privacy Policy. Don't worry, they will be excellent!
       </p>
       <p class="mt-8">
-        <%= f.submit "Create account",
-              class: "btn-md btn-blue block w-full sm:inline-block sm:w-auto" %>
+        <%= f.submit "Create account", class: "btn-md btn-blue block w-full" %>
       </p>
     <% end %>
   <% end %>