From f197ed5b96ae62f641eda2535495012f0c805b7c Mon Sep 17 00:00:00 2001 From: emma Date: Tue, 6 May 2025 13:04:06 -0400 Subject: [PATCH 01/11] update icons everywhere, & write new bit on current use and intended use of status icons --- .../docs/develop/ui/design-status-icons.md | 40 +- .../.icons/bootstrap/check2-circle.svg | 4 + .../bootstrap/exclamation-diamond-fill.svg | 2 +- .../.icons/bootstrap/exclamation-diamond.svg | 4 + .../.icons/bootstrap/exclamation-octagon.svg | 4 + .../.icons/bootstrap/pause-circle.svg | 4 + .../.icons/bootstrap/play-circle.svg | 4 + .../.icons/bootstrap/slash-circle.svg | 4 + .../overrides/.icons/bootstrap/x-octagon.svg | 4 + frontend/docs/docs/stylesheets/extra.css | 150 +++++-- frontend/docs/docs/stylesheets/theme.css | 380 ++++++++++++++++++ .../docs/docs/user-guide/archived-items.md | 4 +- frontend/docs/mkdocs.yml | 2 +- frontend/src/components/orgs-list.ts | 4 +- .../src/components/ui/pw-strength-alert.ts | 4 +- .../archived-items/crawl-log-table.ts | 6 +- .../features/archived-items/crawl-status.ts | 6 +- .../collections/collection-edit-dialog.ts | 5 +- .../collection-initial-view-dialog.ts | 1 - .../crawl-workflows/workflow-editor.ts | 2 +- .../src/features/org/org-status-banner.ts | 2 +- .../features/qa/page-list/helpers/iconFor.ts | 10 +- frontend/src/index.ts | 5 +- frontend/src/pages/invite/accept.ts | 1 - .../src/pages/org/browser-profiles-detail.ts | 1 - .../src/pages/org/browser-profiles-list.ts | 1 - frontend/src/pages/org/dashboard.ts | 54 +-- frontend/src/pages/org/workflows-list.ts | 1 - frontend/src/utils/notify.ts | 10 +- 29 files changed, 608 insertions(+), 111 deletions(-) create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/check2-circle.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/exclamation-octagon.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/pause-circle.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/play-circle.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/slash-circle.svg create mode 100644 frontend/docs/docs/overrides/.icons/bootstrap/x-octagon.svg create mode 100644 frontend/docs/docs/stylesheets/theme.css diff --git a/frontend/docs/docs/develop/ui/design-status-icons.md b/frontend/docs/docs/develop/ui/design-status-icons.md index cbf8cb48fd..8037979831 100644 --- a/frontend/docs/docs/develop/ui/design-status-icons.md +++ b/frontend/docs/docs/develop/ui/design-status-icons.md @@ -6,15 +6,33 @@ Status icons always use filled icon variants (when available), as opposed to but When used without labels, status icons should include tooltips to provider further clarity as to what they indicate. -## Implementation +## In Use (as of 2025-05-06) -| Status | Description | -| ---- | ---- | -| :bootstrap-slash-circle-fill: Empty | Used for empty states where no data is present | -| :bootstrap-hourglass-split: Waiting | Used when a process is queued but has not started | -| :btrix-status-dot: Running | Used when a process is actively running, should always be animated | -| :bootstrap-check-circle-fill: Success | Used for positive / successful states | -| :bootstrap-dash-square-fill: Neutral | Used for ambiguous states, generally good but could be better | -| :bootstrap-exclamation-square-fill: Less Neutral | Same as neutral but with more caveats | -| :bootstrap-x-octagon-fill: Warning | Used for cautionary states and actions with caveats | -| :bootstrap-exclamation-triangle-fill: Severe | Used for serious errors and actions that should be taken with extreme care | +| Icon & Label | Color | Context | Description | +|------|-------|---------|-------------| +| :btrix-status-dot: 1 Crawl Running | `--sl-color-green-600` | Dashboard | Count of crawls in "running" status when that count is non-zero | +| :btrix-status-dot: 0 Crawls Running | `--sl-color-neutral-600` | Dashboard | Count of crawls in "running" status when that count is zero | +| :bootstrap-hourglass-split: 1 Crawl Workflow Waiting | `--sl-color-violet-600` | Dashboard | Count of crawls in "waiting" status | +| :bootstrap-slash-circle: No Crawls Yet | `--sl-color-neutral-400` | Crawl Workflows | Used to show that a workflow has no crawls | +| :bootstrap-check-circle-fill: Complete | `--sl-color-green-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was completed | +| :bootstrap-dash-square-fill: Stopped | `--sl-color-amber-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was stopped | +| :bootstrap-x-octagon-fill: Canceled | `--sl-color-orange-600` | Crawl Workflows | Used to show that a workflow's most recent crawl was canceled | +| :btrix-status-dot: Starting | `--sl-color-violet-600` | Crawl Workflows | Used to show that a crawl is starting | +| :btrix-status-dot: Running | `--sl-color-green-600` | Crawl Workflows | Used to show that a crawl is running | +| :bootstrap-exclamation-diamond-fill: Behavior timed out | `--sl-color-amber-600` | Crawl Logs | Used to show a warning log from a behavior | +| :bootstrap-check2-circle: Success | `--sl-color-green-600` | Toasts | Used to show a success notification | +| :bootstrap-exclamation-triangle: Warning | `--sl-color-amber-600` | Toasts | Used to show a warning notification | +| :bootstrap-exclamation-octagon: Danger | `--sl-color-orange-600` | Toasts | Used to show an error notification | + +## Intended Implementation + +| Status | Color | Description | Icons | Examples | +| ---- | ---- | ---- | ---- | ---- | +| :bootstrap-slash-circle: Empty | `neutral-400` | Used for empty states where no data is present | :bootstrap-slash-circle: `slash-circle` |:bootstrap-slash-circle: No Crawls Yet | +| :bootstrap-hourglass-split: Pending | `violet-600` | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | :bootstrap-hourglass-split: `hourglass-split`, or the icon of the next state being transitioned to (pulsing) | :bootstrap-hourglass-split: 1 Crawl Workflow Waiting
:btrix-status-dot: Starting
:bootstrap-play-circle: Resuming | +| :btrix-status-dot: Running | `green-600` | Used when a process is actively running. Should be animated when indicating the status of a single object. | :btrix-status-dot: `dot` | :btrix-status-dot: Running | +| :bootstrap-pause-circle: Paused | `neutral-600` | Used for paused states | :bootstrap-pause-circle: `pause-circle` or :bootstrap-play-circle: `play-circle` | :bootstrap-pause-circle: Pause
:bootstrap-play-circle: Resume | +| :bootstrap-check-circle-fill: Success | `green-600` | Used for positive / successful states | :bootstrap-check-circle-fill: `check-circle-fill` or :bootstrap-check2-circle: `:check2-circle:` | :bootstrap-check-circle-fill: Complete | +| :bootstrap-dash-square-fill: Neutral | `amber-600` | Used for ambiguous states, generally good but could be better | :bootstrap-dash-square-fill: `dash-square-fill` | :bootstrap-dash-square-fill: Stopped | +| :bootstrap-exclamation-diamond-fill: Warning | `amber-600` | Used for warning states, something is wrong but not critically | :bootstrap-exclamation-diamond-fill: `exclamation-diamond-fill` or :bootstrap-exclamation-diamond: `exclamation-diamond` | :bootstrap-exclamation-diamond-fill: Warning | +| :bootstrap-x-octagon-fill: Danger | `orange-600` | Used for serious errors and actions that should be taken with extreme care | :bootstrap-x-octagon-fill: `x-octagon-fill` or :bootstrap-x-octagon: `x-octagon` | :bootstrap-x-octagon-fill: Error | diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/check2-circle.svg b/frontend/docs/docs/overrides/.icons/bootstrap/check2-circle.svg new file mode 100644 index 0000000000..166e6612d7 --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/check2-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg index 5987fe7247..cb14aee9e3 100644 --- a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg +++ b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond-fill.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond.svg new file mode 100644 index 0000000000..4881e6d242 --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-diamond.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-octagon.svg b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-octagon.svg new file mode 100644 index 0000000000..7f25938132 --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/exclamation-octagon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/pause-circle.svg b/frontend/docs/docs/overrides/.icons/bootstrap/pause-circle.svg new file mode 100644 index 0000000000..6d3aeff01d --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/pause-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/play-circle.svg b/frontend/docs/docs/overrides/.icons/bootstrap/play-circle.svg new file mode 100644 index 0000000000..a1d742e00f --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/play-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle.svg b/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle.svg new file mode 100644 index 0000000000..eb26f19e58 --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/slash-circle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/overrides/.icons/bootstrap/x-octagon.svg b/frontend/docs/docs/overrides/.icons/bootstrap/x-octagon.svg new file mode 100644 index 0000000000..181a39f5d8 --- /dev/null +++ b/frontend/docs/docs/overrides/.icons/bootstrap/x-octagon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/docs/docs/stylesheets/extra.css b/frontend/docs/docs/stylesheets/extra.css index aa8543f309..0ebda2d26c 100644 --- a/frontend/docs/docs/stylesheets/extra.css +++ b/frontend/docs/docs/stylesheets/extra.css @@ -1,3 +1,4 @@ +@import './theme.css'; /* Font style definitions */ @font-face { @@ -9,21 +10,26 @@ } @font-face { - font-family: "Inter"; + font-family: "Inter Variable"; font-weight: 100 900; - font-display: swap; font-style: normal; - src: url("../assets/fonts/Inter.var.woff2") format("woff2"); - font-feature-settings: "ss03"; + font-named-instance: "Regular"; + font-feature-settings: "ss04"; + src: + local("Inter Variable"), + url("https://cdn.webrecorder.net/fonts/inter/InterVariable.woff2") + format("woff2"); } - @font-face { - font-family: "Inter"; + font-family: "Inter Variable"; font-weight: 100 900; - font-display: swap; font-style: italic; - src: url("../assets/fonts/Inter-Italic.var.woff2") format("woff2"); - font-feature-settings: "ss03"; + font-named-instance: "Italic"; + font-feature-settings: "ss04"; + src: + local("Inter Variable"), + url("https://cdn.webrecorder.net/fonts/inter/InterVariable-Italic.woff2") + format("woff2"); } @font-face { @@ -31,25 +37,25 @@ font-weight: 100 900; font-display: swap; font-style: normal; - src: url("https://wr-static.sfo3.cdn.digitaloceanspaces.com/fonts/konsole/Konsolev1.1-VF.woff2") + src: url("https://cdn.webrecorder.net/fonts/konsole/Konsolev1.1-VF.woff2") format("woff2"); } :root { --md-display-font: "Konsole", "Helvetica", sans-serif; --md-code-font: "Recursive", monospace; - --md-text-font: "Inter", "Helvetica", "Arial", sans-serif; - --wr-blue-primary: #088eaf; - --wr-orange-primary: #bb4a00; + --md-text-font: "Inter Variable", "Helvetica", "Arial", sans-serif; + --wr-blue-primary: var(--color-brand-blue); + --wr-orange-primary: var(--color-orange-500); } [data-md-color-scheme="webrecorder"] { - --md-primary-fg-color: #4d7c0f; - --md-primary-fg-color--light: #057894; - --md-primary-fg-color--dark: #035b71; + --md-primary-fg-color: var(--color-brand-green); + --md-primary-fg-color--light: var(--color-cyan-500); + --md-primary-fg-color--dark: var(--color-cyan-600); --md-typeset-color: black; - --md-accent-fg-color: #057894; - --md-typeset-a-color: #035b71; + --md-accent-fg-color: var(--color-cyan-500); + --md-typeset-a-color: var(--color-cyan-600); --md-code-bg-color: #f9fafb; } @@ -130,6 +136,10 @@ h3 { font-variation-settings: "OPSZ" 35; } +.md-typeset { + font-feature-settings: "ss04" off,"ss07" on,"ss08" on; +} + /* Custom badge classes, applies custom overrides to inline-code blocks */ .badge-blue { @@ -158,56 +168,112 @@ h3 { /* Status Styling */ -.status-empty { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-400 { + font-weight: 600; white-space: nowrap; & svg { - color: rgb(119, 134, 145); + color: var(--sl-color-neutral-400); } } -.status-success { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-500 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(142.1 76.2% 36.3%); + color: var(--sl-color-neutral-500); } } -.status-neutral { - font-family: var(--md-code-font); - font-weight: 500; +.status-neutral-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(32.1 94.6% 43.7%); + color: var(--sl-color-neutral-600); } } -.status-warning { - font-family: var(--md-code-font); - font-weight: 500; +.status-green-500 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(21, 90%, 48%); + color: var(--sl-color-green-500); } } -.status-danger { - font-family: var(--md-code-font); - font-weight: 500; +.status-green-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(0 72.2% 50.6%); + color: var(--sl-color-green-600); } } -.status-waiting { - font-family: var(--md-code-font); - font-weight: 500; +.status-amber-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-amber-600); + } +} + +.status-neutral-600 { + font-weight: 600; white-space: nowrap; & svg { - color: hsl(271.5 81.3% 55.9%); + color: var(--sl-color-neutral-600); + } +} + +.status-amber-500 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-amber-500); + } +} + +.status-red-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-red-600); + } +} + +.status-orange-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-orange-600); + } +} + +.status-violet-500 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-violet-500); + } +} + +.status-violet-600 { + font-weight: 600; + white-space: nowrap; + & svg { + color: var(--sl-color-violet-600); + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; } } diff --git a/frontend/docs/docs/stylesheets/theme.css b/frontend/docs/docs/stylesheets/theme.css new file mode 100644 index 0000000000..f647509eaa --- /dev/null +++ b/frontend/docs/docs/stylesheets/theme.css @@ -0,0 +1,380 @@ +:root { + /* Webrecorder colors */ + --color-black: #000000; + --color-white: #ffffff; + --color-transparent: rgba(0, 0, 0, 0); + --color-offWhite: #f0eee8; + + --color-gray-50: #eeeeee; + --color-gray-100: #d4d4d4; + --color-gray-200: #b9b9b9; + --color-gray-300: #9e9e9e; + --color-gray-400: #848484; + --color-gray-500: #707070; + --color-gray-600: #555555; + --color-gray-700: #3b3b3b; + --color-gray-800: #262626; + --color-gray-900: #111111; + + --color-earth-25: #fefcf7; + --color-earth-50: #f0eee8; + --color-earth-100: #d6d4cb; + --color-earth-200: #bdb8ad; + --color-earth-300: #a39d8f; + --color-earth-400: #8b8373; + --color-earth-500: #776f5f; + --color-earth-600: #5a5447; + --color-earth-700: #3f3a31; + --color-earth-800: #29251f; + --color-earth-900: #12110c; + + --color-stone-50: #edeff0; + --color-stone-100: #cfd5d8; + --color-stone-200: #b2bac0; + --color-stone-300: #949fa8; + --color-stone-400: #778691; + --color-stone-500: #62737e; + --color-stone-600: #4a565f; + --color-stone-700: #343c43; + --color-stone-800: #21262a; + --color-stone-900: #0f1113; + + --color-red-50: #fdebe8; + --color-red-100: #f7c9c2; + --color-red-200: #efa79c; + --color-red-300: #e48276; + --color-red-400: #cb4a43; + --color-red-500: #c0262b; + --color-red-600: #931614; + --color-red-700: #700907; + --color-red-800: #480403; + --color-red-900: #200101; + + --color-orange-50: #faece5; + --color-orange-100: #f1cdbd; + --color-orange-200: #e5ac94; + --color-orange-300: #d88b69; + --color-orange-400: #c9683b; + --color-orange-500: #bb4a00; + --color-orange-600: #8f3700; + --color-orange-700: #652400; + --color-orange-800: #421500; + --color-orange-900: #200600; + + --color-yellow-50: #fbefd4; + --color-yellow-100: #f9e6be; + --color-yellow-200: #f6d898; + --color-yellow-300: #f1c565; + --color-yellow-400: #e5af3a; + --color-yellow-500: #d29513; + --color-yellow-600: #6f4e00; + --color-yellow-700: #4e3600; + --color-yellow-800: #342200; + --color-yellow-900: #190e00; + + --color-lime-50: #eaf0e6; + --color-lime-100: #c9d9be; + --color-lime-200: #a8c094; + --color-lime-300: #86a86a; + --color-lime-400: #668f3f; + --color-lime-500: #4d7c0f; + --color-lime-600: #3a5f09; + --color-lime-700: #264104; + --color-lime-800: #172a02; + --color-lime-900: #081301; + + --color-cyan-50: #e4f1f5; + --color-cyan-100: #b9d9e5; + --color-cyan-200: #8bc1d4; + --color-cyan-300: #58a8c2; + --color-cyan-400: #088eaf; + --color-cyan-500: #057894; + --color-cyan-600: #035b71; + + --color-cyan-700: #013f50; + --color-cyan-700-deep: color(display-p3 0.0039 0.2471 0.3137); + --color-cyan-800: #012834; + --color-cyan-900: #001219; + + --color-blue-50: #e6eeff; + --color-blue-100: #c1d4ff; + --color-blue-200: #9ab8fe; + --color-blue-300: #739bfa; + --color-blue-400: #557ef0; + --color-blue-500: #3c67d5; + --color-blue-600: #314fa1; + --color-blue-700: #203673; + --color-blue-800: #13234d; + --color-blue-900: #060e27; + + --color-violet-50: #f5eaff; + --color-violet-100: #e5c9ff; + --color-violet-200: #d5a5ff; + --color-violet-300: #c47eff; + --color-violet-400: #b350fc; + --color-violet-500: #9338d3; + --color-violet-600: #7124a8; + --color-violet-700: #53187c; + --color-violet-800: #360c52; + --color-violet-900: #180327; + + --color-brand-blue: #088eaf; + --color-brand-green: #4d7c0f; + + /* Fallback Shoelace colors */ + --sl-color-gray-50: hsl(0 0% 97.5%); + --sl-color-gray-100: hsl(240 4.8% 95.9%); + --sl-color-gray-200: hsl(240 5.9% 90%); + --sl-color-gray-300: hsl(240 4.9% 83.9%); + --sl-color-gray-400: hsl(240 5% 64.9%); + --sl-color-gray-500: hsl(240 3.8% 46.1%); + --sl-color-gray-600: hsl(240 5.2% 33.9%); + --sl-color-gray-700: hsl(240 5.3% 26.1%); + --sl-color-gray-800: hsl(240 3.7% 15.9%); + --sl-color-gray-900: hsl(240 5.9% 10%); + --sl-color-gray-950: hsl(240 7.3% 8%); + --sl-color-red-50: hsl(0 85.7% 97.3%); + --sl-color-red-100: hsl(0 93.3% 94.1%); + --sl-color-red-200: hsl(0 96.3% 89.4%); + --sl-color-red-300: hsl(0 93.5% 81.8%); + --sl-color-red-400: hsl(0 90.6% 70.8%); + --sl-color-red-500: hsl(0 84.2% 60.2%); + --sl-color-red-600: hsl(0 72.2% 50.6%); + --sl-color-red-700: hsl(0 73.7% 41.8%); + --sl-color-red-800: hsl(0 70% 35.3%); + --sl-color-red-900: hsl(0 62.8% 30.6%); + --sl-color-red-950: hsl(0 60% 19.6%); + --sl-color-orange-50: hsl(33.3 100% 96.5%); + --sl-color-orange-100: hsl(34.3 100% 91.8%); + --sl-color-orange-200: hsl(32.1 97.7% 83.1%); + --sl-color-orange-300: hsl(30.7 97.2% 72.4%); + --sl-color-orange-400: hsl(27 96% 61%); + --sl-color-orange-500: hsl(24.6 95% 53.1%); + --sl-color-orange-600: hsl(20.5 90.2% 48.2%); + --sl-color-orange-700: hsl(17.5 88.3% 40.4%); + --sl-color-orange-800: hsl(15 79.1% 33.7%); + --sl-color-orange-900: hsl(15.3 74.6% 27.8%); + --sl-color-orange-950: hsl(15.2 69.1% 19%); + --sl-color-amber-50: hsl(48 100% 96.1%); + --sl-color-amber-100: hsl(48 96.5% 88.8%); + --sl-color-amber-200: hsl(48 96.6% 76.7%); + --sl-color-amber-300: hsl(45.9 96.7% 64.5%); + --sl-color-amber-400: hsl(43.3 96.4% 56.3%); + --sl-color-amber-500: hsl(37.7 92.1% 50.2%); + --sl-color-amber-600: hsl(32.1 94.6% 43.7%); + --sl-color-amber-700: hsl(26 90.5% 37.1%); + --sl-color-amber-800: hsl(22.7 82.5% 31.4%); + --sl-color-amber-900: hsl(21.7 77.8% 26.5%); + --sl-color-amber-950: hsl(22.9 74.1% 16.7%); + --sl-color-yellow-50: hsl(54.5 91.7% 95.3%); + --sl-color-yellow-100: hsl(54.9 96.7% 88%); + --sl-color-yellow-200: hsl(52.8 98.3% 76.9%); + --sl-color-yellow-300: hsl(50.4 97.8% 63.5%); + --sl-color-yellow-400: hsl(47.9 95.8% 53.1%); + --sl-color-yellow-500: hsl(45.4 93.4% 47.5%); + --sl-color-yellow-600: hsl(40.6 96.1% 40.4%); + --sl-color-yellow-700: hsl(35.5 91.7% 32.9%); + --sl-color-yellow-800: hsl(31.8 81% 28.8%); + --sl-color-yellow-900: hsl(28.4 72.5% 25.7%); + --sl-color-yellow-950: hsl(33.1 69% 13.9%); + --sl-color-lime-50: hsl(78.3 92% 95.1%); + --sl-color-lime-100: hsl(79.6 89.1% 89.2%); + --sl-color-lime-200: hsl(80.9 88.5% 79.6%); + --sl-color-lime-300: hsl(82 84.5% 67.1%); + --sl-color-lime-400: hsl(82.7 78% 55.5%); + --sl-color-lime-500: hsl(83.7 80.5% 44.3%); + --sl-color-lime-600: hsl(84.8 85.2% 34.5%); + --sl-color-lime-700: hsl(85.9 78.4% 27.3%); + --sl-color-lime-800: hsl(86.3 69% 22.7%); + --sl-color-lime-900: hsl(87.6 61.2% 20.2%); + --sl-color-lime-950: hsl(86.5 60.6% 13.9%); + --sl-color-green-50: hsl(138.5 76.5% 96.7%); + --sl-color-green-100: hsl(140.6 84.2% 92.5%); + --sl-color-green-200: hsl(141 78.9% 85.1%); + --sl-color-green-300: hsl(141.7 76.6% 73.1%); + --sl-color-green-400: hsl(141.9 69.2% 58%); + --sl-color-green-500: hsl(142.1 70.6% 45.3%); + --sl-color-green-600: hsl(142.1 76.2% 36.3%); + --sl-color-green-700: hsl(142.4 71.8% 29.2%); + --sl-color-green-800: hsl(142.8 64.2% 24.1%); + --sl-color-green-900: hsl(143.8 61.2% 20.2%); + --sl-color-green-950: hsl(144.3 60.7% 12%); + --sl-color-emerald-50: hsl(151.8 81% 95.9%); + --sl-color-emerald-100: hsl(149.3 80.4% 90%); + --sl-color-emerald-200: hsl(152.4 76% 80.4%); + --sl-color-emerald-300: hsl(156.2 71.6% 66.9%); + --sl-color-emerald-400: hsl(158.1 64.4% 51.6%); + --sl-color-emerald-500: hsl(160.1 84.1% 39.4%); + --sl-color-emerald-600: hsl(161.4 93.5% 30.4%); + --sl-color-emerald-700: hsl(162.9 93.5% 24.3%); + --sl-color-emerald-800: hsl(163.1 88.1% 19.8%); + --sl-color-emerald-900: hsl(164.2 85.7% 16.5%); + --sl-color-emerald-950: hsl(164.3 87.5% 9.4%); + --sl-color-teal-50: hsl(166.2 76.5% 96.7%); + --sl-color-teal-100: hsl(167.2 85.5% 89.2%); + --sl-color-teal-200: hsl(168.4 83.8% 78.2%); + --sl-color-teal-300: hsl(170.6 76.9% 64.3%); + --sl-color-teal-400: hsl(172.5 66% 50.4%); + --sl-color-teal-500: hsl(173.4 80.4% 40%); + --sl-color-teal-600: hsl(174.7 83.9% 31.6%); + --sl-color-teal-700: hsl(175.3 77.4% 26.1%); + --sl-color-teal-800: hsl(176.1 69.4% 21.8%); + --sl-color-teal-900: hsl(175.9 60.8% 19%); + --sl-color-teal-950: hsl(176.5 58.6% 11.4%); + --sl-color-cyan-50: hsl(183.2 100% 96.3%); + --sl-color-cyan-100: hsl(185.1 95.9% 90.4%); + --sl-color-cyan-200: hsl(186.2 93.5% 81.8%); + --sl-color-cyan-300: hsl(187 92.4% 69%); + --sl-color-cyan-400: hsl(187.9 85.7% 53.3%); + --sl-color-cyan-500: hsl(188.7 94.5% 42.7%); + --sl-color-cyan-600: hsl(191.6 91.4% 36.5%); + --sl-color-cyan-700: hsl(192.9 82.3% 31%); + --sl-color-cyan-800: hsl(194.4 69.6% 27.1%); + --sl-color-cyan-900: hsl(196.4 63.6% 23.7%); + --sl-color-cyan-950: hsl(196.8 61% 16.1%); + --sl-color-sky-50: hsl(204 100% 97.1%); + --sl-color-sky-100: hsl(204 93.8% 93.7%); + --sl-color-sky-200: hsl(200.6 94.4% 86.1%); + --sl-color-sky-300: hsl(199.4 95.5% 73.9%); + --sl-color-sky-400: hsl(198.4 93.2% 59.6%); + --sl-color-sky-500: hsl(198.6 88.7% 48.4%); + --sl-color-sky-600: hsl(200.4 98% 39.4%); + --sl-color-sky-700: hsl(201.3 96.3% 32.2%); + --sl-color-sky-800: hsl(201 90% 27.5%); + --sl-color-sky-900: hsl(202 80.3% 23.9%); + --sl-color-sky-950: hsl(202.3 73.8% 16.5%); + --sl-color-blue-50: hsl(213.8 100% 96.9%); + --sl-color-blue-100: hsl(214.3 94.6% 92.7%); + --sl-color-blue-200: hsl(213.3 96.9% 87.3%); + --sl-color-blue-300: hsl(211.7 96.4% 78.4%); + --sl-color-blue-400: hsl(213.1 93.9% 67.8%); + --sl-color-blue-500: hsl(217.2 91.2% 59.8%); + --sl-color-blue-600: hsl(221.2 83.2% 53.3%); + --sl-color-blue-700: hsl(224.3 76.3% 48%); + --sl-color-blue-800: hsl(225.9 70.7% 40.2%); + --sl-color-blue-900: hsl(224.4 64.3% 32.9%); + --sl-color-blue-950: hsl(226.2 55.3% 18.4%); + --sl-color-indigo-50: hsl(225.9 100% 96.7%); + --sl-color-indigo-100: hsl(226.5 100% 93.9%); + --sl-color-indigo-200: hsl(228 96.5% 88.8%); + --sl-color-indigo-300: hsl(229.7 93.5% 81.8%); + --sl-color-indigo-400: hsl(234.5 89.5% 73.9%); + --sl-color-indigo-500: hsl(238.7 83.5% 66.7%); + --sl-color-indigo-600: hsl(243.4 75.4% 58.6%); + --sl-color-indigo-700: hsl(244.5 57.9% 50.6%); + --sl-color-indigo-800: hsl(243.7 54.5% 41.4%); + --sl-color-indigo-900: hsl(242.2 47.4% 34.3%); + --sl-color-indigo-950: hsl(243.5 43.6% 22.9%); + --sl-color-violet-50: hsl(250 100% 97.6%); + --sl-color-violet-100: hsl(251.4 91.3% 95.5%); + --sl-color-violet-200: hsl(250.5 95.2% 91.8%); + --sl-color-violet-300: hsl(252.5 94.7% 85.1%); + --sl-color-violet-400: hsl(255.1 91.7% 76.3%); + --sl-color-violet-500: hsl(258.3 89.5% 66.3%); + --sl-color-violet-600: hsl(262.1 83.3% 57.8%); + --sl-color-violet-700: hsl(263.4 70% 50.4%); + --sl-color-violet-800: hsl(263.4 69.3% 42.2%); + --sl-color-violet-900: hsl(263.5 67.4% 34.9%); + --sl-color-violet-950: hsl(265.1 61.5% 21.4%); + --sl-color-purple-50: hsl(270 100% 98%); + --sl-color-purple-100: hsl(268.7 100% 95.5%); + --sl-color-purple-200: hsl(268.6 100% 91.8%); + --sl-color-purple-300: hsl(269.2 97.4% 85.1%); + --sl-color-purple-400: hsl(270 95.2% 75.3%); + --sl-color-purple-500: hsl(270.7 91% 65.1%); + --sl-color-purple-600: hsl(271.5 81.3% 55.9%); + --sl-color-purple-700: hsl(272.1 71.7% 47.1%); + --sl-color-purple-800: hsl(272.9 67.2% 39.4%); + --sl-color-purple-900: hsl(273.6 65.6% 32%); + --sl-color-purple-950: hsl(276 59.5% 16.5%); + --sl-color-fuchsia-50: hsl(289.1 100% 97.8%); + --sl-color-fuchsia-100: hsl(287 100% 95.5%); + --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%); + --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%); + --sl-color-fuchsia-400: hsl(292 91.4% 72.5%); + --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%); + --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%); + --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%); + --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%); + --sl-color-fuchsia-900: hsl(296.7 63.6% 28%); + --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%); + --sl-color-pink-50: hsl(327.3 73.3% 97.1%); + --sl-color-pink-100: hsl(325.7 77.8% 94.7%); + --sl-color-pink-200: hsl(325.9 84.6% 89.8%); + --sl-color-pink-300: hsl(327.4 87.1% 81.8%); + --sl-color-pink-400: hsl(328.6 85.5% 70.2%); + --sl-color-pink-500: hsl(330.4 81.2% 60.4%); + --sl-color-pink-600: hsl(333.3 71.4% 50.6%); + --sl-color-pink-700: hsl(335.1 77.6% 42%); + --sl-color-pink-800: hsl(335.8 74.4% 35.3%); + --sl-color-pink-900: hsl(335.9 69% 30.4%); + --sl-color-pink-950: hsl(336.2 65.4% 15.9%); + --sl-color-rose-50: hsl(355.7 100% 97.3%); + --sl-color-rose-100: hsl(355.6 100% 94.7%); + --sl-color-rose-200: hsl(352.7 96.1% 90%); + --sl-color-rose-300: hsl(352.6 95.7% 81.8%); + --sl-color-rose-400: hsl(351.3 94.5% 71.4%); + --sl-color-rose-500: hsl(349.7 89.2% 60.2%); + --sl-color-rose-600: hsl(346.8 77.2% 49.8%); + --sl-color-rose-700: hsl(345.3 82.7% 40.8%); + --sl-color-rose-800: hsl(343.4 79.7% 34.7%); + --sl-color-rose-900: hsl(341.5 75.5% 30.4%); + --sl-color-rose-950: hsl(341.3 70.1% 17.1%); + --sl-color-primary-50: var(--sl-color-sky-50); + --sl-color-primary-100: var(--sl-color-sky-100); + --sl-color-primary-200: var(--sl-color-sky-200); + --sl-color-primary-300: var(--sl-color-sky-300); + --sl-color-primary-400: var(--sl-color-sky-400); + --sl-color-primary-500: var(--sl-color-sky-500); + --sl-color-primary-600: var(--sl-color-sky-600); + --sl-color-primary-700: var(--sl-color-sky-700); + --sl-color-primary-800: var(--sl-color-sky-800); + --sl-color-primary-900: var(--sl-color-sky-900); + --sl-color-primary-950: var(--sl-color-sky-950); + --sl-color-success-50: var(--sl-color-green-50); + --sl-color-success-100: var(--sl-color-green-100); + --sl-color-success-200: var(--sl-color-green-200); + --sl-color-success-300: var(--sl-color-green-300); + --sl-color-success-400: var(--sl-color-green-400); + --sl-color-success-500: var(--sl-color-green-500); + --sl-color-success-600: var(--sl-color-green-600); + --sl-color-success-700: var(--sl-color-green-700); + --sl-color-success-800: var(--sl-color-green-800); + --sl-color-success-900: var(--sl-color-green-900); + --sl-color-success-950: var(--sl-color-green-950); + --sl-color-warning-50: var(--sl-color-amber-50); + --sl-color-warning-100: var(--sl-color-amber-100); + --sl-color-warning-200: var(--sl-color-amber-200); + --sl-color-warning-300: var(--sl-color-amber-300); + --sl-color-warning-400: var(--sl-color-amber-400); + --sl-color-warning-500: var(--sl-color-amber-500); + --sl-color-warning-600: var(--sl-color-amber-600); + --sl-color-warning-700: var(--sl-color-amber-700); + --sl-color-warning-800: var(--sl-color-amber-800); + --sl-color-warning-900: var(--sl-color-amber-900); + --sl-color-warning-950: var(--sl-color-amber-950); + --sl-color-danger-50: var(--sl-color-red-50); + --sl-color-danger-100: var(--sl-color-red-100); + --sl-color-danger-200: var(--sl-color-red-200); + --sl-color-danger-300: var(--sl-color-red-300); + --sl-color-danger-400: var(--sl-color-red-400); + --sl-color-danger-500: var(--sl-color-red-500); + --sl-color-danger-600: var(--sl-color-red-600); + --sl-color-danger-700: var(--sl-color-red-700); + --sl-color-danger-800: var(--sl-color-red-800); + --sl-color-danger-900: var(--sl-color-red-900); + --sl-color-danger-950: var(--sl-color-red-950); + --sl-color-neutral-50: var(--sl-color-gray-50); + --sl-color-neutral-100: var(--sl-color-gray-100); + --sl-color-neutral-200: var(--sl-color-gray-200); + --sl-color-neutral-300: var(--sl-color-gray-300); + --sl-color-neutral-400: var(--sl-color-gray-400); + --sl-color-neutral-500: var(--sl-color-gray-500); + --sl-color-neutral-600: var(--sl-color-gray-600); + --sl-color-neutral-700: var(--sl-color-gray-700); + --sl-color-neutral-800: var(--sl-color-gray-800); + --sl-color-neutral-900: var(--sl-color-gray-900); + --sl-color-neutral-950: var(--sl-color-gray-950); + --sl-color-neutral-0: hsl(0, 0%, 100%); + --sl-color-neutral-1000: hsl(0, 0%, 0%); +} diff --git a/frontend/docs/docs/user-guide/archived-items.md b/frontend/docs/docs/user-guide/archived-items.md index d69e5f24d9..eefe4288ff 100644 --- a/frontend/docs/docs/user-guide/archived-items.md +++ b/frontend/docs/docs/user-guide/archived-items.md @@ -16,9 +16,9 @@ The status of an archived item depends on its type. Uploads will always have the | :bootstrap-dash-square-fill: Stopped | The crawl workflow was _stopped_ gracefully by a user and data is saved. | | :bootstrap-exclamation-square-fill: Stopped: Reason | A workflow limit (listed as the reason) was reached and data is saved. | | :bootstrap-x-octagon-fill: Canceled | The crawl workflow was _canceled_ by a user, no data is saved. | -| :bootstrap-exclamation-triangle-fill: Failed | A serious error occurred while crawling, no data is saved.| +| :bootstrap-diamond-triangle-fill: Failed | A serious error occurred while crawling, no data is saved.| -Because :bootstrap-x-octagon-fill: Canceled and :bootstrap-exclamation-triangle-fill: Failed crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection. +Because :bootstrap-x-octagon-fill: Canceled and :bootstrap-exclamation-diamond-fill: Failed crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection. ## Archived Item Details diff --git a/frontend/docs/mkdocs.yml b/frontend/docs/mkdocs.yml index bc7d16a203..3d77c2f19a 100644 --- a/frontend/docs/mkdocs.yml +++ b/frontend/docs/mkdocs.yml @@ -32,7 +32,7 @@ theme: tip: bootstrap/exclamation-circle-fill success: bootstrap/check-circle-fill question: bootstrap/question-circle-fill - warning: bootstrap/exclamation-triangle-fill + warning: bootstrap/exclamation-diamond-fill failure: bootstrap/x-octagon-fill danger: bootstrap/exclamation-diamond-fill bug: bootstrap/bug-fill diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts index 9c87bbcdcc..d1f12aa8a9 100644 --- a/frontend/src/components/orgs-list.ts +++ b/frontend/src/components/orgs-list.ts @@ -624,7 +624,7 @@ export class OrgsList extends BtrixElement { status = { icon: html` `, @@ -689,7 +689,7 @@ export class OrgsList extends BtrixElement { subscription = { icon: html``, description: msg("Payment Failed"), diff --git a/frontend/src/components/ui/pw-strength-alert.ts b/frontend/src/components/ui/pw-strength-alert.ts index 459d5dc220..e599ee3935 100644 --- a/frontend/src/components/ui/pw-strength-alert.ts +++ b/frontend/src/components/ui/pw-strength-alert.ts @@ -93,14 +93,14 @@ export class PasswordStrengthAlert extends LitElement { label: string; variant: "primary" | "neutral" | "danger" | "success" | "warning"; } = { - icon: "exclamation-triangle", + icon: "x-octagon", label: msg("Very weak password"), variant: "danger", }; switch (score) { case 2: scoreProps = { - icon: "exclamation-circle", + icon: "exclamation-diamond", label: msg("Weak password"), variant: "warning", }; diff --git a/frontend/src/features/archived-items/crawl-log-table.ts b/frontend/src/features/archived-items/crawl-log-table.ts index addba92a3a..453d6e26d4 100644 --- a/frontend/src/features/archived-items/crawl-log-table.ts +++ b/frontend/src/features/archived-items/crawl-log-table.ts @@ -195,15 +195,15 @@ export class CrawlLogTable extends TailwindElement { case CrawlLogLevel.Error: return html` `; case CrawlLogLevel.Warning: return html` `; case CrawlLogLevel.Info: diff --git a/frontend/src/features/archived-items/crawl-status.ts b/frontend/src/features/archived-items/crawl-status.ts index 030210c892..1faae85f22 100644 --- a/frontend/src/features/archived-items/crawl-status.ts +++ b/frontend/src/features/archived-items/crawl-status.ts @@ -171,7 +171,7 @@ export class CrawlStatus extends TailwindElement { case "failed": color = "var(--danger)"; icon = html``; @@ -181,7 +181,7 @@ export class CrawlStatus extends TailwindElement { case "skipped_storage_quota_reached": color = "var(--danger)"; icon = html``; @@ -191,7 +191,7 @@ export class CrawlStatus extends TailwindElement { case "skipped_time_quota_reached": color = "var(--danger)"; icon = html``; diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts index fed4f33913..e8a1a9ae55 100644 --- a/frontend/src/features/collections/collection-edit-dialog.ts +++ b/frontend/src/features/collections/collection-edit-dialog.ts @@ -365,7 +365,7 @@ export class CollectionEdit extends BtrixElement { variant=${this.errorTab === panel ? "error" : "primary"} > ${string} `; @@ -377,8 +377,7 @@ export class CollectionEdit extends BtrixElement { } catch (e) { this.notify.toast({ message: msg("Sorry, couldn't retrieve Collection at this time."), - variant: "danger", - icon: "exclamation-octagon", + variant: "warning", id: "collection-retrieve-status", }); } diff --git a/frontend/src/features/collections/collection-initial-view-dialog.ts b/frontend/src/features/collections/collection-initial-view-dialog.ts index 7825d2d5f7..6277042844 100644 --- a/frontend/src/features/collections/collection-initial-view-dialog.ts +++ b/frontend/src/features/collections/collection-initial-view-dialog.ts @@ -368,7 +368,6 @@ export class CollectionInitialViewDialog extends BtrixElement { "Home view updated, but couldn't update collection thumbnail at this time.", ), variant: "warning", - icon: "exclamation-triangle", id: "home-view-update-status", }); } diff --git a/frontend/src/features/crawl-workflows/workflow-editor.ts b/frontend/src/features/crawl-workflows/workflow-editor.ts index 264258528a..4a0c294a4b 100644 --- a/frontend/src/features/crawl-workflows/workflow-editor.ts +++ b/frontend/src/features/crawl-workflows/workflow-editor.ts @@ -1268,7 +1268,7 @@ https://archiveweb.page/images/${"logo.svg"}`} const behaviorOverrideWarning = html` ${msg("May be overridden by custom behaviors.")} diff --git a/frontend/src/features/org/org-status-banner.ts b/frontend/src/features/org/org-status-banner.ts index c780b17b50..75c1362849 100644 --- a/frontend/src/features/org/org-status-banner.ts +++ b/frontend/src/features/org/org-status-banner.ts @@ -31,7 +31,7 @@ export class OrgStatusBanner extends BtrixElement {