Skip to content

feat: add Ui improvement #67

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

Merged
Samuel1-ona merged 1 commit into from
Jul 3, 2025
Merged

feat: add Ui improvement #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
90 changes: 19 additions & 71 deletions app/Analytics-Details/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,105 +37,53 @@ export default function Page() {


return (
<div className="bg-[#111111] pb-10 font-satoshi " >
<div className="min-h-screen bg-background text-foreground pb-10 font-satoshi">
<UserNav />
<UserStats
projectTags={projectTags}
projectDescription={projectDescription}
socialLinks={socialLinks}
/>


<section className="w-full max-w-[1400px] mx-auto mt-[50px] px-4 md:px-0 ">
{/* Nav buttons */}
<div className="w-full flex items-center gap-10 border-b-[2px] border-[#988C8C4F] pb-2">
<div className="w-full flex items-center gap-10 border-b-2 border-border pb-2">
<button
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}
`}
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`}
>
Home
</button>

<button
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
`}
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`}
>
Analytics
</button>
</div>

{/* Section content */}

<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%] " >

<h1 className="font-bold text-2xl md:text-[32px] text-[#ffffff] " >DAO Voter</h1>

<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%]">
<h1 className="font-bold text-2xl md:text-[32px] text-foreground">DAO Voter</h1>
</div>


<div className="w-full flex flex-col md:flex-row gap-10 justify-between items-start mt-[70px] " >


<div className="w-full md:max-w-[190px] flex-col items-center md:items-start gap-5 " >
<div className="flex flex-col items-center md:items-start gap-8 ">
<h2 className="text-[#FFFFFF] text-2xl md:text-[32px] font-medium " >Participants</h2>
<div className="flex items-center gap-4" >
<div className="w-[85px] h-[85px] flex flex-col items-start justify-center gap-2 " >
<p className=" font-normal text-lg text-[#EBFFCB] " >Active</p>
<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>

<div className="w-full flex flex-col md:flex-row gap-10 justify-between items-start mt-[70px]">
<div className="w-full md:max-w-[190px] flex-col items-center md:items-start gap-5">
<div className="flex flex-col items-center md:items-start gap-8">
<h2 className="text-foreground text-2xl md:text-[32px] font-medium">Participants</h2>
<div className="flex items-center gap-4">
<div className="w-[85px] h-[85px] flex flex-col items-start justify-center gap-2">
<p className="font-normal text-lg text-[#EBFFCB]">Active</p>
<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>
</div>


<div className="w-[85px] h-[85px] flex flex-col items-center justify-center gap-2 " >
<p className=" font-normal text-lg text-[#988C8C] " >Inactive</p>
<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>

<div className="w-[85px] h-[85px] flex flex-col items-center justify-center gap-2">
<p className="font-normal text-lg text-[#988C8C]">Inactive</p>
<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>
</div>
</div>

</div>
<p className="text-[#E0FFB0] font-normal text-2xl mt-[14px] text-center md:text-left " >May 20 - May 31</p>
<p className="text-[#E0FFB0] font-normal text-2xl mt-[14px] text-center md:text-left">May 20 - May 31</p>
</div>



<div className="w-full max-w-[868px] " >

<div className="w-full max-w-[868px]">
<AnalyticsChart/>
</div>

</div>





</section>



</div>
)
}
2 changes: 1 addition & 1 deletion app/analytics-overview/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function Page() {


return (
<div className="bg-[#111111] pb-5 font-satoshi " >
<div className="min-h-screen bg-background text-foreground pb-5 font-satoshi">
<UserNav />
<UserStats
projectTags={projectTags}
Expand Down
32 changes: 18 additions & 14 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,26 @@ import ConnectButton from "@/components/ConnectButton";
export default function Dashboard() {
const { theme } = useTheme();
return (
<>
<div
className={`font-satoshi w-full min-h-screen flex flex-col items-center justify-start border-[#636363] md:py-20 py-10 px-2 ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<div className="max-w-[652px] md:w-full flex flex-col items-center justify-start gap-10">

<ConnectButton/>
<Header />
<StatsBox />
<div
className={
`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`
}
>
<div className="w-full max-w-5xl flex flex-col md:gap-12 gap-8 items-center justify-start">
{/* Responsive row for Header and StatsBox */}
<div className="w-full flex flex-col md:flex-row md:items-start md:justify-between gap-8 md:gap-12">
<div className="w-full md:w-1/2 flex justify-center md:justify-start">
<Header />
</div>
<div className="w-full md:w-1/2 flex justify-center md:justify-end mt-6 md:mt-0">
<StatsBox />
</div>
</div>
{/* NftContainer always full width below */}
<div className="w-full">
<NftContainer />
</div>
</div>
</>
</div>
);
}
2 changes: 1 addition & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ body {
--radius: 0.5rem;
}

.dark {
.dark, [data-theme="dark"] {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
Expand Down
16 changes: 8 additions & 8 deletions app/task/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,32 @@ import Header from "@/components/Header";

export default function Tasks() {
return (
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start dark:bg-[#0D0D0D] dark:text-white py-20">
<div className="font-satoshi w-full min-h-screen flex flex-col items-center justify-start bg-background text-foreground py-20">
<div className="max-w-[652px] w-full flex flex-col items-center justify-start gap-10 ">
<Header />
<TaskStats />
<TaskBox
backgroundColor="bg-[#33BEF0]"
backgroundColor="bg-[#33BEF0] dark:bg-[#1e293b]"
icon={<FaTelegramPlane size={30} />}
taskName="Telegram"
/>
<TaskBox
backgroundColor="bg-[#EDEDED]"
icon={<FaXTwitter size={30} className="text-black" />}
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
icon={<FaXTwitter size={30} className="text-black dark:text-white" />}
taskName="Twitter"
/>
<TaskBox
backgroundColor="bg-[#EDEDED]"
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
icon={<FaDiscord size={30} className="text-[#8C9EFF]" />}
taskName="Discord"
/>
<TaskBox
backgroundColor="bg-black"
icon={<FiGithub size={30} className="text-white" />}
backgroundColor="bg-black dark:bg-white"
icon={<FiGithub size={30} className="text-white dark:text-black" />}
taskName="Github"
/>
<TaskBox
backgroundColor="bg-[#EDEDED]"
backgroundColor="bg-[#EDEDED] dark:bg-[#232222]"
icon={<FaDiscord size={30} className="text-[#8C9EFF]" />}
taskName="Discord"
/>
Expand Down
47 changes: 16 additions & 31 deletions components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,31 @@ import { useTheme } from "@/components/ThemeContext";
function Header() {
const { theme } = useTheme();
return (
<div>
<div className="w-full flex flex-col items-center justify-center">
<div
className={`max-w-[652px] w-full flex flex-col items-center justify-start gap-5 bg-background ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
className="w-full flex flex-col items-center justify-center gap-5 bg-background text-foreground"
>
<div
className={`flex flex-col items-center justify-center gap-7 max-w-[390.17px] max-h-[150px] ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
>
<Image
src="/weaver.svg"
alt="weaver-logo"
height={100}
width={100}
/>
<div className="w-full flex flex-col items-center justify-center gap-7">
<div className="w-full flex justify-center items-center">
<Image
src="/weaver.svg"
alt="weaver-logo"
height={100}
width={100}
/>
</div>
<div
className={`flex flex-row items-center justify-between w-full gap-3 bg-background ${
theme === "dark"
? "bg-black text-white"
: "bg-white text-black"
}`}
className="flex flex-col items-center justify-center w-full gap-3 bg-background text-foreground"
>
<Image
src="/first-group-image.svg"
alt="group-img-for-screen1"
height={128}
width={280}
className="w-[210px] h-[85px] "
width={210}
className="w-[210px] h-[85px] mx-auto"
/>
<p className="text-xl">
<span className="font-light"> Lightweight </span>{" "}
<br />
on-chain identity <br />
platform
<p className="text-xl text-center font-semibold">
Retention campaign
</p>
</div>
</div>
Expand Down
14 changes: 6 additions & 8 deletions components/NftContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,15 @@ export default function NftContainer() {

return (
<div
className={`w-full ${
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
}`}
className={`w-full bg-background text-foreground`}
>
<ul className="flex flex-row items-center gap-8 py-3 border-b border-[#1D1D1D] dark:text-white">
<ul className="flex flex-row items-center gap-8 py-3 border-b border-border">
<li
onClick={() => toggleCurrentNft("TanglerData")}
className={`cursor-pointer relative ${
currentNFt === "TanglerData"
? "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"
: "text-[#818181]"
: "text-muted-foreground"
}`}
>
Tangler
Expand All @@ -35,7 +33,7 @@ export default function NftContainer() {
className={`cursor-pointer relative ${
currentNFt === "OrbiterData"
? "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"
: "text-[#818181]"
: "text-muted-foreground"
}`}
>
Orbiter
Expand All @@ -45,12 +43,12 @@ export default function NftContainer() {
className={`cursor-pointer relative ${
currentNFt === "FunnelerData"
? "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"
: "text-[#818181]"
: "text-muted-foreground"
}`}
>
Funneler
</li>
<li className="cursor-pointer text-[#818181]">
<li className="cursor-pointer text-muted-foreground">
Ekubo-Weaver Badge
</li>
</ul>
Expand Down
22 changes: 9 additions & 13 deletions components/StatsBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ export default function StatsBox() {

return (
<div
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 ${
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
}`}
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`}
>
<div className="flex flex-col items-center justify-center w-4/5 gap-2">
<span className="flex flex-row justify-center items-end gap-7">
Expand All @@ -28,7 +26,7 @@ export default function StatsBox() {
/>
</span>

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

<p>
<span className="text-secondary font-light mr-3">
Rank:{" "}
Rank: {" "}
</span>
<span className="text-secondary font-light">
{rank}/
Expand All @@ -49,10 +47,9 @@ export default function StatsBox() {
</div>

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

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

<div className="h-full bg-white flex items-center justify-center w-[101.93px]">
<div className="h-full bg-background flex items-center justify-center w-[101.93px]">
<Image
src="/TanglerNFT.svg"
alt="tangler"
Expand Down
Loading
Loading