From 3638b72090426bfc0b112f08ba9c53896e704b03 Mon Sep 17 00:00:00 2001
From: panosdb <ppsimatikas@gmail.com>
Date: Sun, 6 Oct 2024 15:33:40 +0300
Subject: [PATCH] Make the treasury responsive

---
 components/Modal.tsx                                       | 2 +-
 components/TreasuryAccount/AccountOverview.tsx             | 4 ++--
 components/treasuryV2/Details/MintDetails/Header.tsx       | 5 +++--
 components/treasuryV2/Details/TokenDetails/Header.tsx      | 5 +++--
 .../Details/WalletDetails/AddAssetModal/index.tsx          | 5 +++--
 components/treasuryV2/Details/WalletDetails/Header.tsx     | 7 ++++++-
 pages/dao/[symbol]/treasury/v2/index.tsx                   | 5 +++--
 7 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index f91d89739..a1e56f64e 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -53,7 +53,7 @@ const Modal = ({
 
           {isOpen ? (
             <div
-              className={`inline-block bg-bkg-2 ${background}
+              className={`inline-block bg-bkg-2 ${background} m-auto
               rounded-lg text-left px-8 pt-6 pb-8 shadow-lg transform transition-all
               sm:my-8 align-middle ${sizeClassName} w-full`}
             >
diff --git a/components/TreasuryAccount/AccountOverview.tsx b/components/TreasuryAccount/AccountOverview.tsx
index 150765727..a57e6d3b8 100644
--- a/components/TreasuryAccount/AccountOverview.tsx
+++ b/components/TreasuryAccount/AccountOverview.tsx
@@ -27,7 +27,7 @@ export const StrategyCard = ({
     currentDeposits.toFixed(2)
   ).toFormat()
   return (
-    <div className="flex items-center justify-between p-4 mt-2 border rounded-md border-fgd-4">
+    <div className="flex flex-col sm:flex-row items-center justify-between p-4 mt-2 border rounded-md border-fgd-4">
       <div className="flex items-center">
         {strat.protocolLogoSrc ? (
           <img
@@ -55,7 +55,7 @@ export const StrategyCard = ({
           )}
         </div>
       </div>
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-4 mt-5 sm:mt-0">
         <div className="text-right">
           {apy && <p className="text-xs">{apyHeader ?? 'Interest Rate'}</p>}
           <p className="font-bold text-green">{apy}</p>
diff --git a/components/treasuryV2/Details/MintDetails/Header.tsx b/components/treasuryV2/Details/MintDetails/Header.tsx
index c28f1aefb..342d2fdf8 100644
--- a/components/treasuryV2/Details/MintDetails/Header.tsx
+++ b/components/treasuryV2/Details/MintDetails/Header.tsx
@@ -120,7 +120,8 @@ export default function Header(props: Props) {
         props.className,
         'bg-bkg-1',
         'gap-x-4',
-        'grid-cols-[1fr_max-content]',
+        'grid-cols-1',
+        'sm:grid-cols-[1fr_max-content]',
         'grid',
         'min-h-[128px]',
         'px-8',
@@ -176,7 +177,7 @@ export default function Header(props: Props) {
           </div>
         )}
       </div>
-      <div className="flex flex-col space-y-2 max-h-[128px] justify-center">
+      <div className="flex flex-col space-y-2 max-h-[128px] justify-center my-auto mx-auto mt-5">
         <SecondaryButton
           small={membership}
           className="w-48"
diff --git a/components/treasuryV2/Details/TokenDetails/Header.tsx b/components/treasuryV2/Details/TokenDetails/Header.tsx
index fa52a5868..23e2c72b1 100644
--- a/components/treasuryV2/Details/TokenDetails/Header.tsx
+++ b/components/treasuryV2/Details/TokenDetails/Header.tsx
@@ -65,7 +65,8 @@ export default function Header(props: Props) {
         'py-4',
         'gap-x-4',
         'grid',
-        'grid-cols-[1fr_max-content]',
+        'grid-cols-1',
+        'sm:grid-cols-[1fr_max-content]',
         'items-center'
       )}
     >
@@ -127,7 +128,7 @@ export default function Header(props: Props) {
         </div>
         <Address address={props.asset.address} className="ml-14 text-xs" />
       </div>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col space-y-2 my-auto mx-auto sm:mt-0 mt-5">
         {props.asset.raw.extensions.transferAddress ? (
           <SecondaryButton
             className="w-48"
diff --git a/components/treasuryV2/Details/WalletDetails/AddAssetModal/index.tsx b/components/treasuryV2/Details/WalletDetails/AddAssetModal/index.tsx
index c5fa04ff0..7a0ef1330 100644
--- a/components/treasuryV2/Details/WalletDetails/AddAssetModal/index.tsx
+++ b/components/treasuryV2/Details/WalletDetails/AddAssetModal/index.tsx
@@ -73,7 +73,8 @@ export default function AddAssetModal(props: Props) {
           'gap-x-8',
           'grid',
           'justify-center',
-          isWallet(props.wallet) && 'grid-cols-[repeat(3,max-content)]'
+          'grid-cols-1',
+          isWallet(props.wallet) && 'sm:grid-cols-[repeat(3,max-content)]'
         )}
       >
         <div className="flex flex-col items-center space-y-2">
@@ -102,7 +103,7 @@ export default function AddAssetModal(props: Props) {
         </div>
         {isWallet(props.wallet) && (
           <div className="flex items-center justify-center">
-            <div className="text-lg text-fgd-1">OR</div>
+            <div className="text-lg text-fgd-1 m-5 sm:m-0">OR</div>
           </div>
         )}
         {isWallet(props.wallet) && (
diff --git a/components/treasuryV2/Details/WalletDetails/Header.tsx b/components/treasuryV2/Details/WalletDetails/Header.tsx
index e70330de6..1573858c1 100644
--- a/components/treasuryV2/Details/WalletDetails/Header.tsx
+++ b/components/treasuryV2/Details/WalletDetails/Header.tsx
@@ -53,7 +53,12 @@ export default function Header(props: Props) {
         'py-4',
         'flex',
         'items-center',
-        'justify-between'
+        'justify-between',
+        'flex-col',
+        'space-y-4',
+        'sm:flex-row',
+        'sm:space-y-0',
+        'sm:space-x-4'
       )}
     >
       <div>
diff --git a/pages/dao/[symbol]/treasury/v2/index.tsx b/pages/dao/[symbol]/treasury/v2/index.tsx
index f5346ec6a..6be5c4a21 100644
--- a/pages/dao/[symbol]/treasury/v2/index.tsx
+++ b/pages/dao/[symbol]/treasury/v2/index.tsx
@@ -76,7 +76,7 @@ export default function Treasury() {
           )}
         />
       </header>
-      <article className="grid grid-cols-[458px_1fr] flex-grow gap-x-4">
+      <article className="grid grid-cols-1 sm:grid-cols-[458px_1fr] flex-grow gap-x-4">
         <WalletList
           className="w-full pt-9"
           data={pipe(
@@ -100,7 +100,8 @@ export default function Treasury() {
           }}
         />
         <div>
-          <div className="text-lg pb-10">&nbsp;</div>
+          <div className="text-lg border-b border-gray-500 mb-2 mt-6 sm:hidden">Details</div>
+          <div className="text-lg pb-10 hidden sm:block">&nbsp;</div>
           <div className="sticky top-0">
             <div
               className="h-[1px] top-[-1px] relative mb-[-1px]"