Merge pull request #638 from webrecorder/frontend-update-page-headers

frontend/src/index.ts

@@ -274,6 +274,7 @@ export class App extends LiteElement {
         >
           <div>
             <a
+              class="text-sm hover:text-neutral-400 font-medium"
               href=${homeHref}
               @click=${(e: any) => {
                 if (isAdmin) {
@@ -281,10 +282,9 @@ export class App extends LiteElement {
                 }
                 this.navLink(e);
               }}
-              ><h1 class="text-sm hover:text-neutral-400 font-medium">
-                ${msg("Browsertrix Cloud")}
-              </h1></a
             >
+              ${msg("Browsertrix Cloud")}
+            </a>
           </div>
 
           ${isAdmin

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()}

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`

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">
-        ${this.renderControls()}
-      </div>
+      <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">
@@ -298,7 +302,7 @@ export class CrawlTemplatesList extends LiteElement {
     }
 
     return html`
-      <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         ${flow(...flowFns)(this.crawlTemplates)}
       </div>
     `;

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>
     `;
   }

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

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}>