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">
<h1 class="text-xl font-bold">${msg("Account settings")}</h1>
<h1 class="text-xl font-semibold">${msg("Account settings")}</h1>
${successMessage}
@ -277,7 +277,7 @@ export class AccountSettings extends LiteElement {
}
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">
<div class="mb-5">
<sl-input

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

@ -8,7 +8,7 @@ export class NotFound extends LitElement {
}
render() {
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) {
return html`
<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;"
>
<sl-spinner></sl-spinner>

2
frontend/src/index.ejs
View File

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

6
frontend/src/index.ts
View File

@ -20,6 +20,8 @@ import { ROUTES, DASHBOARD_ROUTE } from "./routes";
import "./shoelace";
import "./components";
import "./pages";
import "./assets/fonts/Inter/inter.css";
import "./assets/fonts/Recursive/recursive.css";
type DialogContent = {
label?: TemplateResult | string;
@ -509,7 +511,7 @@ export class App extends LiteElement {
renderSpinner() {
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>
</div>
`;
@ -684,7 +686,7 @@ export class App extends LiteElement {
noHeader: true,
body: html`
<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!")}
</p>

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

@ -81,7 +81,7 @@ export class BrowserProfilesDetail extends LiteElement {
</div>
<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
? html`${this.profile?.name}
<sl-button
@ -267,9 +267,7 @@ export class BrowserProfilesDetail extends LiteElement {
private renderMenu() {
return html`
<sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret
>${msg("Actions")}</sl-button
>
<sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
<ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
<li

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

@ -47,20 +47,14 @@ export class BrowserProfilesList extends LiteElement {
render() {
return html`<header class="mb-3 text-right">
<a
<sl-button
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"
role="button"
type="primary"
@click=${this.navLink}
>
<sl-icon
class="inline-block align-middle mr-2"
name="plus-lg"
></sl-icon
><span class="inline-block align-middle mr-2 text-sm"
>${msg("New Browser Profile")}</span
>
</a>
<sl-icon slot="prefix" name="plus-lg"></sl-icon>
${msg("New Browser Profile")}
</sl-button>
</header>
${this.renderTable()}

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

@ -243,7 +243,7 @@ export class CrawlDetail extends LiteElement {
private renderHeader() {
return html`
<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(
html`<span class="font-normal">Crawl of</span> ${this.crawl
? this.crawl.configName
@ -308,7 +308,7 @@ export class CrawlDetail extends LiteElement {
return html`
<sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" size="small" caret
<sl-button slot="trigger" caret
>${this.isActive
? html`<sl-icon name="three-dots"></sl-icon>`
: 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">
<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
? html`
<span>${this.crawlTemplate.name}</span>
@ -380,9 +382,7 @@ export class CrawlTemplatesDetail extends LiteElement {
return html`
<sl-dropdown placement="bottom-end" distance="4">
<sl-button slot="trigger" type="primary" size="small" caret
>${msg("Actions")}</sl-button
>
<sl-button slot="trigger" caret>${msg("Actions")}</sl-button>
<ul class="text-left text-sm text-0-800 whitespace-nowrap" role="menu">
${menuItems.map((item: HTMLTemplateResult) => item)}
@ -543,10 +543,7 @@ export class CrawlTemplatesDetail extends LiteElement {
role="row"
title=${typeof seed === "string" ? seed : seed.url}
>
<div
class="col-span-3 break-all leading-tight text-sm md:text-base"
role="cell"
>
<div class="col-span-3 break-all leading-tight" role="cell">
${typeof seed === "string" ? seed : seed.url}
</div>
<span

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

@ -111,7 +111,7 @@ export class CrawlTemplatesList extends LiteElement {
</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>
</div>`}
@ -146,7 +146,6 @@ export class CrawlTemplatesList extends LiteElement {
class="w-full"
slot="trigger"
placeholder=${msg("Search by name")}
style="--sl-input-height-medium: 2.25rem;"
clearable
?disabled=${!this.crawlTemplates?.length}
@sl-input=${this.onSearchInput}
@ -156,20 +155,14 @@ export class CrawlTemplatesList extends LiteElement {
</div>
<div class="grow-0 mb-4">
<a
<sl-button
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"
role="button"
type="primary"
@click=${this.navLink}
>
<sl-icon
class="inline-block align-middle mr-2"
name="plus-lg"
></sl-icon
><span class="inline-block align-middle mr-2 text-sm"
>${msg("New Crawl Template")}</span
>
</a>
<sl-icon slot="prefix" name="plus-lg"></sl-icon>
${msg("New Crawl Template")}
</sl-button>
</div>
</div>

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

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

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

@ -29,7 +29,7 @@ export class Archives extends LiteElement {
<header
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>
<hr />
</div>
@ -37,7 +37,7 @@ export class Archives extends LiteElement {
${this.archiveList
? this.renderArchives()
: 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>
</div>
`}

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

@ -35,7 +35,7 @@ export class Home extends LiteElement {
render() {
if (!this.userInfo || !this.archiveList) {
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>
</div>
`;
@ -59,7 +59,7 @@ export class Home extends LiteElement {
<header
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>
<hr />
</div>

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

@ -60,7 +60,7 @@ export class Join extends LiteElement {
this.inviteInfo.inviterEmail ||
placeholder}
</div>
<p class="text-xl md:text-3xl font-semibold mb-5">
<p class="text-xl md:text-2xl font-semibold mb-5">
${msg(
html`You've been invited to join
<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
? html`
<div
class="text-2xl font-semibold mb-5 text-primary"
class="text-xl font-semibold mb-5 text-primary"
role="alert"
>
${msg("Successfully signed up")}
@ -32,7 +32,7 @@ export class SignUp extends LiteElement {
</p>
`
: 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
@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">
<header class="text-xl font-bold">
<header class="text-xl font-semibold">
<h1 class="inline-block mr-2">${msg("Users")}</h1>
<sl-tag class="uppercase" type="primary" size="small"
>${msg("admin")}</sl-tag

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

@ -25,7 +25,7 @@ export class Verify extends LiteElement {
if (this.serverError) {
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> {

32
frontend/src/theme.ts
View File

@ -1,6 +1,6 @@
/**
* 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
* `theme` in tailwind.cofnig.js
@ -36,14 +36,38 @@ const theme = css`
--sl-color-primary-900: ${unsafeCSS(primaryColor.darken(0.3))};
--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
*/
/* Buttons */
--sl-button-font-size-small: var(--sl-font-size-small);
--sl-button-font-size-medium: var(--sl-font-size-medium);
--sl-button-font-size-large: var(--sl-font-size-large);
--sl-button-font-size-small: var(--sl-font-size-x-small);
--sl-button-font-size-medium: var(--sl-font-size-small);
--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 */
--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 {
// https://github.com/tailwindlabs/tailwindcss/blob/52ab3154392ba3d7a05cae643694384e72dc24b2/stubs/defaultConfig.stub.js
colors: {
current: "currentColor",
...colors.map(makeColorPalette),
@ -32,6 +33,24 @@ function makeTheme() {
fontFamily: {
sans: `var(--sl-font-sans)`,
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: {
sm: `var(--sl-border-radius-small)`,
@ -58,7 +77,7 @@ module.exports = {
extend: makeTheme(),
},
content: ["./**/*.html", "./src/**/*.{ts,js}"],
content: ["./**/*.html", "./src/**/*.{ts,js,ejs}"],
extract: {
include: ["./src/**/*.{ts,js}"],

4
frontend/webpack.config.js
View File

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