Apply the new hotkey and style to all back buttons

Also updates design for email address change screens

app/views/account/join_codes/edit.html.erb

@@ -2,8 +2,11 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to account_join_code_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">&larr; <strong>Invite link</strong></span>
+    <%= link_to account_join_code_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to Invite link</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
     <% end %>
   </div>
 <% end %>

app/views/account/join_codes/show.html.erb

@@ -2,8 +2,11 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">&larr; <strong>Account Settings</strong></span>
+    <%= link_to account_settings_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to Account Settings</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
     <% end %>
   </div>
 <% end %>

app/views/boards/columns/closeds/show.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title divider divider--fade full-width">

app/views/boards/columns/not_nows/show.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title divider divider--fade full-width">

app/views/boards/columns/show.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @column.board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @column.board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@column.board) %>
   </div>
 
   <h1 class="header__title divider divider--fade full-width">

app/views/boards/columns/streams/show.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title divider divider--fade full-width">

app/views/boards/edit.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title">

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

@@ -1,14 +1,17 @@
 <% @page_title = "Confirm your new email address" %>
 
 <% content_for :header do %>
-  <div class="header__title">
-    <%= link_to edit_user_path(@membership.user, script_name: "/#{@tenant}"), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">&larr; <strong>My profile</strong></span>
+  <div class="header__actions header__actions--start">
+    <%= link_to edit_user_path(@membership.user, script_name: "/#{@tenant}"), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to My profile</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
     <% end %>
   </div>
 <% 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">
   <h1 class="txt-x-large font-weight-black margin-none">Check your email</h1>
   <p class="margin-none">We just sent an email to <strong><%= params[:email_address] %></strong></p>
   <p class="margin-none-block-start">Hit the link in the email to confirm this is the email address you want to use with Fizzy going forward.</p>

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

@@ -1,28 +1,30 @@
 <% @page_title = "Change your email" %>
 
 <% content_for :header do %>
-  <div class="header__title">
-    <%= link_to edit_user_path(@membership.user, script_name: "/#{@membership.tenant}"), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">&larr; <strong>My profile</strong></span>
+  <div class="header__actions header__actions--start">
+    <%= link_to edit_user_path(@membership.user, script_name: "/#{@membership.tenant}"), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to My profile</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
     <% end %>
   </div>
 <% end %>
 
-<div class="panel shadow center flex flex-column gap" style="--panel-size: 45ch;">
-  <header>
-    <h1 class="txt-x-large font-weight-black margin-none">
-      <%= @page_title %>
-    </h1>
-    <p class="margin-none">Enter your new email address, then hit the link to confirm it</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: email_addresses_path(membership_id: @membership.id), method: :post, class: "flex flex-column gap", data: { controller: "form", turbo: false } do |form| %>
-    <div class="flex align-center gap">
+  <%= form_with url: email_addresses_path(membership_id: @membership.id), method: :post, class: "flex flex-column gap-half", data: { controller: "form", turbo: false } do |form| %>
+    <div class="flex align-center gap-haf">
       <label class="flex align-center gap input input--actor">
         <%= form.email_field :email_address, class: "input full-width", autocomplete: "email", placeholder: "New email address", autofocus: true, required: true %>
       </label>
     </div>
 
+    <p class="margin-none">Enter your new email address, then hit the link to confirm it</p>
+
     <button type="submit" class="btn btn--link center" data-form-target="submit">
       <span>Continue</span>
       <%= icon_tag "arrow-right" %>

app/views/public/cards/show.html.erb

@@ -14,10 +14,10 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to published_board_url(@card.board), class: "btn borderless txt-medium", style: "view-transistion-name: card-board-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong class="font-black"><%= @card.board.name %></strong>
+    <%= link_to published_board_url(@card.board), class: "btn borderless txt-medium", style: "view-transistion-name: card-board-title;", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to <%= @card.board.name %></strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
       </span>
     <% end %>
   </div>

app/views/sessions/new.html.erb

@@ -3,7 +3,7 @@
 <div class="panel panel--centered flex flex-column gap-half">
   <h1 class="txt-x-large font-weight-black margin-block-end">Let’s get you in to Fizzy</h1>
 
-  <%= form_with url: session_path, class: "flex flex-column gap txt-medium" do |form| %>
+  <%= form_with url: session_path, class: "flex flex-column gap-half 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 txt-large full-width", autofocus: true, autocomplete: "username", placeholder: "Enter your email address…" %>

app/views/users/edit.html.erb

@@ -1,5 +1,16 @@
 <% @page_title = "Edit your profile" %>
 
+<% content_for :header do %>
+  <div class="header__actions header__actions--start">
+    <%= link_to user_path(@user), class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to profile</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
+      </span>
+    <% end %>
+  </div>
+<% end %>
+
 <div class="panel shadow center" style="--panel-size: 45ch;">
   <div class="flex flex-column gap txt-medium">
     <%= form_with model: @user, method: :patch, class: "flex flex-column gap", data: { controller: "form upload-preview" } do |form| %>

app/views/webhooks/edit.html.erb

@@ -2,10 +2,10 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @webhook, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @page_title %></strong>
+    <%= link_to @webhook, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to <%= @page_title %></strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
       </span>
     <% end %>
   </div>

app/views/webhooks/index.html.erb

@@ -2,35 +2,24 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to @board, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong><%= @board.name %></strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title"><%= @page_title %></h1>
-
-  <div class="header__actions header__actions--end">
-    <%= link_to new_board_webhook_path, class: "btn" do %>
-      <%= icon_tag "add" %>
-      <span class="for-screen-reader">Create a new webhook</span>
-    <% end %>
-  </div>
 <% end %>
 
 <%= tag.section class: "panel shadow center webhooks" do %>
   <% if @page.records.any? %>
-    <ul class="flex flex-column align-start gap margin-none unpad webhooks-list">
+    <ul class="flex flex-column align-start gap margin-none-block-start unpad webhooks-list">
       <%= render partial: "webhooks/webhook", collection: @page.records %>
     </ul>
   <% else %>
     <p>Webhooks can notify another application when something happens in this Fizzy board. You’ll choose which events to subscribe to and provide a URL to receive the data.</p>
     <p>For example, you could create a webhook that posts to a Campfire chat in Basecamp when new cards are added to Fizzy.</p>
-    <%= link_to new_board_webhook_path, class: "btn btn--link" do %>
-      <%= icon_tag "add" %>
-      <span>Set up a webhook</span>
-    <% end %>
+  <% end %>
+
+  <%= link_to new_board_webhook_path, class: "btn btn--link" do %>
+    <%= icon_tag "add" %>
+    <span>Set up a new webhook</span>
   <% end %>
 <% end %>

app/views/webhooks/new.html.erb

@@ -2,12 +2,7 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to board_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong>Webhooks</strong>
-      </span>
-    <% end %>
+    <%= link_back_to_board(@board) %>
   </div>
 
   <h1 class="header__title"><%= @page_title %></h1>

app/views/webhooks/show.html.erb

@@ -2,10 +2,10 @@
 
 <% content_for :header do %>
   <div class="header__actions header__actions--start">
-    <%= link_to board_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-      <span class="overflow-ellipsis">
-        &larr;
-        <strong>Webhooks</strong>
+    <%= link_to board_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.left@document->hotkey#click" } do %>
+      <span class="overflow-ellipsis flex align-center">
+        <strong>Back to Webhooks</strong>
+        <kbd class="txt-x-small margin-inline-start hide-on-touch">&larr;</kbd>
       </span>
     <% end %>
   </div>