Add top bar, input active states

TelosLabs · Jul 16, 2024 · 495d3ea · 495d3ea
1 parent 0068b79
commit 495d3ea
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 24 deletions.
diff --git a/app/assets/images/main-logo.svg b/app/assets/images/main-logo.svg
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -13,13 +13,21 @@
 
   <body>
     <main class="w-full relative mx-auto max-w-[1440px]">
+      <% if !current_page?(new_session_path) %>
+        <div class="flex justify-center py-6 mx-auto border-b border-b-white bg-purple-dark">
+          <%= inline_svg_tag("main-logo.svg") %>
+        </div>
+      <% end %>
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
           <div><%= notice %></div>
           <div><%= alert %></div>
         <% end %>
       <% end %>
       <%= yield %>
+      <% if user_signed_in? %>
+        <%= button_to "Log out", session_path, method: :delete %>
+      <% end %>
     </main>
   </body>
 </html>
diff --git a/app/views/password_resets/edit.html.erb b/app/views/password_resets/edit.html.erb
@@ -1,23 +1,27 @@
-<h1>Reset Your Password</h1>
-
-<%= form_with model: @user, url: password_reset_path(token: params[:token]) do |form| %>
-  <% if form.object.errors.any? %>
-    <% form.object.errors.full_messages.each do |message| %>
-      <div> <%= message %></div>
-    <% end %>
-  <% end %>
-
-  <div>
-    <%= form.label :password %>
-    <%= form.password_field :password %>
+<div class="flex flex-col items-center h-screen px-5 pt-10 bg-purple-dark">
+  <div class="flex flex-col w-full mb-6">
+    <h1 class="mb-4 text-4xl italic font-black text-white">Reset your password</h1>
   </div>
 
-  <div>
-    <%= form.label :password_confirmation %>
-    <%= form.password_field :password_confirmation %>
-  </div>
+  <div class="w-full">
+    <%= form_with model: @user, url: password_reset_path(token: params[:token]) do |form| %>
+      <% if form.object.errors.any? %>
+        <% form.object.errors.full_messages.each do |message| %>
+          <div> <%= message %></div>
+        <% end %>
+      <% end %>
+      <div class="mb-10">
+        <div class="flex flex-col w-full mb-6">
+          <%= form.label :password, class: "text-white italic font-bold mb-2" %>
+          <%= form.password_field :password, placeholder: "You know how a strong password goes, right?", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
+        </div>
+
+        <div class="flex flex-col w-full mb-6">
+          <%= form.label :password_confirmation, class: "text-white italic font-bold mb-2" %>
+          <%= form.password_field :password_confirmation, placeholder: "Confirm strong password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
+        </div>
 
-  <div>
-    <%= form.submit "Reset Your Password" %>
+      <%= form.submit "Reset Your Password", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %>
+    <% end %>
   </div>
-<% end %>
+</div>
diff --git a/app/views/password_resets/new.html.erb b/app/views/password_resets/new.html.erb
@@ -9,7 +9,7 @@
       <div class="mb-10">
         <div class="flex flex-col w-full mb-6">
           <%= form.label :email, class: "text-white italic font-bold mb-2" %>
-          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "email_field" } %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
         </div>
 
       <%= form.submit "Send recovery email", class: "w-full bg-red py-4 text-white font-black italic rounded-[10px] uppercase", data: { test_id: "sign_up_button" } %>

diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
@@ -14,12 +14,12 @@
       <div class="mb-10">
         <div class="flex flex-col w-full mb-6">
           <%= form.label :email, class: "text-white italic font-bold mb-2" %>
-          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "email_field" } %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "email_field" } %>
         </div>
 
         <div class="flex flex-col mb-6">
           <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white", data: { test_id: "password_field" } %>
+          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white", data: { test_id: "password_field" } %>
         </div>
 
         <div class="flex flex-col">

diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
@@ -10,12 +10,12 @@
       <div class="mb-10">
         <div class="flex flex-col w-full mb-6">
           <%= form.label :email, class: "text-white italic font-bold mb-2" %>
-          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white" %>
+          <%= form.email_field :email, placeholder: "email@example.com", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
         </div>
 
         <div class="flex flex-col">
           <%= form.label :password, class: "text-white italic font-bold mb-2" %>
-          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white" %>
+          <%= form.password_field :password, placeholder: "Password", class: "bg-transparent border border-2 border-white rounded-md text-white placeholder-white focus:bg-white focus:text-black focus:placeholder-gray focus:border-white focus:ring-white" %>
         </div>
       </div>