From 40d59f835c11f91f5b409269ef6d40af9bde2973 Mon Sep 17 00:00:00 2001 From: samuel1-ona Date: Thu, 3 Jul 2025 10:42:25 +0100 Subject: [PATCH] feat: add Ui improvement --- app/Analytics-Details/page.tsx | 90 +++-------- app/analytics-overview/page.tsx | 2 +- app/dashboard/page.tsx | 32 ++-- app/globals.css | 2 +- app/task/page.tsx | 16 +- components/Header.tsx | 47 ++---- components/NftContainer.tsx | 14 +- components/StatsBox.tsx | 22 ++- components/analytics/AnalyticsSection.tsx | 34 +---- components/analytics/ItemCard.tsx | 37 ++--- components/analytics/UserNav.tsx | 36 ++--- components/analytics/UserStats.tsx | 70 +++------ .../CampaignProfileInfo.tsx | 141 ++++++------------ .../CampaignProfileTabs.tsx | 14 +- 14 files changed, 184 insertions(+), 373 deletions(-) diff --git a/app/Analytics-Details/page.tsx b/app/Analytics-Details/page.tsx index 901183d..1635e94 100644 --- a/app/Analytics-Details/page.tsx +++ b/app/Analytics-Details/page.tsx @@ -37,105 +37,53 @@ export default function Page() { return ( -
+
- -
{/* Nav buttons */} -
+
-
- {/* Section content */} - -
- -

DAO Voter

- +
+

DAO Voter

- - -
- - -
-
-

Participants

-
-
-

Active

- 543 - +
+
+
+

Participants

+
+
+

Active

+ 543
- - -
-

Inactive

- 543 - +
+

Inactive

+ 543
-
-

May 20 - May 31

+

May 20 - May 31

- - - -
- +
-
- - - - -
- - -
) } \ No newline at end of file diff --git a/app/analytics-overview/page.tsx b/app/analytics-overview/page.tsx index 53b291c..9aac493 100644 --- a/app/analytics-overview/page.tsx +++ b/app/analytics-overview/page.tsx @@ -46,7 +46,7 @@ export default function Page() { return ( -
+
-
-
- - -
- +
+
+ {/* Responsive row for Header and StatsBox */} +
+
+
+
+
+ +
+
+ {/* NftContainer always full width below */} +
- +
); } diff --git a/app/globals.css b/app/globals.css index 608d158..d3f4ba3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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%; diff --git a/app/task/page.tsx b/app/task/page.tsx index 4311d17..c3a364b 100644 --- a/app/task/page.tsx +++ b/app/task/page.tsx @@ -12,32 +12,32 @@ import Header from "@/components/Header"; export default function Tasks() { return ( -
+
} taskName="Telegram" /> } + backgroundColor="bg-[#EDEDED] dark:bg-[#232222]" + icon={} taskName="Twitter" /> } taskName="Discord" /> } + backgroundColor="bg-black dark:bg-white" + icon={} taskName="Github" /> } taskName="Discord" /> diff --git a/components/Header.tsx b/components/Header.tsx index 37d467b..c79c326 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -7,46 +7,31 @@ import { useTheme } from "@/components/ThemeContext"; function Header() { const { theme } = useTheme(); return ( -
+
-
- weaver-logo +
+
+ weaver-logo +
group-img-for-screen1 -

- Lightweight {" "} -
- on-chain identity
- platform +

+ Retention campaign

diff --git a/components/NftContainer.tsx b/components/NftContainer.tsx index 539b481..0fdf837 100644 --- a/components/NftContainer.tsx +++ b/components/NftContainer.tsx @@ -15,17 +15,15 @@ export default function NftContainer() { return (
-
    +
    • 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 @@ -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 @@ -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
      • -
    • +
    • Ekubo-Weaver Badge
    diff --git a/components/StatsBox.tsx b/components/StatsBox.tsx index cf4c907..4b6830b 100644 --- a/components/StatsBox.tsx +++ b/components/StatsBox.tsx @@ -12,9 +12,7 @@ export default function StatsBox() { return (
    @@ -28,7 +26,7 @@ export default function StatsBox() { /> -
    +

    Balance: @@ -38,7 +36,7 @@ export default function StatsBox() {

    - Rank:{" "} + Rank: {" "} {rank}/ @@ -49,10 +47,9 @@ export default function StatsBox() {

    -
    +
    -
    +

    To mint Tarauntula

    -

    +

    Complete challenge to mint Tarauntula

    -
    +
    tangler +
    {/* Nav buttons */} -
    +
    -
    - {/* Section content */}
    {renderDisplayedSection()}
    diff --git a/components/analytics/ItemCard.tsx b/components/analytics/ItemCard.tsx index 0f91c6e..6c66421 100644 --- a/components/analytics/ItemCard.tsx +++ b/components/analytics/ItemCard.tsx @@ -15,37 +15,28 @@ interface ItemcardProp { export default function ItemCard({ data }: ItemcardProp) { return ( -
    -
    -
    -
    - item image - {data.participantCount} - - -
    - icon {data.badgeText} -

    {data.title}

    +
    +
    +
    +
    + item image + {data.participantCount} +
    + icon {data.badgeText} +

    {data.title}

    -
    - -
    -

    {formatDate(data.startTime)}

    -

    to {formatDate(data.endTime)}

    - +
    +
    +

    {formatDate(data.startTime)}

    +

    to {formatDate(data.endTime)}

    - - - + {data.isLive ? "Live" : "Completed"}
    - -
    -
    ) } \ No newline at end of file diff --git a/components/analytics/UserNav.tsx b/components/analytics/UserNav.tsx index 4eb4875..1fd81dc 100644 --- a/components/analytics/UserNav.tsx +++ b/components/analytics/UserNav.tsx @@ -15,36 +15,18 @@ export default function UserNav() { return ( - ) } \ No newline at end of file diff --git a/components/analytics/UserStats.tsx b/components/analytics/UserStats.tsx index 8637d8d..817cded 100644 --- a/components/analytics/UserStats.tsx +++ b/components/analytics/UserStats.tsx @@ -19,73 +19,49 @@ interface UserStatsProps { export default function UserStats({ projectTags, projectDescription, socialLinks }: UserStatsProps) { return ( -
    - -
    - -
    - -
    - user profile image +
    +
    +
    +
    + user profile image
    - - -
    - -
    - -
    -

    Coiton

    - -
    - - +
    +
    +
    +

    Coiton

    +
    + +
    -
    {projectTags.map((tag, index) => ( - {tag} + {tag} ))}
    - -

    {projectDescription}

    - -
    +

    {projectDescription}

    +
    {socialLinks.map((link, index) => ( - + ))} -
    -
    - - -
    - - - -
    +
    + +
    - Followers -

    8,674

    + Followers +

    8,674

    -
    - Token -

    TGE Upcoming

    + Token +

    TGE Upcoming

    -
    -
    -
    - -
    -
    ) } \ No newline at end of file diff --git a/components/dasboard-components/CampaignProfileInfo.tsx b/components/dasboard-components/CampaignProfileInfo.tsx index f4ab6da..4efa976 100644 --- a/components/dasboard-components/CampaignProfileInfo.tsx +++ b/components/dasboard-components/CampaignProfileInfo.tsx @@ -3,102 +3,79 @@ import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; const CampaignProfileInfo = () => { return ( -
    -
    - {/* Profile Picture */} -
    -
    +
    + {/* Avatar and Name */} +
    +
    +
    - - {/*
    */}
    - {/* Profile Actions */} -
    -

    Coiton

    -
    +
    +

    Coiton

    + {/* Tags */} +
    + DAO + NFT + NFT marketplace +
    +
    +
    + {/* Profile Actions and Stats */} +
    +
    + +
    + {/* X Icon Button */}
    - {/* Tags */} -
    - - DAO - - - NFT - - - NFT marketplace - + {/* Stats */} +
    +
    +
    Followers
    +
    8,674
    +
    +
    +
    +
    Token
    +
    TGE Upcoming
    +
    - {/* Bio */} - -

    +

    + {/* Bio and Social Links */} +
    +

    Need a marketplace for your infrastructure? This is the perfect...

    - {/* Social Links */} -
    +
    {
    -
    - {/* Follow Button and Stats */} -
    - -
    -
    -
    Followers
    -
    8,674
    -
    -
    -
    -
    Token
    -
    TGE Upcoming
    -
    -
    -
    -
    ); }; diff --git a/components/dasboard-components/CampaignProfileTabs.tsx b/components/dasboard-components/CampaignProfileTabs.tsx index 79fc389..b3031ab 100644 --- a/components/dasboard-components/CampaignProfileTabs.tsx +++ b/components/dasboard-components/CampaignProfileTabs.tsx @@ -6,31 +6,33 @@ const CampaignProfileTabs = () => { <> {/* Navigation */} - + Home Analytics -
    +
    {[1, 2].map((i) => ( - +
    + +
    ))}
    -
    +
    Analytics content would appear here