Polish sign-in screen

This commit is contained in:
Jason Zimdars
2024-09-11 16:27:15 -05:00
parent 925247acfc
commit bcfba64c69
+4 -4
View File
@@ -1,6 +1,6 @@
<% @page_title = "Sign in" %>
<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>">
<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 55ch;">
<%#= image_tag "blob.svg", class: "product__logo center colorize--black", size: 130 %>
<div class="bubble center" style="--bubble-color: #000; --bubble-rotate: -75deg; --bubble-size: 12cqi;">
<svg class="bubble__svg" style="stroke-width: 2rem;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
@@ -11,10 +11,10 @@
<h1 class="margin-none-block-start margin-block-end-double">Fizzy</h1>
<%= form_with url: session_path, class: "flex flex-column gap" do |form| %>
<%= form_with url: session_path, class: "flex flex-column gap txt-large" do |form| %>
<div class="flex align-center gap">
<%= translation_button(:email_address) %>
<label class="flex align-center gap input input--actor txt-large">
<label class="flex align-center gap input input--actor">
<%= form.email_field :email_address, required: true, class: "input full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address" %>
<%= image_tag "email.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
</label>
@@ -22,7 +22,7 @@
<div class="flex align-center gap">
<%= translation_button(:password) %>
<label class="flex align-center gap input input--actor txt-large">
<label class="flex align-center gap input input--actor">
<%= form.password_field :password, required: true, class: "input full-width", autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72 %>
<%= image_tag "password.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
</label>