From 193d8bd9b5031d42d21eca0e23db1aa1b6bed367 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 14 Oct 2025 14:45:32 -0500
Subject: [PATCH] Style email and magic link code screens

---
 app/assets/stylesheets/fizzy-menu.css        | 12 ++++++++
 app/views/sessions/magic_links/show.html.erb | 29 ++++++++++++--------
 app/views/sessions/new.html.erb              | 27 ++++++++++++------
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css
index cf55a3630..bb3cf24a3 100644
--- a/app/assets/stylesheets/fizzy-menu.css
+++ b/app/assets/stylesheets/fizzy-menu.css
@@ -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;
diff --git a/app/views/sessions/magic_links/show.html.erb b/app/views/sessions/magic_links/show.html.erb
index a47db86fb..e840ed5e8 100644
--- a/app/views/sessions/magic_links/show.html.erb
+++ b/app/views/sessions/magic_links/show.html.erb
@@ -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 %>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index 9c0cf2464..f3fb2b3f2 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -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 %>