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/assets/stylesheets/fizzy-menu.css
+12
View File
@@ -1,4 +1,16 @@
@layer components {
.fizzy-header-logo {
inline-size: auto;
margin-block-start: 0.1em;
svg {
block-size: auto;
inline-size: 1.1em;
margin-block-end: 0.2em;
margin-inline-end: 0.8ch;
}
}
.input:is(.fizzy-menu-trigger) {
--input-background: var(--color-canvas);
--input-border-color: transparent;
app/views/sessions/magic_links/show.html.erb
+18 -11
View File
@@ -1,29 +1,36 @@
<% @page_title = "Magic link" %>
<% @page_title = "Enter your sign-in code" %>
<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">Check your email</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">Fizzy</strong>
</div>
</nav>
<% end %>
<p>We just emailed you a special code.</p>
<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">Check your email</h1>
<p class="margin-none-block-start">We just emailed you a special code</p>
</header>
<%= form_with url: session_magic_link_path, method: :post, html: { class: "flex flex-column gap", data: { controller: token_list("auto-submit" => params[:code].present?)} } do |form| %>
<div class="flex align-center gap">
<label class="flex align-center gap input input--actor">
<%= form.text_field :code, required: true, class: "input full-width text-align-center", autofocus: true, autocomplete: "code", placeholder: "Enter the code", value: params[:code] %>
<%= form.text_field :code, required: true, class: "input full-width txt-align-center", autofocus: true, autocomplete: "code", placeholder: "Enter the code", value: params[:code] %>
</label>
</div>
<button type="submit" class="btn btn--reversed center">
<button type="submit" id="log_in" class="btn btn--link center">
<span>Next</span>
<%= icon_tag "arrow-right" %>
<span class="for-screen-reader">Next</span>
</button>
<% end %>
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
Fizzy&trade; version 0
Fizzy&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<% end %>
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 %>