bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style email and magic link code screens

Browse Source
This commit is contained in:
Jason Zimdars
2025-10-14 14:45:32 -05:00
committed by Stanko K.R.
parent 5cef4ffeb0
commit 193d8bd9b5
3 changed files with 49 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/sessions/new.html.erb
+19 -8
View File
@@ -1,25 +1,36 @@
<% @page_title = "Sign in" %>
<div class="panel shadow center margin-block-double <%= "shake" if flash[:alert] %>" style="--panel-size: 55ch;">
<h1 class="txt-xx-large margin-block-end-double">BOXCAR</h1>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= inline_svg "fizzy-logo" %>
<strong class="txt-medium overflow-ellipsis margin-none">BOXCAR</strong>
</div>
</nav>
<% end %>
<%= form_with url: session_path, class: "flex flex-column gap txt-large" do |form| %>
<div class="panel shadow center margin-block-double flex flex-column gap-half" style="--panel-size: 42ch; view-transition-name: sign-in-panel">
<header>
<h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
<p class="margin-none-block-start">Enter your email address to continue</p>
</header>
<%= form_with url: session_path, class: "flex flex-column gap txt-medium" do |form| %>
<div class="flex align-center gap">
<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" %>
<%= icon_tag "email", class: "txt-large" %>
<%= form.email_field :email_address, required: true, class: "input full-width", autofocus: true, autocomplete: "username", placeholder: "Email address" %>
</label>
</div>
<button type="submit" id="log_in" class="btn btn--reversed center">
<button type="submit" id="log_in" class="btn btn--link center">
<span>Go</span>
<%= icon_tag "arrow-right" %>
<span class="for-screen-reader">Sign in</span>
</button>
<% end %>
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
Fizzy&trade; version 0
BOXCAR&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<% end %>