feat: revamp buttons

package.json

@@ -15,6 +15,7 @@
     "@storybook/theming": "^5.3.19",
     "@svgr/webpack": "^5.4.0",
     "axios": "^0.24.0",
+    "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1",
     "crypto-browserify": "^3.12.0",
     "emotion-theming": "^10.0.27",

src/assets/styles/global.css

@@ -161,6 +161,36 @@
   }
 }
 
+@layer components {
+  .btn-primary-large {
+    @apply flex items-center bg-violet-60 text-grey-0 inter-base-semibold rounded-base px-large py-small hover:bg-violet-50 active:bg-violet-70 focus:outline-none focus:shadow-cta disabled:bg-grey-20 disabled:text-grey-40;
+  }
+  .btn-primary-medium {
+    @apply flex items-center bg-violet-60 text-grey-0 inter-base-semibold rounded-base px-base py-xsmall hover:bg-violet-50 active:bg-violet-70 focus:outline-none focus:shadow-cta disabled:bg-grey-20 disabled:text-grey-40;
+  }
+  .btn-primary-small {
+    @apply flex items-center bg-violet-60 text-grey-0 inter-small-semibold rounded-base px-small py-[6px] hover:bg-violet-50 active:bg-violet-70 focus:outline-none focus:shadow-cta disabled:bg-grey-20 disabled:text-grey-40;
+  }
+  .btn-secondary-large {
+    @apply flex items-center bg-grey-0 text-grey-90 inter-base-semibold rounded-base px-large py-small border border-grey-20 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-grey-0 disabled:text-grey-30;
+  }
+  .btn-secondary-medium {
+    @apply flex items-center bg-grey-0 text-grey-90 inter-base-semibold rounded-base px-base py-xsmall border border-grey-20 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-grey-0 disabled:text-grey-30;
+  }
+  .btn-secondary-small {
+    @apply flex items-center bg-grey-0 text-grey-90 inter-small-semibold rounded-base px-small py-[6px] border border-grey-20 hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-grey-0 disabled:text-grey-30;
+  }
+  .btn-ghost-large {
+    @apply flex items-center bg-transparent text-grey-90 inter-base-semibold rounded-base px-large py-small hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-transparent disabled:text-grey-30;
+  }
+  .btn-ghost-medium {
+    @apply flex items-center bg-transparent text-grey-90 inter-base-semibold rounded-base px-base py-xsmall hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-transparent disabled:text-grey-30;
+  }
+  .btn-ghost-small {
+    @apply flex items-center bg-transparent text-grey-90 inter-small-semibold rounded-base px-small py-[6px] hover:bg-grey-5 active:bg-grey-5 active:text-violet-60 focus:outline-none focus:shadow-cta focus:border-violet-60 disabled:bg-transparent disabled:text-grey-30;
+  }
+}
+
 @tailwind utilities;
 
 @layer utilities {

src/components/atoms/spinner.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx"
+import React from "react"
+
+type SpinnerProps = {
+  size: "large" | "medium" | "small"
+  variant: "primary" | "secondary"
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = "large",
+  variant = "primary",
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center",
+        { "h-[24px] w-[24px]": size === "large" },
+        { "h-[20px] w-[20px]": size === "medium" },
+        { "h-[16px] w-[16px]": size === "small" }
+      )}
+    >
+      <div className="inline-block relative w-full h-full">
+        <div
+          className={clsx(
+            "animate-ring border-2 h-4/5 w-4/5 rounded-circle border-transparent",
+            { "border-t-grey-0": variant === "primary" },
+            { "border-t-violet-60": variant === "secondary" }
+          )}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Spinner

src/components/fundamentals/button/index.tsx

@@ -0,0 +1,54 @@
+import clsx from "clsx"
+import React, { Children } from "react"
+import Spinner from "../../atoms/spinner"
+
+type ButtonProps = {
+  variant: "primary" | "secondary" | "ghost"
+  size: "small" | "medium" | "large"
+  loading?: boolean
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "large",
+      loading = false,
+      children,
+      ...attributes
+    },
+    ref
+  ) => {
+    const handleClick = e => {
+      if (!loading && attributes.onClick) {
+        attributes.onClick(e)
+      }
+    }
+
+    const buttonClass = "btn-" + variant + "-" + size
+
+    return (
+      <button
+        {...attributes}
+        className={clsx(buttonClass, attributes.className)}
+        disabled={attributes.disabled || loading}
+        ref={ref}
+        onClick={handleClick}
+      >
+        {loading ? (
+          <Spinner size={size} variant={"secondary"} />
+        ) : (
+          Children.map(children, (child, i) => {
+            return (
+              <span key={i} className="mr-xsmall last:mr-0">
+                {child}
+              </span>
+            )
+          })
+        )}
+      </button>
+    )
+  }
+)
+
+export default Button

tailwind.config.js

@@ -226,6 +226,18 @@ module.exports = {
         medium: "1025px",
         large: "1464px",
       },
+      boxShadow: {
+        cta: "0px 0px 0px 4px rgba(124, 58, 237, 0.1)",
+      },
+      keyframes: {
+        ring: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+      },
+      animation: {
+        ring: "ring 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
+      },
     },
   },
   plugins: [],