From 3e4b0e491ac773814c6d7a1aa37661e5cd1d25ad Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Wed, 17 Apr 2024 23:40:02 -0400 Subject: [PATCH] Frontend: App Branding! (#1592) Closes #424 ### Changes - Adds Browsertrix logo to the nav bar!! - Will license the typeface (Konsole) as soon as this gets merged. - Changes the theme colour to Webrecorder's turquoise brand colour - Adjusts the usage of `primary` vs `blue` for elements where it shouldn't be the same - Changes the _Cancel & Discard_ button of the cancel crawl dialogue to `danger` button variant - Replaces the Replay icon with the new ReplayWebpage icon! - Fixes the favicon SVG linking (wrong name, oops!) - Fills the microscope lens in the microscope icon - Removes the old btrix-cloud.svg logo Co-authored-by: sua yoo --- README.md | 8 +++-- assets/browsertrix-lockup-color-dynamic.svg | 18 +---------- frontend/assets/btrix-cloud.svg | 29 ----------------- .../assets/brand/browsertrix-lockup-color.svg | 1 + frontend/src/assets/icons/link-replay.svg | 6 ---- frontend/src/assets/icons/microscope.svg | 4 ++- frontend/src/assets/icons/replaywebpage.svg | 1 + frontend/src/components/ui/config-details.ts | 4 +-- .../ui/navigation/navigation-button.ts | 4 +-- frontend/src/components/ui/tab-list.ts | 4 +-- frontend/src/index.ejs | 2 +- frontend/src/index.ts | 32 +++++++++---------- .../archived-item-detail.ts | 4 +-- .../org/archived-item-qa/archived-item-qa.ts | 2 +- frontend/src/pages/org/collection-detail.ts | 2 +- frontend/src/pages/org/index.ts | 4 +-- frontend/src/pages/org/workflow-detail.ts | 4 +-- frontend/tailwind.config.js | 24 +++++++------- 18 files changed, 52 insertions(+), 101 deletions(-) delete mode 100644 frontend/assets/btrix-cloud.svg create mode 100644 frontend/src/assets/brand/browsertrix-lockup-color.svg delete mode 100644 frontend/src/assets/icons/link-replay.svg create mode 100644 frontend/src/assets/icons/replaywebpage.svg diff --git a/README.md b/README.md index 4debb745..d4f002c1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -
- Browsertrix Logo -
+

+
+ Browsertrix +
+

  diff --git a/assets/browsertrix-lockup-color-dynamic.svg b/assets/browsertrix-lockup-color-dynamic.svg index 81b7e904..18720c1f 100644 --- a/assets/browsertrix-lockup-color-dynamic.svg +++ b/assets/browsertrix-lockup-color-dynamic.svg @@ -1,17 +1 @@ - - - - - - - - - - - - - - + diff --git a/frontend/assets/btrix-cloud.svg b/frontend/assets/btrix-cloud.svg deleted file mode 100644 index 5c7859d7..00000000 --- a/frontend/assets/btrix-cloud.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/src/assets/brand/browsertrix-lockup-color.svg b/frontend/src/assets/brand/browsertrix-lockup-color.svg new file mode 100644 index 00000000..66caac58 --- /dev/null +++ b/frontend/src/assets/brand/browsertrix-lockup-color.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/icons/link-replay.svg b/frontend/src/assets/icons/link-replay.svg deleted file mode 100644 index b1500792..00000000 --- a/frontend/src/assets/icons/link-replay.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/frontend/src/assets/icons/microscope.svg b/frontend/src/assets/icons/microscope.svg index d5f70b76..afbb3000 100644 --- a/frontend/src/assets/icons/microscope.svg +++ b/frontend/src/assets/icons/microscope.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/src/assets/icons/replaywebpage.svg b/frontend/src/assets/icons/replaywebpage.svg new file mode 100644 index 00000000..aafa24c5 --- /dev/null +++ b/frontend/src/assets/icons/replaywebpage.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/components/ui/config-details.ts b/frontend/src/components/ui/config-details.ts index 8b10d059..2d405b3b 100644 --- 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`
  • - + diff --git a/frontend/src/index.ts b/frontend/src/index.ts index d0eeb864..86721078 100644 --- 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"; @@ -255,25 +256,22 @@ export class App extends LiteElement { } return html` -
    +
    diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts index 672b31b8..d800326e 100644 --- a/frontend/src/pages/org/collection-detail.ts +++ b/frontend/src/pages/org/collection-detail.ts @@ -74,7 +74,7 @@ export class CollectionDetail extends LiteElement { { icon: { name: string; library: string }; text: string } > = { replay: { - icon: { name: "link-replay", library: "app" }, + icon: { name: "replaywebpage", library: "app" }, text: msg("Replay"), }, items: { diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index 78bea5d4..54b23ff2 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -373,9 +373,9 @@ export class Org extends LiteElement { private renderOrgNavBar() { return html`
    -