From 9e937dd64ebd0b6cb00d45e8b3c2735953aeb5fb Mon Sep 17 00:00:00 2001 From: Sachin Singh <152975718+sachinggsingh@users.noreply.github.com> Date: Mon, 27 Apr 2026 23:25:09 +0530 Subject: [PATCH] fix: redesigning the community home card using colors similar to the website (#1313) --- src/pages/dashboard/dashboard.css | 90 +++++++++++++++++--------- src/pages/dashboard/giveaway/index.tsx | 16 ++--- src/pages/dashboard/index.tsx | 58 ++--------------- 3 files changed, 71 insertions(+), 93 deletions(-) diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index 73854fbe..a2102a49 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -1,8 +1,15 @@ /* Dashboard Layout Styles */ .dashboard-layout { + --dashboard-accent: #8b5cf6; + --dashboard-accent-dark: #7c3aed; + --dashboard-accent-soft: rgba(139, 92, 246, 0.14); + --dashboard-accent-softer: rgba(139, 92, 246, 0.08); display: flex; min-height: 100vh; - background: var(--ifm-background-color); + background: + radial-gradient(circle at 10% 0%, var(--dashboard-accent-softer), transparent 42%), + radial-gradient(circle at 90% 100%, rgba(102, 126, 234, 0.08), transparent 40%), + var(--ifm-background-color); position: relative; } @@ -13,7 +20,7 @@ top: 70px; left: 20px; z-index: 100; - background: var(--ifm-color-primary); + background: var(--dashboard-accent); color: white; border: none; border-radius: 8px; @@ -27,7 +34,7 @@ } .dashboard-menu-btn:hover { - background: var(--ifm-color-primary-dark); + background: var(--dashboard-accent-dark); transform: scale(1.05); } @@ -127,9 +134,9 @@ } .menu-item.active { - background: var(--ifm-color-primary-lightest); - color: #fdfffe; - border-right: 3px solid var(--ifm-color-primary); + background: var(--dashboard-accent-soft); + color: var(--dashboard-accent); + border-right: 3px solid var(--dashboard-accent); } .menu-icon { @@ -141,7 +148,11 @@ /* Sidebar Styles */ .dashboard-sidebar { width: 280px; - background: var(--ifm-background-color); + background: color-mix( + in srgb, + var(--ifm-background-color) 97%, + #8b5cf6 3% + ); border-right: 1px solid var(--ifm-color-emphasis-200); padding: 20px; flex-shrink: 0; @@ -149,6 +160,7 @@ top: 0; height: 100vh; overflow-y: auto; + backdrop-filter: blur(6px); } .sidebar-header { @@ -198,8 +210,8 @@ } .navbar-icon-item.active { - background: var(--ifm-color-primary-lightest); - color: white; + background: var(--dashboard-accent-soft); + color: var(--dashboard-accent); font-weight: 600; } @@ -210,7 +222,7 @@ top: 0; bottom: 0; width: 3px; - background: var(--ifm-color-primary); + background: var(--dashboard-accent); border-radius: 0 2px 2px 0; } @@ -237,6 +249,11 @@ .dashboard-home-container { max-width: 1200px; margin: 0 auto; + background: color-mix(in srgb, var(--ifm-background-surface-color) 88%, transparent); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 24px; + padding: 2.25rem; + box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); } .dashboard-main-title { @@ -245,6 +262,12 @@ margin-bottom: 16px; color: var(--ifm-color-content); text-align: center; + line-height: 1.2; +} + +.highlight { + color: inherit; + font-weight: inherit; } .dashboard-description { @@ -295,17 +318,13 @@ left: 0; right: 0; height: 4px; - background: linear-gradient( - 90deg, - var(--ifm-color-primary), - var(--ifm-color-primary-light) - ); + background: linear-gradient(90deg, #8b5cf6, #667eea); } .dashboard-stat-card:hover { transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); - border-color: var(--ifm-color-primary-lightest); + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); + border-color: rgba(139, 92, 246, 0.35); } .dashboard-stat-icon { @@ -314,8 +333,8 @@ justify-content: center; width: 64px; height: 64px; - background: var(--ifm-color-primary-lightest); - color: var(--ifm-color-primary); + background: rgba(139, 92, 246, 0.12); + color: var(--dashboard-accent); border-radius: 16px; margin-bottom: 16px; font-size: 24px; @@ -418,13 +437,13 @@ .tab-button:hover { background: var(--ifm-color-emphasis-100); - border-color: var(--ifm-color-primary-lightest); + border-color: rgba(139, 92, 246, 0.35); } .tab-button.active { - background: var(--ifm-color-primary); - color: white; - border-color: var(--ifm-color-primary); + background: linear-gradient(135deg, #8b5cf6, #7c3aed); + color: #ffffff; + border-color: #8b5cf6; } .search-and-sort { @@ -474,8 +493,8 @@ .new-discussion-btn { padding: 12px 20px; - background: var(--ifm-color-primary); - color: white; + background: linear-gradient(135deg, #8b5cf6, #7c3aed); + color: #ffffff; border: none; border-radius: 8px; cursor: pointer; @@ -484,7 +503,7 @@ } .new-discussion-btn:hover { - background: var(--ifm-color-primary-dark); + background: #6d28d9; transform: translateY(-1px); } @@ -535,8 +554,8 @@ } .category-sidebar li.active { - background: var(--ifm-color-primary-lightest); - color: #ffffff; + background: var(--dashboard-accent-soft); + color: var(--dashboard-accent); font-weight: 600; } @@ -605,6 +624,11 @@ padding: 80px 20px 40px; } + .dashboard-home-container { + border-radius: 18px; + padding: 1.5rem; + } + .dashboard-main-title { font-size: 2rem; } @@ -704,15 +728,21 @@ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } +[data-theme="dark"] .dashboard-home-container { + background: color-mix(in srgb, var(--ifm-background-surface-color) 92%, transparent); + border-color: var(--ifm-color-emphasis-300); + box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); +} + [data-theme="dark"] .dashboard-stat-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dashboard-stat-icon { - background: rgba(99, 102, 241, 0.2); + background: rgba(139, 92, 246, 0.22); } [data-theme="dark"] .loading-spinner { border-color: var(--ifm-color-emphasis-300); - border-top-color: var(--ifm-color-primary); + border-top-color: var(--dashboard-accent); } diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx index 11974bd5..a53a7a3c 100644 --- a/src/pages/dashboard/giveaway/index.tsx +++ b/src/pages/dashboard/giveaway/index.tsx @@ -13,10 +13,6 @@ import { Crown, Star, Award, - Clock, - Users, - TrendingUp, - Medal, ArrowLeft, } from "lucide-react"; import "../dashboard.css"; @@ -297,7 +293,7 @@ const giveawayStyles = ` display: block; font-size: 1.5rem; font-weight: 700; - color: var(--ifm-color-primary); + color: var(--ifm-color-emphasis-900); } .giveaway-leaderboard-card.rank-1 .stat-value, @@ -420,7 +416,7 @@ const giveawayStyles = ` font-size: 2.5rem; font-weight: 800; margin-bottom: inherit; - color: var(--ifm-color-primary); + color: var(--ifm-color-emphasis-900); min-height: 60px; display: flex; align-items: center; @@ -563,10 +559,9 @@ const GiveawayPage: React.FC = () => { const StatCard: React.FC<{ icon: string; title: string; - value: number; valueText: string; description: string; - }> = ({ icon, title, value, valueText, description }) => ( + }> = ({ icon, title, valueText, description }) => ( { transition={{ duration: 0.6 }} viewport={{ once: true }} > -
+
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index bf06f244..8e5d3869 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -23,11 +23,8 @@ import { Search, TrendingUp, Home, - Trophy, Users, Gift, - Calendar, - BarChart3, ArrowLeft, GitFork, } from "lucide-react"; @@ -46,13 +43,6 @@ type Category = | "show-and-tell" | "general"; -interface DashboardStats { - totalContributors: number; - totalRepositories: number; - totalStars: number; - totalForks: number; -} - const categories: Category[] = [ "all", "announcements", @@ -295,42 +285,18 @@ const DashboardContent: React.FC = () => { }; const { - githubStarCount, - githubContributorsCount, - githubForksCount, - githubReposCount, + githubStarCountText, + githubContributorsCountText, + githubForksCountText, loading, - error, } = useCommunityStatsContext(); - const [dashboardStats, setDashboardStats] = useState({ - totalContributors: 0, - totalRepositories: 0, - totalStars: 0, - totalForks: 0, - }); - - useEffect(() => { - setDashboardStats({ - totalContributors: githubContributorsCount, - totalRepositories: githubReposCount, - totalStars: githubStarCount, - totalForks: githubForksCount, - }); - }, [ - githubContributorsCount, - githubReposCount, - githubStarCount, - githubForksCount, - ]); - const StatCard: React.FC<{ icon: React.ReactNode; title: string; - value: number; valueText: string; description: string; - }> = ({ icon, title, value, valueText, description }) => ( + }> = ({ icon, title, valueText, description }) => ( { } title="Total Stars" - value={dashboardStats.totalStars} - valueText={ - useCommunityStatsContext().githubStarCountText || "937" - } + valueText={githubStarCountText || "937"} description="Stars across all our public repositories" /> } title="Contributors" - value={dashboardStats.totalContributors} - valueText={ - useCommunityStatsContext().githubContributorsCountText || - "444" - } + valueText={githubContributorsCountText || "444"} description="Amazing community members" /> } title="Forks" - value={dashboardStats.totalForks} - valueText={ - useCommunityStatsContext().githubForksCountText || "1.03K" - } + valueText={githubForksCountText || "1.03K"} description="Community contributions" />