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;
}
.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 {

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

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

@ -1,23 +1,25 @@
<div class="max-w-xl mx-auto px-2">
<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| %>
<h1 class="text-4xl font-bold text-center my-8">Log In</h1>
<%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, url: session_path(resource_name)) do |f| %>
<div class="space-y-2">
<div class="form-control">
<%= f.label :email, class: 'label' %>
<%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'base-input' %>
</div>
<div class="form-control mt-2">
<div class="form-control">
<%= 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">
<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 class="form-control my-4">
</div>
<div class="form-control">
<%= f.submit 'Log in', class: 'base-button' %>
</div>
<% end %>

@ -1,25 +1,22 @@
<div class="flex justify-between mt-4">
<%- if controller_name != 'sessions' %>
<%= link_to 'Log in', new_session_path(resource_name), class: 'link-hover' %><br>
<%= link_to 'Log in', new_session_path(resource_name), class: 'link link-hover' %>
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to 'Sign up', new_registration_path, class: 'link-hover' %><br>
<%= 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-hover' %><br>
<%= 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-hover' %><br>
<%= 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-hover' %><br>
<%= 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), data: { turbo: false } %><br>
<%= 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="flex space-x-8">
<%= render 'shared/settings_nav' %>
<div class="mt-4">
Email settings
<div class="mt-4 w-full">
<div class="max-w-xl mx-auto">
<h1 class="text-3xl font-bold text-left mb-4">Email Settings</h1>
<% value = @encrypted_config.value || {} %>
<%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %>
<%= 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| %>
<div>
<%= ff.label :host %>
<%= ff.text_field :host, value: value['host'], required: true %>
<div class="grid md:grid-cols-2 gap-4">
<div class="form-control">
<%= ff.label :host, class: 'label' %>
<%= ff.text_field :host, value: value['host'], required: true, class: 'base-input' %>
</div>
<div>
<%= ff.label :port %>
<%= ff.text_field :port, value: value['port'], required: true %>
<div class="form-control">
<%= ff.label :port, class: 'label' %>
<%= ff.text_field :port, value: value['port'], required: true, class: 'base-input' %>
</div>
<div>
<%= ff.label :username %>
<%= ff.text_field :username, value: value['username'], required: true %>
</div>
<div>
<%= ff.label :password %>
<%= ff.password_field :password, value: value['password'], required: true %>
<div class="grid md:grid-cols-2 gap-4">
<div class="form-control">
<%= ff.label :username, class: 'label' %>
<%= ff.text_field :username, value: value['username'], required: true, class: 'base-input' %>
</div>
<div>
<%= ff.label :from_email, 'Send from' %>
<%= ff.email_field :from_email, value: value['from_email'], required: true %>
<div class="form-control">
<%= ff.label :password, class: 'label' %>
<%= 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 %>
<%= f.button button_title %>
<div class="flex justify-end">
<div class="form-control">
<%= f.button button_title, class: 'base-button' %>
</div>
</div>
<% end %>
</div>
</div>
<div class="px-2 w-52"></div>
</div>
</div>

@ -1,35 +1,37 @@
<div class="max-w-xl mx-auto px-2">
<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| %>
<div class="space-y-2">
<%= f.fields_for @user do |ff| %>
<div class="flex space-x-4">
<div class="form-control w-1/2">
<div class="grid gap-2 md:grid-cols-2 md:gap-4">
<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 w-1/2">
<div class="form-control">
<%= ff.label :last_name, class: 'label' %>
<%= ff.text_field :last_name, required: true, class: 'base-input' %>
</div>
</div>
<% end %>
<%= f.fields_for @account do |ff| %>
<div class="form-control mt-2">
<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 @user do |ff| %>
<div class="form-control mt-2">
<div class="form-control">
<%= ff.label :email, class: 'label' %>
<%= ff.email_field :email, required: true, class: 'base-input' %>
</div>
<div class="form-control mt-2">
<div class="form-control">
<%= ff.label :password, class: 'label' %>
<%= ff.password_field :password, required: true, placeholder: '************', class: 'base-input' %>
</div>
<% end %>
<div class="form-control mt-8">
</div>
<div class="form-control">
<%= f.button button_title, class: 'base-button' %>
</div>
<% end %>

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

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

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

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

@ -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"

Loading…
Cancel
Save