mirror of
https://github.com/MAGICGrants/campaign-site.git
synced 2026-01-09 12:27:59 -05:00
feat: ui improvements
This commit is contained in:
Artur
@@ -82,15 +82,15 @@ const Header = () => {
|
||||
{!!fund && session.status !== 'authenticated' && (
|
||||
<>
|
||||
<Dialog open={loginIsOpen} onOpenChange={setLoginIsOpen}>
|
||||
<DialogTrigger>
|
||||
<>
|
||||
<Button variant="outline" className="w-18 block sm:hidden" size="sm">
|
||||
Login
|
||||
</Button>
|
||||
<Button variant="outline" className="w-24 hidden sm:block">
|
||||
Login
|
||||
</Button>
|
||||
</>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" className="w-18 block sm:hidden" size="sm">
|
||||
Login
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" className="w-24 hidden sm:block">
|
||||
Login
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<LoginFormModal
|
||||
@@ -102,13 +102,13 @@ const Header = () => {
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={registerIsOpen} onOpenChange={setRegisterIsOpen}>
|
||||
<DialogTrigger>
|
||||
<>
|
||||
<Button className="w-18 block sm:hidden" size="sm">
|
||||
Register
|
||||
</Button>
|
||||
<Button className="w-24 hidden sm:block">Register</Button>
|
||||
</>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="w-18 block sm:hidden" size="sm">
|
||||
Register
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="w-24 hidden sm:block">Register</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<RegisterFormModal
|
||||
|
||||
@@ -17,8 +17,8 @@ const ProjectList: React.FC<ProjectListProps> = ({
|
||||
projects,
|
||||
}) => {
|
||||
return (
|
||||
<section className="bg-light items-left flex flex-col">
|
||||
<ul className="mx-auto grid max-w-5xl grid-cols-1 sm:mx-0 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<section className="flex flex-col">
|
||||
<ul className="mx-auto grid max-w-5xl grid-cols-1 sm:mx-0 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{projects &&
|
||||
projects.slice(0, 6).map((p, i) => (
|
||||
<li key={i} className="">
|
||||
|
||||
@@ -84,81 +84,86 @@ const Project: NextPage<SingleProjectPageProps> = ({ project, donationStats }) =
|
||||
|
||||
<div className="divide-y divide-gray-200">
|
||||
<PageHeading project={project}>
|
||||
<div className="flex flex-col items-center space-x-2 pt-8 xl:block">
|
||||
<div className="w-full mt-8 flex flex-col md:flex-row items-center md:space-x-8 xl:space-x-0 space-y-10 md:space-y-0 xl:block">
|
||||
<Image
|
||||
src={coverImage}
|
||||
alt="avatar"
|
||||
width={300}
|
||||
height={300}
|
||||
className="h-72 w-72 mx-auto object-contain xl:hidden"
|
||||
width={700}
|
||||
height={700}
|
||||
className="w-full max-w-[700px] mx-auto object-contain xl:hidden"
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
{!project.isFunded && (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Button onClick={() => setDonateModalOpen(true)}>Donate</Button>
|
||||
<div className="w-full max-w-96 space-y-8 p-6 bg-white rounded-xl">
|
||||
<div className="w-full">
|
||||
{!project.isFunded && (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Button onClick={() => setDonateModalOpen(true)}>Donate</Button>
|
||||
|
||||
{!userHasMembershipQuery.data && (
|
||||
<Button
|
||||
onClick={() =>
|
||||
session.status === 'authenticated'
|
||||
? setMemberModalOpen(true)
|
||||
: setRegisterIsOpen(true)
|
||||
}
|
||||
variant="outline"
|
||||
>
|
||||
Get Annual Membership
|
||||
</Button>
|
||||
)}
|
||||
{!userHasMembershipQuery.data && (
|
||||
<Button
|
||||
onClick={() =>
|
||||
session.status === 'authenticated'
|
||||
? setMemberModalOpen(true)
|
||||
: setRegisterIsOpen(true)
|
||||
}
|
||||
variant="outline"
|
||||
>
|
||||
Get Annual Membership
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!!userHasMembershipQuery.data && (
|
||||
<Button variant="outline">
|
||||
<CustomLink href={`${fundSlug}/account/my-memberships`}>
|
||||
My Memberships
|
||||
</CustomLink>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!!userHasMembershipQuery.data && (
|
||||
<Button variant="outline">
|
||||
<CustomLink href={`${fundSlug}/account/my-memberships`}>
|
||||
My Memberships
|
||||
</CustomLink>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="mb-4 font-bold">Raised</h1>
|
||||
<div className="w-full">
|
||||
<h1 className="mb-4 font-bold">Raised</h1>
|
||||
|
||||
<Progress
|
||||
current={
|
||||
donationStats.xmr.fiatAmount +
|
||||
donationStats.btc.fiatAmount +
|
||||
donationStats.usd.fiatAmount
|
||||
}
|
||||
goal={goal}
|
||||
/>
|
||||
<Progress
|
||||
current={
|
||||
donationStats.xmr.fiatAmount +
|
||||
donationStats.btc.fiatAmount +
|
||||
donationStats.usd.fiatAmount
|
||||
}
|
||||
goal={goal}
|
||||
/>
|
||||
|
||||
<ul className="font-semibold space-y-1">
|
||||
<li className="flex items-center space-x-1">
|
||||
<span className="text-green-500 text-xl">{`${formatUsd(donationStats.xmr.fiatAmount + donationStats.btc.fiatAmount + donationStats.usd.fiatAmount)}`}</span>{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.xmr.count + donationStats.btc.count + donationStats.usd.count}{' '}
|
||||
donations total
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{donationStats.xmr.amount} XMR{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.xmr.count} donations
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{formatBtc(donationStats.btc.amount)}{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.btc.count} donations
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{`${formatUsd(donationStats.usd.amount)}`} Fiat{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.usd.count} donations
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="font-semibold space-y-1">
|
||||
<li className="flex items-center space-x-1">
|
||||
<span className="text-green-500 text-xl">{`${formatUsd(donationStats.xmr.fiatAmount + donationStats.btc.fiatAmount + donationStats.usd.fiatAmount)}`}</span>{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in{' '}
|
||||
{donationStats.xmr.count + donationStats.btc.count + donationStats.usd.count}{' '}
|
||||
donations total
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{donationStats.xmr.amount} XMR{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.xmr.count} donations
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{formatBtc(donationStats.btc.amount)}{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.btc.count} donations
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{`${formatUsd(donationStats.usd.amount)}`} Fiat{' '}
|
||||
<span className="font-normal text-sm text-gray">
|
||||
in {donationStats.usd.count} donations
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -113,11 +113,13 @@ function Home({ projects }: { projects: ProjectItem[] }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="py-4 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
|
||||
Campaigns
|
||||
</h1>
|
||||
<div className="w-full space-y-4">
|
||||
<h1 className="py-4 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
|
||||
Campaigns
|
||||
</h1>
|
||||
|
||||
<ProjectList projects={projects} />
|
||||
<ProjectList projects={projects} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user