From 2364433932d980f9a548fa9f0940f6bff8ed874a Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Sat, 10 Jun 2023 22:21:34 -0400
Subject: [PATCH] Admin Panel Minor Frontend Style Updates (#915)

- Unifies trash icons on all pages to use trash3 (there were a few stragglers!)
- Brings styling of org quotas dialogue in-line with the rest of our dialogues
- Adds missing localization strings
- Swaps button with icon button to match table row action styling elsewhere
---
 frontend/src/components/orgs-list.ts      | 22 +++++++++++++---------
 frontend/src/pages/home.ts                |  5 +++--
 frontend/src/pages/org/settings.ts        |  4 ++--
 frontend/src/pages/org/workflow-detail.ts |  2 +-
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts
index 41111df1..ea1416a0 100644
--- a/frontend/src/components/orgs-list.ts
+++ b/frontend/src/components/orgs-list.ts
@@ -45,7 +45,7 @@ export class OrgsList extends LiteElement {
     }
 
     return html`
-    <sl-dialog
+    <btrix-dialog
       label=${msg(str`Quotas for: ${this.currOrg.name}`)}
       ?open=${!!this.currOrg}
     @sl-request-close=${() => (this.currOrg = null)}
@@ -54,14 +54,20 @@ export class OrgsList extends LiteElement {
     return html`
     <sl-input
     name=${key}
+    label=${msg("Max Concurrent Crawls")}
     value=${value}
     type="number"
     @sl-input="${this.onUpdateQuota}"
-    ><span slot="prefix">${key}</span></sl-input>`;
+    ></sl-input>`;
   })}
-  <sl-button @click="${this.onSubmitQuotas}" class="mt-2" variant="primary">Update Quotas</sl-button>
-
-  </sl-dialog>
+  <div slot="footer" class="flex justify-end">
+    <sl-button 
+    size="small"
+    @click="${this.onSubmitQuotas}" 
+    variant="primary">${msg("Update Quotas")}
+    </sl-button>
+  </div>
+  </btrix-dialog>
     `;
   }
 
@@ -110,14 +116,12 @@ export class OrgsList extends LiteElement {
           ${defaultLabel}${org.name}
         </div>
         <div class="flex flex-row items-center">
-          <sl-button size="small" class="mr-3" @click="${this.showQuotas(org)}">
-          <sl-icon name="gear" slot="prefix"></sl-icon>
-          </sl-button>
-          <div class="text-xs text-neutral-400">
+          <div class="text-s font-monostyle text-neutral-400 mr-4">
             ${memberCount === 1
               ? msg(`1 member`)
               : msg(str`${memberCount} members`)}
           </div>
+          <sl-icon-button name="gear" slot="prefix" @click="${this.showQuotas(org)}"></sl-icon-button>
         </div>
       </li>
     `;
diff --git a/frontend/src/pages/home.ts b/frontend/src/pages/home.ts
index 0596f322..e19e42a0 100644
--- a/frontend/src/pages/home.ts
+++ b/frontend/src/pages/home.ts
@@ -126,7 +126,7 @@ export class Home extends LiteElement {
             </div>
             <div class="grow-0 mt-2 md:mt-0 text-right">
               <sl-button variant="neutral" type="submit">
-                <sl-icon slot="prefix" name="arrow-right-circle"></sl-icon>
+                <sl-icon slot="suffix" name="arrow-right"></sl-icon>
                 ${msg("Go")}</sl-button
               >
             </div>
@@ -137,12 +137,13 @@ export class Home extends LiteElement {
       <div class="grid grid-cols-5 gap-8">
         <div class="col-span-5 md:col-span-3">
           <section>
-            <header class="flex items-start justify-between">
+            <header class="flex items-start justify-between items-center">
               <h2 class="text-lg font-medium mb-3 mt-2">
                 ${msg("All Organizations")}
               </h2>
               <sl-button
                 variant="primary"
+                size="small"
                 @click=${() => (this.isAddingOrg = true)}
               >
                 <sl-icon slot="prefix" name="plus-lg"></sl-icon>
diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts
index 2c185729..ef24f9dc 100644
--- a/frontend/src/pages/org/settings.ts
+++ b/frontend/src/pages/org/settings.ts
@@ -293,13 +293,13 @@ export class OrgSettings extends LiteElement {
           })
         )}
     >
-      <sl-icon name="trash"></sl-icon>
+      <sl-icon name="trash3"></sl-icon>
     </btrix-button>`;
   }
 
   private renderRemoveInviteButton(invite: Invite) {
     return html`<btrix-button icon @click=${() => this.removeInvite(invite)}>
-      <sl-icon name="trash"></sl-icon>
+      <sl-icon name="trash3"></sl-icon>
     </btrix-button>`;
   }
 
diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
index 798c237d..33db9712 100644
--- a/frontend/src/pages/org/workflow-detail.ts
+++ b/frontend/src/pages/org/workflow-detail.ts
@@ -837,7 +837,7 @@ export class WorkflowDetail extends LiteElement {
                         style="--sl-color-neutral-700: var(--danger)"
                         @click=${() => this.deleteCrawl(crawl)}
                       >
-                        <sl-icon name="trash" slot="prefix"></sl-icon>
+                        <sl-icon name="trash3" slot="prefix"></sl-icon>
                         ${msg("Delete Crawl")}
                       </sl-menu-item>
                     </sl-menu>