Merge pull request 'Refactor form input styles/layouts' (#100) from ui/form_inputs into master

Reviewed-on: #100

app/assets/stylesheets/components/forms.css

@@ -1,7 +1,7 @@
 @layer components {
   input[type=text], input[type=email], input[type=password],
   input[type=number], select, textarea {
-    @apply mt-1 rounded-md bg-gray-100 focus:bg-white
+    @apply rounded-md bg-gray-100 focus:bg-white
            border-transparent focus:border-transparent focus:ring-2
            focus:ring-blue-600 focus:ring-opacity-75;
   }

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

@@ -6,7 +6,7 @@
   <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
-      <%= f.label :email, 'Email address', class: 'block mb-1 w-full' %>
+      <%= f.label :email, 'Email address', class: 'block mb-2 font-bold' %>
       <%= f.email_field :email,
         required: true, autofocus: true, autocomplete: "email",
         value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
@@ -14,7 +14,7 @@
     </p>
     <p class="mt-8">
       <%= f.submit "Resend confirmation link",
-                   class: 'btn-md btn-blue w-full sm:w-auto' %>
+                   class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 

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

@@ -5,19 +5,21 @@
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
-    <p>
+    <div class="mb-6">
-      <%= f.label :cn, 'User', class: 'block' %>
+      <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
+      <p class="flex gap-2 items-center">
         <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                            required: true, class: "w-full md:w-3/5"%>
+                              required: true, class: "relative grow"%>
-      <span class="ml-1 text-gray-500">@ kosmos.org</span>
+        <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
       </p>
+    </div>
     <p>
-      <%= f.label :email, 'Email address', class: 'block' %>
+      <%= f.label :email, 'Email address', class: 'block mb-2 font-bold' %>
       <%= f.email_field :email, autocomplete: "email", required: true,
-                                class: "w-full md:w-3/5"%>
+                                class: "w-full"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full sm:w-auto' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 

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

@@ -3,19 +3,21 @@
 <%= render MainCompactComponent.new do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
-    <p>
+    <div class="mb-6">
-      <%= f.label :cn, 'User', class: 'block' %>
+      <%= f.label :cn, 'User', class: 'block mb-2 font-bold' %>
+      <p class="flex gap-2 items-center">
         <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-                            class: "w-full md:w-3/5"%>
+                              required: true, class: "relative grow"%>
-      <span class="ml-1 text-gray-500">@ kosmos.org</span>
+        <span class="relative shrink-0 text-gray-500">@ kosmos.org</span>
       </p>
+    </div>
     <p>
-      <%= f.label :password, class: 'block' %>
+      <%= f.label :password, class: 'block mb-2 font-bold' %>
       <%= f.password_field :password, autocomplete: "current-password",
-                                      class: "w-full md:w-3/5"%>
+                                      required: true, class: "w-full"%>
     </p>
     <p class="mt-8">
-      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full' %>
     </p>
   <% end %>
 

app/views/invitations/index.html.erb

@@ -6,14 +6,13 @@
       <p class="mb-8">
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-      <ul>
+      <ul class="md:w-3/4">
         <% @invitations_unused.each do |invitation| %>
-          <li class="font-mono mb-1 flex gap-1 md:block"
+          <li class="font-mono mb-2 flex gap-1" data-controller="clipboard">
-              data-controller="clipboard">
+            <input type="text" disabled class="relative grow"
-            <input type="text" disabled class="md:w-3/4 flex-1"
                    value="<%= invitation_url(invitation.token) %>"
                    data-clipboard-target="source" />
-            <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+            <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0 w-auto"
                     data-clipboard-target="trigger" data-action="clipboard#copy"
                     title="Copy to clipboard">
               <span class="content-initial">

app/views/settings/profile/index.html.erb

@@ -3,14 +3,14 @@
 <%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
   <section>
     <h3>Profile</h3>
-    <p class="mb-1">
+    <p class="mb-2">
       <%= label :user_address, 'User address', class: 'font-bold' %>
     </p>
-    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
+    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:w-3/5">
-      <input type="text" id="user_address" class="flex-1 sm:w-3/5"
+      <input type="text" id="user_address" class="grow"
              value=<%= @user.address %> disabled="disabled"
              data-clipboard-target="source" />
-      <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+      <button id="copy-user-address" class="btn-md btn-icon btn-blue shrink-0"
               data-clipboard-target="trigger" data-action="clipboard#copy"
               title="Copy to clipboard">
         <span class="content-initial">

app/views/signup/index.html.erb

@@ -11,6 +11,6 @@
   </p>
   <p class="mt-12">
     <%= link_to "Get started", signup_steps_path(1),
-          class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
+          class: "btn-md btn-blue block w-full" %>
   </p>
 <% end %>

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>
+      <div class="mb-6">
-        <%= f.label :cn, 'Username', class: 'hidden' %>
+        <p class="flex gap-2 items-center">
           <%= f.text_field :cn, autofocus: true, autocomplete: "username",
-              class: 'text-xl w-full md:w-3/5 mb-1' %>
+                                required: true, class: "relative grow text-xl"%>
-        <span class="text-base md:text-xl text-gray-500 ml-1">@</span>
+          <span class="relative shrink-0 text-gray-500 md:text-xl">
-        <span class="text-base md:text-xl text-gray-500">kosmos.org</span>
+            @ 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",
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </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",
+        <%= f.submit "Continue", class: "btn-md btn-blue block w-full" %>
-              class: "btn-md btn-blue block w-full md:inline-block sm:w-auto" %>
       </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,
+        <%= f.password_field :password, autofocus: true, class: 'text-xl w-full' %>
-                                        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",
+        <%= f.submit "Create account", class: "btn-md btn-blue block w-full" %>
-              class: "btn-md btn-blue block w-full sm:inline-block sm:w-auto" %>
       </p>
     <% end %>
   <% end %>