Buttons default to normal case (#226)

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>
   );

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>

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>

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>

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
         },
       },
     ],