From fdd50b124ef317bd9562361c0eff06bccdac42c8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Wed, 21 Feb 2024 10:25:45 -0500
Subject: [PATCH] Shared button component (WIP)

---
 .../replay-next/components/Button.module.css  |  50 ++++++
 packages/replay-next/components/Button.tsx    |  24 +++
 packages/replay-next/pages/variables.css      |   6 +-
 .../debugger/src/components/WelcomeBox.tsx    | 156 +++++++++++-------
 4 files changed, 176 insertions(+), 60 deletions(-)
 create mode 100644 packages/replay-next/components/Button.module.css
 create mode 100644 packages/replay-next/components/Button.tsx

diff --git a/packages/replay-next/components/Button.module.css b/packages/replay-next/components/Button.module.css
new file mode 100644
index 00000000000..74d6e8ec35c
--- /dev/null
+++ b/packages/replay-next/components/Button.module.css
@@ -0,0 +1,50 @@
+.Button {
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-regular);
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+}
+.Button:disabled {
+  --accent-color: var(--background-color-disabled-button);
+  --accent-color-hover: var(--background-color-disabled-button);
+  --contrast-color: var(--color-disabled-button);
+
+  color: var(--color-dimmer);
+}
+
+.Button[data-color="primary"]:not(:disabled) {
+  --accent-color: var(--primary-accent);
+  --accent-color-hover: var(--primary-accent-hover);
+  --contrast-color: var(--color-primary-button);
+}
+.Button[data-color="secondary"]:not(:disabled) {
+  --accent-color: var(--secondary-accent);
+  --accent-color-hover: var(--secondary-accent-hover);
+  --contrast-color: var(--color-secondary-button);
+}
+
+.Button[data-variant="outline"] {
+  border: 1px solid var(--accent-color);
+}
+.Button[data-variant="outline"]:hover {
+  border-color: var(--accent-color-hover);
+}
+.Button[data-variant="solid"] {
+  background-color: var(--accent-color);
+  color: var(--contrast-color);
+}
+.Button[data-variant="solid"]:hover {
+  background-color: var(--accent-color-hover);
+}
+
+.Button[data-size="large"] {
+  font-size: var(--font-size-large);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+}
+.Button[data-size="small"] {
+  font-size: var(--font-size-small);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
diff --git a/packages/replay-next/components/Button.tsx b/packages/replay-next/components/Button.tsx
new file mode 100644
index 00000000000..25b517d6bd5
--- /dev/null
+++ b/packages/replay-next/components/Button.tsx
@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes } from "react";
+
+import styles from "./Button.module.css";
+
+export function Button({
+  color,
+  size = "normal",
+  variant = "solid",
+  ...rest
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  color?: "primary" | "secondary";
+  size?: "normal" | "large" | "small";
+  variant?: "outline" | "solid";
+}) {
+  return (
+    <button
+      className={styles.Button}
+      data-color={color}
+      data-size={size}
+      data-variant={variant}
+      {...rest}
+    />
+  );
+}
diff --git a/packages/replay-next/pages/variables.css b/packages/replay-next/pages/variables.css
index a69197a1a33..40aa959bd76 100644
--- a/packages/replay-next/pages/variables.css
+++ b/packages/replay-next/pages/variables.css
@@ -233,7 +233,7 @@
   --color-link: var(--primary-accent);
   --color-primary-button: #ffffff;
   --color-secondary-button: #ffffff;
-  --color-disabled-button: #ffffff;
+  --color-disabled-button: var(--color-default);
   --color-high-contrast-button: #ffffff;
   --color-warning: #fce2a1;
   --color-search-results: #d7d7db;
@@ -745,7 +745,7 @@
   --background-color-contrast-5: #e1e6ed;
 
   --background-color-default: #e9e9e9;
-  --background-color-disabled-button: #666666;
+  --background-color-disabled-button: #e6e7eb;
   --background-color-error: #fcefee;
   --background-color-highlight-change: mark;
   --background-color-high-contrast-button: #f2f2f2;
@@ -777,7 +777,7 @@
   --color-default: #223344;
   --color-dim: rgba(135, 135, 137, 0.9);
   --color-dimmer: #aaaaaa;
-  --color-disabled-button: var(--theme-base-100);
+  --color-disabled-button: var(--color-default);
   --color-error: #ff0000;
   --color-highlight-change: marktext;
   --color-high-contrast-button: #000000;
diff --git a/src/devtools/client/debugger/src/components/WelcomeBox.tsx b/src/devtools/client/debugger/src/components/WelcomeBox.tsx
index ab614efd985..c090e3f2f80 100644
--- a/src/devtools/client/debugger/src/components/WelcomeBox.tsx
+++ b/src/devtools/client/debugger/src/components/WelcomeBox.tsx
@@ -2,68 +2,110 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-import React from "react";
+import { Button } from "replay-next/components/Button";
+import {
+  DisabledButton,
+  DisabledLgButton,
+  DisabledSmButton,
+  PrimaryButton,
+  PrimaryLgButton,
+  PrimarySmButton,
+  SecondaryButton,
+  SecondaryLgButton,
+  SecondarySmButton,
+} from "ui/components/shared/Button";
 
-import { setSelectedPrimaryPanel, toggleCommandPalette } from "ui/actions/layout";
-import { useAppDispatch } from "ui/setup/hooks";
+export default function WelcomeBox() {
+  return (
+    <div className="flex h-full w-full flex-col items-center overflow-hidden p-1">
+      OLD
+      <div className="flex flex-row gap-1">
+        <div className="flex flex-col items-start gap-1">
+          <PrimaryLgButton color="blue">PrimaryLgButton (blue)</PrimaryLgButton>
+          <PrimaryLgButton color="pink">PrimaryLgButton (pink)</PrimaryLgButton>
+          <SecondaryLgButton color="blue">SecondaryLgButton (blue)</SecondaryLgButton>
+          <DisabledLgButton>DisabledLgButton</DisabledLgButton>
+        </div>
 
-import { toggleQuickOpen } from "../actions/quick-open";
+        <div className="flex flex-col items-start gap-1">
+          <PrimaryButton color="blue">PrimaryButton (blue)</PrimaryButton>
+          <PrimaryButton color="pink">PrimaryButton (blue)</PrimaryButton>
+          <SecondaryButton color="blue">SecondaryButton (blue)</SecondaryButton>
+          <SecondaryButton color="pink">SecondaryButton (pink)</SecondaryButton>
+          <DisabledButton>DisabledButton</DisabledButton>
+        </div>
 
-export default function WelcomeBox() {
-  const dispatch = useAppDispatch();
-  const openCommandPalette = () => {
-    dispatch(toggleCommandPalette());
-  };
-  const openQuickOpen = () => {
-    dispatch(toggleQuickOpen());
-  };
-  const openFullTextSearch = () => {
-    dispatch(setSelectedPrimaryPanel("search"));
-  };
+        <div className="flex flex-col items-start gap-1">
+          <PrimarySmButton color="blue">PrimarySmButton (blue)</PrimarySmButton>
+          <PrimarySmButton color="pink">PrimarySmButton (pink)</PrimarySmButton>
+          <SecondarySmButton color="blue">SecondarySmButton (blue)</SecondarySmButton>
+          <DisabledSmButton>DisabledSmButton</DisabledSmButton>
+        </div>
+      </div>
+      <div className="flex h-full w-full flex-col items-center overflow-hidden p-1">
+        NEW
+        <div className="flex flex-row gap-1">
+          <div className="flex flex-col items-start gap-1">
+            <Button color="primary" size="large" variant="solid">
+              primary + solid
+            </Button>
+            <Button color="secondary" size="large" variant="solid">
+              secondary + solid
+            </Button>
+            <Button color="primary" disabled size="large" variant="solid">
+              primary + solid (disabled)
+            </Button>
+            <Button color="primary" size="large" variant="outline">
+              primary + outline
+            </Button>
+            <Button color="secondary" size="large" variant="outline">
+              secondary + outline
+            </Button>
+            <Button color="primary" disabled size="large" variant="outline">
+              primary + outline (disabled)
+            </Button>
+          </div>
 
-  return (
-    <div className="flex h-full w-full flex-col items-center overflow-hidden">
-      <div className="relative flex h-full w-full justify-center px-8 pt-24">
-        <div className="relative flex h-full w-full flex-col items-center text-sm">
-          <div className="flex w-full flex-col space-y-1 text-menuColor">
-            <div
-              className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
-              onClick={openCommandPalette}
-            >
-              <div className="w-full truncate pt-1 text-right">Command palette</div>
-              <div className="flex w-full flex-row">
-                <img src="/images/command.svg" /> <img src="/images/k.svg" />
-              </div>
-            </div>
-            <div
-              className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
-              onClick={openQuickOpen}
-            >
-              <div className="w-full pt-1 text-right">Go to file</div>
-              <div className="flex w-full flex-row">
-                <img src="/images/command.svg" /> <img src="/images/p.svg" />
-              </div>
-            </div>
-            <div
-              className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
-              onClick={openFullTextSearch}
-            >
-              <div className="w-full pt-1 text-right">Find in file</div>
-              <div className="flex w-full flex-row">
-                <img src="/images/command.svg" /> <img src="/images/shift.svg" />{" "}
-                <img src="/images/f.svg" />
-              </div>
-            </div>
+          <div className="flex flex-col items-start gap-1">
+            <Button color="primary" size="normal" variant="solid">
+              primary + solid
+            </Button>
+            <Button color="secondary" size="normal" variant="solid">
+              secondary + solid
+            </Button>
+            <Button color="primary" disabled size="normal" variant="solid">
+              primary + solid (disabled)
+            </Button>
+            <Button color="primary" size="normal" variant="outline">
+              primary + outline
+            </Button>
+            <Button color="secondary" size="normal" variant="outline">
+              secondary + outline
+            </Button>
+            <Button color="primary" disabled size="normal" variant="outline">
+              primary + outline (disabled)
+            </Button>
           </div>
-          <div className="absolute bottom-16 flex w-full flex-row">
-            <div className="left-0 w-full">
-              <a href="https://docs.replay.io" className="hover:underline">
-                Docs
-              </a>
-            </div>
-            <div className="text-right hover:underline">
-              <a href="https://replay.io/discord">Discord</a>
-            </div>
+
+          <div className="flex flex-col items-start gap-1">
+            <Button color="primary" size="small" variant="solid">
+              primary + solid
+            </Button>
+            <Button color="secondary" size="small" variant="solid">
+              secondary + solid
+            </Button>
+            <Button color="primary" disabled size="small" variant="solid">
+              primary + solid (disabled)
+            </Button>
+            <Button color="primary" size="small" variant="outline">
+              primary + outline
+            </Button>
+            <Button color="secondary" size="small" variant="outline">
+              secondary + outline
+            </Button>
+            <Button color="primary" disabled size="small" variant="outline">
+              primary + outline (disabled)
+            </Button>
           </div>
         </div>
       </div>