From b6949acc96087d134bada2b685596563505a6903 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Tue, 9 Feb 2021 20:32:10 +0100 Subject: [PATCH] Style forms, migrate more styles to Tailwind --- app/assets/stylesheets/forms.scss | 31 -------- app/assets/stylesheets/layout.scss | 4 - app/javascript/stylesheets/application.scss | 2 + app/javascript/stylesheets/buttons.scss | 9 +-- app/javascript/stylesheets/forms.scss | 17 ++++ app/javascript/stylesheets/links.scss | 14 ++++ app/javascript/stylesheets/tailwind.config.js | 4 +- app/views/admin/donations/_form.html.erb | 8 +- app/views/admin/donations/edit.html.erb | 2 +- app/views/admin/donations/index.html.erb | 4 +- app/views/admin/donations/new.html.erb | 4 +- app/views/admin/donations/show.html.erb | 6 +- app/views/devise/confirmations/new.html.erb | 20 ++--- app/views/devise/passwords/edit.html.erb | 30 +++---- app/views/devise/passwords/new.html.erb | 31 +++----- app/views/devise/registrations/edit.html.erb | 6 +- app/views/devise/sessions/new.html.erb | 29 +++---- app/views/devise/shared/_links.html.erb | 10 +-- app/views/devise/unlocks/new.html.erb | 12 ++- app/views/security/index.html.erb | 2 +- app/views/signup/index.html.erb | 4 +- app/views/signup/steps.html.erb | 79 +++++++++---------- package.json | 1 + yarn.lock | 12 +++ 24 files changed, 160 insertions(+), 181 deletions(-) delete mode 100644 app/assets/stylesheets/forms.scss create mode 100644 app/javascript/stylesheets/forms.scss create mode 100644 app/javascript/stylesheets/links.scss diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss deleted file mode 100644 index b994c05..0000000 --- a/app/assets/stylesheets/forms.scss +++ /dev/null @@ -1,31 +0,0 @@ -form { - .field_with_errors { - display: inline-block; - } -} - -.layout-signup { - label { - display: none; - } - - input[type=text], input[type=email], input[type=password] { - font-size: 1.25rem; - padding: 0.5rem 1rem; - } - - span.at-sign, span.domain { - font-size: 1.25rem; - } - - .error-msg { - color: #bc0101; - } - - .accept-terms { - margin-top: 2rem; - font-size: 0.85rem; - line-height: 1.5em; - color: #888; - } -} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 81c20ca..c0e6fba 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -142,10 +142,6 @@ main { padding-bottom: 0.5rem; } } - - .actions { - margin-top: 2rem; - } } .grid { diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index c6b5d4b..5a4d444 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -4,3 +4,5 @@ @import "base"; @import "buttons"; +@import "forms"; +@import "links"; diff --git a/app/javascript/stylesheets/buttons.scss b/app/javascript/stylesheets/buttons.scss index 5edfe04..bb76577 100644 --- a/app/javascript/stylesheets/buttons.scss +++ b/app/javascript/stylesheets/buttons.scss @@ -1,21 +1,16 @@ @layer components { - .ks-text-link { - @apply text-blue-600; - &:hover { @apply underline; } - &:visited { @apply text-indigo-600; } - &:active { @apply text-red-600; } - } - .btn { @apply font-semibold rounded-md leading-none cursor-pointer transition-colors duration-75 focus:outline-none focus:ring-4; } .btn-md { + @apply btn; @apply py-2.5 px-5 shadow-md; } .btn-sm { + @apply btn; @apply py-1 px-2 text-sm shadow-sm; } diff --git a/app/javascript/stylesheets/forms.scss b/app/javascript/stylesheets/forms.scss new file mode 100644 index 0000000..52013a4 --- /dev/null +++ b/app/javascript/stylesheets/forms.scss @@ -0,0 +1,17 @@ +@layer components { + form { + input[type=text], input[type=email], input[type=password], + input[type=number], select { + @apply mt-1 rounded-md bg-gray-100 focus:bg-white + border-transparent focus:border-gray-500 focus:ring-0; + } + + .field_with_errors { + @apply inline-block; + } + + .error-msg { + @apply text-red-700; + } + } +} diff --git a/app/javascript/stylesheets/links.scss b/app/javascript/stylesheets/links.scss new file mode 100644 index 0000000..c46f68b --- /dev/null +++ b/app/javascript/stylesheets/links.scss @@ -0,0 +1,14 @@ +@layer components { + .ks-text-link { + @apply text-blue-600; + &:hover { @apply underline; } + &:visited { @apply text-indigo-600; } + &:active { @apply text-red-600; } + } + + .devise-links { + a { + @apply ks-text-link; + } + } +} diff --git a/app/javascript/stylesheets/tailwind.config.js b/app/javascript/stylesheets/tailwind.config.js index f004dd4..9235247 100644 --- a/app/javascript/stylesheets/tailwind.config.js +++ b/app/javascript/stylesheets/tailwind.config.js @@ -17,5 +17,7 @@ module.exports = { variants: { extend: {}, }, - plugins: [], + plugins: [ + require('@tailwindcss/forms') + ], } diff --git a/app/views/admin/donations/_form.html.erb b/app/views/admin/donations/_form.html.erb index 631e81d..1405b08 100644 --- a/app/views/admin/donations/_form.html.erb +++ b/app/views/admin/donations/_form.html.erb @@ -52,9 +52,7 @@

-
-

- <%= form.submit class: 'btn btn-md btn-blue' %> -

-
+

+ <%= form.submit class: 'btn-md btn-blue' %> +

<% end %> diff --git a/app/views/admin/donations/edit.html.erb b/app/views/admin/donations/edit.html.erb index 677d81b..5042797 100644 --- a/app/views/admin/donations/edit.html.erb +++ b/app/views/admin/donations/edit.html.erb @@ -2,7 +2,7 @@ <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %> -

+

<%= link_to 'Show', admin_donation_path(@donation), class: 'ks-text-link' %> | <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>

diff --git a/app/views/admin/donations/index.html.erb b/app/views/admin/donations/index.html.erb index 69878c8..3325d1c 100644 --- a/app/views/admin/donations/index.html.erb +++ b/app/views/admin/donations/index.html.erb @@ -36,6 +36,6 @@

<% end %> -

- <%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn btn-md btn-gray' %> +

+ <%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn-md btn-gray' %>

diff --git a/app/views/admin/donations/new.html.erb b/app/views/admin/donations/new.html.erb index 4fd44bf..ca10ca3 100644 --- a/app/views/admin/donations/new.html.erb +++ b/app/views/admin/donations/new.html.erb @@ -2,6 +2,6 @@ <%= render 'form', donation: @donation, url: admin_donations_path %> -

- <%= link_to 'Back', admin_donations_path %> +

+ <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>

diff --git a/app/views/admin/donations/show.html.erb b/app/views/admin/donations/show.html.erb index 2f18335..dd929f2 100644 --- a/app/views/admin/donations/show.html.erb +++ b/app/views/admin/donations/show.html.erb @@ -30,5 +30,7 @@ <%= @donation.paid_at %>

-<%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> | -<%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %> +

+ <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> | + <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %> +

diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb index 5a46eee..40c840d 100644 --- a/app/views/devise/confirmations/new.html.erb +++ b/app/views/devise/confirmations/new.html.erb @@ -2,19 +2,13 @@ <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> - -
-

- <%= f.label :email, 'Email address' %>
- <%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %> -

-
- -
-

- <%= f.submit "Resend confirmation instructions" %> -

-
+

+ <%= f.label :email, 'Email address', class: 'block mb-1' %> + <%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %> +

+

+ <%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %> +

<% end %> <%= render "devise/shared/links" %> diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb index 5fbb9ff..7419237 100644 --- a/app/views/devise/passwords/edit.html.erb +++ b/app/views/devise/passwords/edit.html.erb @@ -4,22 +4,24 @@ <%= render "devise/shared/error_messages", resource: resource %> <%= f.hidden_field :reset_password_token %> -
- <%= f.label :password, "New password" %>
- <% if @minimum_password_length %> - (<%= @minimum_password_length %> characters minimum)
- <% end %> +

+ <%= f.label :password, "New password" %> +

+

<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %> -

- -
- <%= f.label :password_confirmation, "Confirm new password" %>
+ <% if @minimum_password_length %> +
(<%= @minimum_password_length %> characters minimum) + <% end %> +

+

+ <%= f.label :password_confirmation, "Confirm new password" %> +

+

<%= f.password_field :password_confirmation, autocomplete: "new-password" %> -

- -
- <%= f.submit "Change my password" %> -
+

+

+ <%= f.submit "Change my password", class: 'btn-md btn-blue' %> +

<% end %> <%= render "devise/shared/links" %> diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb index ed6d7ce..65006f9 100644 --- a/app/views/devise/passwords/new.html.erb +++ b/app/views/devise/passwords/new.html.erb @@ -2,26 +2,17 @@ <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> - -
-

- <%= f.label :cn, 'User' %>
- <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org -

-
- -
-

- <%= f.label :email, 'Email address' %>
- <%= f.email_field :email, autocomplete: "email", required: true %> -

-
- -
-

- <%= f.submit "Send me reset password instructions" %> -

-
+

+ <%= f.label :cn, 'User', class: 'block' %> + <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org +

+

+ <%= f.label :email, 'Email address', class: 'block' %> + <%= f.email_field :email, autocomplete: "email", required: true %> +

+

+ <%= f.submit "Send me reset password instructions", class: 'btn-md btn-blue' %> +

<% end %> <%= render "devise/shared/links" %> diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb index 38d95b8..4df4cab 100644 --- a/app/views/devise/registrations/edit.html.erb +++ b/app/views/devise/registrations/edit.html.erb @@ -31,9 +31,9 @@ <%= f.password_field :current_password, autocomplete: "current-password" %> -
- <%= f.submit "Update" %> -
+

+ <%= f.submit "Update", class: 'btn-md btn-blue' %> +

<% end %>

Cancel my account

diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 5466dad..da446c8 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -2,24 +2,17 @@ <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> - -
-

- <%= f.label :cn, 'User' %>
- <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org -

-
-
-

- <%= f.label :password %>
- <%= f.password_field :password, autocomplete: "current-password" %> -

-
-
-

- <%= f.submit "Log in" %> -

-
+

+ <%= f.label :cn, 'User', class: 'block' %> + <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org +

+

+ <%= f.label :password, class: 'block' %> + <%= f.password_field :password, autocomplete: "current-password" %> +

+

+ <%= f.submit "Log in", class: 'btn-md btn-blue' %> +

<% end %> <%= render "devise/shared/links" %> diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb index fef9bef..b1d1ccd 100644 --- a/app/views/devise/shared/_links.html.erb +++ b/app/views/devise/shared/_links.html.erb @@ -1,24 +1,24 @@ -
+
<%- if controller_name != 'sessions' %> -

+

<%= link_to "Log in", new_session_path(resource_name) %>

<% end %> <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> -

+

<%= link_to "Forgot your password?", new_password_path(resource_name) %>

<% end %> <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> -

+

<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>

<% 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) %>

<% end %> diff --git a/app/views/devise/unlocks/new.html.erb b/app/views/devise/unlocks/new.html.erb index ffc34de..6f46399 100644 --- a/app/views/devise/unlocks/new.html.erb +++ b/app/views/devise/unlocks/new.html.erb @@ -2,15 +2,13 @@ <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> - -
+

<%= f.label :email %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> -

- -
- <%= f.submit "Resend unlock instructions" %> -
+

+

+ <%= f.submit "Resend unlock instructions", class: 'btn-md btn-blue' %> +

<% end %> <%= render "devise/shared/links" %> diff --git a/app/views/security/index.html.erb b/app/views/security/index.html.erb index 1df49cc..e1169b6 100644 --- a/app/views/security/index.html.erb +++ b/app/views/security/index.html.erb @@ -6,7 +6,7 @@

Password change

<%= form_with(url: settings_reset_password_path, method: :post) do %> - <%= submit_tag("Send me a password reset link", class: 'btn btn-md btn-gray') %> + <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %> <% end %>

diff --git a/app/views/signup/index.html.erb b/app/views/signup/index.html.erb index f3d8b80..25ed61e 100644 --- a/app/views/signup/index.html.erb +++ b/app/views/signup/index.html.erb @@ -7,6 +7,6 @@ This invitation can only be used once, and sign-up is currently only possible by invitation. Seems like you have good friends!

-

- <%= link_to "Get started", signup_steps_path(1), class: "next-step" %> +

+ <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>

diff --git a/app/views/signup/steps.html.erb b/app/views/signup/steps.html.erb index 3c527f4..53cf237 100644 --- a/app/views/signup/steps.html.erb +++ b/app/views/signup/steps.html.erb @@ -2,60 +2,53 @@ <% when 1 %>

Choose a username

<%= form_for @user, :url => signup_validate_url do |f| %> -
-

- <%= f.label :cn, 'Username' %>
- <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> - @ - kosmos.org -

- <% if @validation_error.present? %> -

Username <%= @validation_error %>

- <% end %> -
-
-

<%= f.submit "Continue" %>

-
+

+ <%= f.label :cn, 'Username', class: 'hidden' %> + <%= f.text_field :cn, autofocus: true, autocomplete: "username", + class: 'text-xl' %> + @ + kosmos.org +

+ <% if @validation_error.present? %> +

Username <%= @validation_error %>

+ <% end %> +

+ <%= f.submit "Continue", class: 'btn btn-md btn-blue' %> +

<% end %> <% when 2 %>

What's your email?

<%= form_for @user, :url => signup_validate_url do |f| %> -
-

- <%= f.label :email, 'Email address' %>
- <%= f.email_field :email, autofocus: true, autocomplete: "email" %> -

- <% if @validation_error.present? %> -

Email <%= @validation_error %>

- <% end %> -
-
-

<%= f.submit "Continue" %>

-
+

+ <%= f.label :email, 'Email address', class: 'hidden' %> + <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'text-xl' %> +

+ <% if @validation_error.present? %> +

Email <%= @validation_error %>

+ <% end %> +

+ <%= f.submit "Continue", class: 'btn btn-md btn-blue' %> +

<% end %> <% when 3 %>

Choose a password

<%= form_for @user, :url => signup_validate_url do |f| %> -
-

- <%= f.label :password, 'Password' %>
- <%= f.password_field :password, autofocus: true %> -

- <% if @validation_error.present? %> -

Password <%= @validation_error %>

- <% end %> -
-

- - By clicking the button below, you accept our future Terms of Service - and Privacy Policy. Don't worry, they will be excellent! - +

+ <%= f.label :password, 'Password', class: 'hidden' %> + <%= f.password_field :password, autofocus: true, class: 'text-xl' %> +

+ <% if @validation_error.present? %> +

Password <%= @validation_error %>

+ <% end %> +

+ By clicking the button below, you accept our future Terms of Service + and Privacy Policy. Don't worry, they will be excellent! +

+

+ <%= f.submit "Create account", class: 'btn-md btn-blue' %>

-
-

<%= f.submit "Create account" %>

-
<% end %> <% end %> diff --git a/package.json b/package.json index fa2ff82..38e5754 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "@rails/actioncable": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.3.0", + "@tailwindcss/forms": "^0.2.1", "autoprefixer": "^9", "postcss": "^7", "tailwindcss": "npm:@tailwindcss/postcss7-compat", diff --git a/yarn.lock b/yarn.lock index 9d3b65e..bee4f88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -907,6 +907,13 @@ webpack-cli "^3.3.10" webpack-sources "^1.4.3" +"@tailwindcss/forms@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.2.1.tgz#3244b185854fae1a7cbe8d2456314d8b2d98cf43" + integrity sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg== + dependencies: + mini-svg-data-uri "^1.2.3" + "@types/glob@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183" @@ -4576,6 +4583,11 @@ mini-css-extract-plugin@^0.8.0: schema-utils "^1.0.0" webpack-sources "^1.1.0" +mini-svg-data-uri@^1.2.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f" + integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ== + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"