Skip to content

Commit

Permalink
Merge pull request #293 from amochuko/dark-mode
Browse files Browse the repository at this point in the history 
Add Dark mode
  • Loading branch information
@aahna-ashina
aahna-ashina authored Aug 20, 2024
2 parents db2f783 + 06918e7 commit c914786
Show file tree
Hide file tree
Showing 11 changed files with 139 additions and 103 deletions.
8 changes: 5 additions & 3 deletions ui/components/HomeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ export default function HomeCard({
}: any) {
return (
<Link href={href} passHref>
<div className="card bg-base-100 shadow-md transition ease-in-out hover:-translate-y-1 cursor-pointer">
<div className="card-body items-stretch items-center ">
<div className="card bg-base-100 shadow-md transition ease-in-out hover:-translate-y-1 cursor-pointer dark:bg-slate-700">
<div className="card-body items-stretch items-center">
{icon}
<h2 className="card-title text-center font-medium">{title}</h2>
<h2 className="card-title text-center font-medium dark:text-slate-300 dark:font-bold">
{title}
</h2>

{children}

Expand Down
35 changes: 21 additions & 14 deletions ui/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@ export default function Layout({ children }: any) {
}

const layout = (
<div className="mx-auto bg-n3bg font-display">
<div className="mx-auto bg-n3bg font-display dark:bg-slate-800">
<div className="h-screen">
<div className="navbar bg-base-100 border-slate-100 border-b-2 py-0 pl-0 lg:hidden sticky z-10">
<div className="navbar bg-base-100 border-b-2 py-0 pl-0 lg:hidden sticky z-10 dark:bg-slate-800">
<div className="navbar-start border-slate-100 pl-0">
<div className="w-80 border-slate-100 py-4 box-content">
<div className="pl-6 pt-2 cursor-pointer">
Expand All @@ -133,7 +133,7 @@ export default function Layout({ children }: any) {
<div className="flex-none lg:hidden">
<label
htmlFor="side-drawer"
className="btn btn-square btn-ghost"
className="btn btn-square btn-ghost dark:btn-outline dark:border-slate-300"
>
<Bars3Icon className="h-8 w-8" />
</label>
Expand All @@ -159,20 +159,26 @@ export default function Layout({ children }: any) {
htmlFor="side-drawer"
className="drawer-overlay z-10"
></label>
<div className="bg-white w-80 flex flex-col justify-between pb-24 lg:pb-0 overflow-y-auto drop-shadow-md min-h-screen">
<div className="bg-white w-80 flex flex-col justify-between pb-24 lg:pb-0 overflow-y-auto drop-shadow-md min-h-screen dark:bg-slate-800 dark:border-r-[1px] dark:border-slate-600">
<div className="mt-6 py-4 hidden lg:block">
<div className="px-8 pt-2 cursor-pointer">
<Link href="/" passHref>
<a>
<Image src={Logo} />
<span>
<Image src={Logo} />
</span>
{/* Logo placeholder for Dark Mode */}
{/* <span className="dark:hidden">
<Image src={LogoDark} />
</span> */}
</a>
</Link>
</div>
</div>
<ul className="menu p-4 overflow-y-auto text-base-400 grow">
{nav.map((item: any) => (
<li
className="mt-1 relative py-2"
className="mt-1 relative py-2 dark:text-slate-300"
onClick={() =>
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
(document.getElementById('side-drawer').checked = false)
Expand All @@ -184,7 +190,7 @@ export default function Layout({ children }: any) {
<a
className={`py-4 ${
router.pathname == item.href ? 'active' : ''
}`}
} ${router.pathname !== item.href ? 'dark:hover:bg-slate-700' : ''}`}
>
{item.icon}
{item.name}
Expand All @@ -195,7 +201,7 @@ export default function Layout({ children }: any) {
<a
className={`py-4 ${
router.pathname == item.href ? 'active' : ''
}`}
} ${router.pathname !== item.href ? 'dark:hover:bg-slate-700' : ''}`}
href={item.href}
target="_blank"
rel="noopener noreferrer"
Expand All @@ -215,12 +221,13 @@ export default function Layout({ children }: any) {
<div className="mask mask-circle cursor-pointer">
<Blockies seed={address} size={12} />
</div>
{ensName
? ensName
: `${((address as string) ?? '').substring(
0,
6,
)}...${address.slice(-4)}`}
{ensName ? (
ensName
) : (
<span className="dark:text-slate-300">{`${(
(address as string) ?? ''
).substring(0, 6)}...${address.slice(-4)}`}</span>
)}
<ChevronDownIcon className="h-5 w-5 absolute right-4 opacity-50" />
</label>
</li>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/MainCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ export default function MainCard({
<div
className={`card min-w-80 md:w-full bg-base-100 shadow-md overflow-visible ${
gradientBg && 'bg-gradient-to-r from-n3blue to-n3green'
}`}
} dark:bg-slate-700`}
>
<div className="card-body items-stretch items-center">
<h2
className={`card-title text-center text-3xl font-medium mb-2 ${
gradientBg && 'text-white'
}`}
} dark:text-slate-300`}
>
{title}
</h2>
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/_document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react'
class WebsiteDocument extends Document {
render() {
return (
<Html>
<Html >
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />

Expand All @@ -20,7 +20,7 @@ class WebsiteDocument extends Document {
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap"
/>

<meta name="theme-color" content="#54c3ff" />
{/* <meta name="theme-color" content="#54c3ff" /> */}

<link rel="icon" href="/favicon.ico" />
</Head>
Expand Down
12 changes: 6 additions & 6 deletions ui/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ export default function Index() {
<>
<Head title="Home" />
<div className="flex flex-col max-w-3xl">
<h1 className="card-title text-center text-3xl font-semibold mb-2">
<h1 className="card-title text-center text-3xl font-semibold mb-2 dark:text-slate-300">
Welcome to Nation3
<Image src={flag} width={36} height={36} />
</h1>

<p className="mb-8">
<p className="mb-8 dark:text-slate-300">
Nation3 is a sovereign cloud nation. We are building a community of
like-minded people creating a nation on the cloud.{' '}
<GradientLink text="Read more" href="https://nation3.org" />
Expand All @@ -32,7 +32,7 @@ export default function Index() {
community, such as...
</p>

<div className="grid xl:grid-cols-2 mt-2 gap-8">
<div className="grid xl:grid-cols-2 mt-2 gap-8 ">
<HomeCard
href="/lock"
icon={
Expand All @@ -41,7 +41,7 @@ export default function Index() {
title="Get $veNATION"
linkText="Get $veNATION"
>
<p>
<p className="dark:text-slate-300">
Lock your $NATION to obtain $veNATION and help govern the Nation3
DAO. $veNATION will be required to mint the upcoming passport NFTs
to become a citizen.
Expand All @@ -56,7 +56,7 @@ export default function Index() {
title="Become a citizen"
linkText="Claim a passport"
>
<p>
<p className="dark:text-slate-300">
Once you have $veNATION, you can claim a passport. Only 420
Genesis passports will be launched in the beginning.
</p>
Expand All @@ -68,7 +68,7 @@ export default function Index() {
title="Buy more $NATION"
linkText="Buy $NATION"
>
<p>
<p className="dark:text-slate-300">
You can buy more $NATION and participate in liquidity rewards. You
can also lock your $NATION to get $veNATION to boost your rewards,
get a passport NFT, and govern the DAO.
Expand Down
37 changes: 25 additions & 12 deletions ui/pages/join.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,26 +112,33 @@ export default function Join() {
{hasPassport && <Confetti />}
<MainCard title="Become a Nation3 citizen">
<ul className="steps steps-vertical lg:steps-horizontal my-8">
<li className={`step text-sm ${action.mint ? 'step-primary' : ''}`}>
<li
className={`step text-sm ${action.mint ? 'step-primary' : ''} dark:text-slate-300`}
>
Lock $NATION
</li>
<li
className={`step text-sm ${(action.mint && !hasPassport) || hasPassport ? 'step-primary' : ''
}`}
className={`step text-sm ${
(action.mint && !hasPassport) || hasPassport ? 'step-primary' : ''
} dark:text-slate-300`}
>
Claim passport
</li>
<li className={`step text-sm ${hasPassport ? 'step-primary' : ''}`}>
<li
className={`step text-sm ${hasPassport ? 'step-primary' : ''} dark:text-slate-300`}
>
Adore your passport
</li>
</ul>

{!hasPassport ? (
<>
<p>
<p className="dark:text-slate-300">
To become a citizen, you need to mint a passport NFT by holding at
least{' '}
<span className="font-semibold">{requiredBalance == -1 ? "..." : requiredBalance} $veNATION</span>
<span className="font-semibold">
{requiredBalance == -1 ? '...' : requiredBalance} $veNATION
</span>
. This is to make sure all citizens are economically aligned.
<br />
<br />
Expand All @@ -148,29 +155,35 @@ export default function Join() {
/>
</p>

<div className="stats stats-vertical lg:stats-horizontal shadow my-4">
<div className="stats stats-vertical lg:stats-horizontal shadow my-4 dark:bg-slate-300">
<div className="stat">
<div className="stat-figure text-primary">
<LockClosedIcon className="h-8 w-8" />
</div>
<div className="stat-title">Needed balance</div>
<div className="stat-value">{requiredBalance == -1 ? "..." : requiredBalance}</div>
<div className="stat-desc">$veNATION</div>
<div className="stat-title dark:text-slate-900">
Needed balance
</div>
<div className="stat-value">
{requiredBalance == -1 ? '...' : requiredBalance}
</div>
<div className="stat-desc dark:text-slate-900">$veNATION</div>
</div>

<div className="stat">
<div className="stat-figure text-secondary">
<SparklesIcon className="h-8 w-8" />
</div>
<div className="stat-title">Your balance</div>
<div className="stat-title dark:text-slate-900">
Your balance
</div>
<div className="stat-value">
<Balance
loading={veNationBalanceLoading}
balance={veNationBalance?.value}
decimals={4}
/>
</div>
<div className="stat-desc">$veNATION</div>
<div className="stat-desc dark:text-slate-900">$veNATION</div>
</div>
</div>

Expand Down
Loading

0 comments on commit c914786

Please sign in to comment.