Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Dark mode #293

Merged
merged 15 commits into from
Aug 20, 2024
Merged

Add Dark mode #293

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c79c2b5
fix: update styles for dark mode
amochuko Aug 14, 2024
ab74486
fix: extend fonts config
amochuko Aug 14, 2024
a95359c
feat: add dark theme
amochuko Aug 14, 2024
3fa11ca
fix: add border to side drawer
amochuko Aug 14, 2024
44a32da
fix: add style for nav and logo placeholder
amochuko Aug 14, 2024
da66ab4
fix: add dark tune to stat board
amochuko Aug 14, 2024
00bd7c0
fix: add dark tune to stat board
amochuko Aug 14, 2024
bf3d556
fix: add dark tune to card and stat board
amochuko Aug 14, 2024
a911aa6
fix: add hover effect on dark mode
amochuko Aug 15, 2024
6604c11
fix: remove comment
amochuko Aug 15, 2024
33e8977
fix: reduce brightness of cards
amochuko Aug 17, 2024
a4367f5
fix: update alert icon on Dark mode
amochuko Aug 19, 2024
025260c
Merge branch 'main' into dark-mode
amochuko Aug 19, 2024
9e99885
fix: bumped shade for alert component
amochuko Aug 19, 2024
06918e7
fix: merged update
amochuko Aug 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions ui/components/HomeCard.tsx
View file
Open in desktop
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-600">
aahna-ashina marked this conversation as resolved.
Show resolved Hide resolved
<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
30 changes: 18 additions & 12 deletions ui/components/Layout.tsx
View file
Open in desktop
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,25 @@ 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>
{/* <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 Down Expand Up @@ -215,12 +220,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
7 changes: 5 additions & 2 deletions ui/components/MainCard.tsx
View file
Open in desktop
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-600`}
>
<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 All @@ -38,3 +38,6 @@ export default function MainCard({
</>
)
}

// className="dark:text-slate-300"
// dark:bg-slate-600
4 changes: 2 additions & 2 deletions ui/pages/_document.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading