feat: update sign in page to arcab brand - bg, floating logo, hide navbar

app/javascript/application.scss

@@ -163,3 +163,7 @@ button.btn-disabled .enabled {
 markdown-editor [contenteditable] p {
   margin-bottom: 18px;
 }
+
+body {
+  overflow-x: hidden;
+}

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

@@ -1,8 +1,22 @@
 <%= content_for(:canonical_url, new_user_session_url) %>
-<div class="max-w-lg mx-auto px-2">
+<% content_for(:hide_navbar, true) %>
+<% content_for(:full_width, true) %>
+<section class="relative min-h-screen overflow-hidden -mx-4 -mt-3 sm:-mx-2" style="background-color: #faf7f5;">
+  <div class="absolute inset-x-0 top-0 z-0 h-[40vh] bg-no-repeat"
+       style="background-image: url('/images/login-top-bg.svg'); background-size: cover;">
+  </div>
+  <div class="relative z-10 flex min-h-screen items-center justify-center pb-[20vh]">
+    <div class="w-full max-w-sm bg-white p-5 text-slate-900 rounded-lg border border-gray-200 shadow-md">
+      <div class="mb-4 flex flex-col gap-2">
+        <h3 class="text-xl font-semibold leading-none tracking-tight">Welcome home, arcaber.</h3>
+        <p class="text-sm font-normal text-slate-500">
+          By continuing, you accept
+          <span class="cursor-pointer underline">arcab Data, Privacy and Safety policies</span> for all
+          <span class="cursor-pointer underline">arcab Products and Services.</span>
+        </p>
+      </div>
       <%= render 'devise/shared/select_server' if Docuseal.multitenant? %>
-  <h1 class="text-4xl font-bold text-center mt-8"><%= t('sign_in') %></h1>
+      <%= form_for(resource, as: resource_name, html: { class: 'space-y-4' }, data: { turbo: params[:redir].blank? }, url: session_path(resource_name)) do |f| %>
-  <%= form_for(resource, as: resource_name, html: { class: 'space-y-6' }, data: { turbo: params[:redir].blank? }, url: session_path(resource_name)) do |f| %>
         <%= render 'hidden_fields' %>
         <div class="space-y-2" dir="auto">
           <div class="form-control">
@@ -22,3 +36,8 @@
       <%= render 'extra_links' %>
       <%= render 'devise/shared/links' %>
     </div>
+  </div>
+  <div class="fixed bottom-24 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center">
+    <img src="/images/login-floating-logo.svg" alt="arcab logo" width="120" height="120" />
+  </div>
+</section>

app/views/layouts/application.html.erb

@@ -28,9 +28,9 @@
     <% end %>
     <turbo-frame id="modal"></turbo-frame>
     <turbo-frame id="drawer"></turbo-frame>
-    <%= render 'shared/navbar' %>
+    <% unless content_for?(:hide_navbar) %><%= render 'shared/navbar' %><% end %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>
-    <div class="max-w-6xl mx-auto px-4 md:px-2 mb-8">
+    <div class="<%= content_for?(:full_width) ? '' : 'max-w-6xl mx-auto px-4 md:px-2 mb-8' %>">
       <%= yield %>
     </div>
     <%= render 'shared/body_scripts' %>

public/images/login-floating-logo.svg

@@ -0,0 +1,8 @@
+<svg width="103" height="24" viewBox="0 0 103 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M97.92 2.04783L93.3495 9.96H102.24V14.04H93.3495L97.92 21.9522L94.3712 24L90.24 16.8482L86.1088 24L82.56 21.9522L87.1305 14.04H78.24V9.96H87.1305L82.56 2.04783L86.1088 0L90.24 7.15179L94.3712 0L97.92 2.04783Z" fill="#0F0F0F"/>
+<path d="M11.2498 23.617V20.8404H11.0905C10.4849 22.7553 8.70027 24 6.5013 24C2.29458 24 0 20.8723 0 15.2553C0 9.67021 2.29458 6.57447 6.5013 6.57447C8.70027 6.57447 10.4849 7.78723 11.0905 9.70213H11.2498V6.95745H15.329V23.617H11.2498ZM7.80794 20.617C9.75195 20.617 11.2498 19.6596 11.2498 17.9043V12.6064C11.2498 10.9787 9.75195 9.92553 7.80794 9.92553C5.6727 9.92553 4.27046 11.4574 4.27046 13.8511V16.7234C4.27046 19.117 5.6727 20.617 7.80794 20.617Z" fill="#0F0F0F"/>
+<path d="M22.041 23.617H17.9617V6.95745H22.041V10.4043H22.2003C22.6146 8.64894 23.9213 6.95745 26.5983 6.95745H27.4906V10.8191H26.2158C23.4432 10.8191 22.041 11.5851 22.041 13.4043V23.617Z" fill="#0F0F0F"/>
+<path d="M35.2908 24C30.3192 24 27.6103 20.5851 27.6103 15.2553C27.6103 9.92553 30.3829 6.57447 35.2908 6.57447C38.6371 6.57447 40.836 8.1383 41.824 10.7872L38.4777 12.2872C38.0953 10.883 37.0755 9.8617 35.2908 9.8617C32.9962 9.8617 31.8808 11.4574 31.8808 13.7872V16.8191C31.8808 19.1489 32.9962 20.7128 35.2908 20.7128C37.2348 20.7128 38.1909 19.5957 38.7964 18.0957L41.9196 19.5957C40.8042 22.5319 38.5096 24 35.2908 24Z" fill="#0F0F0F"/>
+<path d="M53.319 23.617V20.8404H53.1597C52.5542 22.7553 50.7695 24 48.5705 24C44.3638 24 42.0692 20.8723 42.0692 15.2553C42.0692 9.67021 44.3638 6.57447 48.5705 6.57447C50.7695 6.57447 52.5542 7.78723 53.1597 9.70213H53.319V6.95745H57.3983V23.617H53.319ZM49.8771 20.617C51.8212 20.617 53.319 19.6596 53.319 17.9043V12.6064C53.319 10.9787 51.8212 9.92553 49.8771 9.92553C47.7419 9.92553 46.3397 11.4574 46.3397 13.8511V16.7234C46.3397 19.117 47.7419 20.617 49.8771 20.617Z" fill="#0F0F0F"/>
+<path d="M60.0309 23.617V0H64.1102V9.70213H64.2377C64.8432 7.78723 66.6279 6.57447 68.8268 6.57447C73.0654 6.57447 75.36 9.67021 75.36 15.2553C75.36 20.8723 73.0654 24 68.8268 24C66.6279 24 64.8751 22.7553 64.2377 20.8404H64.1102V23.617H60.0309ZM67.5202 20.617C69.6554 20.617 71.0895 19.117 71.0895 16.7234V13.8511C71.0895 11.4574 69.6554 9.92553 67.5202 9.92553C65.5762 9.92553 64.1102 10.9787 64.1102 12.6064V17.9043C64.1102 19.6596 65.5762 20.617 67.5202 20.617Z" fill="#0F0F0F"/>
+</svg>

public/images/login-top-bg.svg

@@ -0,0 +1,20 @@
+<svg width="1440" height="370" viewBox="0 0 1440 370" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="1440" height="370" fill="url(#pattern0_3_6300)"/>
+<defs>
+<pattern id="pattern0_3_6300" patternUnits="userSpaceOnUse" patternTransform="matrix(152 0 0 152 0 0)" preserveAspectRatio="none" viewBox="0 0 152 152" width="1" height="1">
+<g id="pattern0_3_6300_inner">
+<g clip-path="url(#clip0_3_6300)">
+<path d="M96.48 49.4609L84.2921 70.56H108V81.44H84.2921L96.48 102.539L87.0166 108L76 88.9286L64.9834 108L55.52 102.539L67.7079 81.44H44V70.56H67.7079L55.52 49.4609L64.9834 44L76 63.0714L87.0166 44L96.48 49.4609Z" fill="black"/>
+<path d="M172.48 11.4609L160.292 32.56H184V43.44H160.292L172.48 64.5391L163.017 70L152 50.9286L140.983 70L131.52 64.5391L143.708 43.44H120V32.56H143.708L131.52 11.4609L140.983 6L152 25.0714L163.017 6L172.48 11.4609Z" fill="black"/>
+<path d="M20.48 11.4609L8.29211 32.56H32V43.44H8.29211L20.48 64.5391L11.0166 70L0 50.9286L-11.0166 70L-20.48 64.5391L-8.29211 43.44H-32V32.56H-8.29211L-20.48 11.4609L-11.0166 6L0 25.0714L11.0166 6L20.48 11.4609Z" fill="black"/>
+<path d="M49.4609 131.52L70.56 143.708V120H81.44V143.708L102.539 131.52L108 140.983L88.9286 152L108 163.017L102.539 172.48L81.44 160.292V184H70.56V160.292L49.4609 172.48L44 163.017L63.0714 152L44 140.983L49.4609 131.52Z" fill="black"/>
+<path d="M125.461 93.52L146.56 105.708V82H157.44V105.708L178.539 93.52L184 102.983L164.929 114L184 125.017L178.539 134.48L157.44 122.292V146H146.56V122.292L125.461 134.48L120 125.017L139.071 114L120 102.983L125.461 93.52Z" fill="black"/>
+<path d="M-26.5391 93.52L-5.44 105.708V82H5.44L5.44 105.708L26.5391 93.52L32 102.983L12.9286 114L32 125.017L26.5391 134.48L5.44 122.292V146H-5.44V122.292L-26.5391 134.48L-32 125.017L-12.9286 114L-32 102.983L-26.5391 93.52Z" fill="black"/>
+<path d="M49.4609 -20.48L70.56 -8.29211V-32H81.44V-8.29211L102.539 -20.48L108 -11.0166L88.9286 0L108 11.0166L102.539 20.48L81.44 8.29211V32H70.56V8.29211L49.4609 20.48L44 11.0166L63.0714 0L44 -11.0166L49.4609 -20.48Z" fill="black"/>
+</g>
+</g>
+</pattern><clipPath id="clip0_3_6300">
+<rect width="152" height="152" fill="white"/>
+</clipPath>
+</defs>
+</svg>