From b88f4574180e89fa18a459f783d8d898c56b8637 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Thu, 13 Jul 2023 15:06:56 -0700
Subject: [PATCH] Buttons default to normal case (#226)

---
 .../longs/CloseLongForm/CloseLongForm.tsx     | 21 +++++--------------
 .../OpenLongModalButton.tsx                   |  2 +-
 .../AddLiquidityModalButton.tsx               |  2 +-
 .../OpenShortModalButton.tsx                  |  2 +-
 apps/hyperdrive-trading/tailwind.config.js    |  2 ++
 5 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
index 09c0a82fa..407c5acf9 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
@@ -1,8 +1,7 @@
 import { Long } from "@hyperdrive/core";
-import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { MouseEvent, ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import { Button } from "src/ui/base/components/Button";
 import { Stat } from "src/ui/base/components/Stat";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
@@ -26,7 +25,6 @@ export function CloseLongForm({
   const { decimals: baseDecimals, symbol: baseSymbol } = hyperdrive.baseToken;
 
   const { address: account } = useAccount();
-  const { openConnectModal } = useConnectModal();
 
   const { amount, amountAsBigInt, setAmount } = useNumericInput({
     decimals: baseDecimals,
@@ -86,11 +84,9 @@ export function CloseLongForm({
       )}
 
       {account ? (
-        <Button
+        <button
+          className="daisy-btn-secondary daisy-btn w-full"
           disabled={!closeLong || isPendingWalletAction}
-          variant="Crimson"
-          size="lg"
-          block
           onClick={(e) => {
             closeLong?.();
 
@@ -101,16 +97,9 @@ export function CloseLongForm({
           }}
         >
           <h5>Close Long</h5>
-        </Button>
+        </button>
       ) : (
-        <Button
-          variant="Emerald"
-          size="lg"
-          block
-          onClick={() => openConnectModal?.()}
-        >
-          <h5>Connect wallet</h5>
-        </Button>
+        <ConnectButton />
       )}
     </div>
   );
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
index 0dac80d36..226c4d738 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
@@ -30,7 +30,7 @@ export function OpenLongModalButton({
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-secondary daisy-btn-sm daisy-btn mt-2 justify-between gap-0 border-secondary normal-case">
+            <div className="daisy-btn-secondary daisy-btn-sm daisy-btn mt-2 justify-between gap-0 border-secondary">
               <span className="ml-4 flex-1 text-center">Long</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
index 4c567e41d..bf8d98291 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
@@ -30,7 +30,7 @@ export function AddLiquidityModalButton({
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-primary daisy-btn-sm daisy-btn mt-2 justify-between gap-0 border-primary normal-case">
+            <div className="daisy-btn-primary daisy-btn-sm daisy-btn mt-2 justify-between gap-0 border-primary">
               <span className="ml-4 flex-1 text-center">Add LP</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
index 8c1101d95..38e356b61 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
@@ -29,7 +29,7 @@ export function OpenShortModalButton({
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-accent daisy-btn-sm daisy-btn mt-2 justify-between gap-0 normal-case">
+            <div className="daisy-btn-accent daisy-btn-sm daisy-btn mt-2 justify-between gap-0">
               <span className="ml-4 flex-1 text-center">Short</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
diff --git a/apps/hyperdrive-trading/tailwind.config.js b/apps/hyperdrive-trading/tailwind.config.js
index 6013129ad..abe6aa171 100644
--- a/apps/hyperdrive-trading/tailwind.config.js
+++ b/apps/hyperdrive-trading/tailwind.config.js
@@ -74,6 +74,8 @@ module.exports = {
 
           neutral: "#425079",
           "neutral-content": "#9aa1cb",
+
+          "--btn-text-case": "none", // set default text transform for buttons
         },
       },
     ],