Merge pull request #666 from webrecorder/frontend-detail-nav-button-update

frontend/src/assets/icons/link-replay.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5 5.5H4C2.34315 5.5 1 6.84315 1 8.5C1 10.1569 2.34315 11.5 4 11.5H7C8.65685 11.5 10 10.1569 10 8.5C10 8.14936 9.93985 7.81278 9.82929 7.5C9.46961 7.5 9.10993 7.5 8.75024 7.5C8.90938 7.78696 9 8.14862 9 8.5C9 9.60457 8.10457 10.5 7 10.5H4C2.89543 10.5 2 9.60457 2 8.5C2 7.39543 2.89543 6.5 4 6.5H5.5C5.5 6 5.5 6 5.5 5.5Z" fill="currentColor"/>
+<path d="M9 5.5C7.34315 5.5 6 6.84315 6 8.5C6 8.85064 6.06015 9.18722 6.17071 9.5H7.26756C7.09739 9.20583 7 8.86429 7 8.5C7 7.39543 7.89543 6.5 9 6.5H12C13.1046 6.5 14 7.39543 14 8.5C14 9.60457 13.1046 10.5 12 10.5H10.5C10.5 11 10.5 11 10.5 11.5H12C13.6569 11.5 15 10.1569 15 8.5C15 6.84315 13.6569 5.5 12 5.5H9Z" fill="currentColor"/>
+<path d="M6.5 6L4 7.73205L4 4.26795L6.5 6Z" fill="currentColor"/>
+<path d="M9.5 11L12 9.26795L12 12.732L9.5 11Z" fill="currentColor"/>
+</svg>

frontend/src/pages/org/crawl-detail.ts

@@ -297,47 +297,90 @@ export class CrawlDetail extends LiteElement {
     const renderNavItem = ({
       section,
       label,
+      iconLibrary,
+      icon,
     }: {
       section: SectionName;
       label: any;
+      iconLibrary: "app" | "default";
+      icon: string;
     }) => {
       const isActive = section === this.sectionName;
       return html`
         <li
-          class="relative"
+          class="relative grow"
           role="menuitem"
           aria-selected=${isActive.toString()}
         >
           <a
-            class="block font-medium rounded-sm mb-2 mr-2 p-2 transition-all ${isActive
-              ? "text-blue-600 bg-blue-50 shadow-sm"
-              : "text-neutral-600 hover:bg-neutral-50"}"
+            class="flex gap-2 flex-col md:flex-row items-center font-semibold rounded-md h-full p-2 ${isActive
+              ? "text-blue-600 bg-blue-100 shadow-sm"
+              : "text-neutral-600 hover:bg-blue-50"}"
             href=${`${this.crawlsBaseUrl}/crawl/${this.crawlId}#${section}`}
             @click=${() => (this.sectionName = section)}
           >
+            <sl-icon
+              class="w-4 h-4 shrink-0"
+              name=${icon}
+              aria-hidden="true"
+              library=${iconLibrary}
+            ></sl-icon>
             ${label}
           </a>
         </li>
       `;
     };
     return html`
-      <nav class="border-b md:border-b-0 md:mt-10">
-        <ul class="flex flex-row md:flex-col" role="menu">
-          ${renderNavItem({ section: "overview", label: msg("Overview") })}
+      <nav class="border-b md:border-b-0 pb-4 md:mt-10">
+        <ul
+          class="flex flex-row md:flex-col gap-2 text-center md:text-start"
+          role="menu"
+        >
+          ${renderNavItem({
+            section: "overview",
+            iconLibrary: "default",
+            icon: "info-circle-fill",
+            label: msg("Overview"),
+          })}
           ${renderNavItem({
             section: "exclusions",
+            iconLibrary: "default",
+            icon: "list-ul",
             label: msg("Crawl Queue & Exclusions"),
           })}
           ${this.isActive
             ? renderNavItem({
                 section: "watch",
+                iconLibrary: "default",
+                icon: "eye-fill",
                 label: msg("Watch Crawl"),
               })
             : ""}
-          ${renderNavItem({ section: "replay", label: msg("Replay") })}
-          ${renderNavItem({ section: "files", label: msg("Files") })}
-          ${renderNavItem({ section: "config", label: msg("Config") })}
-          ${/* renderNavItem({ section: "logs", label: msg("Logs") }) */ ""}
+          ${!this.isActive
+            ? renderNavItem({
+                section: "replay",
+                iconLibrary: "app",
+                icon: "link-replay",
+                label: msg("Replay"),
+              })
+            : ""}
+          ${!this.isActive
+            ? renderNavItem({
+                section: "files",
+                iconLibrary: "default",
+                icon: "folder-fill",
+                label: msg("Files"),
+              })
+            : ""}
+          ${renderNavItem({
+            section: "config",
+            iconLibrary: "default",
+            icon: "file-code-fill",
+            label: msg("Config"),
+          })}
+          ${
+            /* renderNavItem({ section: "logs", iconLibrary:"default", icon: "terminal-fill", label: msg("Logs") }) */ ""
+          }
         </ul>
       </nav>
     `;

frontend/src/pages/org/settings.ts

@@ -117,7 +117,14 @@ export class OrgSettings extends LiteElement {
                 variant="primary"
                 size="small"
                 @click=${this.navLink}
-                >${msg("Invite New Member")}</sl-button
+              >
+                <sl-icon
+                  slot="prefix"
+                  name="person-add"
+                  aria-hidden="true"
+                  library="default"
+                ></sl-icon>
+                ${msg("Invite New Member")}</sl-button
               >
             `,
             () => html` <h3>${this.tabLabels[this.activePanel]}</h3> `