tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update base fonts and text sizes (#327)

Browse Source
This commit is contained in:
sua yoo 2022-09-27 14:32:57 -07:00 committed by GitHub
parent 94e3dff27f
commit 63ada3e5b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 118 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/fonts/Inter/Inter-italic.var.woff2 Normal file
View File

Binary file not shown.

BIN
frontend/src/assets/fonts/Inter/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

16
frontend/src/assets/fonts/Inter/inter.css Normal file
View File

@ -0,0 +1,16 @@
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
}

BIN
frontend/src/assets/fonts/Recursive/Recursive_VF.woff2 Normal file
View File

Binary file not shown.

8
frontend/src/assets/fonts/Recursive/recursive.css Normal file
View File

@ -0,0 +1,8 @@
@font-face {
font-family: 'Recursive var';
font-weight: 400;
font-display: swap;
font-style: normal;
font-variation-settings: 'MONO' 1, 'CASL' 0, 'slnt' 0, 'CRSV' 0;
src: url("./Recursive_VF.woff2?v=1.085") format("woff2");
}

4
frontend/src/components/account-settings.ts
View File

@ -233,7 +233,7 @@ export class AccountSettings extends LiteElement {
} }
return html`<div class="grid gap-4"> return html`<div class="grid gap-4">
<h1 class="text-xl font-bold">${msg("Account settings")}</h1> <h1 class="text-xl font-semibold">${msg("Account settings")}</h1>
${successMessage} ${successMessage}
@ -277,7 +277,7 @@ export class AccountSettings extends LiteElement {
} }
return html` <div class="max-w-sm"> return html` <div class="max-w-sm">
<h3 class="font-bold mb-3">${msg("Change password")}</h3> <h3 class="font-semibold mb-3">${msg("Change password")}</h3>
<sl-form @sl-submit="${this.onSubmit}" aria-describedby="formError"> <sl-form @sl-submit="${this.onSubmit}" aria-describedby="formError">
<div class="mb-5"> <div class="mb-5">
<sl-input <sl-input

2
frontend/src/components/not-found.ts
View File

@ -8,7 +8,7 @@ export class NotFound extends LitElement {
} }
render() { render() {
return html` return html`
<div class="text-2xl text-gray-400">${msg("Page not found")}</div> <div class="text-xl text-gray-400">${msg("Page not found")}</div>
`; `;
} }
} }

2
frontend/src/components/profile-browser.ts
View File

@ -150,7 +150,7 @@ export class ProfileBrowser extends LiteElement {
if (this.browserId && !this.isIframeLoaded) { if (this.browserId && !this.isIframeLoaded) {
return html` return html`
<div <div
class="w-full h-full flex items-center justify-center text-4xl" class="w-full h-full flex items-center justify-center text-3xl"
style="padding-right: ${ProfileBrowser.SIDE_BAR_WIDTH}px;" style="padding-right: ${ProfileBrowser.SIDE_BAR_WIDTH}px;"
> >
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>

2
frontend/src/index.ejs
View File

@ -14,7 +14,7 @@
crossorigin="anonymous" crossorigin="anonymous"
></script> ></script>
</head> </head>
<body> <body class="text-base">
<browsertrix-app></browsertrix-app> <browsertrix-app></browsertrix-app>
<script> <script>

6
frontend/src/index.ts
View File

@ -20,6 +20,8 @@ import { ROUTES, DASHBOARD_ROUTE } from "./routes";
import "./shoelace"; import "./shoelace";
import "./components"; import "./components";
import "./pages"; import "./pages";
import "./assets/fonts/Inter/inter.css";
import "./assets/fonts/Recursive/recursive.css";
type DialogContent = { type DialogContent = {
label?: TemplateResult | string; label?: TemplateResult | string;
@ -509,7 +511,7 @@ export class App extends LiteElement {
renderSpinner() { renderSpinner() {
return html` return html`
<div class="w-full flex items-center justify-center text-4xl"> <div class="w-full flex items-center justify-center text-3xl">
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>
</div> </div>
`; `;
@ -684,7 +686,7 @@ export class App extends LiteElement {
noHeader: true, noHeader: true,
body: html` body: html`
<div class="grid gap-4 text-center"> <div class="grid gap-4 text-center">
<p class="mt-8 text-2xl font-medium"> <p class="mt-8 text-xl font-medium">
${msg("Welcome to Browsertrix Cloud!")} ${msg("Welcome to Browsertrix Cloud!")}
</p> </p>

6
frontend/src/pages/archive/browser-profiles-detail.ts
View File

@ -81,7 +81,7 @@ export class BrowserProfilesDetail extends LiteElement {
</div> </div>
<header class="md:flex items-center justify-between mb-3"> <header class="md:flex items-center justify-between mb-3">
<h2 class="text-xl md:text-3xl font-bold md:h-9 mb-1"> <h2 class="text-xl md:text-2xl font-semibold md:h-9 mb-1">
${this.profile?.name ${this.profile?.name
? html`${this.profile?.name} ? html`${this.profile?.name}
<sl-button <sl-button
@ -267,9 +267,7 @@ export class BrowserProfilesDetail extends LiteElement {
private renderMenu() { private renderMenu() {
return html` return html`
<sl-dropdown placement="bottom-end" distance="4"> <sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret <sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
>${msg("Actions")}</sl-button
>
<ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu"> <ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
<li <li

16
frontend/src/pages/archive/browser-profiles-list.ts
View File

@ -47,20 +47,14 @@ export class BrowserProfilesList extends LiteElement {
render() { render() {
return html`<header class="mb-3 text-right"> return html`<header class="mb-3 text-right">
<a <sl-button
href=${`/archives/${this.archiveId}/browser-profiles/new`} href=${`/archives/${this.archiveId}/browser-profiles/new`}
class="inline-block bg-indigo-500 hover:bg-indigo-400 text-white text-center font-medium leading-none rounded px-3 py-2 transition-colors" type="primary"
role="button"
@click=${this.navLink} @click=${this.navLink}
> >
<sl-icon <sl-icon slot="prefix" name="plus-lg"></sl-icon>
class="inline-block align-middle mr-2" ${msg("New Browser Profile")}
name="plus-lg" </sl-button>
></sl-icon
><span class="inline-block align-middle mr-2 text-sm"
>${msg("New Browser Profile")}</span
>
</a>
</header> </header>
${this.renderTable()} ${this.renderTable()}

4
frontend/src/pages/archive/crawl-detail.ts
View File

@ -243,7 +243,7 @@ export class CrawlDetail extends LiteElement {
private renderHeader() { private renderHeader() {
return html` return html`
<header class="md:flex justify-between"> <header class="md:flex justify-between">
<h2 class="text-2xl font-medium mb-3 md:h-8"> <h2 class="text-xl font-medium mb-3 md:h-8">
${msg( ${msg(
html`<span class="font-normal">Crawl of</span> ${this.crawl html`<span class="font-normal">Crawl of</span> ${this.crawl
? this.crawl.configName ? this.crawl.configName
@ -308,7 +308,7 @@ export class CrawlDetail extends LiteElement {
return html` return html`
<sl-dropdown placement="bottom-end" distance="4"> <sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret <sl-button slot="trigger" caret
>${this.isActive >${this.isActive
? html`<sl-icon name="three-dots"></sl-icon>` ? html`<sl-icon name="three-dots"></sl-icon>`
: msg("Actions")}</sl-button : msg("Actions")}</sl-button

13
frontend/src/pages/archive/crawl-templates-detail.ts
View File

@ -107,7 +107,9 @@ export class CrawlTemplatesDetail extends LiteElement {
<header class="md:px-4 pt-4 md:flex justify-between"> <header class="md:px-4 pt-4 md:flex justify-between">
<div> <div>
<h2 class="text-xl md:text-3xl font-bold md:h-9 leading-tight mb-1"> <h2
class="text-xl md:text-2xl font-semibold md:h-9 leading-tight mb-1"
>
${this.crawlTemplate?.name ${this.crawlTemplate?.name
? html` ? html`
<span>${this.crawlTemplate.name}</span> <span>${this.crawlTemplate.name}</span>
@ -380,9 +382,7 @@ export class CrawlTemplatesDetail extends LiteElement {
return html` return html`
<sl-dropdown placement="bottom-end" distance="4"> <sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" type="primary" size="small" caret <sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
>${msg("Actions")}</sl-button
>
<ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu"> <ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
${menuItems.map((item: HTMLTemplateResult) => item)} ${menuItems.map((item: HTMLTemplateResult) => item)}
@ -543,10 +543,7 @@ export class CrawlTemplatesDetail extends LiteElement {
role="row" role="row"
title=${typeof seed === "string" ? seed : seed.url} title=${typeof seed === "string" ? seed : seed.url}
> >
<div <div class="col-span-3 break-all leading-tight" role="cell">
class="col-span-3 break-all leading-tight text-sm md:text-base"
role="cell"
>
${typeof seed === "string" ? seed : seed.url} ${typeof seed === "string" ? seed : seed.url}
</div> </div>
<span <span

19
frontend/src/pages/archive/crawl-templates-list.ts
View File

@ -111,7 +111,7 @@ export class CrawlTemplatesList extends LiteElement {
</div> </div>
` `
: html`<div : html`<div
class="w-full flex items-center justify-center my-24 text-4xl" class="w-full flex items-center justify-center my-24 text-3xl"
> >
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>
</div>`} </div>`}
@ -146,7 +146,6 @@ export class CrawlTemplatesList extends LiteElement {
class="w-full" class="w-full"
slot="trigger" slot="trigger"
placeholder=${msg("Search by name")} placeholder=${msg("Search by name")}
style="--sl-input-height-medium: 2.25rem;"
clearable clearable
?disabled=${!this.crawlTemplates?.length} ?disabled=${!this.crawlTemplates?.length}
@sl-input=${this.onSearchInput} @sl-input=${this.onSearchInput}
@ -156,20 +155,14 @@ export class CrawlTemplatesList extends LiteElement {
</div> </div>
<div class="grow-0 mb-4"> <div class="grow-0 mb-4">
<a <sl-button
href=${`/archives/${this.archiveId}/crawl-templates/new`} href=${`/archives/${this.archiveId}/crawl-templates/new`}
class="block bg-indigo-500 hover:bg-indigo-400 text-white text-center font-medium leading-none rounded px-3 py-2 transition-colors" type="primary"
role="button"
@click=${this.navLink} @click=${this.navLink}
> >
<sl-icon <sl-icon slot="prefix" name="plus-lg"></sl-icon>
class="inline-block align-middle mr-2" ${msg("New Crawl Template")}
name="plus-lg" </sl-button>
></sl-icon
><span class="inline-block align-middle mr-2 text-sm"
>${msg("New Crawl Template")}</span
>
</a>
</div> </div>
</div> </div>

11
frontend/src/pages/archive/crawls-list.ts
View File

@ -123,7 +123,7 @@ export class CrawlsList extends LiteElement {
render() { render() {
if (!this.crawls) { if (!this.crawls) {
return html`<div return html`<div
class="w-full flex items-center justify-center my-24 text-4xl" class="w-full flex items-center justify-center my-24 text-3xl"
> >
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>
</div>`; </div>`;
@ -142,7 +142,7 @@ export class CrawlsList extends LiteElement {
`} `}
</section> </section>
<footer class="mt-2"> <footer class="mt-2">
<span class="text-0-400 text-sm"> <span class="text-0-400 text-xs">
${this.lastFetched ${this.lastFetched
? msg(html`Last updated: ? msg(html`Last updated:
<sl-format-date <sl-format-date
@ -166,7 +166,6 @@ export class CrawlsList extends LiteElement {
<div class="grid grid-cols-2 gap-3 items-center"> <div class="grid grid-cols-2 gap-3 items-center">
<div class="col-span-2 md:col-span-1"> <div class="col-span-2 md:col-span-1">
<sl-input <sl-input
size="small"
class="w-full" class="w-full"
slot="trigger" slot="trigger"
placeholder=${msg("Search by Crawl Template name or ID")} placeholder=${msg("Search by Crawl Template name or ID")}
@ -178,9 +177,7 @@ export class CrawlsList extends LiteElement {
</sl-input> </sl-input>
</div> </div>
<div class="col-span-12 md:col-span-1 flex items-center justify-end"> <div class="col-span-12 md:col-span-1 flex items-center justify-end">
<div class="whitespace-nowrap text-sm text-0-500 mr-2"> <div class="whitespace-nowrap text-0-500 mr-2">${msg("Sort By")}</div>
${msg("Sort By")}
</div>
<sl-dropdown <sl-dropdown
placement="bottom-end" placement="bottom-end"
distance="4" distance="4"
@ -240,7 +237,7 @@ export class CrawlsList extends LiteElement {
: map((crawl) => ({ item: crawl })); : map((crawl) => ({ item: crawl }));
return html` return html`
<ul class="border rounded text-sm md:text-base"> <ul class="border rounded">
${flow( ${flow(
filterResults, filterResults,
this.sortCrawls.bind(this), this.sortCrawls.bind(this),

4
frontend/src/pages/archives.ts
View File

@ -29,7 +29,7 @@ export class Archives extends LiteElement {
<header <header
class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8" class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
> >
<h1 class="text-2xl font-medium">${msg("Archives")}</h1> <h1 class="text-xl font-medium">${msg("Archives")}</h1>
</header> </header>
<hr /> <hr />
</div> </div>
@ -37,7 +37,7 @@ export class Archives extends LiteElement {
${this.archiveList ${this.archiveList
? this.renderArchives() ? this.renderArchives()
: html` : html`
<div class="flex items-center justify-center my-24 text-4xl"> <div class="flex items-center justify-center my-24 text-3xl">
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>
</div> </div>
`} `}

4
frontend/src/pages/home.ts
View File

@ -35,7 +35,7 @@ export class Home extends LiteElement {
render() { render() {
if (!this.userInfo || !this.archiveList) { if (!this.userInfo || !this.archiveList) {
return html` return html`
<div class="flex items-center justify-center my-24 text-4xl"> <div class="flex items-center justify-center my-24 text-3xl">
<sl-spinner></sl-spinner> <sl-spinner></sl-spinner>
</div> </div>
`; `;
@ -59,7 +59,7 @@ export class Home extends LiteElement {
<header <header
class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8" class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8"
> >
<h1 class="text-2xl font-medium">${title}</h1> <h1 class="text-xl font-medium">${title}</h1>
</header> </header>
<hr /> <hr />
</div> </div>

2
frontend/src/pages/join.ts
View File

@ -60,7 +60,7 @@ export class Join extends LiteElement {
this.inviteInfo.inviterEmail || this.inviteInfo.inviterEmail ||
placeholder} placeholder}
</div> </div>
<p class="text-xl md:text-3xl font-semibold mb-5"> <p class="text-xl md:text-2xl font-semibold mb-5">
${msg( ${msg(
html`You've been invited to join html`You've been invited to join
<span class="text-primary break-words" <span class="text-primary break-words"

4
frontend/src/pages/sign-up.ts
View File

@ -20,7 +20,7 @@ export class SignUp extends LiteElement {
${this.isSignedUpWithoutAuth ${this.isSignedUpWithoutAuth
? html` ? html`
<div <div
class="text-2xl font-semibold mb-5 text-primary" class="text-xl font-semibold mb-5 text-primary"
role="alert" role="alert"
> >
${msg("Successfully signed up")} ${msg("Successfully signed up")}
@ -32,7 +32,7 @@ export class SignUp extends LiteElement {
</p> </p>
` `
: html` : html`
<h1 class="text-3xl font-semibold mb-5">${msg("Sign up")}</h1> <h1 class="text-2xl font-semibold mb-5">${msg("Sign up")}</h1>
<btrix-sign-up-form <btrix-sign-up-form
@submit=${this.onSubmit} @submit=${this.onSubmit}

2
frontend/src/pages/users-invite.ts
View File

@ -27,7 +27,7 @@ export class UsersInvite extends LiteElement {
`; `;
} }
return html`<div class="grid gap-4"> return html`<div class="grid gap-4">
<header class="text-xl font-bold"> <header class="text-xl font-semibold">
<h1 class="inline-block mr-2">${msg("Users")}</h1> <h1 class="inline-block mr-2">${msg("Users")}</h1>
<sl-tag class="uppercase" type="primary" size="small" <sl-tag class="uppercase" type="primary" size="small"
>${msg("admin")}</sl-tag >${msg("admin")}</sl-tag

2
frontend/src/pages/verify.ts
View File

@ -25,7 +25,7 @@ export class Verify extends LiteElement {
if (this.serverError) { if (this.serverError) {
return html`<btrix-alert type="danger">${this.serverError}</btrix-alert>`; return html`<btrix-alert type="danger">${this.serverError}</btrix-alert>`;
} }
return html` <div class="text-4xl"><sl-spinner></sl-spinner></div> `; return html` <div class="text-3xl"><sl-spinner></sl-spinner></div> `;
} }
private async verify(): Promise<void> { private async verify(): Promise<void> {

32
frontend/src/theme.ts
View File

@ -1,6 +1,6 @@
/** /**
* Shoelace CSS theming variables * Shoelace CSS theming variables
* https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.styles.ts * https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css
* *
* To make new variables available to Tailwind, update * To make new variables available to Tailwind, update
* `theme` in tailwind.cofnig.js * `theme` in tailwind.cofnig.js
@ -36,14 +36,38 @@ const theme = css`
--sl-color-primary-900: ${unsafeCSS(primaryColor.darken(0.3))}; --sl-color-primary-900: ${unsafeCSS(primaryColor.darken(0.3))};
--sl-color-primary-950: ${unsafeCSS(primaryColor.darken(0.4))}; --sl-color-primary-950: ${unsafeCSS(primaryColor.darken(0.4))};
/*
* Typography
*/
/* Fonts */
--sl-font-mono: "Recursive var", SFMono-Regular, Consolas, "Liberation Mono",
Menlo, monospace;
--sl-font-sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
/* Font sizes */
--sl-font-size-medium: 0.875rem; /* 14px */
--sl-font-size-2x-large: 2rem; /* 32px */
/* Font weights */
--sl-font-weight-medium: 500;
--sl-font-weight-semibold: 600;
/* /*
* Forms * Forms
*/ */
/* Buttons */ /* Buttons */
--sl-button-font-size-small: var(--sl-font-size-small); --sl-button-font-size-small: var(--sl-font-size-x-small);
--sl-button-font-size-medium: var(--sl-font-size-medium); --sl-button-font-size-medium: var(--sl-font-size-small);
--sl-button-font-size-large: var(--sl-font-size-large); --sl-button-font-size-large: var(--sl-font-size-medium);
/* Inputs */
--sl-input-font-size-small: var(--sl-font-size-x-small);
--sl-input-font-size-medium: var(--sl-font-size-small);
--sl-input-font-size-large: var(--sl-font-size-medium);
/* Labels */ /* Labels */
--sl-input-label-font-size-small: var(--sl-font-size-x-small); --sl-input-label-font-size-small: var(--sl-font-size-x-small);

21
frontend/tailwind.config.js
View File

@ -21,6 +21,7 @@ function makeTheme() {
})); }));
return { return {
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
colors: { colors: {
current: "currentColor", current: "currentColor",
...colors.map(makeColorPalette), ...colors.map(makeColorPalette),
@ -32,6 +33,24 @@ function makeTheme() {
fontFamily: { fontFamily: {
sans: `var(--sl-font-sans)`, sans: `var(--sl-font-sans)`,
serif: `var(--sl-font-serif)`, serif: `var(--sl-font-serif)`,
mono: `var(--sl-font-mono)`,
},
fontSize: {
xs: ["var(--sl-font-size-x-small)", { lineHeight: "1.33" }],
sm: ["var(--sl-font-size-small)", { lineHeight: "1.25rem" }],
base: ["var(--sl-font-size-medium)", { lineHeight: "1.5" }],
lg: ["var(--sl-font-size-large)", { lineHeight: "1.6" }],
xl: ["var(--sl-font-size-x-large)", { lineHeight: "1.5" }],
"2xl": ["var(--sl-font-size-2x-large)", { lineHeight: "1.5" }],
"3xl": ["var(--sl-font-size-3x-large)", { lineHeight: "1" }],
"4xl": ["var(--sl-font-size-4x-large)", { lineHeight: "1" }],
},
fontWeight: {
light: "var(--sl-font-weight-light)",
normal: "var(--sl-font-weight-normal)",
medium: "var(--sl-font-weight-medium)",
semibold: "var(--sl-font-weight-semibold)",
bold: "var(--sl-font-weight-bold)",
}, },
borderRadius: { borderRadius: {
sm: `var(--sl-border-radius-small)`, sm: `var(--sl-border-radius-small)`,
@ -58,7 +77,7 @@ module.exports = {
extend: makeTheme(), extend: makeTheme(),
}, },
content: ["./**/*.html", "./src/**/*.{ts,js}"], content: ["./**/*.html", "./src/**/*.{ts,js,ejs}"],
extract: { extract: {
include: ["./src/**/*.{ts,js}"], include: ["./src/**/*.{ts,js}"],

4
frontend/webpack.config.js
View File

@ -79,6 +79,10 @@ module.exports = {
test: /\.html$/, test: /\.html$/,
loader: "html-loader", loader: "html-loader",
}, },
{
test: /\.(woff(2)?|ttf)(\?v=\d+\.\d+\.\d+)?$/,
type: "asset/resource",
},
], ],
}, },