add more ui styles

pull/105/head
Alex Turchyn 2 years ago
parent 45adee6ddf
commit ccb8347575

@ -31,12 +31,16 @@ button[disabled] .enabled {
display: none; display: none;
} }
.btn {
@apply no-animation;
}
.base-input { .base-input {
@apply input input-bordered bg-white; @apply input input-bordered bg-white;
} }
.base-button { .base-button {
@apply btn text-white text-base no-animation; @apply btn text-white text-base;
} }
.white-button { .white-button {

@ -1,12 +1,16 @@
<h2>Forgot your password?</h2> <div class="max-w-xl mx-auto px-2">
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <h1 class="text-4xl font-bold text-center my-8">Forgot your password?</h1>
<%= render 'devise/shared/error_messages', resource: %> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post, class: 'space-y-6' }) do |f| %>
<div class="field"> <div class="space-y-2">
<%= f.label :email %><br> <%= render 'devise/shared/error_messages', resource: %>
<%= f.email_field :email, autofocus: true, autocomplete: 'email' %> <div class="form-control">
</div> <%= f.label :email, class: 'label' %>
<div class="actions"> <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
<%= f.submit 'Send me reset password instructions' %> </div>
</div> </div>
<% end %> <div class="form-control">
<%= render 'devise/shared/links' %> <%= f.submit 'Reset password', class: 'base-button' %>
</div>
<% end %>
<%= render 'devise/shared/links' %>
</div>

@ -1,34 +1,38 @@
<h2>Sign up</h2> <div class="max-w-xl mx-auto px-2">
<%= form_for('', as: resource_name, url: registration_path) do |f| %> <h1 class="text-4xl font-bold text-center my-8">Sign up</h1>
<%= render 'devise/shared/error_messages', resource: %> <%= form_for('', as: resource_name, html: { class: 'space-y-6' }, url: registration_path) do |f| %>
<%= f.fields_for resource do |ff| %> <div class="space-y-2">
<div> <%= render 'devise/shared/error_messages', resource: %>
<%= ff.label :first_name %> <%= f.fields_for resource do |ff| %>
<%= ff.text_field :first_name, required: true %> <div class="form-control">
<%= ff.label :first_name, class: 'label' %>
<%= ff.text_field :first_name, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= ff.label :last_name, class: 'label' %>
<%= ff.text_field :last_name, required: true, class: 'base-input' %>
</div>
<% end %>
<%= f.fields_for resource.account do |ff| %>
<div class="form-control">
<%= ff.label :name, 'Company name', class: 'label' %>
<%= ff.text_field :name, required: true, class: 'base-input' %>
</div>
<% end %>
<%= f.fields_for resource do |ff| %>
<div class="form-control">
<%= ff.label :email, class: 'label' %>
<%= ff.email_field :email, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= ff.label :password, class: 'label' %>
<%= ff.password_field :password, required: true, class: 'base-input' %>
</div>
<% end %>
</div> </div>
<div> <div class="form-control">
<%= ff.label :last_name %> <%= f.submit 'Sign up', class: 'base-button' %>
<%= ff.text_field :last_name, required: true %>
</div> </div>
<% end %> <% end %>
<%= f.fields_for resource.account do |ff| %> <%= render 'devise/shared/links' %>
<div> </div>
<%= ff.label :name, 'Company name' %>
<%= ff.text_field :name, required: true %>
</div>
<% end %>
<%= f.fields_for resource do |ff| %>
<div>
<%= ff.label :email %>
<%= ff.email_field :email, required: true %>
</div>
<div>
<%= ff.label :password %>
<%= ff.password_field :password, required: true %>
</div>
<% end %>
<div class="actions">
<%= f.submit 'Sign up' %>
</div>
<% end %>
<%= render 'devise/shared/links' %>

@ -1,23 +1,25 @@
<div class="max-w-xl mx-auto px-2"> <div class="max-w-xl mx-auto px-2">
<h1 class="text-4xl font-bold text-center my-8">Log In 👋</h1> <h1 class="text-4xl font-bold text-center my-8">Log In</h1>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, url: session_path(resource_name)) do |f| %>
<div class="form-control"> <div class="space-y-2">
<%= f.label :email, class: 'label' %> <div class="form-control">
<%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %> <%= f.label :email, class: 'label' %>
</div> <%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
<div class="form-control mt-2">
<%= f.label :password, class: 'label' %>
<%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %>
</div>
<% if devise_mapping.rememberable? %>
<div class="form-control mt-2">
<%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %>
<%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %>
<span class="label">Remember me</span>
<% end %>
</div> </div>
<% end %> <div class="form-control">
<div class="form-control my-4"> <%= f.label :password, class: 'label' %>
<%= f.password_field :password, autocomplete: 'current-password', class: 'base-input' %>
</div>
<% if devise_mapping.rememberable? %>
<div class="form-control">
<%= f.label :remember_me, class: 'flex items-center cursor-pointer' do %>
<%= f.check_box :remember_me, checked: true, class: 'base-checkbox' %>
<span class="label">Remember me</span>
<% end %>
</div>
<% end %>
</div>
<div class="form-control">
<%= f.submit 'Log in', class: 'base-button' %> <%= f.submit 'Log in', class: 'base-button' %>
</div> </div>
<% end %> <% end %>

@ -1,25 +1,22 @@
<%- if controller_name != 'sessions' %> <div class="flex justify-between mt-4">
<%= link_to 'Log in', new_session_path(resource_name), class: 'link-hover' %><br> <%- if controller_name != 'sessions' %>
<% end %> <%= link_to 'Log in', new_session_path(resource_name), class: 'link link-hover' %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to 'Sign up', new_registration_path, class: 'link-hover' %><br>
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to 'Forgot your password?', new_password_path(resource_name), class: 'link-hover' %><br>
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: 'link-hover' %><br>
<% 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' %><br>
<% 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 } %><br>
<% end %> <% 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 %>
</div>

@ -1,34 +1,45 @@
<div class="max-w-6xl mx-auto"> <div class="max-w-6xl mx-auto">
<div class="flex space-x-8"> <div class="flex space-x-8">
<%= render 'shared/settings_nav' %> <%= render 'shared/settings_nav' %>
<div class="mt-4"> <div class="mt-4 w-full">
Email settings <div class="max-w-xl mx-auto">
<% value = @encrypted_config.value || {} %> <h1 class="text-3xl font-bold text-left mb-4">Email Settings</h1>
<%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %> <% value = @encrypted_config.value || {} %>
<%= f.fields_for :value do |ff| %> <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>
<div> <%= f.fields_for :value do |ff| %>
<%= ff.label :host %> <div class="grid md:grid-cols-2 gap-4">
<%= ff.text_field :host, value: value['host'], required: true %> <div class="form-control">
</div> <%= ff.label :host, class: 'label' %>
<div> <%= ff.text_field :host, value: value['host'], required: true, class: 'base-input' %>
<%= ff.label :port %> </div>
<%= ff.text_field :port, value: value['port'], required: true %> <div class="form-control">
</div> <%= ff.label :port, class: 'label' %>
<div> <%= ff.text_field :port, value: value['port'], required: true, class: 'base-input' %>
<%= ff.label :username %> </div>
<%= ff.text_field :username, value: value['username'], required: true %> </div>
</div> <div class="grid md:grid-cols-2 gap-4">
<div> <div class="form-control">
<%= ff.label :password %> <%= ff.label :username, class: 'label' %>
<%= ff.password_field :password, value: value['password'], required: true %> <%= ff.text_field :username, value: value['username'], required: true, class: 'base-input' %>
</div> </div>
<div> <div class="form-control">
<%= ff.label :from_email, 'Send from' %> <%= ff.label :password, class: 'label' %>
<%= ff.email_field :from_email, value: value['from_email'], required: true %> <%= ff.password_field :password, value: value['password'], required: true, class: 'base-input' %>
</div>
</div>
<div class="form-control">
<%= ff.label :from_email, 'Send from', class: 'label' %>
<%= ff.email_field :from_email, value: value['from_email'], required: true, class: 'base-input' %>
</div>
<% end %>
<div class="flex justify-end">
<div class="form-control">
<%= f.button button_title, class: 'base-button' %>
</div>
</div> </div>
<% end %> <% end %>
<%= f.button button_title %> </div>
<% end %>
</div> </div>
<div class="px-2 w-52"></div>
</div> </div>
</div> </div>

@ -1,35 +1,37 @@
<div class="max-w-xl mx-auto px-2"> <div class="max-w-xl mx-auto px-2">
<h1 class="text-4xl font-bold text-center my-8">Initial Setup 👋</h1> <h1 class="text-4xl font-bold text-center my-8">Initial Setup 👋</h1>
<%= form_for '', url: setup_index_path do |f| %> <%= form_for '', html: { class: 'space-y-6' }, url: setup_index_path do |f| %>
<%= f.fields_for @user do |ff| %> <div class="space-y-2">
<div class="flex space-x-4"> <%= f.fields_for @user do |ff| %>
<div class="form-control w-1/2"> <div class="grid gap-2 md:grid-cols-2 md:gap-4">
<%= ff.label :first_name, class: 'label' %> <div class="form-control">
<%= ff.text_field :first_name, required: true, class: 'base-input' %> <%= ff.label :first_name, class: 'label' %>
<%= ff.text_field :first_name, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= ff.label :last_name, class: 'label' %>
<%= ff.text_field :last_name, required: true, class: 'base-input' %>
</div>
</div> </div>
<div class="form-control w-1/2"> <% end %>
<%= ff.label :last_name, class: 'label' %> <%= f.fields_for @account do |ff| %>
<%= ff.text_field :last_name, required: true, class: 'base-input' %> <div class="form-control">
<%= ff.label :name, 'Company name', class: 'label' %>
<%= ff.text_field :name, required: true, class: 'base-input' %>
</div> </div>
</div> <% end %>
<% end %> <%= f.fields_for @user do |ff| %>
<%= f.fields_for @account do |ff| %> <div class="form-control">
<div class="form-control mt-2"> <%= ff.label :email, class: 'label' %>
<%= ff.label :name, 'Company name', class: 'label' %> <%= ff.email_field :email, required: true, class: 'base-input' %>
<%= ff.text_field :name, required: true, class: 'base-input' %> </div>
</div> <div class="form-control">
<% end %> <%= ff.label :password, class: 'label' %>
<%= f.fields_for @user do |ff| %> <%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %>
<div class="form-control mt-2"> </div>
<%= ff.label :email, class: 'label' %> <% end %>
<%= ff.email_field :email, required: true, class: 'base-input' %> </div>
</div> <div class="form-control">
<div class="form-control mt-2">
<%= ff.label :password, class: 'label' %>
<%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %>
</div>
<% end %>
<div class="form-control mt-8">
<%= f.button button_title, class: 'base-button' %> <%= f.button button_title, class: 'base-button' %>
</div> </div>
<% end %> <% end %>

@ -1,19 +1,23 @@
<%= form_for user, data: { turbo_frame: :_top } do |f| %> <%= form_for user, html: { class: 'space-y-4' }, data: { turbo_frame: :_top } do |f| %>
<div> <div class="space-y-2">
<%= f.label :first_name %> <div class="form-control">
<%= f.text_field :first_name, required: true %> <%= f.label :first_name, class: 'label' %>
<%= f.text_field :first_name, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= f.label :last_name, class: 'label' %>
<%= f.text_field :last_name, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= f.label :email, class: 'label' %>
<%= f.email_field :email, required: true, class: 'base-input' %>
</div>
<div class="form-control">
<%= f.label :password, class: 'label' %>
<%= f.password_field :password, required: user.new_record?, class: 'base-input' %>
</div>
</div> </div>
<div> <div class="form-control">
<%= f.label :last_name %> <%= f.button button_title, class: 'base-button' %>
<%= f.text_field :last_name, required: true %>
</div> </div>
<div>
<%= f.label :email %>
<%= f.email_field :email, required: true %>
</div>
<div>
<%= f.label :password %>
<%= f.password_field :password, required: user.new_record? %>
</div>
<%= f.button button_title %>
<% end %> <% end %>

@ -1,3 +1,3 @@
<%= render 'shared/turbo_modal' do %> <%= render 'shared/turbo_modal', title: 'Edit User' do %>
<%= render 'form', user: @user %> <%= render 'form', user: @user %>
<% end %> <% end %>

@ -1,44 +1,91 @@
<div class="max-w-6xl mx-auto"> <div class="max-w-6xl mx-auto">
<div class="flex space-x-8"> <div class="flex space-x-8">
<%= render 'shared/settings_nav' %> <%= render 'shared/settings_nav' %>
<div class="mt-4"> <div class="mt-4 w-full px-2">
<div> <div class="flex justify-between mb-4 items-center">
Users <h1 class="text-3xl font-bold text-left">Users</h1>
<a href="<%= new_user_path %>" data-turbo-frame="modal">New User</a> <%= link_to new_user_path, class: 'btn btn-primary btn-md gap-2', data: { turbo_frame: 'modal' } do %>
</div> <svg
<table> class="w-6 h-6"
<tr> xmlns="http://www.w3.org/2000/svg"
<th> width="44"
User height="44"
</th> viewBox="0 0 24 24"
<th> stroke-width="1.5"
Role fill="none"
</th> stroke="currentColor"
<th> stroke-linecap="round"
Last session stroke-linejoin="round">
</th> <path
<th> stroke="none"
</th> d="M0 0h24v24H0z"
</tr> fill="none" />
<% @users.each do |user| %> <line
<tr> x1="12"
<td> y1="5"
<%= user.full_name %><br> x2="12"
<%= user.email %> y2="19" />
</td> <line
<td> x1="5"
<%= user.role %> y1="12"
</td> x2="19"
<td> y2="12" />
<%= user.last_sign_in_at ? l(user.last_sign_in_at) : '-' %> </svg>
</td> <span>New User</span>
<td>
<%= 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?' } %>
</td>
</tr>
<% end %> <% end %>
</table> </div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th scope="col">
Name
</th>
<th scope="col">
Email
</th>
<th scope="col">
Role
</th>
<th scope="col">
Last session
</th>
<th scope="col" class="text-right" width="1px">
Action
</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr scope="row">
<td>
<%= user.full_name %>
</td>
<td>
<%= user.email %>
</td>
<td>
<span class="badge badge-success badge-outline">
<%= user.role %>
</span>
</td>
<td>
<%= user.last_sign_in_at ? l(user.last_sign_in_at, format: :short) : '-' %>
</td>
<td class="flex items-center space-x-2 justify-end">
<%= 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 %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -1,3 +1,3 @@
<%= render 'shared/turbo_modal' do %> <%= render 'shared/turbo_modal', title: 'New User' do %>
<%= render 'form', user: @user %> <%= render 'form', user: @user %>
<% end %> <% end %>

@ -1131,13 +1131,6 @@
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ== 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": "@trysound/sax@0.2.0":
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" 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: dependencies:
schema-utils "^4.0.0" 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: minimalistic-assert@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"

Loading…
Cancel
Save