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

Update design, logo, and copy

Browse Source
This commit is contained in:
Jason Zimdars
2025-10-23 14:20:36 -07:00
committed by Stanko K.R.
parent a429f05503
commit 5652e5699f
12 changed files with 49 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/fizzy-menu.css
+5 -5
View File
@@ -1,13 +1,13 @@
@layer components {
.fizzy-header-logo {
.boxcar-header-logo {
color: var(--color-ink);
inline-size: auto;
margin-block-start: 0.1em;
svg {
img {
block-size: auto;
inline-size: 1.1em;
margin-block-end: 0.2em;
margin-inline-end: 0.8ch;
inline-size: 1.15em;
margin-inline-end: 0.8ch;
}
}
app/controllers/sessions/login_menus_controller.rb
+2
View File
@@ -2,6 +2,8 @@ class Sessions::LoginMenusController < ApplicationController
require_untenanted_access
require_identified_access
layout "public"
def show
@tenants = IdentityProvider.tenants_for(resume_identity)
end
app/controllers/sessions/magic_links_controller.rb
+2
View File
@@ -3,6 +3,8 @@ class Sessions::MagicLinksController < ApplicationController
require_unidentified_access
rate_limit to: 10, within: 15.minutes, only: :create, with: -> { redirect_to session_magic_link_path, alert: "Try again in 15 minutes." }
layout "public"
def show
end
app/controllers/sessions/starts_controller.rb
+2
View File
@@ -2,6 +2,8 @@ class Sessions::StartsController < ApplicationController
allow_unauthenticated_access
require_identified_access
layout "public"
def new
end
app/controllers/sessions_controller.rb
+2
View File
@@ -3,6 +3,8 @@ class SessionsController < ApplicationController
require_unidentified_access only: %i[ new create ]
rate_limit to: 10, within: 3.minutes, only: :create, with: -> { redirect_to new_session_path, alert: "Try again later." }
layout "public"
def new
end
app/views/layouts/public.html.erb
+7 -6
View File
@@ -5,7 +5,12 @@
<body class="public" data-controller="local-time timezone-cookie" data-action="turbo:morph@window->local-time#refreshAll">
<header class="header" id="header">
<a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
<%= yield :header %>
<nav>
<%= link_to "https://box-car.com", class: "boxcar-header-logo center flex-inline align-center txt-normal" do %>
<%= image_tag "logo.png" %>
<strong class="txt-medium overflow-ellipsis margin-none">BOXCAR</strong>
<% end %>
</nav>
</header>
<main id="main">
@@ -13,10 +18,6 @@
</main>
<footer id="footer">
<div class="justify-center center margin-block-double flex align-end gap">
<%= image_tag "logo.png", size: 28 %>
<strong><a href="https://box-car.com" class="txt-ink">Made with Boxcar&trade;</a></strong>
</div>
</footer>
<%= yield :footer %>
</body>
</html>
app/views/sessions/_footer.html.erb
+3
View File
@@ -0,0 +1,3 @@
<div class="txt-align-center center margin-block-double txt-subtle txt-small">
BOXCAR beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
app/views/sessions/login_menus/show.html.erb
+7 -19
View File
@@ -1,22 +1,13 @@
<% @page_title = "Choose an account" %>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= image_tag "logo.png", style: "inline-size: 1.15em; margin-inline-end: 0.8ch; block-size: auto;" %>
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
</div>
</nav>
<% end %>
<% cache [ Current.identity_token, @tenants ] do %>
<div
class="panel shadow center margin-block-double flex flex-column gap-half"
style="--panel-size: 42ch; view-transition-name: sign-in-panel; --popup-icon-size: 24px; --popup-item-padding-inline: 0.5rem;"
class="panel panel--centered flex flex-column gap-half"
style="--popup-icon-size: 24px; --popup-item-padding-inline: 0.5rem;"
>
<% if @tenants.present? %>
<h1 class="txt-x-large font-weight-black margin-none">
Choose a Fizzy account
Your BOXCAR accounts
</h1>
<menu class="popup__list pad border-radius border">
<% @tenants.each do |tenant| %>
@@ -30,14 +21,13 @@
</menu>
<% else %>
<h1 class="txt-x-large font-weight-black margin-none">Hmm...</h1>
<p class="margin-none-block-start">You don’t have any Fizzy accounts.</p>
<p class="margin-none-block-start">You don’t have any BOXCAR accounts.</p>
<% end %>
<% if defined?(saas) %>
<div class="margin-block-start">
<%= link_to saas.new_signup_completion_path, class: "btn center txt-small" do %>
<%= icon_tag "add" %>
<span>Create a Fizzy account</span>
<%= link_to saas.new_signup_completion_path, class: "btn btn--plain txt-link center txt-small" do %>
<span>Sign up for a new BOXCAR account</span>
<% end %>
</div>
<% end %>
@@ -45,7 +35,5 @@
<% end %>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
Fizzy&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<%= render "sessions/footer" %>
<% end %>
app/views/sessions/magic_links/show.html.erb
+11 -24
View File
@@ -1,34 +1,21 @@
<% @page_title = "Enter your sign-in code" %>
<% @page_title = "Check your email" %>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= image_tag "logo.png", style: "inline-size: 1.15em; margin-inline-end: 0.8ch; block-size: auto;" %>
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
</div>
</nav>
<% end %>
<div class="panel shadow center margin-block-double flex flex-column gap-half <%= "shake" if flash[:alert] %>" style="--panel-size: 42ch; view-transition-name: sign-in-panel">
<div class="panel panel--centered flex flex-column gap-half <%= "shake" if flash[:alert] %>">
<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>
<h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
<p class="margin-none-block-start txt-medium">We just emailed you a link to sign in.</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">
<%= form.text_field :code, required: true, class: "input center txt-align-enter", autofocus: true, "data-1p-ignore": true, autocomplete: "one-time-code", maxlength: "6", placeholder: "••••••", value: params[:code] %>
</div>
<p class="margin-none-block-start margin-block-end-half txt-small txt-subtle">If your email is on a different device, enter the code included in the email below.</p>
<button type="submit" id="log_in" class="btn btn--link center">
<span>Next</span>
<%= icon_tag "arrow-right" %>
</button>
<%= form_with url: session_magic_link_path, method: :post, html: { data: { controller: token_list("form", "auto-submit" => params[:code].present?)} } do |form| %>
<%= form.text_field :code, required: true, class: "input center txt-align-enter txt-normal",
autofocus: false, autocorrect: "off", autocapitalize: "off", spellcheck: "false", "data-1p-ignore": true,
autocomplete: "one-time-code", maxlength: "6", placeholder: "••••••", value: params[:code],
data: { form_target: "input", action: "paste->form#submit, keydown.enter->form#submit" } %>
<% end %>
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
Fizzy&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<%= render "sessions/footer" %>
<% end %>
app/views/sessions/new.html.erb
+4 -18
View File
@@ -1,19 +1,7 @@
<% @page_title = "Sign in" %>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= image_tag "logo.png", style: "inline-size: 1.15em; margin-inline-end: 0.8ch; block-size: auto;" %>
<strong class="txt-medium overflow-ellipsis margin-none">BOXCAR</strong>
</div>
</nav>
<% end %>
<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>
<div class="panel panel--centered flex flex-column gap-half">
<h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
<%= form_with url: session_path, class: "flex flex-column gap txt-medium" do |form| %>
<div class="flex align-center gap">
@@ -23,14 +11,12 @@
</div>
<button type="submit" id="log_in" class="btn btn--link center">
<span>Go</span>
<span>Continue</span>
<%= icon_tag "arrow-right" %>
</button>
<% end %>
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
BOXCAR&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<%= render "sessions/footer" %>
<% end %>
app/views/sessions/starts/new.html.erb
+2 -13
View File
@@ -1,16 +1,7 @@
<% @hide_footer_frames = true %>
<% @page_title = "Signing in..." %>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= image_tag "logo.png", style: "inline-size: 1.15em; margin-inline-end: 0.8ch; block-size: auto;" %>
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
</div>
</nav>
<% end %>
<div class="panel shadow center flex flex-column gap-half" style="--panel-size: 45ch;">
<div class="panel panel--centered flex flex-column gap-half">
<header>
<h1 class="txt-x-large font-weight-black margin-none">
<%= @page_title %>
@@ -24,7 +15,5 @@
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
Fizzy&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<%= render "sessions/footer" %>
<% end %>
app/views/users/new.html.erb
+2 -16
View File
@@ -1,18 +1,6 @@
<% @page_title = "Join #{Account.sole.name}" %>
<% content_for :header do %>
<nav>
<div class="fizzy-header-logo center flex-inline align-center txt-normal">
<%= inline_svg "logo" %>
<strong class="txt-medium overflow-ellipsis margin-none">BOXCAR</strong>
</div>
</nav>
<% end %>
<div
class="panel shadow center margin-block-double flex flex-column gap-half"
style="--panel-size: 42ch; view-transition-name: sign-in-panel"
>
<div class="panel panel--centered flex flex-column gap-half">
<header>
<h1 class="txt-x-large font-weight-black margin-none">
<%= @page_title %>
@@ -42,7 +30,5 @@
</div>
<% content_for :footer do %>
<div class="txt-align-center center margin-block-double txt-subtle">
BOXCAR&trade; Beta. <%= mail_to "support@37signals.com", "Need help?", class: "txt-link" %>
</div>
<%= render "sessions/footer" %>
<% end %>