Skip to content

Commit 8a18616

Browse files
Samuel1-onaSamuel1-ona
authored
Merge pull request #67 from Samuel1-ona/updates
feat: add Ui improvement
2 parents cb304e8 + 40d59f8 commit 8a18616

14 files changed

Lines changed: 184 additions & 373 deletions

File tree

‎app/Analytics-Details/page.tsx‎

Lines changed: 19 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -37,105 +37,53 @@ export default function Page() {
3737

3838

3939
return (
40-
<div className="bg-[#111111] pb-10 font-satoshi " >
40+
<div className="min-h-screen bg-background text-foreground pb-10 font-satoshi">
4141
<UserNav />
4242
<UserStats
4343
projectTags={projectTags}
4444
projectDescription={projectDescription}
4545
socialLinks={socialLinks}
4646
/>
47-
48-
4947
<section className="w-full max-w-[1400px] mx-auto mt-[50px] px-4 md:px-0 ">
5048
{/* Nav buttons */}
51-
<div className="w-full flex items-center gap-10 border-b-[2px] border-[#988C8C4F] pb-2">
49+
<div className="w-full flex items-center gap-10 border-b-2 border-border pb-2">
5250
<button
53-
className={`text-xl font-normal relative
54-
text-[#988C8C]
55-
before:content-['']
56-
before:absolute
57-
before:bottom-[-8px]
58-
before:bg-[#E0FFB0]
59-
before:h-[3px]
60-
hover:before:w-full
61-
before:transition-all
62-
before:duration-200
63-
before:ease-in-out
64-
before:w-0}
65-
`}
51+
className={`text-xl font-normal relative text-[#988C8C] before:content-[''] before:absolute before:bottom-[-8px] before:bg-[#E0FFB0] before:h-[3px] hover:before:w-full before:transition-all before:duration-200 before:ease-in-out before:w-0`}
6652
>
6753
Home
6854
</button>
69-
7055
<button
71-
className={`text-xl font-normal relative
72-
text-[#988C8C]
73-
before:content-['']
74-
before:absolute
75-
before:bottom-[-8px]
76-
before:bg-[#E0FFB0]
77-
before:h-[3px]
78-
hover:before:w-full
79-
before:transition-all
80-
before:duration-200
81-
before:ease-in-out before:w-0
82-
`}
56+
className={`text-xl font-normal relative text-[#988C8C] before:content-[''] before:absolute before:bottom-[-8px] before:bg-[#E0FFB0] before:h-[3px] hover:before:w-full before:transition-all before:duration-200 before:ease-in-out before:w-0`}
8357
>
8458
Analytics
8559
</button>
8660
</div>
87-
8861
{/* Section content */}
89-
90-
<div className=" w-full rounded-lg border-[#988C8C] border-[1px] mx-auto mt-[30px] h-[179px] bg-[url('/item-image.svg')] bg-no-repeat bg-center bg-cover flex items-center px-[3%] " >
91-
92-
<h1 className="font-bold text-2xl md:text-[32px] text-[#ffffff] " >DAO Voter</h1>
93-
62+
<div className="w-full rounded-lg border-border border mx-auto mt-[30px] h-[179px] bg-[url('/item-image.svg')] bg-no-repeat bg-center bg-cover flex items-center px-[3%]">
63+
<h1 className="font-bold text-2xl md:text-[32px] text-foreground">DAO Voter</h1>
9464
</div>
95-
96-
97-
<div className="w-full flex flex-col md:flex-row gap-10 justify-between items-start mt-[70px] " >
98-
99-
100-
<div className="w-full md:max-w-[190px] flex-col items-center md:items-start gap-5 " >
101-
<div className="flex flex-col items-center md:items-start gap-8 ">
102-
<h2 className="text-[#FFFFFF] text-2xl md:text-[32px] font-medium " >Participants</h2>
103-
<div className="flex items-center gap-4" >
104-
<div className="w-[85px] h-[85px] flex flex-col items-start justify-center gap-2 " >
105-
<p className=" font-normal text-lg text-[#EBFFCB] " >Active</p>
106-
<span className="border-[1px] border-[#988C8C] rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#EBFFCB] flex items-center justify-center " >543</span>
107-
65+
<div className="w-full flex flex-col md:flex-row gap-10 justify-between items-start mt-[70px]">
66+
<div className="w-full md:max-w-[190px] flex-col items-center md:items-start gap-5">
67+
<div className="flex flex-col items-center md:items-start gap-8">
68+
<h2 className="text-foreground text-2xl md:text-[32px] font-medium">Participants</h2>
69+
<div className="flex items-center gap-4">
70+
<div className="w-[85px] h-[85px] flex flex-col items-start justify-center gap-2">
71+
<p className="font-normal text-lg text-[#EBFFCB]">Active</p>
72+
<span className="border border-border rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#EBFFCB] flex items-center justify-center">543</span>
10873
</div>
109-
110-
111-
<div className="w-[85px] h-[85px] flex flex-col items-center justify-center gap-2 " >
112-
<p className=" font-normal text-lg text-[#988C8C] " >Inactive</p>
113-
<span className=" rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#988C8C] flex items-center justify-center " >543</span>
114-
74+
<div className="w-[85px] h-[85px] flex flex-col items-center justify-center gap-2">
75+
<p className="font-normal text-lg text-[#988C8C]">Inactive</p>
76+
<span className="rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#988C8C] flex items-center justify-center">543</span>
11577
</div>
11678
</div>
117-
11879
</div>
119-
<p className="text-[#E0FFB0] font-normal text-2xl mt-[14px] text-center md:text-left " >May 20 - May 31</p>
80+
<p className="text-[#E0FFB0] font-normal text-2xl mt-[14px] text-center md:text-left">May 20 - May 31</p>
12081
</div>
121-
122-
123-
124-
<div className="w-full max-w-[868px] " >
125-
82+
<div className="w-full max-w-[868px]">
12683
<AnalyticsChart/>
12784
</div>
128-
12985
</div>
130-
131-
132-
133-
134-
13586
</section>
136-
137-
138-
13987
</div>
14088
)
14189
}

‎app/analytics-overview/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function Page() {
4646

4747

4848
return (
49-
<div className="bg-[#111111] pb-5 font-satoshi " >
49+
<div className="min-h-screen bg-background text-foreground pb-5 font-satoshi">
5050
<UserNav />
5151
<UserStats
5252
projectTags={projectTags}

‎app/dashboard/page.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,26 @@ import ConnectButton from "@/components/ConnectButton";
99
export default function Dashboard() {
1010
const { theme } = useTheme();
1111
return (
12-
<>
13-
<div
14-
className={`font-satoshi w-full min-h-screen flex flex-col items-center justify-start border-[#636363] md:py-20 py-10 px-2 ${
15-
theme === "dark"
16-
? "bg-black text-white"
17-
: "bg-white text-black"
18-
}`}
19-
>
20-
<div className="max-w-[652px] md:w-full flex flex-col items-center justify-start gap-10">
21-
22-
<ConnectButton/>
23-
<Header />
24-
<StatsBox />
12+
<div
13+
className={
14+
`font-satoshi w-full min-h-screen flex flex-col items-center justify-start border-border md:py-20 py-10 px-2 bg-background text-foreground`
15+
}
16+
>
17+
<div className="w-full max-w-5xl flex flex-col md:gap-12 gap-8 items-center justify-start">
18+
{/* Responsive row for Header and StatsBox */}
19+
<div className="w-full flex flex-col md:flex-row md:items-start md:justify-between gap-8 md:gap-12">
20+
<div className="w-full md:w-1/2 flex justify-center md:justify-start">
21+
<Header />
22+
</div>
23+
<div className="w-full md:w-1/2 flex justify-center md:justify-end mt-6 md:mt-0">
24+
<StatsBox />
25+
</div>
26+
</div>
27+
{/* NftContainer always full width below */}
28+
<div className="w-full">
2529
<NftContainer />
2630
</div>
2731
</div>
28-
</>
32+
</div>
2933
);
3034
}

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ body {
8383
--radius: 0.5rem;
8484
}
8585

86-
.dark {
86+
.dark, [data-theme="dark"] {
8787
--background: 0 0% 3.9%;
8888
--foreground: 0 0% 98%;
8989
--card: 0 0% 3.9%;

‎app/task/page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,32 @@ import Header from "@/components/Header";
1212

1313
export default function Tasks() {
1414
return (
15-
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start dark:bg-[#0D0D0D] dark:text-white py-20">
15+
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-background text-foreground py-20">
1616
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-10 ">
1717
<Header />
1818
<TaskStats />
1919
<TaskBox
20-
backgroundColor="bg-[#33BEF0]"
20+
backgroundColor="bg-[#33BEF0] dark:bg-[#1e293b]"
2121
icon={<FaTelegramPlane size={30} />}
2222
taskName="Telegram"
2323
/>
2424
<TaskBox
25-
backgroundColor="bg-[#EDEDED]"
26-
icon={<FaXTwitter size={30} className="text-black" />}
25+
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
26+
icon={<FaXTwitter size={30} className="text-black dark:text-white" />}
2727
taskName="Twitter"
2828
/>
2929
<TaskBox
30-
backgroundColor="bg-[#EDEDED]"
30+
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
3131
icon={<FaDiscord size={30} className="text-[#8C9EFF]" />}
3232
taskName="Discord"
3333
/>
3434
<TaskBox
35-
backgroundColor="bg-black"
36-
icon={<FiGithub size={30} className="text-white" />}
35+
backgroundColor="bg-black dark:bg-white"
36+
icon={<FiGithub size={30} className="text-white dark:text-black" />}
3737
taskName="Github"
3838
/>
3939
<TaskBox
40-
backgroundColor="bg-[#EDEDED]"
40+
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
4141
icon={<FaDiscord size={30} className="text-[#8C9EFF]" />}
4242
taskName="Discord"
4343
/>

‎components/Header.tsx‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,31 @@ import { useTheme } from "@/components/ThemeContext";
77
function Header() {
88
const { theme } = useTheme();
99
return (
10-
<div>
10+
<div className="w-full flex flex-col items-center justify-center">
1111
<div
12-
className={`max-w-[652px] w-full flex flex-col items-center justify-start gap-5 bg-background ${
13-
theme === "dark"
14-
? "bg-black text-white"
15-
: "bg-white text-black"
16-
}`}
12+
className="w-full flex flex-col items-center justify-center gap-5 bg-background text-foreground"
1713
>
18-
<div
19-
className={`flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ${
20-
theme === "dark"
21-
? "bg-black text-white"
22-
: "bg-white text-black"
23-
}`}
24-
>
25-
<Image
26-
src="/weaver.svg"
27-
alt="weaver-logo"
28-
height={100}
29-
width={100}
30-
/>
14+
<div className="w-full flex flex-col items-center justify-center gap-7">
15+
<div className="w-full flex justify-center items-center">
16+
<Image
17+
src="/weaver.svg"
18+
alt="weaver-logo"
19+
height={100}
20+
width={100}
21+
/>
22+
</div>
3123
<div
32-
className={`flex flex-row items-center justify-between w-full gap-3 bg-background ${
33-
theme === "dark"
34-
? "bg-black text-white"
35-
: "bg-white text-black"
36-
}`}
24+
className="flex flex-col items-center justify-center w-full gap-3 bg-background text-foreground"
3725
>
3826
<Image
3927
src="/first-group-image.svg"
4028
alt="group-img-for-screen1"
4129
height={128}
42-
width={280}
43-
className="w-[210px] h-[85px] "
30+
width={210}
31+
className="w-[210px] h-[85px] mx-auto"
4432
/>
45-
<p className="text-xl">
46-
<span className="font-light"> Lightweight </span>{" "}
47-
<br />
48-
on-chain identity <br />
49-
platform
33+
<p className="text-xl text-center font-semibold">
34+
Retention campaign
5035
</p>
5136
</div>
5237
</div>

‎components/NftContainer.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,15 @@ export default function NftContainer() {
1515

1616
return (
1717
<div
18-
className={`w-full ${
19-
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
20-
}`}
18+
className={`w-full bg-background text-foreground`}
2119
>
22-
<ul className="flex flex-row items-center gap-8 py-3 border-b border-[#1D1D1D] dark:text-white">
20+
<ul className="flex flex-row items-center gap-8 py-3 border-b border-border">
2321
<li
2422
onClick={() => toggleCurrentNft("TanglerData")}
2523
className={`cursor-pointer relative ${
2624
currentNFt === "TanglerData"
2725
? "text-green-400 after:absolute after:content-[''] after:h-[1px] after:w-[60px] after:bg-[#9FE870] after:bottom-[-12px] after:left-1/2 after:-translate-x-1/2"
28-
: "text-[#818181]"
26+
: "text-muted-foreground"
2927
}`}
3028
>
3129
Tangler
@@ -35,7 +33,7 @@ export default function NftContainer() {
3533
className={`cursor-pointer relative ${
3634
currentNFt === "OrbiterData"
3735
? "text-green-400 after:absolute after:content-[''] after:h-[1px] after:w-[60px] after:bg-[#9FE870] after:bottom-[-12px] after:left-1/2 after:-translate-x-1/2"
38-
: "text-[#818181]"
36+
: "text-muted-foreground"
3937
}`}
4038
>
4139
Orbiter
@@ -45,12 +43,12 @@ export default function NftContainer() {
4543
className={`cursor-pointer relative ${
4644
currentNFt === "FunnelerData"
4745
? "text-green-400 after:absolute after:content-[''] after:h-[1px] after:w-[60px] after:bg-[#9FE870] after:bottom-[-12px] after:left-1/2 after:-translate-x-1/2"
48-
: "text-[#818181]"
46+
: "text-muted-foreground"
4947
}`}
5048
>
5149
Funneler
5250
</li>
53-
<li className="cursor-pointer text-[#818181]">
51+
<li className="cursor-pointer text-muted-foreground">
5452
Ekubo-Weaver Badge
5553
</li>
5654
</ul>

‎components/StatsBox.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ export default function StatsBox() {
1212

1313
return (
1414
<div
15-
className={`border-2 border-[#1D1D1D] w-full h-auto my-4 rounded-t-[10px] rounded-b-none px-10 py-5 max-h-[285.38px] flex flex-col items-center justify-center ${
16-
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
17-
}`}
15+
className={`border-2 border-border w-full h-auto my-4 rounded-t-[10px] rounded-b-none px-10 py-5 max-h-[285.38px] flex flex-col items-center justify-center bg-background text-foreground`}
1816
>
1917
<div className="flex flex-col items-center justify-center w-4/5 gap-2">
2018
<span className="flex flex-row justify-center items-end gap-7">
@@ -28,7 +26,7 @@ export default function StatsBox() {
2826
/>
2927
</span>
3028

31-
<div className="border-t border-[#636363] w-full flex justify-between items-center py-2 px-4 text-xs text-[#BDBDBD] font-medium">
29+
<div className="border-t border-border w-full flex justify-between items-center py-2 px-4 text-xs text-muted-foreground font-medium">
3230
<p>
3331
<span className="text-secondary mr-1 font-light">
3432
Balance:
@@ -38,7 +36,7 @@ export default function StatsBox() {
3836

3937
<p>
4038
<span className="text-secondary font-light mr-3">
41-
Rank:{" "}
39+
Rank: {" "}
4240
</span>
4341
<span className="text-secondary font-light">
4442
{rank}/
@@ -49,10 +47,9 @@ export default function StatsBox() {
4947
</div>
5048

5149
<div
52-
className={`metre w-full h-[120px] mt-8 flex flex-col
53-
${theme === "dark" ? "bg-[#1D1D1D]" : "bg-gray-200"}`}
50+
className={`metre w-full h-[120px] mt-8 flex flex-col bg-muted`}
5451
>
55-
<div className="metre-bar w-full relative bg-white h-[13.09px] overflow-hidden">
52+
<div className="metre-bar w-full relative bg-background h-[13.09px] overflow-hidden">
5653
<span
5754
className="absolute top-0 left-0 bg-[#C4FF63] h-full"
5855
style={{
@@ -62,17 +59,16 @@ export default function StatsBox() {
6259
</div>
6360

6461
<div
65-
className={` NFT w-full h-full flex flex-row justify-between
66-
${theme === "dark" ? "bg-[#1D1D1D]" : "bg-white"}`}
62+
className={`NFT w-full h-full flex flex-row justify-between bg-background`}
6763
>
68-
<div className="text flex flex-col justify-center px-5 text-xs border-l border-[#636363] ml-10">
64+
<div className="text flex flex-col justify-center px-5 text-xs border-l border-border ml-10">
6965
<h2 className="font-medium">To mint Tarauntula</h2>
70-
<h3 className="text-[#787272]">
66+
<h3 className="text-muted-foreground">
7167
Complete challenge to mint Tarauntula
7268
</h3>
7369
</div>
7470

75-
<div className="h-full bg-white flex items-center justify-center w-[101.93px]">
71+
<div className="h-full bg-background flex items-center justify-center w-[101.93px]">
7672
<Image
7773
src="/TanglerNFT.svg"
7874
alt="tangler"

0 commit comments

Comments
 (0)