Org settings layout fix + misc styling & consistency improvements (#1427

) ## General changes - Added `postcss-lit`, which allows us to use tailwind in lit elements with shadow DOMs - Added `// postcss-lit-disable-next-line` comments to most `` css`...` `` tagged templates so as not to change existing CSS in components - Added `TailwindElement`, which uses a single shared `CSSStyleSheet` across all instances to be able to access Tailwind without requiring a full copy of (compiled) Tailwind for every instance of a component that extends it - Added a new `<btrix-copy-field>` element, replacing the existing copy elements ## Org settings page - Stopped content from overflowing at medium widths - Made spacing consistent at both smaller and wider widths - Used readonly/monospace styling for copyable org id field - Updated tab shadows to be slightly blue, consistent with the tab background (also did this in other places tabs show up) Before | After -|- ![dev browsertrix cloud_orgs_default-org_settings](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/9bcacdcc-259b-4a01-bac5-8913518776f0) | ![localhost_9870_orgs_default-org_workflows_crawls](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/53936d4d-e5cd-4f37-ad06-b3b5041381df) ![dev browsertrix cloud_orgs_default-org_settings (3)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/602dd8d6-3012-4a0e-a638-a5192c9601ec) | ![localhost_9870_orgs_default-org_workflows_crawls (3)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/74c93312-ad26-48d8-a87e-3da9a851693b) ## Misc fixes - Used consistent single-line readonly/monospace styling for copyable url field Before | After -|- ![dev browsertrix cloud_orgs_default-org_settings (1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/e361feeb-3ea0-4f56-9e38-12ef6a644d58) | ![localhost_9870_orgs_default-org_workflows_crawls (1)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/0145b1ad-8f45-4486-893e-8f638ac9add6) - Removed inconsistent angled bottom borders from crawl workflow list header Before | After -|- ![dev browsertrix cloud_orgs_default-org_settings (2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/4aa20359-3ecf-4441-83c0-ed36a951ed3b) | ![localhost_9870_orgs_default-org_workflows_crawls (2)](https://github.com/webrecorder/browsertrix-cloud/assets/5727389/8c771464-3a70-47e7-8475-fa82d4d030a9) - Changes _all_ list page primary action buttons to use `variant="primary"` <img width="190" alt="Screenshot 2023-12-08 at 11 23 49 AM" src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/2b007f5e-e675-40b2-86a7-f0bf8ef83b81"> <img width="240" alt="Screenshot 2023-12-08 at 11 23 43 AM" src="https://github.com/webrecorder/browsertrix-cloud/assets/5672810/621b340e-2051-4ab0-8f42-8f0a51d8d3a5"> --------- Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics> Co-authored-by: sua yoo <sua@webrecorder.org> Co-authored-by: sua yoo <sua@suayoo.com>
webrecorder · Dec 13, 2023 · 73e2026 · 73e2026
1 parent 2bb21c6
commit 73e2026
Show file tree

Hide file tree

Showing 39 changed files with 706 additions and 422 deletions.
diff --git a/frontend/index.d.ts b/frontend/index.d.ts
@@ -1,3 +1,4 @@
 declare module "*.svg";
 declare module "*.webp";
+declare module "*.css";
 declare module "regex-colorize";
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,8 +46,11 @@
     "lodash": "^4.17.21",
     "micromark": "^3.1.0",
     "node-fetch": "^3.1.0",
+    "patch-package": "^8.0.0",
     "postcss": "^8.4.5",
+    "postcss-lit": "^1.1.1",
     "postcss-loader": "^6.1.1",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.4.1",
     "pretty-ms": "^7.0.1",
     "query-string": "^8.1.0",
@@ -90,8 +93,6 @@
     "@web/dev-server-rollup": "^0.3.21",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "patch-package": "^8.0.0",
-    "postinstall-postinstall": "^2.1.0",
     "rollup-plugin-typescript-paths": "^1.4.0",
     "sinon": "^12.0.1",
     "ts-lit-plugin": "^2.0.1",

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -1,3 +1,4 @@
+/** @type {import('postcss-load-config').Config} */
 module.exports = {
   plugins: [require("tailwindcss"), require("autoprefixer")],
 };
diff --git a/frontend/src/__mocks__/css.js b/frontend/src/__mocks__/css.js
@@ -8,3 +8,4 @@
  *     },
  *   },
  */
+export default "";
diff --git a/frontend/src/classes/TailwindElement.ts b/frontend/src/classes/TailwindElement.ts
@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+import { theme } from "@/theme";
+
+export class TailwindElement extends LitElement {
+  connectedCallback(): void {
+    super.connectedCallback();
+    // Insert the compiled Tailwind css into the shadow root.
+    // This has the benefit of not requiring a whole copy of compiled Tailwind
+    // for every TailwindElement, so we still get the benefits of atomic CSS.
+    // And because Tailwind uses `@layer`[^1], the order of declarations ends up
+    // correct, and you can use component styles with `static styles = ...`,
+    // *and* you can use Tailwind functions and directives in those styles
+    // thanks to `postcss-lit`.
+    //
+    // [^1]: (see https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer),
+    this.shadowRoot?.adoptedStyleSheets.push(theme);
+  }
+}
diff --git a/frontend/src/components/screencast.ts b/frontend/src/components/screencast.ts
@@ -42,6 +42,7 @@ export class Screencast extends LitElement {
   }/watch`;
   static maxRetries = 10;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     .wrapper {
       position: relative;

diff --git a/frontend/src/components/ui/alert.ts b/frontend/src/components/ui/alert.ts
@@ -15,6 +15,7 @@ export class Alert extends LitElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "info" = "info";
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host > div {
       padding: var(--sl-spacing-x-small) var(--sl-spacing-small);

diff --git a/frontend/src/components/ui/badge.ts b/frontend/src/components/ui/badge.ts
@@ -14,6 +14,7 @@ export class Badge extends LitElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "neutral" = "neutral";
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host > span {
       display: inline-flex;

diff --git a/frontend/src/components/ui/button.ts b/frontend/src/components/ui/button.ts
@@ -40,6 +40,7 @@ export class Button extends LitElement {
   @property({ type: Boolean })
   icon: boolean = false;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: inline-block;

diff --git a/frontend/src/components/ui/code.ts b/frontend/src/components/ui/code.ts
@@ -4,35 +4,26 @@ import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import hljs from "highlight.js/lib/core";
 import javascript from "highlight.js/lib/languages/javascript";
 import xml from "highlight.js/lib/languages/xml";
+import { TailwindElement } from "@/classes/TailwindElement";
 
 /**
  * Syntax highlighting for javascript and HTML (XML)
  */
 @customElement("btrix-code")
-export class Code extends LitElement {
-  static styles = [
-    css`
-      pre {
-        white-space: pre-wrap;
-        font-family: var(--sl-font-mono);
-        font-size: 0.9em;
-        color: #24292e;
-        margin: 0;
-      }
+export class Code extends TailwindElement {
+  static styles = css`
+    .hljs-name {
+      color: #22863a;
+    }
 
-      .hljs-name {
-        color: #22863a;
-      }
+    .hljs-attr {
+      color: #6f42c1;
+    }
 
-      .hljs-attr {
-        color: #6f42c1;
-      }
-
-      .hljs-string {
-        color: #032f62;
-      }
-    `,
-  ];
+    .hljs-string {
+      color: #032f62;
+    }
+  `;
 
   @property({ type: String })
   value: string = "";
@@ -50,8 +41,8 @@ export class Code extends LitElement {
     const htmlStr = hljs.highlight(this.value, {
       language: this.language,
     }).value;
-    return html`<pre><code>${staticHtml`${unsafeStatic(
-      htmlStr
-    )}`}</code></pre>`;
+    return html`<pre
+      class="whitespace-pre-wrap text-neutral-800 m-0 font-monospace"
+    ><code>${staticHtml`${unsafeStatic(htmlStr)}`}</code></pre>`;
   }
 }
diff --git a/frontend/src/components/ui/copy-button.ts b/frontend/src/components/ui/copy-button.ts
@@ -31,6 +31,9 @@ export class CopyButton extends LitElement {
   @property({ attribute: false })
   getValue?: () => string | undefined;
 
+  @property({ type: Boolean })
+  hoist = false;
+
   @state()
   private isCopied: boolean = false;
 
@@ -53,6 +56,7 @@ export class CopyButton extends LitElement {
           : this.content
           ? this.content
           : msg("Copy")}
+        ?hoist=${this.hoist}
       >
         <sl-icon-button
           name=${this.isCopied ? "check-lg" : this.name ? this.name : "files"}

diff --git a/frontend/src/components/ui/copy-field.ts b/frontend/src/components/ui/copy-field.ts
@@ -0,0 +1,88 @@
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { localized } from "@lit/localize";
+import { TailwindElement } from "@/classes/TailwindElement";
+import { classMap } from "lit/directives/class-map.js";
+
+/**
+ * Copy text to clipboard on click
+ *
+ * @example
+ * ```ts
+ * <btrix-copy-field label="my field" value=${value}></btrix-copy-field>
+ * ```
+ */
+@localized()
+@customElement("btrix-copy-field")
+export class CopyField extends TailwindElement {
+  @property({ type: String })
+  value?: string;
+
+  @property({ type: Boolean })
+  hideContentFromScreenReaders = false;
+
+  @property({ type: String })
+  buttonIconName?: string;
+
+  @property({ type: String })
+  buttonContent?: string;
+
+  @property({ attribute: false })
+  getValue?: () => string | undefined;
+
+  @property({ type: Boolean })
+  hoist = false;
+
+  @property({ type: Boolean })
+  monostyle = true;
+
+  @property({ type: Boolean })
+  filled = this.monostyle;
+
+  @property()
+  label?: string;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  get _slottedChildren() {
+    const slot = this.shadowRoot?.querySelector("slot[name=label]");
+    return (slot as HTMLSlotElement | null | undefined)?.assignedElements();
+  }
+
+  render() {
+    return html`
+      <div role="group">
+        <label
+          class="text-neutral-800 font-sans mb-1.5 text-xs leading-[1.4] inline-block ${classMap(
+            { hidden: !this.label && !this._slottedChildren }
+          )}"
+          ><slot name="label">${this.label}</slot></label
+        >
+        <div
+          class="rounded border inline-flex items-stretch justify-start relative w-full ${classMap(
+            { "bg-slate-50": this.filled, "font-monostyle": this.monostyle }
+          )}"
+        >
+          <slot name="prefix"></slot>
+          <span
+            aria-hidden=${this.hideContentFromScreenReaders}
+            class="flex-auto px-1.5 mx-1.5 text-neutral-700 self-center select-all overflow-x-auto whitespace-nowrap"
+          >
+            ${this.value}
+          </span>
+          <btrix-copy-button
+            .value=${this.value}
+            .name=${this.buttonIconName}
+            .content=${this.buttonContent}
+            .getValue=${this.getValue}
+            .hoist=${this.hoist}
+          ></btrix-copy-button>
+        </div>
+      </div>
+    `;
+  }
+}
diff --git a/frontend/src/components/ui/data-table.ts b/frontend/src/components/ui/data-table.ts
@@ -22,6 +22,7 @@ type CellContent = string | TemplateResult<1>;
  */
 @customElement("btrix-data-table")
 export class DataTable extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: contents;

diff --git a/frontend/src/components/ui/desc-list.ts b/frontend/src/components/ui/desc-list.ts
@@ -20,6 +20,7 @@ import { classMap } from "lit/directives/class-map.js";
  */
 @customElement("btrix-desc-list-item")
 export class DescListItem extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: contents;
@@ -68,6 +69,7 @@ export class DescListItem extends LitElement {
 
 @customElement("btrix-desc-list")
 export class DescList extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     dl {
       display: grid;

diff --git a/frontend/src/components/ui/details.ts b/frontend/src/components/ui/details.ts
@@ -25,6 +25,7 @@ export class Details extends LitElement {
   @property({ type: Boolean })
   disabled? = false;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: block;

diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
@@ -6,6 +6,7 @@ import("./code");
 import("./combobox");
 import("./config-details");
 import("./copy-button");
+import("./copy-field");
 import("./data-table");
 import("./desc-list");
 import("./details");

diff --git a/frontend/src/components/ui/language-select.ts b/frontend/src/components/ui/language-select.ts
@@ -31,6 +31,7 @@ const languages = sortBy("name")(
 @customElement("btrix-language-select")
 @localized()
 export class LanguageSelect extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     sl-select::part(control) {
       box-shadow: var(--sl-shadow-small);

diff --git a/frontend/src/components/ui/meter.ts b/frontend/src/components/ui/meter.ts
@@ -6,6 +6,7 @@ import {
   queryAssignedElements,
   customElement,
 } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
@@ -16,6 +17,7 @@ export class MeterBar extends LitElement {
   @property({ type: Number })
   value = 0;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: contents;
@@ -78,9 +80,9 @@ export class DividedMeterBar extends LitElement {
       <div class="quotaBar" style="width:${this.quota}%">
         ${when(this.value, () => {
           return html`<div
-            class="bar ${this.value < this.quota
-              ? css`rightBorderRadius`
-              : css``}"
+            class="bar ${classMap({
+              rightBorderRadius: this.value < this.quota,
+            })}"
             style="width:${(this.value / this.quota) * 100}%"
           ></div>`;
         })}
@@ -123,6 +125,7 @@ export class Meter extends LitElement {
   @query(".maxText")
   private maxText?: HTMLElement;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     .meter {
       position: relative;

diff --git a/frontend/src/components/ui/numbered-list.ts b/frontend/src/components/ui/numbered-list.ts
@@ -35,6 +35,7 @@ export class NumberedListItem extends LitElement {
   @property({ type: Boolean })
   hoverable: boolean = false;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     :host,
     .item {
@@ -111,6 +112,7 @@ export class NumberedListItem extends LitElement {
 
 @customElement("btrix-numbered-list-header")
 export class NumberedListHeader extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     :host,
     header {
@@ -135,6 +137,7 @@ export class NumberedListHeader extends LitElement {
 
 @customElement("btrix-numbered-list")
 export class NumberedList extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     :host {
       display: block;

diff --git a/frontend/src/components/ui/pw-strength-alert.ts b/frontend/src/components/ui/pw-strength-alert.ts
@@ -26,6 +26,7 @@ export class PasswordStrengthAlert extends LitElement {
   @property({ type: Number })
   optimal: Score = 4;
 
+  // postcss-lit-disable-next-line
   static styles = css`
     sl-alert::part(message) {
       /* Decrease padding size: */

diff --git a/frontend/src/components/ui/section-heading.ts b/frontend/src/components/ui/section-heading.ts
@@ -11,6 +11,7 @@ import { customElement } from "lit/decorators.js";
  */
 @customElement("btrix-section-heading")
 export class SectionHeading extends LitElement {
+  // postcss-lit-disable-next-line
   static styles = css`
     .heading {
       display: flex;