styling updates, responsive, modal work

components/ConnectWalletButton.tsx

@@ -73,11 +73,11 @@ const ConnectWalletButton = (props) => {
                   <img src={provider?.icon} className="w-4 h-4 m-auto" />
                 )}
               </Menu.Button>
-              <Menu.Items className="z-20 p-1 absolute right-0 top-12 bg-bkg-1 shadow-lg border-2 border-bkg-3 outline-none rounded-2xl">
+              <Menu.Items className="z-20 w-auto p-2 absolute right-0 top-12 bg-bkg-2 border border-bkg-3 shadow-md outline-none rounded-xl">
                 {WALLET_PROVIDERS.map(({ name, url, icon }) => (
                   <Menu.Item key={name}>
                     <button
-                      className="flex p-2 h-9 hover:bg-bkg-2 hover:cursor-pointer hover:rounded-2xl font-normal focus:outline-none"
+                      className="flex p-2 h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded-lg font-normal focus:outline-none"
                       onClick={() =>
                         setWalletStore((s) => {
                           s.providerUrl = url

components/ContributionModal.tsx

@@ -154,8 +154,8 @@ const ContributionModal = () => {
         <div className="pb-4 text-center">
           {!submitted && !submitting && !editContribution ? (
             <>
-              <h2>Plant Your Seed</h2>
+              <h2>This time has arrived.</h2>
-              <p>This is the start of something big.</p>
+              <p>When ready, depost your USDC</p>
             </>
           ) : null}
 
@@ -169,7 +169,7 @@ const ContributionModal = () => {
           {submitted && !submitting ? (
             <>
               <h2>Your contribution amount</h2>
-              <p>A new seed planted...</p>
+              <p>Thanks for contributing...</p>
             </>
           ) : null}
 

components/HeroSection.tsx

@@ -3,7 +3,7 @@ const HeroSection = () => {
   return (
     <section className="">
       <div className="container px-4 mx-auto">
-        <div className="relative pt-12 md:pt-32 pb-16">
+        <div className="relative pt-16 md:pt-32 pb-2">
           <div className="max-w-2xl mb-16 mx-auto text-center">
             <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
               Join the <GradientText>Mango DAO</GradientText> and help build the

components/LandingContent.tsx

@@ -3,9 +3,9 @@ import GradientText from './GradientText'
 
 const LandingContent = () => {
   return (
-    <div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 z-0">
+    <div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 -mt-32 z-0">
       <div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
-        <div className="max-w-2xl mx-auto text-center">
+        <div className="max-w-5xl mx-auto text-center">
           <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
             It is still the early days.
           </h2>
@@ -79,7 +79,7 @@ const LandingContent = () => {
 
 
         {/* Section 2 */}
-        <div className="max-w-2xl mb-12 mx-auto text-center">
+        <div className="max-w-4xl mb-12 mx-auto text-center">
           <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
             How it works.
           </h2>

components/NavBarBeta.tsx

@@ -421,7 +421,7 @@ const NavBarBeta = () => {
             !mobileMenuVisible && 'hidden'
           } absolute top-1 inset-x-0 px-4 py-2 transition transform origin-top-right z-50`}
         >
-          <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-th-bkg-3">
+          <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-bkg-2">
             <div className="pt-5 pb-6 px-5">
               <div className="flex items-center justify-between">
                 <div>

components/PoolCountdown.tsx

@@ -12,14 +12,14 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
         ? 'Deposits are closed'
         : 'The IDO has ended'
     if (completed) {
-      return <p className="text-secondary-2-light">{message}</p>
+      return <p className="text-mango-red">{message}</p>
     } else {
       return (
         <div
-          className={`${props.className} font-bold text-fgd-1 text-base flex items-center`}
+          className={`${props.className} font-bold text-white flex `}
         >
-          <ClockIcon className="w-5 h-5 mr-1" />
+          <ClockIcon className="w-10 h-10 mr-2" />
-          <span>
+          <span className="text-3xl">
             {/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
             {hours < 10 ? `0${hours}` : hours}
             {/* </span> */}:

components/PoolInfoCards.tsx

@@ -5,10 +5,10 @@ import PoolCountdown from './PoolCountdown'
 const Card = (props: any) => {
   return (
     <div
-      className="m-2 p-4 rounded-lg"
+      className="flex-1 m-2 p-5 border border-bkg-3 rounded-xl h-auto w-auto z-10 shadow-md text-center justify-items-center items-center"
       style={{ backgroundColor: 'rgba(44, 41, 66, 1)' }}
     >
-      <p className="pb-2">{props.title}</p>
+      <p className="pb-2 text-white text-opacity-50 text-xl">{props.title}</p>
       {props.children}
     </div>
   )
@@ -23,7 +23,8 @@ const PoolInfoCards = () => {
   })
 
   return (
-    <div className="flex flex-row justify-center mb-16 z-10">
+    <div className="max-w-3xl flex flex-col mx-auto px-6 mb-16 z-10">
+      <div className="flex flex-col lg:flex-row">
       <Card title="Deposits closing in">
         <PoolCountdown date={endDeposits} />
       </Card>
@@ -31,47 +32,47 @@ const PoolInfoCards = () => {
       <Card title="Sale event ends in">
         <PoolCountdown date={endIdo} />
       </Card>
-
+      </div>
-      <Card title="Total $MNGO for sale">
-        <div className="flex">
-          <img className="h-5 mr-1 w-auto" src="/logo.svg" alt="MNGO" />
-          <div className="font-bold text-fgd-1 text-base">
-            {vaults.mangoBalance}
-          </div>
-        </div>
-      </Card>
-
       <Card title="Total contributions">
         <div className="flex">
           <img
             alt="USDC"
-            width="20"
+            width="40"
-            height="20"
+            height="40"
             src="/icons/usdc.svg"
-            className={`mr-1`}
+            className={`mr-4`}
           />{' '}
-          <div className="font-bold text-fgd-1 text-base">
+          <div className="font-bold text-fgd-1 text-4xl">
             {vaults.usdcBalance}
           </div>
         </div>
       </Card>
-
+      <div className="flex flex-wrap">
+      <Card title="Total $MNGO for sale">
+        <div className="flex">
+          <img className="h-7 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
+          <div className="font-bold text-fgd-1 text-2xl">
+            {vaults.mangoBalance}
+          </div>
+        </div>
+      </Card>
       <Card title="Estimated token price">
         <div className="flex">
           <img
             alt="USDC"
-            width="20"
+            width="25"
-            height="20"
+            height="25"
             src="/icons/usdc.svg"
-            className={`mr-1`}
+            className={`mr-2`}
           />{' '}
-          <div className="font-bold text-fgd-1 text-base">
+          <div className="font-bold text-fgd-1 text-2xl">
             {vaults.estimatedPrice
               ? numberFormat.format(vaults.estimatedPrice)
               : 'N/A'}
           </div>
         </div>
       </Card>
+      </div>
     </div>
   )
 }