From 7f3cdad5b987df5c88b6e84f3cb0ff7b70fe4648 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Fri, 24 Feb 2023 00:02:49 -0500
Subject: [PATCH] Adds page titles, edits heading hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Main Pages + General
- Adds H1 page titles for all main pages
- Moves the New Crawl Config action into the title row from the search controls box
- Gives the Crawl Config search controls box the same style as the Crawls search controls box
- Adds +8px of padding to the search controls box to match mockups
- Search box: medium → small
- Title row control buttons: medium → small

### Details Pages
- h2 → h1 for crawl config and crawl detail pages
- h3 → h2 for crawl config and crawl detail pages
- Removes crawl title margin bottom at medium breakpoint on crawl details page
- Aligns crawl config details title row controls with end of flexbox on mobile to match crawl details controls in the same spot
---
 .../src/pages/org/browser-profiles-list.ts    |  6 +++-
 .../src/pages/org/crawl-configs-detail.ts     |  2 +-
 frontend/src/pages/org/crawl-configs-list.ts  | 28 +++++++++++--------
 frontend/src/pages/org/crawl-detail.ts        |  6 ++--
 frontend/src/pages/org/crawls-list.ts         | 14 +++++++---
 frontend/src/pages/org/settings.ts            |  2 +-
 6 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 5f49849f..f6bb0e9a 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -43,15 +43,19 @@ export class BrowserProfilesList extends LiteElement {
   }
 
   render() {
-    return html`<header class="mb-3 text-right">
+    return html`<header>
+        <div class="flex justify-between w-full h-8 mb-4">
+        <h1 class="text-xl font-semibold">${msg("Browser Profiles")}</h1>
         <sl-button
           href=${`/orgs/${this.orgId}/browser-profiles?new`}
           variant="primary"
+          size="small"
           @click=${this.navLink}
         >
           <sl-icon slot="prefix" name="plus-lg"></sl-icon>
           ${msg("New Browser Profile")}
         </sl-button>
+        </div>
       </header>
 
       ${this.renderTable()}
diff --git a/frontend/src/pages/org/crawl-configs-detail.ts b/frontend/src/pages/org/crawl-configs-detail.ts
index 7f05234b..7ce3b951 100644
--- a/frontend/src/pages/org/crawl-configs-detail.ts
+++ b/frontend/src/pages/org/crawl-configs-detail.ts
@@ -108,7 +108,7 @@ export class CrawlTemplatesDetail extends LiteElement {
               `
             )}
           </h2>
-          <div class="flex-0 flex">
+          <div class="flex-0 flex justify-end">
             ${when(
               this.crawlConfig && !this.crawlConfig.inactive,
               () => html`
diff --git a/frontend/src/pages/org/crawl-configs-list.ts b/frontend/src/pages/org/crawl-configs-list.ts
index 0c151f9e..6cc5450a 100644
--- a/frontend/src/pages/org/crawl-configs-list.ts
+++ b/frontend/src/pages/org/crawl-configs-list.ts
@@ -109,9 +109,23 @@ export class CrawlTemplatesList extends LiteElement {
 
   render() {
     return html`
-      <div class="sticky z-10 mb-2 top-0 py-2 bg-neutral-0">
+    <header class="contents">
+    <div class="flex justify-between w-full h-8 mb-4">
+      <h1 class="text-xl font-semibold">${msg("Crawl Configs")}</h1>
+      <sl-button
+            href=${`/orgs/${this.orgId}/crawl-configs?new&jobType=`}
+            variant="primary"
+            size="small"
+            @click=${this.navLink}
+          >
+            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+            ${msg("New Crawl Config")}
+          </sl-button>
+    </div>
+      <div class="sticky z-10 mb-3 top-2 p-4 bg-neutral-50 border rounded-lg">
         ${this.renderControls()}
       </div>
+    </header>
 
       ${this.crawlTemplates
         ? this.crawlTemplates.length
@@ -158,6 +172,7 @@ export class CrawlTemplatesList extends LiteElement {
           <sl-input
             class="w-full"
             slot="trigger"
+            size="small"
             placeholder=${msg("Search by name")}
             clearable
             ?disabled=${!this.crawlTemplates?.length}
@@ -166,17 +181,6 @@ export class CrawlTemplatesList extends LiteElement {
             <sl-icon name="search" slot="prefix"></sl-icon>
           </sl-input>
         </div>
-
-        <div class="grow-0 mb-4">
-          <sl-button
-            href=${`/orgs/${this.orgId}/crawl-configs?new&jobType=`}
-            variant="primary"
-            @click=${this.navLink}
-          >
-            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
-            ${msg("New Crawl Config")}
-          </sl-button>
-        </div>
       </div>
 
       <div class="flex flex-wrap items-center justify-between">
diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts
index f2c4be2f..8a047a1d 100644
--- a/frontend/src/pages/org/crawl-detail.ts
+++ b/frontend/src/pages/org/crawl-detail.ts
@@ -343,7 +343,7 @@ export class CrawlDetail extends LiteElement {
   private renderHeader() {
     return html`
       <header class="md:flex justify-between items-end">
-        <h2 class="text-xl font-semibold mb-3 md:mr-2">
+        <h1 class="text-xl font-semibold mb-4 md:mb-0 md:mr-2">
           ${msg(
             html`${this.crawl
               ? this.crawl.configName
@@ -352,7 +352,7 @@ export class CrawlDetail extends LiteElement {
                   style="width: 15em"
                 ></sl-skeleton>`}`
           )}
-        </h2>
+        </h1>
         <div
           class="grid gap-2 grid-flow-col ${this.isActive
             ? "justify-between"
@@ -520,7 +520,7 @@ export class CrawlDetail extends LiteElement {
 
   private renderPanel(title: any, content: any) {
     return html`
-      <h3 class="flex-0 text-lg font-semibold mb-2">${title}</h3>
+      <h2 class="flex-0 text-lg font-semibold mb-2">${title}</h2>
       <div class="flex-1 rounded-lg border p-5">${content}</div>
     `;
   }
diff --git a/frontend/src/pages/org/crawls-list.ts b/frontend/src/pages/org/crawls-list.ts
index 9a181d62..384acdd1 100644
--- a/frontend/src/pages/org/crawls-list.ts
+++ b/frontend/src/pages/org/crawls-list.ts
@@ -217,10 +217,15 @@ export class CrawlsList extends LiteElement {
 
     return html`
       <main>
-        <header
-          class="sticky z-10 mb-3 top-2 p-2 bg-neutral-50 border rounded-lg"
-        >
-          ${this.renderControls()}
+        <header class="contents">
+          <div class="flex w-full h-8 mb-4">
+            <h1 class="text-xl font-semibold">${msg("Crawls")}</h1>
+          </div>
+          <div
+            class="sticky z-10 mb-3 top-2 p-4 bg-neutral-50 border rounded-lg"
+          >
+            ${this.renderControls()}
+          </div>
         </header>
         <section>
           ${this.crawls.length
@@ -261,6 +266,7 @@ export class CrawlsList extends LiteElement {
         <div class="col-span-1 md:col-span-2 lg:col-span-1">
           <sl-input
             class="w-full"
+            size="small"
             slot="trigger"
             placeholder=${msg("Search by Crawl Config name or ID")}
             clearable
diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts
index c52cde27..46514536 100644
--- a/frontend/src/pages/org/settings.ts
+++ b/frontend/src/pages/org/settings.ts
@@ -103,7 +103,7 @@ export class OrgSettings extends LiteElement {
 
   render() {
     return html`<header class="mb-5">
-        <h2 class="text-xl font-semibold leading-10">${msg("Org Settings")}</h2>
+        <h1 class="text-xl font-semibold leading-8">${msg("Org Settings")}</h1>
       </header>
 
       <btrix-tab-list activePanel=${this.activePanel} ?hideIndicator=${true}>