Misc UI fixes (primarily buttons) (#1814)

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

@@ -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`,
+        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`,
-        this.size === "medium"
+        {
-          ? tw`min-h-8 min-w-8 rounded-sm`
+          "x-small": tw`min-h-4 min-w-4 text-sm`,
-          : tw`min-h-6 min-w-6 rounded-md`,
+          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
           ? [

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>

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>

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"

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

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>