Jack-mobile-responsiveness (#220)

delvtech · Jul 12, 2023 · 78001fc · 78001fc · vercel · Jul 12, 2023
1 parent 62ae241
commit 78001fc
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 27 deletions.
diff --git a/apps/hyperdrive-trading/src/pages/Trade.tsx b/apps/hyperdrive-trading/src/pages/Trade.tsx
@@ -8,7 +8,7 @@ export function Trade(): ReactElement {
   const market = useLoaderData() as Hyperdrive;
 
   return (
-    <div className="flex h-full justify-center bg-base-100 py-8">
+    <div className="flex h-full justify-center bg-base-100 py-8 px-4">
       <TradeBody hyperdrive={market} />
     </div>
   );

diff --git a/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx b/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx
@@ -15,7 +15,7 @@ export function GridTableHeader({
   return (
     <div
       className={classNames(
-        "grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 font-light [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:p-4",
+        "grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 text-sm font-light md:text-lg [&>*]:overflow-hidden [&>*]:text-ellipsis [&>*]:p-4",
         className,
       )}
     >

diff --git a/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx b/.../hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton.tsx
@@ -52,13 +52,13 @@ export function CloseLongModalButton({
       {({ showModal }) => (
         <span className="daisy-dropdown">
           <label tabIndex={0} className="btn cursor-pointer  ">
-            <EllipsisHorizontalIcon width={25} height={25} />
+            <EllipsisHorizontalIcon className="w-4 md:w-6 " />
           </label>
           <ul
             tabIndex={0}
             className="menu daisy-dropdown-content absolute right-0 top-4   rounded-md bg-base-300 p-3 shadow"
           >
-            <li className="my-1 flex w-32 cursor-pointer justify-center">
+            <li className="my-1 flex w-24 cursor-pointer justify-center text-sm md:w-32 md:text-h6">
               <button onClick={showModal}>Close Position</button>
             </li>
           </ul>

diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx
@@ -17,7 +17,7 @@ export function MarketStats({
   const { longPrice } = useCurrentLongPrice(hyperdrive);
 
   return (
-    <div className="flex w-full flex-wrap items-center justify-start gap-16">
+    <div className="flex w-full flex-wrap items-center justify-center gap-16 md:justify-start">
       <Stat
         label="Token"
         value={

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
@@ -21,7 +21,7 @@ export function ClosedLongsTable({
   return (
     <SortableGridTable
       headingRowClassName="grid-cols-5 text-neutral-content"
-      bodyRowClassName="grid-cols-5 text-base-content items-center text-h6 even:bg-secondary/5 h-16"
+      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 "
       cols={["Position", "Balance", "Value", "Matures on", "Closed on"]}
       rows={closedLongRows}
     />

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
@@ -21,8 +21,8 @@ export function OpenLongsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-4 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-secondary/5 h-16"
+      headingRowClassName="grid-cols-4 text-start text-neutral-content"
+      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
       // Blank col added for actions
       cols={["Position", "Balance", "Value", "Matures on", ""]}
       rows={openLongRows}

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -22,7 +22,7 @@ export function OpenShortsTable({
   return (
     <SortableGridTable
       headingRowClassName="grid-cols-4 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-accent/5 h-16"
+      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
       // Blank col added for actions
       cols={["Position", "Balance", "Value", "Matures on", ""]}
       rows={openShortRows}

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx
@@ -14,25 +14,34 @@ export function PositionTabs({
     <div className="daisy-tabs">
       <button
         onClick={() => setActivePositionTab("Longs")}
-        className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
-          "daisy-tab-active glass": activePositionTab === "Longs",
-        })}
+        className={classNames(
+          "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
+          {
+            "daisy-tab-active glass": activePositionTab === "Longs",
+          },
+        )}
       >
         Longs
       </button>
       <button
         onClick={() => setActivePositionTab("Shorts")}
-        className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
-          "daisy-tab-active glass": activePositionTab === "Shorts",
-        })}
+        className={classNames(
+          "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
+          {
+            "daisy-tab-active glass": activePositionTab === "Shorts",
+          },
+        )}
       >
         Shorts
       </button>
       <button
         onClick={() => setActivePositionTab("LP")}
-        className={classNames("daisy-tab-lifted daisy-tab daisy-tab-lg", {
-          "daisy-tab-active glass": activePositionTab === "LP",
-        })}
+        className={classNames(
+          "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
+          {
+            "daisy-tab-active glass": activePositionTab === "LP",
+          },
+        )}
       >
         LP
       </button>

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx
@@ -52,19 +52,16 @@ export function PositionsSection({
 
   return (
     <div>
-      <div className="mb-4 flex w-full items-center justify-between border-b border-neutral-content/30">
-        <h2 className="text-h5 font-thin leading-h5 text-neutral-content">
-          Your positions
-        </h2>
+      <div className="mb-4 flex w-full items-end justify-between border-b border-neutral-content/30">
         <PositionTabs
           setActivePositionTab={handleChangeTab}
           activePositionTab={activePositionTab}
         />
 
-        <div className="daisy-tabs-boxed">
+        <div className="daisy-tabs-boxed mb-1">
           <button
             onClick={() => handleChangeOpenOrClosedTab("Open")}
-            className={classNames("daisy-tab", {
+            className={classNames("daisy-tab text-sm", {
               "daisy-tab-active !bg-base-300 !text-white":
                 activeOpenOrClosedTab === "Open",
             })}
@@ -73,7 +70,7 @@ export function PositionsSection({
           </button>
           <button
             onClick={() => handleChangeOpenOrClosedTab("Closed")}
-            className={classNames("daisy-tab", {
+            className={classNames("daisy-tab text-sm", {
               "daisy-tab-active !bg-base-300 !text-white":
                 activeOpenOrClosedTab === "Closed",
             })}

diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
@@ -23,13 +23,15 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
     <div className="flex max-w-5xl flex-col gap-16 ">
       {/* Name w/ market select */}
       <div className="flex w-full flex-col gap-6">
-        <div className="flex flex-wrap items-start justify-between">
+        <div className="flex flex-wrap items-start justify-center md:justify-between">
           <div className="flex shrink-0 flex-col">
             <div className="flex flex-1 justify-between">
               <YieldSourceLabel yieldSource={yieldSource} />
               <MarketSelect markets={[hyperdrive]} />
             </div>
-            <p className="text-h3 font-semibold">{hyperdrive.name}</p>
+            <p className="my-2 text-h3 font-semibold md:my-0">
+              {hyperdrive.name}
+            </p>
           </div>
           <YourBalanceWell token={hyperdrive.baseToken} />
         </div>