From cb3227fc975c12ffa7fcae7aaa32d7f333db6336 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 7 Mar 2024 21:46:26 +0000
Subject: [PATCH] Migrate button

---
 app/app/globals.css           | 11 ++++++
 app/src/components/Button.tsx | 69 ++++++++++++++++++-----------------
 docs/index.mdx                |  4 +-
 3 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/app/app/globals.css b/app/app/globals.css
index a6c11ae9b..75c9f23dd 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -329,6 +329,17 @@ tbody tr:last-child td {
     @apply rounded-lg py-2.5 px-5;
 }
 
+.btn-subtle {
+    @apply bg-ens-light-background-primary dark:bg-ens-dark-background-primary;
+    @apply text-ens-light-text-secondary dark:text-ens-dark-text-secondary;
+    @apply hover:bg-ens-light-background-secondary dark:hover:bg-ens-dark-background-secondary hover:text-ens-light-text-secondary hover:dark:text-ens-dark-text-secondary;
+    @apply active:bg-ens-light-blue-bright dark:active:bg-ens-dark-blue-bright; /* */
+    @apply focus:ring focus:ring-offset-2 focus:ring-ens-light-border dark:focus:ring-ens-dark-border focus:outline-none; /* */
+    @apply border border-ens-light-border dark:border-ens-dark-border;
+    @apply rounded-lg py-2.5 px-5;
+    @apply font-bold;
+}
+
 .input {
     @apply block w-full border border-ens-light-border dark:border-ens-dark-border;
     @apply outline-none;
diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
index dc21ff857..f18de034d 100644
--- a/app/src/components/Button.tsx
+++ b/app/src/components/Button.tsx
@@ -21,6 +21,7 @@ const ArrowIcon: FC = (properties) => {
 const variantStyles = {
     primary: 'btn-blue-primary',
     disabled: 'btn-disabled',
+    subtle: 'btn-subtle',
     red: 'btn-red-primary',
     secondary: 'btn-blue-surface',
     green: 'rounded-lg py-1 px-3 bg-green-400/10 text-green-600 ring-1 ring-inset ring-green-400/20 hover:bg-green-400/10 hover:text-green-300 hover:ring-green-300',
@@ -62,34 +63,6 @@ export const Button: FC<
 
     className = clsx('btn', variantStyles[newVariant], className);
 
-    const arrowIcon = (
-        <ArrowIcon
-            // @ts-ignore
-            className={cx(
-                'mt-0.5 h-5 w-5',
-                variant === 'text' && 'relative top-px',
-                arrow === 'left' && '-ml-1 rotate-180',
-                arrow === 'right' && '-mr-1'
-            )}
-        />
-    );
-
-    return (
-        // @ts-ignore
-        <thorin-button
-            href={properties['href']}
-            onClick={properties['onClick']}
-            target={properties['target']}
-            width={properties['width']}
-            variant={newVariant}
-        >
-            {arrow === 'left' && arrowIcon}
-            {children}
-            {arrow === 'right' && arrowIcon}
-            {/* @ts-ignore */}
-        </thorin-button>
-    );
-
     // const arrowIcon = (
     //     <ArrowIcon
     //         // @ts-ignore
@@ -103,17 +76,45 @@ export const Button: FC<
     // );
 
     // return (
-    //     <Component
+    //     // @ts-ignore
+    //     <thorin-button
     //         href={properties['href']}
-    //         target={properties['target']}
     //         onClick={properties['onClick']}
-    //         className={className}
-    //         disabled={disabled}
-    //         {...properties}
+    //         target={properties['target']}
+    //         width={properties['width']}
+    //         variant={newVariant}
     //     >
     //         {arrow === 'left' && arrowIcon}
     //         {children}
     //         {arrow === 'right' && arrowIcon}
-    //     </Component>
+    //         {/* @ts-ignore */}
+    //     </thorin-button>
     // );
+
+    const arrowIcon = (
+        <ArrowIcon
+            // @ts-ignore
+            className={cx(
+                'mt-0.5 h-5 w-5',
+                variant === 'text' && 'relative top-px',
+                arrow === 'left' && '-ml-1 rotate-180',
+                arrow === 'right' && '-mr-1'
+            )}
+        />
+    );
+
+    return (
+        <Component
+            href={properties['href']}
+            target={properties['target']}
+            onClick={properties['onClick']}
+            className={className}
+            disabled={disabled}
+            {...properties}
+        >
+            {arrow === 'left' && arrowIcon}
+            {children}
+            {arrow === 'right' && arrowIcon}
+        </Component>
+    );
 };
diff --git a/docs/index.mdx b/docs/index.mdx
index fc10c3ff8..2979250fd 100644
--- a/docs/index.mdx
+++ b/docs/index.mdx
@@ -17,8 +17,8 @@ export const meta = {
         <p>Learn about building applications with decentralized identity.</p>
 
         <div className="flex gap-3 flex-col sm:flex-row">
-            <thorin-button href="/learn/protocol">Open Docs</thorin-button>
-            <thorin-button variant="subtle" href="/web/quickstart">Integrate into your app!</thorin-button>
+            <Button href="/learn/protocol">Open Docs</Button>
+            <Button variant="subtle" href="/web/quickstart">Integrate into your app!</Button>
         </div>
     </div>