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 <sua@webrecorder.org>
This commit is contained in:
Henry Wilkinson
GitHub
parent
f0921feb70
commit
3e4b0e491a
@ -1,6 +1,8 @@
|
||||
<div align="center">
|
||||
<img alt="Browsertrix Logo" src="assets/browsertrix-lockup-color-dynamic.svg" width="90%">
|
||||
</div>
|
||||
<h1>
|
||||
<div align="center">
|
||||
<img alt="Browsertrix" src="assets/browsertrix-lockup-color-dynamic.svg" width="90%">
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 6.0 KiB |
@ -1,29 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="-14.305 -26.054 671.927 428.238" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Browsertrix-Horizontal-no-padding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="matrix(0.736865, 0, 0, 0.736865, 142.301071, 121.421288)" style="">
|
||||
<g id="C4-Logo" transform="translate(2.000000, 5.000000)" fill="#000000">
|
||||
<path d="M88,142.596779 L88,187.400287 C129.247836,195.322678 179.850046,199.721014 233.177384,199.721014 C286.783114,199.721014 337.635191,195.276635 379,187.275923 L379,142.796048 C432.052464,153.427171 466,169.72673 466,188 C466,220.032515 361.682347,246 233,246 C104.317653,246 0,220.032515 0,188 C0,169.612176 34.3745016,153.222886 88,142.596779 Z" id="Combined-Shape"/>
|
||||
<path d="M353,0 L353,155.25055 C317.606088,160.636359 276.364698,163.605072 233.177384,163.605072 C190.252242,163.605072 149.249471,160.672294 114,155.348368 L114,0 L353,0 Z M187,13 L187,30 L337,30 L337,13 L187,13 Z M131,13 L131,30 L149,30 L149,13 L131,13 Z M159,13 L159,30 L177,30 L177,13 L159,13 Z" id="Combined-Shape" fill-rule="nonzero"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(10.641995, 0, 0, 10.641995, -2.323544, -134.788986)" style="">
|
||||
<g>
|
||||
<path style="fill: rgb(69, 121, 255);" d="M50.752,47.941H13.72C6.155,47.941,0,41.786,0,34.221S6.154,20.5,13.72,20.5 c1.233,0,2.466,0.171,3.673,0.511c2.143-5.025,7.094-8.338,12.611-8.338c3.96,0,7.659,1.68,10.27,4.637 c1.211-0.511,2.521-0.779,3.833-0.779c5.438,0,9.862,4.424,9.862,9.862c0,0.763-0.092,1.524-0.271,2.275 c4.066,1.27,6.916,5.067,6.916,9.411C60.614,43.516,56.19,47.941,50.752,47.941z M13.72,22.5C7.258,22.5,2,27.758,2,34.221 c0,6.462,5.258,11.72,11.72,11.72h37.032c4.335,0,7.861-3.527,7.861-7.862c0-3.758-2.676-7.003-6.362-7.715 c-0.286-0.056-0.534-0.233-0.679-0.487c-0.145-0.254-0.172-0.558-0.072-0.833c0.311-0.868,0.469-1.759,0.469-2.65 c0-4.335-3.527-7.862-7.862-7.862c-1.279,0-2.505,0.302-3.642,0.898c-0.428,0.224-0.952,0.111-1.251-0.268 c-2.243-2.853-5.601-4.489-9.21-4.489c-4.992,0-9.441,3.176-11.072,7.902c-0.086,0.252-0.271,0.459-0.512,0.575 c-0.24,0.115-0.518,0.131-0.77,0.041C16.366,22.732,15.042,22.5,13.72,22.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
<g transform="matrix(1, 0, 0, 1, 234.888443, 3.585283)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.0 KiB |
1
frontend/src/assets/brand/browsertrix-lockup-color.svg
Normal file
1
frontend/src/assets/brand/browsertrix-lockup-color.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
@ -1,6 +0,0 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.5 5.5H4C2.34315 5.5 1 6.84315 1 8.5C1 10.1569 2.34315 11.5 4 11.5H7C8.65685 11.5 10 10.1569 10 8.5C10 8.14936 9.93985 7.81278 9.82929 7.5C9.46961 7.5 9.10993 7.5 8.75024 7.5C8.90938 7.78696 9 8.14862 9 8.5C9 9.60457 8.10457 10.5 7 10.5H4C2.89543 10.5 2 9.60457 2 8.5C2 7.39543 2.89543 6.5 4 6.5H5.5C5.5 6 5.5 6 5.5 5.5Z" fill="currentColor"/>
|
||||
<path d="M9 5.5C7.34315 5.5 6 6.84315 6 8.5C6 8.85064 6.06015 9.18722 6.17071 9.5H7.26756C7.09739 9.20583 7 8.86429 7 8.5C7 7.39543 7.89543 6.5 9 6.5H12C13.1046 6.5 14 7.39543 14 8.5C14 9.60457 13.1046 10.5 12 10.5H10.5C10.5 11 10.5 11 10.5 11.5H12C13.6569 11.5 15 10.1569 15 8.5C15 6.84315 13.6569 5.5 12 5.5H9Z" fill="currentColor"/>
|
||||
<path d="M6.5 6L4 7.73205L4 4.26795L6.5 6Z" fill="currentColor"/>
|
||||
<path d="M9.5 11L12 9.26795L12 12.732L9.5 11Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 929 B |
@ -1 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M6 1.5a.5.5 0 0 1 1 0V2a1 1 0 0 1 1 1v1.09A5.502 5.502 0 0 1 10.163 14H12.5a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1H7c1.56 0 2.935-.794 3.742-2H4.5a.5.5 0 0 1 0-1h6.744A4.502 4.502 0 0 0 8 5.112V8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM6 3h1v5H6z" clip-rule="evenodd"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.5C6 1.22386 6.22386 1 6.5 1C6.77614 1 7 1.22386 7 1.5V2C7.55228 2 8 2.44772 8 3V4.09069C10.5601 4.56094 12.5 6.80393 12.5 9.5C12.5 11.3602 11.5766 13.0046 10.1631 14H12.5C12.7761 14 13 14.2239 13 14.5C13 14.7761 12.7761 15 12.5 15H3.5C3.22386 15 3 14.7761 3 14.5C3 14.2239 3.22386 14 3.5 14H7C8.56021 14 9.93496 13.206 10.7422 12H4.5C4.22386 12 4 11.7761 4 11.5C4 11.2239 4.22386 11 4.5 11H11.2439C11.4098 10.5308 11.5 10.026 11.5 9.5C11.5 7.35841 10.004 5.56624 8 5.11151V8C8 8.55228 7.55228 9 7 9H6C5.44772 9 5 8.55228 5 8V3C5 2.44772 5.44772 2 6 2V1.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 421 B After Width: | Height: | Size: 736 B |
1
frontend/src/assets/icons/replaywebpage.svg
Normal file
1
frontend/src/assets/icons/replaywebpage.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M9.014 8.5c-.048 1-.24 1.86-.497 2.47-.15.357-.304.582-.424.701a1 1 0 0 1-.07.062 1 1 0 0 1-.07-.062c-.12-.12-.273-.343-.424-.7-.257-.61-.448-1.472-.497-2.471zM10.018 8.5c-.052 1.183-.288 2.236-.638 2.999A3.76 3.76 0 0 0 11.75 8.5zM6.666 11.499A3.76 3.76 0 0 1 4.296 8.5h1.732c.053 1.183.288 2.236.638 2.999M7.032 7.5c.049-1 .24-1.86.497-2.47.15-.357.305-.581.424-.701a1 1 0 0 1 .07-.062q.026.018.07.062c.12.12.274.344.424.7.258.61.449 1.472.497 2.471zM6.028 7.5H4.295a3.76 3.76 0 0 1 2.371-2.999c-.35.763-.585 1.816-.638 2.999M9.38 4.501A3.76 3.76 0 0 1 11.75 7.5h-1.733c-.052-1.183-.288-2.236-.638-2.999"/><path fill="currentColor" d="M12.921 9.078A5.01 5.01 0 0 1 8.023 13a5.01 5.01 0 0 1-4.981-4.42l-1.538.92-1.48-.886C.337 12.745 3.798 16 8.023 16c4.104 0 7.489-3.073 7.965-7.038L14.542 8zM16.023 7.386C15.71 3.255 12.247 0 8.023 0 3.92 0 .533 3.073.057 7.038L1.504 8l1.621-1.078A5.01 5.01 0 0 1 8.023 3a5.01 5.01 0 0 1 4.981 4.42l1.538-.92z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -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"
|
||||
|
||||
@ -90,8 +90,8 @@ export class NavigationButton 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(" ")}
|
||||
|
||||
@ -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 TailwindElement {
|
||||
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}) {
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
></script>
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
</head>
|
||||
|
||||
@ -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`
|
||||
<div class="border-b">
|
||||
<div class="border-b bg-neutral-50">
|
||||
<nav
|
||||
class="mx-auto box-border flex h-12 max-w-screen-desktop items-center justify-between pl-3"
|
||||
class="mx-auto box-border flex h-12 items-center justify-between px-3 xl:pl-6"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
class="text-sm font-medium hover:text-neutral-400"
|
||||
href=${homeHref}
|
||||
@click=${(e: MouseEvent) => {
|
||||
if (isAdmin) {
|
||||
this.clearSelectedOrg();
|
||||
}
|
||||
this.navLink(e);
|
||||
}}
|
||||
>
|
||||
${msg("Browsertrix")}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
aria-label="home"
|
||||
href=${homeHref}
|
||||
@click=${(e: MouseEvent) => {
|
||||
if (isAdmin) {
|
||||
this.clearSelectedOrg();
|
||||
}
|
||||
this.navLink(e);
|
||||
}}
|
||||
>
|
||||
<img class="h-6" alt="Browsertrix logo" src=${brandLockupColor} />
|
||||
</a>
|
||||
${isAdmin
|
||||
? html`
|
||||
<div
|
||||
|
||||
@ -491,7 +491,7 @@ export class ArchivedItemDetail extends TailwindElement {
|
||||
${renderNavItem({
|
||||
section: "replay",
|
||||
iconLibrary: "app",
|
||||
icon: "link-replay",
|
||||
icon: "replaywebpage",
|
||||
label: msg("Replay"),
|
||||
})}
|
||||
${renderNavItem({
|
||||
@ -924,7 +924,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}
|
||||
|
||||
@ -459,7 +459,7 @@ export class ArchivedItemQA extends TailwindElement {
|
||||
?active=${this.tab === "replay"}
|
||||
@click=${this.onTabNavClick}
|
||||
>
|
||||
<sl-icon name="link-replay" library="app"></sl-icon>
|
||||
<sl-icon name="replaywebpage" library="app"></sl-icon>
|
||||
${msg("Replay")}
|
||||
</btrix-navigation-button>
|
||||
</nav>
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -373,9 +373,9 @@ export class Org extends LiteElement {
|
||||
private renderOrgNavBar() {
|
||||
return html`
|
||||
<div
|
||||
class="mx-auto box-border w-full max-w-screen-desktop overflow-x-hidden overscroll-contain"
|
||||
class="mx-auto box-border w-full overflow-x-hidden overscroll-contain"
|
||||
>
|
||||
<nav class="-mx-3 flex items-end overflow-x-auto px-3">
|
||||
<nav class="-mx-3 flex items-end overflow-x-auto px-3 xl:px-6">
|
||||
${this.renderNavTab({
|
||||
tabName: "home",
|
||||
label: msg("Overview"),
|
||||
|
||||
@ -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();
|
||||
@ -1060,7 +1060,7 @@ export class WorkflowDetail extends LiteElement {
|
||||
>
|
||||
<sl-icon
|
||||
slot="prefix"
|
||||
name="link-replay"
|
||||
name="replaywebpage"
|
||||
library="app"
|
||||
></sl-icon>
|
||||
${msg("Replay Latest Crawl")}</sl-button
|
||||
|
||||
@ -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",
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user