Copy edits for unified flow

app/controllers/join_codes_controller.rb

@@ -4,6 +4,8 @@ class JoinCodesController < ApplicationController
   before_action :set_join_code
   before_action :ensure_join_code_is_valid
 
+  layout "public"
+
   def new
     @account_name = ApplicationRecord.with_tenant(tenant) { Account.sole.name }
   end

app/controllers/users/joins_controller.rb

@@ -3,6 +3,8 @@ class Users::JoinsController < ApplicationController
 
   before_action :set_join_code, :ensure_join_code_is_valid
 
+  layout "public"
+
   def new
   end
 

app/mailers/magic_link_mailer.rb

@@ -3,7 +3,7 @@ class MagicLinkMailer < ApplicationMailer
     @magic_link = magic_link
     @identity = @magic_link.identity
 
-    mail to: @identity.email_address, subject: "Sign in to Fizzy"
+    mail to: @identity.email_address, subject: "Confirm your email"
   end
 
   private

app/views/join_codes/new.html.erb

@@ -1,12 +1,7 @@
-<% @page_title = "Join #{@account_name}" %>
+<% @page_title = "Join #{@account_name} in Fizzy" %>
 
 <div class="panel panel--centered flex flex-column gap-half">
-  <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>
+  <h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
 
   <%= form_with url: join_path(code: params[:code], tenant: params[:tenant]), class: "flex flex-column gap txt-medium", data: { controller: "form" } do |form| %>
     <div class="flex align-center gap">
@@ -16,7 +11,7 @@
     </div>
 
     <button type="submit" id="log_in" class="btn btn--link center" data-form-target="submit">
-      <span>Join</span>
+      <span>Continue</span>
       <%= icon_tag "arrow-right" %>
     </button>
   <% end %>

app/views/layouts/mailer.html.erb

@@ -63,7 +63,7 @@
         background: #2d71e5;
         border-color: #2d71e5;
         border-radius: 3rem;
-        color: #ffffff;
+        color: #ffffff !important;
         font-weight: 500;
         padding: 0.5em 1em;
         text-decoration: none;

app/views/mailers/identity_mailer/email_change_confirmation.html.erb

@@ -1,5 +1,4 @@
-<h1 class="title">Confirm your email address change</h1>
-<p class="subtitle">Hit the button below to use this email address in Fizzy.</p>
+<p class="subtitle">Confirm your email address change</p>
 
 <%= link_to "Yes use use this email address", email_address_confirmation_url(membership_id: @membership.id, email_address_token: @token), class: "btn" %>
 

app/views/mailers/magic_link_mailer/sign_in_instructions.html.erb

@@ -1,9 +1,8 @@
-<h1 class="title">Sign in to Fizzy</h1>
-<p class="subtitle">Hit the button below to sign in to Fizzy on this device</p>
+<p class="subtitle">Hit the button below to confirm your email.</p>
 
-<%= link_to "Sign in to Fizzy", session_magic_link_url(code: @magic_link.code), class: "btn" %>
+<%= link_to "Confirm and return to Fizzy", session_magic_link_url(code: @magic_link.code), class: "btn" %>
 
-<p class="margin-block-start-double">If you’re signing in on another device, enter this special code:
+<p class="margin-block-start-double">If Fizzy is on another device, enter this special code instead:
   <br><strong class="txt-large"><%= @magic_link.code %></strong>
 </p>
 

app/views/mailers/magic_link_mailer/sign_in_instructions.text.erb

@@ -1,8 +1,6 @@
-Sign in to Fizzy
-<%= "=" * 80 %>
+Hit the button below to confirm your email:
 
-Open this link in your browser to login on this device:
 <%= session_magic_link_url(code: @magic_link.code) %>
 
-If you're signing in on another device, enter this code:
+If Fizzy is on another device, enter this special code instead:
 <%= @magic_link.code %>

app/views/memberships/email_addresses/new.html.erb

@@ -13,7 +13,7 @@
     <h1 class="txt-x-large font-weight-black margin-none">
       <%= @page_title %>
     </h1>
-    <p class="margin-none">Enter your new email address. We'll send you a confirmation to verify it.</p>
+    <p class="margin-none">Enter your new email address, then hit the link to confirm it</p>
   </header>
 
   <%= form_with url: email_addresses_path(membership_id: @membership.id), method: :post, class: "flex flex-column gap", data: { controller: "form", turbo: false } do |form| %>
@@ -23,8 +23,8 @@
       </label>
     </div>
 
-    <button type="submit" class="btn btn--reversed center" data-form-target="submit">
-      <span>Next</span>
+    <button type="submit" class="btn btn--link center" data-form-target="submit">
+      <span>Continue</span>
       <%= icon_tag "arrow-right" %>
     </button>
   <% end %>

app/views/sessions/magic_links/show.html.erb

@@ -3,7 +3,7 @@
 <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"><%= @page_title %></h1>
-    <p class="margin-none-block-start txt-medium">We just emailed you a link to sign in.</p>
+    <p class="margin-none-block-start txt-medium">Then hit the link to continue</p>
   </header>
 
   <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>

app/views/sessions/new.html.erb

@@ -1,4 +1,4 @@
-<% @page_title = "Sign in" %>
+<% @page_title = "Enter your email" %>
 
 <div class="panel panel--centered flex flex-column gap-half">
   <h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>

app/views/users/joins/new.html.erb

@@ -1,24 +1,17 @@
-<% @page_title = "Join #{Account.sole.name}" %>
+<% @page_title = "Great! Now enter your name" %>
 
 <div class="panel panel--centered flex flex-column gap-half">
-  <header>
-    <h1 class="txt-x-large font-weight-black margin-none">
-      <%= @page_title %>
-    </h1>
-
-    <p class="margin-none-block-start">Enter your name to continue</p>
-  </header>
+  <h1 class="txt-large font-weight-black margin-none"><%= @page_title %></h1>
 
   <%= form_with scope: "user", url: users_joins_path(membership: params[:membership]), class: "flex flex-column gap txt-medium", data: { controller: "form" } do |form| %>
     <div class="flex align-center gap">
       <label class="flex align-center gap input input--actor">
-        <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
-        <%= icon_tag "person", class: "txt-large" %>
+        <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Full name", autofocus: true, required: true, data: { "1p-ignore": true } %>
       </label>
     </div>
 
     <button type="submit" id="log_in" class="btn btn--link center" data-form-target="submit">
-      <span>Join</span>
+      <span>Continue</span>
       <%= icon_tag "arrow-right" %>
     </button>
   <% end %>

gems/fizzy-saas/app/views/signup/memberships/new.html.erb

@@ -1,12 +1,12 @@
-<% @page_title = "Create your account" %>
+<% @page_title = "Create your new Fizzy account" %>
 
-<div class="panel panel--centered flex flex-column gap-half <%= "shake" if flash[:alert] %>">
-  <h1 class="txt-x-large font-weight-black margin-none"><%= @page_title %></h1>
+<div class="panel panel--centered full-width flex flex-column gap-half <%= "shake" if flash[:alert] %>">
+  <h1 class="txt-large font-weight-black margin-none"><%= @page_title %></h1>
 
   <%= form_with model: @signup, url: saas.signup_membership_path, scope: "signup", class: "flex flex-column gap", data: { controller: "form" } do |form| %>
     <%= form.hidden_field :new_user %>
 
-    <%= form.text_field :full_name, class: "input", autocomplete: "name", placeholder: "Your name", autofocus: true, required: true %>
+    <%= form.text_field :full_name, class: "input", autocomplete: "name", placeholder: "Full name", autofocus: true, required: true %>
 
     <% if @signup.errors.any? %>
       <div class="margin-block-half">