styling updates, responsive, modal work
This commit is contained in:
parent
0e54028d13
commit
127df1852e
|
@ -73,11 +73,11 @@ const ConnectWalletButton = (props) => {
|
||||||
<img src={provider?.icon} className="w-4 h-4 m-auto" />
|
<img src={provider?.icon} className="w-4 h-4 m-auto" />
|
||||||
)}
|
)}
|
||||||
</Menu.Button>
|
</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 }) => (
|
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
|
||||||
<Menu.Item key={name}>
|
<Menu.Item key={name}>
|
||||||
<button
|
<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={() =>
|
onClick={() =>
|
||||||
setWalletStore((s) => {
|
setWalletStore((s) => {
|
||||||
s.providerUrl = url
|
s.providerUrl = url
|
||||||
|
|
|
@ -154,8 +154,8 @@ const ContributionModal = () => {
|
||||||
<div className="pb-4 text-center">
|
<div className="pb-4 text-center">
|
||||||
{!submitted && !submitting && !editContribution ? (
|
{!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}
|
) : null}
|
||||||
|
|
||||||
|
@ -169,7 +169,7 @@ const ContributionModal = () => {
|
||||||
{submitted && !submitting ? (
|
{submitted && !submitting ? (
|
||||||
<>
|
<>
|
||||||
<h2>Your contribution amount</h2>
|
<h2>Your contribution amount</h2>
|
||||||
<p>A new seed planted...</p>
|
<p>Thanks for contributing...</p>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@ const HeroSection = () => {
|
||||||
return (
|
return (
|
||||||
<section className="">
|
<section className="">
|
||||||
<div className="container px-4 mx-auto">
|
<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">
|
<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">
|
<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
|
Join the <GradientText>Mango DAO</GradientText> and help build the
|
||||||
|
|
|
@ -3,9 +3,9 @@ import GradientText from './GradientText'
|
||||||
|
|
||||||
const LandingContent = () => {
|
const LandingContent = () => {
|
||||||
return (
|
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-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">
|
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
|
||||||
It is still the early days.
|
It is still the early days.
|
||||||
</h2>
|
</h2>
|
||||||
|
@ -79,7 +79,7 @@ const LandingContent = () => {
|
||||||
|
|
||||||
|
|
||||||
{/* Section 2 */}
|
{/* 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">
|
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
|
||||||
How it works.
|
How it works.
|
||||||
</h2>
|
</h2>
|
||||||
|
|
|
@ -421,7 +421,7 @@ const NavBarBeta = () => {
|
||||||
!mobileMenuVisible && 'hidden'
|
!mobileMenuVisible && 'hidden'
|
||||||
} absolute top-1 inset-x-0 px-4 py-2 transition transform origin-top-right z-50`}
|
} 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="pt-5 pb-6 px-5">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -12,14 +12,14 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
|
||||||
? 'Deposits are closed'
|
? 'Deposits are closed'
|
||||||
: 'The IDO has ended'
|
: 'The IDO has ended'
|
||||||
if (completed) {
|
if (completed) {
|
||||||
return <p className="text-secondary-2-light">{message}</p>
|
return <p className="text-mango-red">{message}</p>
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<div
|
<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"> */}
|
{/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
|
||||||
{hours < 10 ? `0${hours}` : hours}
|
{hours < 10 ? `0${hours}` : hours}
|
||||||
{/* </span> */}:
|
{/* </span> */}:
|
||||||
|
|
|
@ -5,10 +5,10 @@ import PoolCountdown from './PoolCountdown'
|
||||||
const Card = (props: any) => {
|
const Card = (props: any) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<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)' }}
|
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}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -23,7 +23,8 @@ const PoolInfoCards = () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
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">
|
<Card title="Deposits closing in">
|
||||||
<PoolCountdown date={endDeposits} />
|
<PoolCountdown date={endDeposits} />
|
||||||
</Card>
|
</Card>
|
||||||
|
@ -31,41 +32,40 @@ const PoolInfoCards = () => {
|
||||||
<Card title="Sale event ends in">
|
<Card title="Sale event ends in">
|
||||||
<PoolCountdown date={endIdo} />
|
<PoolCountdown date={endIdo} />
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<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>
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card title="Total contributions">
|
<Card title="Total contributions">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<img
|
<img
|
||||||
alt="USDC"
|
alt="USDC"
|
||||||
width="20"
|
width="40"
|
||||||
height="20"
|
height="40"
|
||||||
src="/icons/usdc.svg"
|
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}
|
{vaults.usdcBalance}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</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">
|
<Card title="Estimated token price">
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<img
|
<img
|
||||||
alt="USDC"
|
alt="USDC"
|
||||||
width="20"
|
width="25"
|
||||||
height="20"
|
height="25"
|
||||||
src="/icons/usdc.svg"
|
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
|
{vaults.estimatedPrice
|
||||||
? numberFormat.format(vaults.estimatedPrice)
|
? numberFormat.format(vaults.estimatedPrice)
|
||||||
: 'N/A'}
|
: 'N/A'}
|
||||||
|
@ -73,6 +73,7 @@ const PoolInfoCards = () => {
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue