webrecorder · Shrinks99 · Apr 18, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 12, 2024
diff --git a/frontend/src/assets/brand/browsertrix-lockup-color.svg b/frontend/src/assets/brand/browsertrix-lockup-color.svg
diff --git a/frontend/src/components/ui/config-details.ts b/frontend/src/components/ui/config-details.ts
@@ -324,7 +324,7 @@ export class ConfigDetails extends LiteElement {
               (seed: Seed) => html`
                 <li>
                   <a
-                    class="text-primary hover:text-indigo-400"
+                    class="text-blue-600 hover:text-blue-500 hover:underline"
                     href="${seed.url}"
                     target="_blank"
                     rel="noreferrer"
@@ -361,7 +361,7 @@ export class ConfigDetails extends LiteElement {
       ${this.renderSetting(
         msg("Primary Seed URL"),
         html`<a
-          class="text-primary hover:text-indigo-400"
+          class="text-blue-600 hover:text-blue-500 hover:underline"
           href="${primarySeedUrl!}"
           target="_blank"
           rel="noreferrer"

diff --git a/frontend/src/components/ui/navigation/navigation-button.ts b/frontend/src/components/ui/navigation/navigation-button.ts
@@ -80,8 +80,8 @@ export class Button extends TailwindElement {
           right: "justify-end",
         }[this.align],
         this.active
-          ? tw`bg-blue-100 text-blue-600 shadow-sm shadow-blue-900/20 hover:bg-blue-100`
-          : tw`text-neutral-600 hover:bg-blue-50`,
+          ? tw`bg-primary-100 text-primary-800 shadow-sm shadow-primary-900/20 hover:bg-primary-100`
+          : tw`text-neutral-600 hover:bg-primary-50`,
       ]
         .filter(Boolean)
         .join(" ")}

diff --git a/frontend/src/components/ui/tab-list.ts b/frontend/src/components/ui/tab-list.ts
@@ -60,7 +60,7 @@ export class Tab extends TailwindElement {
   render() {
     return html`
       <li
-        class="cursor-pointer px-3 py-4 font-semibold leading-tight text-neutral-500 transition-colors duration-fast aria-disabled:cursor-default aria-selected:text-blue-600"
+        class="cursor-pointer px-3 py-4 font-semibold leading-tight text-neutral-500 transition-colors duration-fast aria-disabled:cursor-default aria-selected:text-primary-600"
         role="tab"
         aria-selected=${this.active}
         aria-controls=${ifDefined(this.name)}
@@ -164,7 +164,7 @@ export class TabList extends LitElement {
       position: absolute;
       width: var(--track-width);
       border-radius: var(--track-width);
-      background-color: var(--sl-color-blue-500);
+      background-color: var(--sl-color-primary-600);
     }
 
     @media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) {

diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -26,6 +26,7 @@ import appState, { AppStateService, use } from "./utils/state";
 import type { NavigateEventDetail } from "@/controllers/navigate";
 import type { NotifyEventDetail } from "@/controllers/notify";
 import { theme } from "@/theme";
+import brandLockupColor from "~assets/brand/browsertrix-lockup-color.svg";
 
 import "./shoelace";
 import "./components";
@@ -261,6 +262,7 @@ export class App extends LiteElement {
         >
           <div>
             <a
+              aria-label="home"
               class="text-sm font-medium hover:text-neutral-400"
               href=${homeHref}
               @click=${(e: MouseEvent) => {
@@ -270,7 +272,7 @@ export class App extends LiteElement {
                 this.navLink(e);
               }}
             >
-              ${msg("Browsertrix")}
+              <img class="h-6" alt="Browsertrix logo" src=${brandLockupColor} />
             </a>
           </div>
 

diff --git a/frontend/src/pages/org/archived-item-detail.ts b/frontend/src/pages/org/archived-item-detail.ts
@@ -830,7 +830,7 @@ ${this.crawl?.description}
                         class="h-4 shrink-0 pr-2 text-neutral-600"
                       ></sl-icon>
                       <a
-                        class="mr-2 truncate text-primary hover:underline"
+                        class="mr-2 truncate text-blue-600 hover:text-blue-500 hover:underline"
                         href=${file.path}
                         download
                         title=${file.name}

diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
@@ -360,7 +360,7 @@ export class WorkflowDetail extends LiteElement {
           >
           <sl-button
             size="small"
-            variant="primary"
+            variant="danger"
             ?loading=${this.isCancelingOrStoppingCrawl}
             @click=${async () => {
               await this.cancel();

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -1,22 +1,20 @@
-const Color = require("color");
 const { tailwindTransform } = require("postcss-lit");
 
-const PRIMARY_COLOR = "#4876ff";
-const primaryColor = Color(PRIMARY_COLOR);
+const PRIMARY_COLOR = "#0891B2";
 
 const primary = {
   DEFAULT: PRIMARY_COLOR,
-  50: primaryColor.lighten(0.54).hex(),
-  100: primaryColor.lighten(0.5).hex(),
-  200: primaryColor.lighten(0.4).hex(),
-  300: primaryColor.lighten(0.3).hex(),
-  400: primaryColor.lighten(0.2).hex(),
-  500: primaryColor.lighten(0.1).hex(),
+  50: "#EBFAFE",
+  100: "#D8F6FD",
+  200: "#ACEBFB",
+  300: "#74DBF5",
+  400: "#3FC6E8",
+  500: "#0AAED7",
   600: PRIMARY_COLOR,
-  700: primaryColor.darken(0.1).hex(),
-  800: primaryColor.darken(0.2).hex(),
-  900: primaryColor.darken(0.3).hex(),
-  950: primaryColor.darken(0.4).hex(),
+  700: "#0782A1",
+  800: "#066B84",
+  900: "#044B5D",
+  950: "#033744",
 };
 
 /**