Skip to content

fix(finance): dark mode theme for finance page #5382

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
princerajpoot20 merged 4 commits into from
May 13, 2026
Merged

fix(finance): dark mode theme for finance page #5382

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c219f0f
fix(finance): dark mode theme for finance page
sammy200-ui May 7, 2026
b5d6b63
fix(ui): update dark mode text colors for financial summary components
sammy200-ui May 7, 2026
950544d
resolve BarChart hydration mismatch by delaying chart render
sammy200-ui May 7, 2026
358f90d
address CodeRabbit PR reviews
sammy200-ui May 11, 2026
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
6 changes: 3 additions & 3 deletions components/FinancialSummary/AsyncAPISummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AsyncAPISummary() {
<Heading level={HeadingLevel.h2} className='m-3 text-center text-5xl'>
AsyncAPI Financial Summary
</Heading>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal'>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal dark:text-dark-text'>
To help improve the current state of Event-Driven Architectures and their tooling, you can show your support
for the AsyncAPI Initiative by making a financial contribution. We offer three donation options:{' '}
<strong>Open Collective, GitHub Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are
Expand All @@ -39,7 +39,7 @@ export default function AsyncAPISummary() {
Ways to Support Us?
</Heading>
</div>
<div className='max-width my-4 text-center text-base text-darkGunMetal'>
<div className='max-width my-4 text-center text-base text-darkGunMetal dark:text-dark-text'>
<Paragraph typeStyle={ParagraphTypeStyle.sm} className='my-4'>
The easiest way to support AsyncAPI is by becoming a financial sponsor. While{' '}
<br className='hidden lg:inline-block' />
Expand Down Expand Up @@ -69,7 +69,7 @@ export default function AsyncAPISummary() {
</a>
<a href='https://github.com/sponsors/asyncapi' target='_blank'>
<img
className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90'
className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90 dark:invert'
src='/img/logos/github-black.svg'
alt='Github'
/>
Expand Down
80 changes: 43 additions & 37 deletions components/FinancialSummary/BarChartComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default function BarChartComponent() {
const [selectedCategory, setSelectedCategory] = useState<string>('All Categories');
const [selectedMonth, setSelectedMonth] = useState<string>('All Months');
const [windowWidth, setWindowWidth] = useState<number>(0);
const [isMounted, setIsMounted] = useState<boolean>(false);

/*
TODO: Uncomment the block below to enable previous-years data (2023) and "All Years" selection.
Expand Down Expand Up @@ -94,6 +95,7 @@ export default function BarChartComponent() {

// Effect hook to update windowWidth state on resize
useEffect(() => {
setIsMounted(true);
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
Expand Down Expand Up @@ -149,21 +151,23 @@ export default function BarChartComponent() {

return (
<div className='mt-8 flex items-center justify-center sm:px-6 lg:px-8'>
<div className='w-full px-4 text-center lg:w-2/3'>
<div className='w-full px-4 text-center lg:w-2/3 dark:text-dark-text'>
<div className='mb-5'>
<h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold'>
<h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold dark:text-white'>
Budget Analysis
</h1>
<p>Gain insights into the allocation of funds across different categories through our Budget Analysis</p>
<div className='my-4 flex flex-col justify-between md:m-8 md:flex-row md:items-center md:justify-between'>
<div className='my-2'>
<p className='text-center sm:text-left'>Expenses</p>
<p className='mt-1 text-center text-xl font-semibold sm:text-left'>${totalAmount.toFixed(2)}</p>
<p className='mt-1 text-center text-xl font-semibold sm:text-left dark:text-white'>
${totalAmount.toFixed(2)}
</p>
</div>
<div className='space-x-4 md:flex'>
<div className='mx-auto'>
<select
className='m-1 w-full rounded-md border border-gray-600 bg-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
className='m-1 w-full rounded-md border border-gray-600 bg-white dark:bg-dark-card dark:text-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
>
Expand Down Expand Up @@ -206,40 +210,42 @@ export default function BarChartComponent() {
</div>
</div>
</div>
<div className='flex justify-center'>
<BarChart width={barWidth} height={barHeight} data={chartData}>
<CartesianGrid strokeDasharray='3 3' />
<YAxis tickFormatter={(value) => `$${value}`} />
<Tooltip content={<CustomTooltip />} />
<Legend />
<Bar
dataKey='Amount'
fill='#7B5DD3FF'
onClick={(data) => {
const category = data.payload.Category;

// Active behavior: use the static 2024 ExpensesLinkData (code 2)
const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
(obj) => obj.category === category
);

if (matchedLinkObject) {
window.open(matchedLinkObject.link, '_blank');
}

// // --- if previous-years support is enabled: Uncomment code given below
// // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
// // (obj: ExpensesLinkItem) => obj.category === category
// // );
// //
// // if (matchedLinkObject) {
// // window.open(matchedLinkObject.link, '_blank');
// // }
}}
/>
</BarChart>
<div className='flex justify-center dark:text-dark-text'>
{isMounted && (
<BarChart width={barWidth} height={barHeight} data={chartData}>
<CartesianGrid strokeDasharray='3 3' stroke='currentColor' className='opacity-30' />
<YAxis tickFormatter={(value) => `$${value}`} stroke='currentColor' />
<Tooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ color: 'inherit' }} />
<Bar
dataKey='Amount'
fill='#7B5DD3FF'
onClick={(data) => {
const category = data.payload.Category;

// Active behavior: use the static 2024 ExpensesLinkData (code 2)
const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
(obj) => obj.category === category
);

if (matchedLinkObject) {
window.open(matchedLinkObject.link, '_blank');
}
Comment thread
sammy200-ui marked this conversation as resolved.

// // --- if previous-years support is enabled: Uncomment code given below
// // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
// // (obj: ExpensesLinkItem) => obj.category === category
// // );
// //
// // if (matchedLinkObject) {
// // window.open(matchedLinkObject.link, '_blank');
// // }
}}
/>
</BarChart>
)}
</div>
{windowWidth && windowWidth < 900 ? <ExpensesCard /> : null}
{isMounted && windowWidth < 900 ? <ExpensesCard /> : null}
Comment thread
sammy200-ui marked this conversation as resolved.
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion components/FinancialSummary/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function Card({ month, data }: { month: keyof Expenses; data: Exp
}

return (
<div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 p-4 shadow-lg'>
<div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 dark:bg-dark-card dark:text-white p-4 shadow-lg'>
<div className='mb-4 text-lg font-semibold'>{month}</div>
<div className='flex flex-col overflow-auto'>
{data.map((item, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/FinancialSummary/CustomTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default function CustomTooltip({ active, payload }: CustomTooltipProps) {
const data = payload[0].payload;

return (
<div className='bg-opacity-90/90 rounded-md border border-gray-300 bg-white p-2 shadow-md'>
<div className='bg-opacity-90/90 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card p-2 shadow-md'>
<p className='text-14 mb-1 font-bold'>{data.Category}</p>
<p className='text-12 text-gray-900'>${data.Amount.toFixed(2)}</p>
Comment thread
sammy200-ui marked this conversation as resolved.
Outdated
<p>Click the bar to learn more</p>
Expand Down
12 changes: 6 additions & 6 deletions components/FinancialSummary/ExpenseBreakdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import Paragraph from '../typography/Paragraph';
*/
export default function ExpenseBreakdown() {
return (
<div className='bg-[#EFFAFE] px-4 sm:px-6 lg:px-8'>
<div className='bg-[#EFFAFE] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
<div className='mb-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-7 col-start-2 my-12'>
<div className='mx-2'>
<Heading className='m-3 text-center text-base'>Expense Breakdown</Heading>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal'
className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
>
Funds from GitHub Sponsors are directly transferred to our AsyncAPI Open Collective account. We maintain
transparency in all expenses, and the TSC approves anticipated expenses.
Expand All @@ -28,19 +28,19 @@ export default function ExpenseBreakdown() {
{expenseData.map((expense, index) => (
<div
key={index}
className='flex flex-col items-center rounded-md bg-white p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
>
<a href={expense.link} target='_blank' rel='noopener noreferrer'>
<div className='text-darkGunMetal'>
<div className='text-darkGunMetal dark:text-dark-text'>
<div className='flex flex-col items-center'>
<img
src={expense.imageUrl}
alt={expense.title}
className='m-1 h-auto w-1/5 rounded-md object-cover'
/>
<h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal'>{expense.title}</h2>
<h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal dark:text-white'>{expense.title}</h2>
Comment thread
sammy200-ui marked this conversation as resolved.
Outdated
</div>
<p className='text-center text-base text-darkGunMetal'>{expense.description}</p>
<p className='text-center text-base text-darkGunMetal dark:text-dark-text'>{expense.description}</p>
</div>
</a>
</div>
Expand Down
10 changes: 5 additions & 5 deletions components/FinancialSummary/OtherFormsComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,25 @@ import Paragraph from '../typography/Paragraph';
*/
export default function OtherFormsComponent() {
return (
<div className='bg-[#F5F5F5] px-4 sm:px-6 lg:px-8'>
<div className='bg-[#F5F5F5] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
<div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-7 col-start-2 my-12'>
<div className='mx-2'>
<Heading className='mx-3 mb-5 mt-10 text-center text-base'>Other Forms Of Financial Support</Heading>
<Paragraph
typeStyle={ParagraphTypeStyle.md}
className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal'
className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
>
You can also support AsyncAPI initiative by getting<br className='hidden lg:inline-block'></br> involved
through employment, providing services and<br className='hidden lg:inline-block'></br> organizing events
</Paragraph>
</div>
<div className='mx-3 mt-8 grid grid-cols-1 gap-10 md:grid-cols-3'>
{otherFormsData.map((form, index) => (
<div key={index} className='flex flex-col items-center rounded-md bg-white p-4 text-center shadow-md'>
<div key={index} className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 text-center shadow-md'>
Comment thread
sammy200-ui marked this conversation as resolved.
Outdated
<img src={form.imageUrl} alt={form.title} className='m-2 h-auto w-1/3 object-cover' />
<h2 className='my-2 text-2xl font-semibold'>{form.title}</h2>
<p className='mx-2 mt-1 text-base text-darkGunMetal'>{form.description}</p>
<h2 className='my-2 text-2xl font-semibold text-gray-900 dark:text-white'>{form.title}</h2>
<p className='mx-2 mt-1 text-base text-darkGunMetal dark:text-dark-text'>{form.description}</p>
</div>
))}
</div>
Expand Down
10 changes: 5 additions & 5 deletions components/FinancialSummary/SponsorshipTiers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import Paragraph from '../typography/Paragraph';
*/
export default function SponsorshipTiers() {
return (
<div className='mt-16 grid bg-purple-100 px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
<div className='mt-16 grid bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
<div className='col-span-7 col-start-2 my-12'>
<div id='sponsorship' className='mx-2'>
<Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} className='my-3 text-base'>
Sponsorship Tiers
</Heading>

<Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal'>
<Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal dark:text-dark-text'>
Comment thread
sammy200-ui marked this conversation as resolved.
Outdated
AsyncAPI offers various sponsorship tiers, each with its own set <br className='hidden lg:inline-block' />
of benefits and privileges. These tiers include Bronze, Silver,
<br className='hidden lg:inline-block' />
Expand All @@ -41,13 +41,13 @@ export default function SponsorshipTiers() {
<tbody className='font-normal text-sm'>
{sponsorshipTiers.map((tier, index) => (
<tr key={index}>
<td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
<td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
{tier.tier}
</td>
<td className='border border-gray-500 p-2 text-darkGunMetal md:px-10 md:py-2 md:text-base'>
<td className='border border-gray-500 p-2 text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
{tier.amount}
</td>
<td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
<td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
{tier.benefits}
</td>
</tr>
Expand Down
10 changes: 5 additions & 5 deletions components/FinancialSummary/SuccessStories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ import { successStories } from '../data/successStoriesData';
*/
export default function SuccessStories() {
return (
<div className='bg-purple-100 px-4 sm:px-6 lg:px-8'>
<div className='bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:px-8'>
<div className='my-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
<div className='col-span-7 col-start-2 my-12'>
<div className='mx-2'>
<h1 id='success-stories' className='m-3 text-center text-4xl font-bold'>
<h1 id='success-stories' className='m-3 text-center text-4xl font-bold text-gray-900 dark:text-white'>
Success Stories
</h1>
<p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal'>
<p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal dark:text-dark-text'>
Thanks to financial support we can already see many
<br className='hidden lg:inline-block' /> success stories in the project.
</p>
</div>
<div className='mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
{successStories.map((story, index) => (
<div key={index} className='m-4 p-2'>
<h1 className='mb-2 text-2xl font-semibold'>{story.title}</h1>
<p className='text-base text-darkGunMetal'>{story.description}</p>
<h1 className='mb-2 text-2xl font-semibold text-gray-900 dark:text-white'>{story.title}</h1>
<p className='text-base text-darkGunMetal dark:text-dark-text'>{story.description}</p>
</div>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion pages/finance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,5 @@ export default function FinancialSummary() {

const shouldUseContainer = windowWidth > 1700;

return <div>{shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}</div>;
return <div className='dark:bg-dark-background'>{shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}</div>;
Comment thread
sammy200-ui marked this conversation as resolved.
Outdated
}
Loading