Merge pull request #6 from exstake/chore/add-styles-to-devise

add styles to devise

app/assets/stylesheets/application.scss

@@ -1,11 +0,0 @@
-.grid {
-  display: grid;
-}
-
-.place-items-center {
-  place-items: center;
-}
-
-.h-screen {
-  height: 100vh;
-}

app/helpers/home_helper.rb

@@ -1,3 +0,0 @@
-# frozen_string_literal: true
-module HomeHelper
-end

app/helpers/tailwind_helper.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+# rubocop:disable Layout/LineLength
+module TailwindHelper
+  class << self
+    def input_classes
+      "rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
+    end
+
+    def base_button_classes
+      "cursor-pointer py-2 px-4"
+    end
+
+    def primary_button_classes
+      "#{base_button_classes} bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
+    end
+  end
+end

app/javascript/packs/application.ts

@@ -14,4 +14,3 @@
 
 import "stylesheets/application";
 import "regenerator-runtime";
-import "../src/index";

app/javascript/packs/react.ts

@@ -0,0 +1 @@
+import "../src/index";

app/javascript/src/components/Navbar/Navbar.tsx

@@ -5,7 +5,7 @@ import { useApp } from "../../contexts/AppProvider";
 import { useCurrentUser } from "../../contexts/UserProvider";
 
 const linkStyles =
-  "cursor-pointer hover:bg-gray-100 h-full px-4 font-bold flex items-center";
+  "cursor-pointer bg-transparent hover:bg-gray-100 h-full px-4 font-bold flex items-center";
 
 export const Navbar = () => {
   const { setSideNavExpanded } = useApp();
@@ -60,14 +60,9 @@ export const Navbar = () => {
             <input type="hidden" name="_method" value="delete" />
           </form>
         ) : (
-          <form className="h-full" method="post" action="/users/sign_in">
+          <a href="/users/sign_in" className={linkStyles}>
-            <input className={linkStyles} type="submit" value="Entrar" />
+            Entrar
-            <input
+          </a>
-              type="hidden"
-              name="authenticity_token"
-              defaultValue={csrfToken}
-            />
-          </form>
         )}
       </div>
     </nav>

app/views/devise/registrations/edit.html.erb

@@ -1,43 +1,47 @@
-<h2><%= t('.title', resource: resource.model_name.human) %></h2>
+<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
+  <%= t('.title', resource: resource.model_name.human) %>
+</h2>
 
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
+  <div class="my-3">
     <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: TailwindHelper.input_classes %>
   </div>
 
   <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
     <div><%= t('.currently_waiting_confirmation_for_email', email: resource.unconfirmed_email) %></div>
   <% end %>
 
-  <div class="field">
+  <div class="my-3">
     <%= f.label :password %> <i>(<%= t('.leave_blank_if_you_don_t_want_to_change_it') %>)</i><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
+    <%= f.password_field :password, autocomplete: "new-password", class: TailwindHelper.input_classes %>
     <% if @minimum_password_length %>
       <br />
       <em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
     <% end %>
   </div>
 
-  <div class="field">
+  <div class="my-3">
     <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+    <%= f.password_field :password_confirmation, autocomplete: "new-password", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="my-3">
     <%= f.label :current_password %> <i>(<%= t('.we_need_your_current_password_to_confirm_your_changes') %>)</i><br />
-    <%= f.password_field :current_password, autocomplete: "current-password" %>
+    <%= f.password_field :current_password, autocomplete: "current-password", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="actions">
+  <div class="my-3">
-    <%= f.submit t('.update') %>
+    <%= f.submit t('.update'), class: TailwindHelper.primary_button_classes %>
   </div>
 <% end %>
 
+<!--
 <h3><%= t('.cancel_my_account') %></h3>
 
 <p><%= t('.unhappy') %> <%= button_to t('.cancel_my_account'), registration_path(resource_name), data: { confirm: t('.are_you_sure') }, method: :delete %></p>
 
 <%= link_to t('devise.shared.links.back'), :back %>
+-->

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

@@ -1,38 +1,40 @@
-<h2><%= t('.sign_up') %></h2>
+<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
+  <%= t('.sign_up') %>
+</h2>
 
 <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
+  <div class="field my-3">
     <%= f.label :first_name %><br />
-    <%= f.text_field :first_name, autofocus: true %>
+    <%= f.text_field :first_name, autofocus: true, class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="field my-3">
     <%= f.label :last_name %><br />
-    <%= f.text_field :last_name %>
+    <%= f.text_field :last_name, class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="field my-3">
     <%= f.label :email %><br />
-    <%= f.email_field :email, autocomplete: "email" %>
+    <%= f.email_field :email, autocomplete: "email", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="field my-3">
     <%= f.label :password %>
     <% if @minimum_password_length %>
     <em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
     <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
+    <%= f.password_field :password, autocomplete: "new-password", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="field my-3">
     <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+    <%= f.password_field :password_confirmation, autocomplete: "new-password", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="actions">
+  <div class="actions my-3">
-    <%= f.submit t('.sign_up') %>
+    <%= f.submit t('.sign_up'), class: TailwindHelper.primary_button_classes %>
   </div>
 <% end %>
 

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

@@ -1,25 +1,27 @@
-<h2><%= t('.sign_in') %></h2>
+<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
+  <%= t('.sign_in') %>
+</h2>
 
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="field">
+  <div class="my-3">
     <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", class: TailwindHelper.input_classes %>
   </div>
 
-  <div class="field">
+  <div class="my-3">
     <%= f.label :password %><br />
-    <%= f.password_field :password, autocomplete: "current-password" %>
+    <%= f.password_field :password, autocomplete: "current-password", class: TailwindHelper.input_classes %>
   </div>
 
   <% if devise_mapping.rememberable? %>
-    <div class="field">
+    <div class="my-3">
       <%= f.check_box :remember_me %>
       <%= f.label :remember_me %>
     </div>
   <% end %>
 
-  <div class="actions">
+  <div class="actions my-3">
-    <%= f.submit t('.sign_in') %>
+    <%= f.submit t('.sign_in'), class: TailwindHelper.primary_button_classes %>
   </div>
 <% end %>
 

app/views/layouts/application.html.erb

@@ -8,6 +8,7 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'react', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body>

app/views/layouts/devise.html.erb

@@ -8,8 +8,6 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
   </head>
 
   <body class="grid place-items-center h-screen">

config/locales/activerecord.yml

@@ -0,0 +1,13 @@
+pt-BR:
+  activerecord:
+    models:
+      user_document:
+        one: Documentos de Usuário
+        other: Documentos de Usuários
+      admin_user:
+        one: Usuário Administrador
+        other: Usuários Administradores
+    attributes:
+      user:
+        first_name: Primeiro nome
+        last_name: Último nome

config/locales/devise.en.yml

@@ -1,65 +0,0 @@
-# Additional translations at https://github.com/heartcombo/devise/wiki/I18n
-
-en:
-  devise:
-    confirmations:
-      confirmed: "Your email address has been successfully confirmed."
-      send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
-    failure:
-      already_authenticated: "You are already signed in."
-      inactive: "Your account is not activated yet."
-      invalid: "Invalid %{authentication_keys} or password."
-      locked: "Your account is locked."
-      last_attempt: "You have one more attempt before your account is locked."
-      not_found_in_database: "Invalid %{authentication_keys} or password."
-      timeout: "Your session expired. Please sign in again to continue."
-      unauthenticated: "You need to sign in or sign up before continuing."
-      unconfirmed: "You have to confirm your email address before continuing."
-    mailer:
-      confirmation_instructions:
-        subject: "Confirmation instructions"
-      reset_password_instructions:
-        subject: "Reset password instructions"
-      unlock_instructions:
-        subject: "Unlock instructions"
-      email_changed:
-        subject: "Email Changed"
-      password_change:
-        subject: "Password Changed"
-    omniauth_callbacks:
-      failure: "Could not authenticate you from %{kind} because \"%{reason}\"."
-      success: "Successfully authenticated from %{kind} account."
-    passwords:
-      no_token: "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided."
-      send_instructions: "You will receive an email with instructions on how to reset your password in a few minutes."
-      send_paranoid_instructions: "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes."
-      updated: "Your password has been changed successfully. You are now signed in."
-      updated_not_active: "Your password has been changed successfully."
-    registrations:
-      destroyed: "Bye! Your account has been successfully cancelled. We hope to see you again soon."
-      signed_up: "Welcome! You have signed up successfully."
-      signed_up_but_inactive: "You have signed up successfully. However, we could not sign you in because your account is not yet activated."
-      signed_up_but_locked: "You have signed up successfully. However, we could not sign you in because your account is locked."
-      signed_up_but_unconfirmed: "A message with a confirmation link has been sent to your email address. Please follow the link to activate your account."
-      update_needs_confirmation: "You updated your account successfully, but we need to verify your new email address. Please check your email and follow the confirmation link to confirm your new email address."
-      updated: "Your account has been updated successfully."
-      updated_but_not_signed_in: "Your account has been updated successfully, but since your password was changed, you need to sign in again."
-    sessions:
-      signed_in: "Signed in successfully."
-      signed_out: "Signed out successfully."
-      already_signed_out: "Signed out successfully."
-    unlocks:
-      send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
-      send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
-      unlocked: "Your account has been unlocked successfully. Please sign in to continue."
-  errors:
-    messages:
-      already_confirmed: "was already confirmed, please try signing in"
-      confirmation_period_expired: "needs to be confirmed within %{period}, please request a new one"
-      expired: "has expired, please request a new one"
-      not_found: "not found"
-      not_locked: "was not locked"
-      not_saved:
-        one: "1 error prohibited this %{resource} from being saved:"
-        other: "%{count} errors prohibited this %{resource} from being saved:"

config/locales/en.yml

@@ -1,33 +0,0 @@
-# Files in the config/locales directory are used for internationalization
-# and are automatically loaded by Rails. If you want to use locales other
-# than English, add the necessary files in this directory.
-#
-# To use the locales, use `I18n.t`:
-#
-#     I18n.t 'hello'
-#
-# In views, this is aliased to just `t`:
-#
-#     <%= t('hello') %>
-#
-# To use a different locale, set it with `I18n.locale`:
-#
-#     I18n.locale = :es
-#
-# This would use the information in config/locales/es.yml.
-#
-# The following keys must be escaped otherwise they will not be retrieved by
-# the default I18n backend:
-#
-# true, false, on, off, yes, no
-#
-# Instead, surround them with single quotes.
-#
-# en:
-#   'true': 'foo'
-#
-# To learn more, please read the Rails Internationalization guide
-# available at https://guides.rubyonrails.org/i18n.html.
-
-en:
-  hello: "Hello world"

spec/helpers/tailwind_helper_spec.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+require "rails_helper"
+
+# Specs in this file have access to a helper object that includes
+# the TailwindHelper. For example:
+#
+# describe TailwindHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+RSpec.describe(TailwindHelper, type: :helper) do
+  pending "add some examples to (or delete) #{__FILE__}"
+end