From ccb8347575dfc026b1598f863f5d13325f7add66 Mon Sep 17 00:00:00 2001 From: Alex Turchyn Date: Tue, 30 May 2023 01:34:01 +0300 Subject: [PATCH] add more ui styles --- app/javascript/application.scss | 6 +- app/views/devise/passwords/new.html.erb | 28 +++-- app/views/devise/registrations/new.html.erb | 66 ++++++----- app/views/devise/sessions/new.html.erb | 38 +++--- app/views/devise/shared/_links.html.erb | 45 ++++---- app/views/email_settings/index.html.erb | 63 +++++----- app/views/setup/index.html.erb | 58 +++++----- app/views/users/_form.html.erb | 36 +++--- app/views/users/edit.html.erb | 2 +- app/views/users/index.html.erb | 121 ++++++++++++++------ app/views/users/new.html.erb | 2 +- yarn.lock | 12 -- 12 files changed, 270 insertions(+), 207 deletions(-) diff --git a/app/javascript/application.scss b/app/javascript/application.scss index 3b2da8a3..c125349d 100644 --- a/app/javascript/application.scss +++ b/app/javascript/application.scss @@ -31,12 +31,16 @@ button[disabled] .enabled { display: none; } +.btn { + @apply no-animation; +} + .base-input { @apply input input-bordered bg-white; } .base-button { - @apply btn text-white text-base no-animation; + @apply btn text-white text-base; } .white-button { diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb index 32e3f1a3..9313095c 100644 --- a/app/views/devise/passwords/new.html.erb +++ b/app/views/devise/passwords/new.html.erb @@ -1,12 +1,16 @@ -

Forgot your password?

-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> - <%= render 'devise/shared/error_messages', resource: %> -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, autocomplete: 'email' %> -
-
- <%= f.submit 'Send me reset password instructions' %> -
-<% end %> -<%= render 'devise/shared/links' %> +
+

Forgot your password?

+ <%= 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: %> +
+ <%= f.label :email, class: 'label' %> + <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %> +
+
+
+ <%= f.submit 'Reset password', class: 'base-button' %> +
+ <% end %> + <%= render 'devise/shared/links' %> +
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb index 179dd3ed..75ba53e5 100644 --- a/app/views/devise/registrations/new.html.erb +++ b/app/views/devise/registrations/new.html.erb @@ -1,34 +1,38 @@ -

Sign up

-<%= form_for('', as: resource_name, url: registration_path) do |f| %> - <%= render 'devise/shared/error_messages', resource: %> - <%= f.fields_for resource do |ff| %> -
- <%= ff.label :first_name %> - <%= ff.text_field :first_name, required: true %> +
+

Sign up

+ <%= form_for('', as: resource_name, html: { class: 'space-y-6' }, url: registration_path) do |f| %> +
+ <%= render 'devise/shared/error_messages', resource: %> + <%= f.fields_for resource do |ff| %> +
+ <%= ff.label :first_name, class: 'label' %> + <%= ff.text_field :first_name, required: true, class: 'base-input' %> +
+
+ <%= ff.label :last_name, class: 'label' %> + <%= ff.text_field :last_name, required: true, class: 'base-input' %> +
+ <% end %> + <%= f.fields_for resource.account do |ff| %> +
+ <%= ff.label :name, 'Company name', class: 'label' %> + <%= ff.text_field :name, required: true, class: 'base-input' %> +
+ <% end %> + <%= f.fields_for resource do |ff| %> +
+ <%= ff.label :email, class: 'label' %> + <%= ff.email_field :email, required: true, class: 'base-input' %> +
+
+ <%= ff.label :password, class: 'label' %> + <%= ff.password_field :password, required: true, class: 'base-input' %> +
+ <% end %>
-
- <%= ff.label :last_name %> - <%= ff.text_field :last_name, required: true %> +
+ <%= f.submit 'Sign up', class: 'base-button' %>
<% end %> - <%= f.fields_for resource.account do |ff| %> -
- <%= ff.label :name, 'Company name' %> - <%= ff.text_field :name, required: true %> -
- <% end %> - <%= f.fields_for resource do |ff| %> -
- <%= ff.label :email %> - <%= ff.email_field :email, required: true %> -
-
- <%= ff.label :password %> - <%= ff.password_field :password, required: true %> -
- <% end %> -
- <%= f.submit 'Sign up' %> -
-<% end %> -<%= render 'devise/shared/links' %> + <%= render 'devise/shared/links' %> +
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index d1782c46..e30dde83 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -1,23 +1,25 @@
-

Log In 👋

- <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> -
- <%= f.label :email, class: 'label' %> - <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %> -
-
- <%= f.label :password, class: 'label' %> - <%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %> -
- <% if devise_mapping.rememberable? %> -
- <%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %> - <%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %> - Remember me - <% end %> +

Log In

+ <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, url: session_path(resource_name)) do |f| %> +
+
+ <%= f.label :email, class: 'label' %> + <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
- <% end %> -
+
+ <%= f.label :password, class: 'label' %> + <%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %> +
+ <% if devise_mapping.rememberable? %> +
+ <%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %> + <%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %> + Remember me + <% end %> +
+ <% end %> +
+
<%= f.submit 'Log in', class: 'base-button' %>
<% end %> diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb index 5ea702fe..cc73180b 100644 --- a/app/views/devise/shared/_links.html.erb +++ b/app/views/devise/shared/_links.html.erb @@ -1,25 +1,22 @@ -<%- if controller_name != 'sessions' %> - <%= link_to 'Log in', new_session_path(resource_name), class: 'link-hover' %>
-<% end %> - -<%- if devise_mapping.registerable? && controller_name != 'registrations' %> - <%= link_to 'Sign up', new_registration_path, class: 'link-hover' %>
-<% end %> - -<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> - <%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link-hover' %>
-<% end %> - -<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> - <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'link-hover' %>
-<% 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), class: 'link-hover' %>
-<% end %> - -<%- if devise_mapping.omniauthable? %> - <%- resource_class.omniauth_providers.each do |provider| %> - <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %>
+
+ <%- if controller_name != 'sessions' %> + <%= link_to 'Log in', new_session_path(resource_name), class: 'link link-hover' %> <% end %> -<% end %> + <%- if devise_mapping.registerable? && controller_name != 'registrations' %> + <%= link_to 'Sign up', new_registration_path, class: 'link link-hover' %> + <% end %> + <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> + <%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link link-hover' %> + <% end %> + <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> + <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'link link-hover' %> + <% 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), class: 'link link-hover' %> + <% end %> + <%- if devise_mapping.omniauthable? %> + <%- resource_class.omniauth_providers.each do |provider| %> + <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), class: 'link link-hover', data: { turbo: false } %> + <% end %> + <% end %> +
diff --git a/app/views/email_settings/index.html.erb b/app/views/email_settings/index.html.erb index 3d18d874..e6448859 100644 --- a/app/views/email_settings/index.html.erb +++ b/app/views/email_settings/index.html.erb @@ -1,34 +1,45 @@
<%= render 'shared/settings_nav' %> -
- Email settings - <% value = @encrypted_config.value || {} %> - <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> - <%= f.fields_for :value do |ff| %> -
- <%= ff.label :host %> - <%= ff.text_field :host, value: value['host'], required: true %> -
-
- <%= ff.label :port %> - <%= ff.text_field :port, value: value['port'], required: true %> -
-
- <%= ff.label :username %> - <%= ff.text_field :username, value: value['username'], required: true %> -
-
- <%= ff.label :password %> - <%= ff.password_field :password, value: value['password'], required: true %> -
-
- <%= ff.label :from_email, 'Send from' %> - <%= ff.email_field :from_email, value: value['from_email'], required: true %> +
+
+

Email Settings

+ <% value = @encrypted_config.value || {} %> + <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %> + <%= f.fields_for :value do |ff| %> +
+
+ <%= ff.label :host, class: 'label' %> + <%= ff.text_field :host, value: value['host'], required: true, class: 'base-input' %> +
+
+ <%= ff.label :port, class: 'label' %> + <%= ff.text_field :port, value: value['port'], required: true, class: 'base-input' %> +
+
+
+
+ <%= ff.label :username, class: 'label' %> + <%= ff.text_field :username, value: value['username'], required: true, class: 'base-input' %> +
+
+ <%= ff.label :password, class: 'label' %> + <%= ff.password_field :password, value: value['password'], required: true, class: 'base-input' %> +
+
+
+ <%= ff.label :from_email, 'Send from', class: 'label' %> + <%= ff.email_field :from_email, value: value['from_email'], required: true, class: 'base-input' %> +
+ <% end %> +
+
+ <%= f.button button_title, class: 'base-button' %> +
<% end %> - <%= f.button button_title %> - <% end %> +
+
diff --git a/app/views/setup/index.html.erb b/app/views/setup/index.html.erb index 67714bde..d57c3a8b 100644 --- a/app/views/setup/index.html.erb +++ b/app/views/setup/index.html.erb @@ -1,35 +1,37 @@

Initial Setup 👋

- <%= form_for '', url: setup_index_path do |f| %> - <%= f.fields_for @user do |ff| %> -
-
- <%= ff.label :first_name, class: 'label' %> - <%= ff.text_field :first_name, required: true, class: 'base-input' %> + <%= form_for '', html: { class: 'space-y-6' }, url: setup_index_path do |f| %> +
+ <%= f.fields_for @user do |ff| %> +
+
+ <%= ff.label :first_name, class: 'label' %> + <%= ff.text_field :first_name, required: true, class: 'base-input' %> +
+
+ <%= ff.label :last_name, class: 'label' %> + <%= ff.text_field :last_name, required: true, class: 'base-input' %> +
-
- <%= ff.label :last_name, class: 'label' %> - <%= ff.text_field :last_name, required: true, class: 'base-input' %> + <% end %> + <%= f.fields_for @account do |ff| %> +
+ <%= ff.label :name, 'Company name', class: 'label' %> + <%= ff.text_field :name, required: true, class: 'base-input' %>
-
- <% end %> - <%= f.fields_for @account do |ff| %> -
- <%= ff.label :name, 'Company name', class: 'label' %> - <%= ff.text_field :name, required: true, class: 'base-input' %> -
- <% end %> - <%= f.fields_for @user do |ff| %> -
- <%= ff.label :email, class: 'label' %> - <%= ff.email_field :email, required: true, class: 'base-input' %> -
-
- <%= ff.label :password, class: 'label' %> - <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %> -
- <% end %> -
+ <% end %> + <%= f.fields_for @user do |ff| %> +
+ <%= ff.label :email, class: 'label' %> + <%= ff.email_field :email, required: true, class: 'base-input' %> +
+
+ <%= ff.label :password, class: 'label' %> + <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %> +
+ <% end %> +
+
<%= f.button button_title, class: 'base-button' %>
<% end %> diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb index cb3028f9..3358d240 100644 --- a/app/views/users/_form.html.erb +++ b/app/views/users/_form.html.erb @@ -1,19 +1,23 @@ -<%= form_for user, data: { turbo_frame: :_top } do |f| %> -
- <%= f.label :first_name %> - <%= f.text_field :first_name, required: true %> +<%= form_for user, html: { class: 'space-y-4' }, data: { turbo_frame: :_top } do |f| %> +
+
+ <%= f.label :first_name, class: 'label' %> + <%= f.text_field :first_name, required: true, class: 'base-input' %> +
+
+ <%= f.label :last_name, class: 'label' %> + <%= f.text_field :last_name, required: true, class: 'base-input' %> +
+
+ <%= f.label :email, class: 'label' %> + <%= f.email_field :email, required: true, class: 'base-input' %> +
+
+ <%= f.label :password, class: 'label' %> + <%= f.password_field :password, required: user.new_record?, class: 'base-input' %> +
-
- <%= f.label :last_name %> - <%= f.text_field :last_name, required: true %> +
+ <%= f.button button_title, class: 'base-button' %>
-
- <%= f.label :email %> - <%= f.email_field :email, required: true %> -
-
- <%= f.label :password %> - <%= f.password_field :password, required: user.new_record? %> -
- <%= f.button button_title %> <% end %> diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 057b88b9..29057eea 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -1,3 +1,3 @@ -<%= render 'shared/turbo_modal' do %> +<%= render 'shared/turbo_modal', title: 'Edit User' do %> <%= render 'form', user: @user %> <% end %> diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb index 9c15dff7..8791c43e 100644 --- a/app/views/users/index.html.erb +++ b/app/views/users/index.html.erb @@ -1,44 +1,91 @@
<%= render 'shared/settings_nav' %> -
-
- Users - New User -
- - - - - - - - <% @users.each do |user| %> - - - - - - +
+
+

Users

+ <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %> + + + + + + New User <% end %> -
- User - - Role - - Last session - -
- <%= user.full_name %>
- <%= user.email %> - 		- <%= user.role %> - - <%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %> - - <%= link_to 'Edit', edit_user_path(user), data: { turbo_frame: 'modal' } %> - <%= button_to 'Remove', user_path(user), method: :delete, data: { turbo_confirm: 'Are you sure?' } %> -
+
+ +
+ + + + + + + + + + + + <% @users.each do |user| %> + + + + + + + + <% end %> + +
+ Name + + Email + + Role + + Last session + + Action +
+ <%= user.full_name %> + + <%= user.email %> + + + <%= user.role %> + + + <%= user.last_sign_in_at ? l(user.last_sign_in_at, format: :short) : '-' %> + + <%= link_to edit_user_path(user), class: 'btn btn-outline btn-xs', title: 'Edit', data: { turbo_frame: 'modal' } do %> + Edit + <% end %> + <%= link_to user_path(user), class: 'btn btn-outline btn-error btn-xs', title: 'Delete', data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %> + Remove + <% end %> +
+
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb index 057b88b9..73a0c977 100644 --- a/app/views/users/new.html.erb +++ b/app/views/users/new.html.erb @@ -1,3 +1,3 @@ -<%= render 'shared/turbo_modal' do %> +<%= render 'shared/turbo_modal', title: 'New User' do %> <%= render 'form', user: @user %> <% end %> diff --git a/yarn.lock b/yarn.lock index ee2a196a..42034f50 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1131,13 +1131,6 @@ resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718" integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ== -"@tailwindcss/forms@^0.5.0": - version "0.5.3" - resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7" - integrity sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q== - dependencies: - mini-svg-data-uri "^1.2.3" - "@trysound/sax@0.2.0": version "0.2.0" resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" @@ -3853,11 +3846,6 @@ mini-css-extract-plugin@^2.7.5: dependencies: schema-utils "^4.0.0" -mini-svg-data-uri@^1.2.3: - version "1.4.4" - resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939" - integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg== - minimalistic-assert@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"