From daee27194016504652367ea276081105d7b38f7f Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 16 Sep 2025 12:19:56 -0500
Subject: [PATCH] Style show view

---
 app/views/webhooks/_delivery.html.erb |  6 +-
 app/views/webhooks/edit.html.erb      |  6 +-
 app/views/webhooks/show.html.erb      | 79 +++++++++++++--------------
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/app/views/webhooks/_delivery.html.erb b/app/views/webhooks/_delivery.html.erb
index ced1f9e2c..8dba2f474 100644
--- a/app/views/webhooks/_delivery.html.erb
+++ b/app/views/webhooks/_delivery.html.erb
@@ -1,8 +1,8 @@
 <%= tag.li id: dom_id(delivery), class: token_list(delivery.succeeded? && "delivery--succeeded") do %>
-  <div>
+  <strong>
     <%= delivery.state %>
-  </div>
-  <div>
+  </strong>
+  <div class="txt-subtle">
     <%= time_tag delivery.created_at, time_ago_in_words(delivery.created_at) %>
   </div>
 <% end %>
diff --git a/app/views/webhooks/edit.html.erb b/app/views/webhooks/edit.html.erb
index 8084c8b74..a036d4b5b 100644
--- a/app/views/webhooks/edit.html.erb
+++ b/app/views/webhooks/edit.html.erb
@@ -3,15 +3,13 @@
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
   <div class="header__actions header__actions--start">
-    <%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
+    <%= link_to @webhook, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <span class="overflow-ellipsis">
         &larr;
-        <strong>Webhooks</strong>
+        <strong><%= @page_title %></strong>
       </span>
     <% end %>
   </div>
-
-  <h1 class="header__title"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel center txt-align-start" style="view-transition-name: <%= dom_id(@webhook) %>">
diff --git a/app/views/webhooks/show.html.erb b/app/views/webhooks/show.html.erb
index a14cefe85..f4edfa392 100644
--- a/app/views/webhooks/show.html.erb
+++ b/app/views/webhooks/show.html.erb
@@ -2,54 +2,50 @@
 
 <% content_for :header do %>
   <%= render "filters/menu", user_filtering: @user_filtering %>
+  <div class="header__actions header__actions--start">
+    <%= link_to collection_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 %>
+  </div>
 
-  <%= link_to collection_webhooks_path, class: "header__title btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: webhooks-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
-    <span class="overflow-ellipsis">
-      &larr;
-      <strong class="font-black">Webhooks</strong>
-    </span>
-  <% end %>
-<% end %>
-
-<div class="panel shadow center txt-align-center margin-block-end-double">
-  <div class="flex flex-column gap position-relative">
-    <%= link_to edit_collection_webhook_path(@webhook.collection_id, @webhook), class: "user-edit-link btn" do %>
+  <div class="header__actions header__actions--end">
+    <%= link_to edit_collection_webhook_path(@webhook.collection_id, @webhook), class: "btn" do %>
       <%= icon_tag "pencil" %>
       <span class="for-screen-reader">Edit</span>
     <% end %>
+  <div>
+<% end %>
 
-    <div class="flex flex-column gap-half margin-block-end">
-      <h1 class="txt-x-large margin-none"><%= @webhook.name %></h1>
-    </div>
-
+<div class="panel shadow center flex flex-column gap txt-align-start">
+  <header>
+    <h1 class="txt-x-large margin-none"><%= @webhook.name %></h1>
+    <span class="txt-medium"><%= @webhook.url %></span>
+  </header>
+  <% unless @webhook.active? %>
     <div>
-      <%= @webhook.url %>
+      <%= button_to "Reactivate", collection_webhook_activation_path(@webhook), method: :post %>
     </div>
+  <% end %>
 
-    <% unless @webhook.active? %>
-      <div>
-        <%= button_to "Reactivate", collection_webhook_activation_path(@webhook), method: :post %>
-      </div>
-    <% end %>
+  <div>
+    <h2 class="margin-none txt-uppercase txt-medium">Secret</h2>
+    <strong><code><%= @webhook.signing_secret %></code></strong>
+    <p class="txt-small txt-subtle margin-none">
+      We'll send a <code>X-Webhook-Signature</code> header with each request.
+      You can generate a <code>HMAC</code> using <code>SHA256</code> of the request body with this secret
+      to verify that the request came from us.
+    </p>
+  </div>
 
-    <div>
-      <h2 class="margin-none">Secret</h2>
-      <p>
-        <b><%= @webhook.signing_secret %></b>
-      </p>
-      <p>
-        We'll sent a `X-Webhook-Signature` header with each request.
-        You can generate a HMAC using SHA256 of the request body with this secret
-        to verify that the request came from us.
-      </p>
-    </div>
-
-    <div class="flex flex-column gap-half margin-block-end">
-      <h2 class="margin-none">Subscribed to</h2>
+    <div class="flex flex-column">
+      <h2 class="margin-none txt-uppercase txt-medium">Subscribed to</h2>
       <% if @webhook.subscribed_actions.empty? %>
-        <p>This Webhook doesn't subscribe to any actions. It will never trigger.<p/>
+        <p class="margin-none txt-subtle">This Webhook isn't subscribed to any events. It will never trigger.<p/>
       <% else %>
-        <ul>
+        <ul class="margin-none unpad-block">
           <% @webhook.subscribed_actions.each do |action| %>
             <li><%= action.humanize %></li>
           <% end %>
@@ -57,15 +53,14 @@
       <% end %>
     </div>
 
-    <div class="flex flex-column gap-half margin-block-end">
-      <h2 class="margin-none">Deliveries</h2>
+    <div class="flex flex-column">
+      <h2 class="margin-none txt-uppercase txt-medium">Deliveries</h2>
       <% if @webhook.deliveries.empty? %>
-        <p>This Webhook hasn't been triggered yet<p/>
+        <p class="margin-none txt-subtle">This Webhook hasn't been triggered yet<p/>
       <% else %>
-        <ul>
+        <ul class="margin-none unpad-block">
           <%= render partial: "webhooks/delivery", collection: @webhook.deliveries.ordered.limit(20), as: :delivery %>
         </ul>
       <% end %>
     </div>
-  </div>
 </div>