From 2c9ead718f4cd0f1585098083544fd31ad61ddd1 Mon Sep 17 00:00:00 2001
From: Emma Segal-Grossman <hi@emma.cafe>
Date: Wed, 22 May 2024 15:55:52 -0400
Subject: [PATCH] Misc UI fixes (primarily buttons) (#1814)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #1813

Before:


https://github.com/webrecorder/browsertrix/assets/5727389/b843f33a-6323-4a57-bc25-030582478a14

After:


https://github.com/webrecorder/browsertrix/assets/5727389/579200a0-cef2-4f49-8969-6fee1dfd07f5

<img width="156" alt="Screenshot 2024-05-21 at 7 25 42 PM"
src="https://github.com/webrecorder/browsertrix/assets/5727389/8235b8d2-5184-4d14-a4e7-b5969025f4f5">
---
 frontend/src/components/ui/button.ts            | 12 +++++++-----
 frontend/src/components/ui/copy-button.ts       | 17 +++++++++++++----
 frontend/src/components/ui/copy-field.ts        |  1 +
 frontend/src/index.ts                           |  7 ++++---
 .../org/archived-item-qa/archived-item-qa.ts    |  3 ++-
 frontend/src/pages/org/collection-detail.ts     |  2 ++
 6 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ui/button.ts b/frontend/src/components/ui/button.ts
index 5f47e54d..5ef6a2ba 100644
--- a/frontend/src/components/ui/button.ts
+++ b/frontend/src/components/ui/button.ts
@@ -35,7 +35,7 @@ export class Button extends TailwindElement {
   filled = false;
 
   @property({ type: String })
-  size: "small" | "medium" = "medium";
+  size: "x-small" | "small" | "medium" = "medium";
 
   @property({ type: String })
   label?: string;
@@ -68,10 +68,12 @@ export class Button extends TailwindElement {
     return html`<${tag}
       type=${this.type === "submit" ? "submit" : "button"}
       class=${clsx(
-        tw`flex h-6 cursor-pointer items-center justify-center gap-2 text-center font-medium outline-3 outline-offset-1 outline-primary transition focus-visible:outline disabled:cursor-not-allowed disabled:text-neutral-300`,
-        this.size === "medium"
-          ? tw`min-h-8 min-w-8 rounded-sm`
-          : tw`min-h-6 min-w-6 rounded-md`,
+        tw`flex cursor-pointer items-center justify-center gap-2 text-center font-medium outline-3 outline-offset-1 outline-primary transition focus-visible:outline disabled:cursor-not-allowed disabled:text-neutral-300`,
+        {
+          "x-small": tw`min-h-4 min-w-4 text-sm`,
+          small: tw`min-h-6 min-w-6 rounded-md text-base`,
+          medium: tw`min-h-8 min-w-8 rounded-sm text-lg`,
+        }[this.size],
         this.raised && tw`border shadow-sm`,
         this.filled
           ? [
diff --git a/frontend/src/components/ui/copy-button.ts b/frontend/src/components/ui/copy-button.ts
index b8c363dc..84b0c6fb 100644
--- a/frontend/src/components/ui/copy-button.ts
+++ b/frontend/src/components/ui/copy-button.ts
@@ -1,7 +1,9 @@
 import { localized, msg } from "@lit/localize";
-import { html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
+import { TailwindElement } from "@/classes/TailwindElement";
+
 /**
  * Copy text to clipboard on click
  *
@@ -18,7 +20,7 @@ import { customElement, property, state } from "lit/decorators.js";
  */
 @localized()
 @customElement("btrix-copy-button")
-export class CopyButton extends LitElement {
+export class CopyButton extends TailwindElement {
   @property({ type: String })
   value?: string;
 
@@ -34,6 +36,12 @@ export class CopyButton extends LitElement {
   @property({ type: Boolean })
   hoist = false;
 
+  @property({ type: Boolean })
+  raised = false;
+
+  @property({ type: String })
+  size: "x-small" | "small" | "medium" = "small";
+
   @state()
   private isCopied = false;
 
@@ -61,15 +69,16 @@ export class CopyButton extends LitElement {
         @sl-after-hide=${this.stopProp}
       >
         <btrix-button
-          size="small"
+          size=${this.size}
           @click=${this.onClick}
           ?disabled=${!this.value && !this.getValue}
           class="inline"
-          raised
+          ?raised=${this.raised}
         >
           <sl-icon
             name=${this.isCopied ? "check-lg" : this.name ? this.name : "copy"}
             label=${msg("Copy to clipboard")}
+            class="size-3.5"
           ></sl-icon>
         </btrix-button>
       </sl-tooltip>
diff --git a/frontend/src/components/ui/copy-field.ts b/frontend/src/components/ui/copy-field.ts
index 8b738b2e..3600ec59 100644
--- a/frontend/src/components/ui/copy-field.ts
+++ b/frontend/src/components/ui/copy-field.ts
@@ -85,6 +85,7 @@ export class CopyField extends TailwindElement {
             .getValue=${this.getValue}
             .hoist=${this.hoist}
             class="m-1 flex"
+            raised
           ></btrix-copy-button>
         </div>
       </div>
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index fda402eb..2bfe2a41 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -476,7 +476,7 @@ export class App extends LiteElement {
           >
             <sl-icon
               name="github"
-              class="inline-block align-middle text-base"
+              class="inline-block size-4 align-middle text-base"
             ></sl-icon>
             Source Code
           </a>
@@ -490,7 +490,7 @@ export class App extends LiteElement {
           >
             <sl-icon
               name="book-half"
-              class="inline-block align-middle text-base"
+              class="inline-block size-4 align-middle text-base"
             ></sl-icon>
             Documentation
           </a>
@@ -499,9 +499,10 @@ export class App extends LiteElement {
           ${this.version
             ? html`
                 <btrix-copy-button
-                  class="text-neutral-400"
+                  class="mr-2 size-4 text-neutral-400"
                   .getValue=${() => this.version}
                   content=${msg("Copy Version Code")}
+                  size="x-small"
                 ></btrix-copy-button>
                 <span
                   class="font-monostyle inline-block align-middle text-xs text-neutral-400"
diff --git a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
index 4df2f32e..a5ea3936 100644
--- a/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
+++ b/frontend/src/pages/org/archived-item-qa/archived-item-qa.ts
@@ -842,7 +842,8 @@ export class ArchivedItemQA extends TailwindElement {
                 placement="bottom-start"
               >
                 <btrix-button
-                  icon
+                  size="small"
+                  class="m-0.5"
                   @click=${() => {
                     if (
                       this.interactiveReplayFrame?.contentDocument
diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
index 2dbb4864..d0d27d90 100644
--- a/frontend/src/pages/org/collection-detail.ts
+++ b/frontend/src/pages/org/collection-detail.ts
@@ -330,6 +330,7 @@ export class CollectionDetail extends LiteElement {
               .getValue=${() => embedCode}
               content=${msg("Copy Embed Code")}
               hoist
+              raised
             ></btrix-copy-button>
           </div>
         </div>
@@ -346,6 +347,7 @@ export class CollectionDetail extends LiteElement {
               .getValue=${() => importCode}
               content=${msg("Copy JS")}
               hoist
+              raised
             ></btrix-copy-button>
           </div>
         </div>