Switch to light mode

apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx

@@ -5,7 +5,12 @@ export function Navbar(): ReactElement {
   return (
     <div className="daisy-navbar bg-base-100 ">
       <div className="daisy-navbar-start ml-2">
-        <a className="font-lato text-h6 font-extrabold uppercase tracking-widest text-primary">
+        <a className="inline-flex items-center gap-2 font-lato text-h6 font-extrabold uppercase tracking-widest">
+          <div className="inline-flex w-full">
+            <div className="h-4 w-2.5 -skew-x-12 bg-primary"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-secondary"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-accent"></div>
+          </div>
           Hyperdrive
         </a>
       </div>

apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx

@@ -10,7 +10,7 @@ export function Disclosure({
   description,
 }: DisclosureProps): ReactElement {
   return (
-    <div className="group daisy-collapse-plus daisy-collapse border border-neutral-content/30">
+    <div className="group daisy-collapse-plus daisy-collapse border">
       <input type="checkbox" />
       <div className="text-xl daisy-collapse-title font-medium opacity-70 group-hover:opacity-100">
         {title}

apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx

@@ -25,10 +25,7 @@ export function Modal({
       {children({ showModal })}
 
       <dialog id={modalId} className={`daisy-modal`} ref={modalRef}>
-        <form
-          method="dialog"
-          className={`daisy-modal-box bg-base-300 ${className}`}
-        >
+        <form method="dialog" className={`daisy-modal-box ${className}`}>
           {modalContent}
         </form>
         <form method="dialog" className={`daisy-modal-backdrop`}>

apps/hyperdrive-trading/src/ui/base/components/Stat.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { ReactElement, ReactNode } from "react";
 
 interface StatProps {
@@ -17,12 +18,17 @@ export function Stat({
     <div className={className}>
       <p
         data-tip={description}
-        // use before: to style the text inside the tooltip
-        className="daisy-tooltip mb-1 font-light text-neutral-content before:text-base-content"
+        // Future note: use before: to style the text inside the tooltip
+        className={classNames(
+          "daisy-label-text daisy-tooltip mb-1 underline-offset-4",
+          description
+            ? "cursor-help border-b border-dashed border-current"
+            : "",
+        )}
       >
         {label}
       </p>
-      <div className="whitespace-nowrap text-base-content">{value}</div>
+      <div className="whitespace-nowrap text-h6 font-bold">{value}</div>
     </div>
   );
 }

apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx

@@ -18,15 +18,14 @@ export function Well({
   onClick,
 }: PropsWithChildren<WellProps>): ReactElement {
   const isInteractive = !disabled && (interactive || onClick);
-  const className = classNames("rounded-lg p-4", {
-    "w-full": block,
-    "hover:cursor-pointer hover:glass hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out":
-      isInteractive,
-    "bg-base-300/50 ring-neutral-content/20 ring-1": !variant,
-    "bg-primary/5 ring-primary/20 ring-1": variant === "primary",
-    "bg-secondary/5 ring-secondary/20 ring-1": variant === "secondary",
-    "bg-accent/5 ring-accent/20 ring-1": variant === "accent",
-  });
+  const className = classNames(
+    "daisy-card p-4 daisy-card-bordered shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] bg-base-200",
+    {
+      "w-full": block,
+      "hover:cursor-pointer hover:-translate-y-1 transition duration-300 hover:shadow-xl ease-in-out":
+        isInteractive,
+    },
+  );
 
   if (onClick || interactive) {
     return (

apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx

@@ -206,8 +206,8 @@ function nextSortDirection(
 
 function DefaultEmptyTableElement() {
   return (
-    <div className="rounded-b-lg bg-base-300 p-10 text-center">
-      <p className=" text-lg text-base-content">Nothing to show.</p>
+    <div className="rounded-b-lg bg-base-200 p-10 text-center">
+      <p className="text-lg">Nothing to show.</p>
     </div>
   );
 }

apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx

@@ -55,10 +55,7 @@ export function TransactionTable({
           {tableInstance.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th
-                  className="text-lg font-thin text-neutral-content"
-                  key={header.id}
-                >
+                <th className="text-lg font-thin" key={header.id}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
@@ -73,7 +70,7 @@ export function TransactionTable({
         <tbody>
           {tableInstance.getRowModel().rows.map((row) => (
             <tr
-              className="h-16 grid-cols-4 items-center text-sm text-base-content even:bg-secondary/5 md:text-h6"
+              className="h-16 grid-cols-4 items-center text-sm even:bg-base-300/5 md:text-h6"
               key={row.id}
             >
               {row.getVisibleCells().map((cell) => {

apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx

@@ -77,7 +77,7 @@ export function CloseLongForm({
       {/* You receive Section */}
       {long && (
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">You receive</p>
+          <p className="font-light">You receive</p>
           <p className="tracking-wide">
             {baseAmountOut
               ? `${formatBalance({

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx

@@ -23,30 +23,27 @@ export function OpenLongModalButton({
       {({ showModal }) => (
         <Well interactive variant="secondary" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col gap-2 p-4">
-            <ClockIcon className="mb-2 h-16 text-secondary" />
+            <ClockIcon className="mb-2 h-16" />
             <p className="text-h5 ">Open a long</p>
             <p className="font-bold">
-              Earn{" "}
-              <span className="text-secondary">
-                {fixedAPR?.formatted || "-"}% APR
-              </span>{" "}
-              on {hyperdrive.baseToken.symbol}
+              Earn <span>{fixedAPR?.formatted || "-"}% APR</span> on{" "}
+              {hyperdrive.baseToken.symbol}
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2">
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Guaranteed fixed rate yield
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Minimal risk and maintenance
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Redeemable before term ends
               </ChecklistItem>
             </div>
             {/* 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-4 justify-between gap-0 border-secondary">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Open long</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx

@@ -24,16 +24,14 @@ export function OpenLongPreview({
         </div>
 
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">Matures on</p>
+          <p className="font-light">Matures on</p>
           <p className="tracking-wide">
             {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
           </p>
         </div>
 
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">
-            Claimable at maturity
-          </p>
+          <p className="font-light">Claimable at maturity</p>
           <p className="font-semibold tracking-wide">
             {formatBalance({
               balance: long.bondAmount,

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx

@@ -21,27 +21,26 @@ export function AddLiquidityModalButton({
       {({ showModal }) => (
         <Well interactive variant="primary" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
-            <SquaresPlusIcon className="mb-2 h-16 text-primary" />
+            <SquaresPlusIcon className="mb-2 h-16" />
             <p className="text-h5">Add Liquidity</p>
             <p className="font-bold">
-              Earn trading fees <span className="text-primary">and</span>{" "}
-              interest
+              Earn trading fees <span>and</span> interest
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2 ">
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 Deposit {hyperdrive.baseToken.symbol} to back trades
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 Idle capital accrues vault APY
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 No rollovers, easy-to-use
               </ChecklistItem>
             </div>
             {/* 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-4 justify-between gap-0 border-primary">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Add liquidity</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>

apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx

@@ -90,11 +90,11 @@ export function RemoveLiquidityForm({
 
       {/* You receive Section */}
       <div className="flex justify-between">
-        <p className="font-light text-neutral-content">You receive</p>
+        <p className="font-light">You receive</p>
         <p className="tracking-wide">{formattedBaseAmountOut}</p>
       </div>
       <div className="flex items-center justify-between">
-        <p className="font-light text-neutral-content">Withdrawal shares</p>
+        <p className="font-light">Withdrawal shares</p>
         <p className="tracking-wide">{formattedWithdrawalSharesOut}</p>
       </div>
 

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx

@@ -77,7 +77,7 @@ export function CloseShortForm({
         <div className="flex flex-col gap-y-1 tracking-wide">
           {short && (
             <div className="flex justify-between">
-              <p className="font-light text-neutral-content">You receive</p>
+              <p className="font-light">You receive</p>
               <p className="tracking-wide">
                 {baseAmountOut
                   ? `${formatBalance({

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx

@@ -25,28 +25,27 @@ export function OpenShortModalButton({
       {({ showModal }) => (
         <Well interactive variant="accent" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
-            <BoltIcon className="mb-2 h-16 text-accent" />
+            <BoltIcon className="mb-2 h-16" />
             <p className="text-h5">Open a short</p>
             <p className="font-bold">
-              Earn{" "}
-              <span className="text-accent">{vaultRate?.formatted}% APY</span>{" "}
-              on {hyperdrive.baseToken.symbol}
+              Earn <span>{vaultRate?.formatted}% APY</span> on{" "}
+              {hyperdrive.baseToken.symbol}
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2 ">
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Variable rate yield
               </ChecklistItem>
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Profit from rising fixed rates
               </ChecklistItem>
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Redeemable before term ends
               </ChecklistItem>
             </div>
             {/* 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-4 justify-between gap-0">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Open short</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>

apps/hyperdrive-trading/src/ui/main.tsx

@@ -1,4 +1,4 @@
-import { darkTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -19,11 +19,7 @@ root.render(
   <QueryClientProvider client={queryClient}>
     <Toaster position="bottom-left" reverseOrder={false} />
     <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider
-        chains={wagmiChains}
-        showRecentTransactions
-        theme={darkTheme()}
-      >
+      <RainbowKitProvider chains={wagmiChains} showRecentTransactions>
         <SkeletonTheme
           baseColor="hsl(var(--nc))"
           highlightColor="hsl(var(--bc))"

apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx

@@ -26,7 +26,7 @@ export function AllMarketsBreadcrumb(): ReactElement {
 
 function MarketsModalContent() {
   return (
-    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded bg-base-300 p-1 md:p-4">
+    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded p-1 md:p-4">
       <h3 className="mb-4 font-lato">Markets</h3>
 
       <MarketsTable />

apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx

@@ -77,7 +77,6 @@ export function MarketStats({
             value={tradingVolume.formatted || "0"}
           />
         }
-        description={"The total trading volume in the last 24 hours"}
       />
       <Stat
         label="Liquidity"
@@ -87,9 +86,6 @@ export function MarketStats({
             value={liquidity?.formatted || "0"}
           />
         }
-        description={
-          "The total liquidity in the pool available for market making"
-        }
       />
     </div>
   );

apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx

@@ -61,7 +61,7 @@ export function MarketsTable(): ReactElement {
       {/* Markets sortable table */}
       <div>
         <SortableGridTable
-          headingRowClassName="grid-cols-auto bg-base-300 text-neutral-content bg-opacity-100"
+          headingRowClassName="grid-cols-auto bg-base-300 bg-opacity-100"
           bodyRowClassName="grid-cols-auto bg-transparent text-base-content"
           cols={[
             {

apps/hyperdrive-trading/src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx

@@ -12,9 +12,7 @@ export function YieldSourceLabel({
   return (
     <span className={classNames("flex items-center gap-x-2")}>
       <img className="h-4" src={yieldSource?.iconUrl} />
-      <span className="font-normal text-neutral-content md:text-h6">
-        {yieldSource?.protocol}
-      </span>
+      <span className="font-normal md:text-h6">{yieldSource?.protocol}</span>
     </span>
   );
 }

apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx

@@ -5,12 +5,12 @@ export function FAQ(): ReactElement {
   return (
     <div className="flex flex-col gap-6 pb-12">
       <div className="flex w-full items-center justify-between border-base-100">
-        <span className="pb-2 text-h5 font-thin text-neutral-content">FAQ</span>
+        <span className="pb-2 text-h5 font-thin">FAQ</span>
       </div>
       <Disclosure
         title={<span className="text-h6">What is a long?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -24,7 +24,7 @@ export function FAQ(): ReactElement {
       <Disclosure
         title={<span className="text-h6">What is a short?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -38,7 +38,7 @@ export function FAQ(): ReactElement {
       <Disclosure
         title={<span className="text-h6">How does LPing work?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx

@@ -23,8 +23,8 @@ export function ClosedLongsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 "
+      headingRowClassName="grid-cols-5"
+      bodyRowClassName="grid-cols-4 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (

apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx

@@ -99,8 +99,8 @@ export function ClosedLpTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-start text-neutral-content"
-      bodyRowClassName="grid-cols-5 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
+      headingRowClassName="grid-cols-5 text-start"
+      bodyRowClassName="grid-cols-5 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (