Frontend: Various icon updates (#1569)

Closes #1568 ## Changes - Status icons are now filled! - Uses Bootstrap Icons' new `copy` icon for all actions involving copying to clipboard! - Finally! A real copy icon! 🎉 - Removes `copy-code.svg` as it is no longer used - Actions involving duplicating objects still use `files`... Which is good! Now they have distinct symbols! - Adds orange to the tailwind colour palette --------- Co-authored-by: sua yoo <sua@webrecorder.org>
2024-03-12 15:18:10 -04:00 · 2024-03-12 15:18:10 -04:00 · 16e8b761c0
commit 16e8b761c0
parent 9f312c075e
12 changed files with 26 additions and 25 deletions
--- a/frontend/src/assets/icons/copy-code.svg
+++ b/frontend/src/assets/icons/copy-code.svg
@ -1,3 +0,0 @@
-<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="M3 0H11C12.1046 0 13 0.89543 13 2C14.1046 2 15 2.89543 15 4V12C15 13.1046 14.1046 14 13 14C13 15.1046 12.1046 16 11 16H3C1.89543 16 1 15.1046 1 14V2C1 0.89543 1.89543 0 3 0ZM14 4C14 3.44772 13.5523 3 13 3V13C13.5523 13 14 12.5523 14 12V4ZM3 1C2.44772 1 2 1.44772 2 2V14C2 14.5523 2.44772 15 3 15H11C11.5523 15 12 14.5523 12 14V2C12 1.44772 11.5523 1 11 1H3ZM6.35355 5.64645C6.15829 5.45118 5.84171 5.45118 5.64645 5.64645L3.64645 7.64645C3.45118 7.84171 3.45118 8.15829 3.64645 8.35355L5.64645 10.3536C5.84171 10.5488 6.15829 10.5488 6.35355 10.3536C6.54882 10.1583 6.54882 9.84171 6.35355 9.64645L4.70711 8L6.35355 6.35355C6.54882 6.15829 6.54882 5.84171 6.35355 5.64645ZM7.64645 5.64645C7.84171 5.45118 8.15829 5.45118 8.35355 5.64645L10.3536 7.64645C10.5488 7.84171 10.5488 8.15829 10.3536 8.35355L8.35355 10.3536C8.15829 10.5488 7.84171 10.5488 7.64645 10.3536C7.45118 10.1583 7.45118 9.84171 7.64645 9.64645L9.29289 8L7.64645 6.35355C7.45118 6.15829 7.45118 5.84171 7.64645 5.64645Z" fill="currentColor"/>
-</svg>
--- a/frontend/src/components/ui/copy-button.ts
+++ b/frontend/src/components/ui/copy-button.ts
@ -61,7 +61,7 @@ export class CopyButton extends LitElement {
        @sl-after-hide=${this.stopProp}
      >
        <sl-icon-button
-          name=${this.isCopied ? "check-lg" : this.name ? this.name : "files"}
+          name=${this.isCopied ? "check-lg" : this.name ? this.name : "copy"}
          label=${msg("Copy to clipboard")}
          @click=${this.onClick}
          ?disabled=${!this.value && !this.getValue}
--- a/frontend/src/features/archived-items/crawl-status.ts
+++ b/frontend/src/features/archived-items/crawl-status.ts
@ -156,7 +156,7 @@ export class CrawlStatus extends LitElement {

      case "complete":
        icon = html`<sl-icon
-          name=${isUpload ? "upload" : "check-circle"}
+          name=${isUpload ? "upload" : "check-circle-fill"}
          slot="prefix"
          style="color: var(--success)"
        ></sl-icon>`;
@ -165,7 +165,7 @@ export class CrawlStatus extends LitElement {

      case "failed":
        icon = html`<sl-icon
-          name=${isUpload ? "upload" : "exclamation-triangle"}
+          name=${isUpload ? "upload" : "exclamation-triangle-fill"}
          slot="prefix"
          style="color: var(--danger)"
        ></sl-icon>`;
@ -174,7 +174,7 @@ export class CrawlStatus extends LitElement {

      case "skipped_quota_reached":
        icon = html`<sl-icon
-          name="exclamation-triangle"
+          name="exclamation-triangle-fill"
          slot="prefix"
          style="color: var(--danger)"
        ></sl-icon>`;
@ -183,7 +183,7 @@ export class CrawlStatus extends LitElement {

      case "stopped_by_user":
        icon = html`<sl-icon
-          name="dash-circle"
+          name="dash-square-fill"
          slot="prefix"
          style="color: var(--warning)"
        ></sl-icon>`;
@ -192,7 +192,7 @@ export class CrawlStatus extends LitElement {

      case "stopped_quota_reached":
        icon = html`<sl-icon
-          name="dash-circle"
+          name="exclamation-square-fill"
          slot="prefix"
          style="color: var(--warning)"
        ></sl-icon>`;
@ -201,9 +201,9 @@ export class CrawlStatus extends LitElement {

      case "canceled":
        icon = html`<sl-icon
-          name="x-octagon"
+          name="x-octagon-fill"
          slot="prefix"
-          style="color: var(--danger)"
+          style="color: var(--sl-color-orange-600)"
        ></sl-icon>`;
        label = msg("Canceled");
        break;
--- a/frontend/src/pages/org/archived-item-detail.ts
+++ b/frontend/src/pages/org/archived-item-detail.ts
@ -401,7 +401,7 @@ export class CrawlDetail extends LiteElement {
            ? html`
                <sl-button-group>
                  <sl-button size="small" @click=${this.stop}>
-                    <sl-icon name="slash-circle" slot="prefix"></sl-icon>
+                    <sl-icon name="dash-square" slot="prefix"></sl-icon>
                    <span> ${msg("Stop")} </span>
                  </sl-button>
                  <sl-button size="small" @click=${this.cancel}>
@ -468,7 +468,7 @@ export class CrawlDetail extends LiteElement {
                @click=${() =>
                  CopyButton.copyToClipboard((this.crawl as Crawl).cid)}
              >
-                <sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
+                <sl-icon name="copy" slot="prefix"></sl-icon>
                ${msg("Copy Workflow ID")}
              </sl-menu-item>
            `,
@ -809,7 +809,7 @@ ${this.crawl?.description}
                        () =>
                          html` <sl-tooltip content=${msg("Backed up")}>
                            <sl-icon
-                              name="clouds"
+                              name="clouds-fill"
                              class="mr-2 h-4 w-4 shrink-0 align-text-bottom text-success"
                            ></sl-icon>
                          </sl-tooltip>`,
--- a/frontend/src/pages/org/archived-items.ts
+++ b/frontend/src/pages/org/archived-items.ts
@ -549,11 +549,11 @@ export class CrawlsList extends LiteElement {
              ${msg("Go to Workflow")}
            </sl-menu-item>
            <sl-menu-item @click=${() => CopyButton.copyToClipboard(item.cid)}>
-              <sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
+              <sl-icon name="copy" slot="prefix"></sl-icon>
              ${msg("Copy Workflow ID")}
            </sl-menu-item>
            <sl-menu-item @click=${() => CopyButton.copyToClipboard(item.id)}>
-              <sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
+              <sl-icon name="copy" slot="prefix"></sl-icon>
              ${msg("Copy Crawl ID")}
            </sl-menu-item>
          `
--- a/frontend/src/pages/org/browser-profiles-detail.ts
+++ b/frontend/src/pages/org/browser-profiles-detail.ts
@ -297,7 +297,7 @@ export class BrowserProfilesDetail extends LiteElement {
              name="pencil"
            ></sl-icon>
            <span class="inline-block pr-2 align-middle"
-              >${msg("Edit name & description")}</span
+              >${msg("Edit Name & Description")}</span
            >
          </li>
          <li
@ -310,7 +310,7 @@ export class BrowserProfilesDetail extends LiteElement {
              name="files"
            ></sl-icon>
            <span class="inline-block pr-2 align-middle"
-              >${msg("Duplicate profile")}</span
+              >${msg("Duplicate Profile")}</span
            >
          </li>
          <hr />
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@ -112,7 +112,7 @@ export class BrowserProfilesList extends LiteElement {
            content=${isBackedUp ? msg("Backed up") : msg("Not backed up")}
          >
            <sl-icon
-              name=${isBackedUp ? "clouds" : "cloud-slash"}
+              name=${isBackedUp ? "clouds-fill" : "cloud-slash-fill"}
              class="${isBackedUp ? "text-success" : "text-neutral-500"}"
            ></sl-icon>
          </sl-tooltip>
@ -164,7 +164,7 @@ export class BrowserProfilesList extends LiteElement {
            }}
          >
            <sl-icon slot="prefix" name="files"></sl-icon>
-            ${msg("Duplicate profile")}
+            ${msg("Duplicate Profile")}
          </sl-menu-item>
          <sl-menu-item
            style="--sl-color-neutral-700: var(--danger)"
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@ -108,7 +108,10 @@ export class CollectionDetail extends LiteElement {
          ${this.collection?.isPublic
            ? html`
                <sl-tooltip content=${msg("Shareable")}>
-                  <sl-icon class="text-lg" name="people-fill"></sl-icon>
+                  <sl-icon
+                    class="text-lg text-success-600"
+                    name="people-fill"
+                  ></sl-icon>
                </sl-tooltip>
              `
            : html`
--- a/frontend/src/pages/org/collections-list.ts
+++ b/frontend/src/pages/org/collections-list.ts
@ -501,7 +501,7 @@ export class CollectionsList extends LiteElement {
          ? html`
              <sl-tooltip content=${msg("Shareable")}>
                <sl-icon
-                  class="inline-block align-middle"
+                  class="inline-block align-middle text-success-600"
                  name="people-fill"
                  label=${msg("Shareable Collection")}
                ></sl-icon>
--- a/frontend/src/pages/org/workflow-detail.ts
+++ b/frontend/src/pages/org/workflow-detail.ts
@ -600,7 +600,7 @@ export class WorkflowDetail extends LiteElement {
              this.isCancelingOrStoppingCrawl ||
              this.workflow?.lastCrawlStopping}
            >
-              <sl-icon name="dash-circle" slot="prefix"></sl-icon>
+              <sl-icon name="dash-square" slot="prefix"></sl-icon>
              <span>${msg("Stop")}</span>
            </sl-button>
            <sl-button
@ -655,7 +655,7 @@ export class WorkflowDetail extends LiteElement {
                ?disabled=${workflow.lastCrawlStopping ||
                this.isCancelingOrStoppingCrawl}
              >
-                <sl-icon name="dash-circle" slot="prefix"></sl-icon>
+                <sl-icon name="dash-square" slot="prefix"></sl-icon>
                ${msg("Stop Crawl")}
              </sl-menu-item>
              <sl-menu-item
--- a/frontend/src/pages/org/workflows-list.ts
+++ b/frontend/src/pages/org/workflows-list.ts
@ -433,7 +433,7 @@ export class WorkflowsList extends LiteElement {
            @click=${() => void this.stop(workflow.lastCrawlId)}
            ?disabled=${workflow.lastCrawlStopping}
          >
-            <sl-icon name="dash-circle" slot="prefix"></sl-icon>
+            <sl-icon name="dash-square" slot="prefix"></sl-icon>
            ${msg("Stop Crawl")}
          </sl-menu-item>
          <sl-menu-item
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -36,6 +36,7 @@ function makeTheme() {
    "indigo",
    "purple",
    "pink",
+    "orange",
  ];
  // Map color grading:
  const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];