Make the treasury responsive

Mythic-Project · Oct 6, 2024 · 3638b72 · 3638b72
1 parent 5703dd7
commit 3638b72
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]"