Skip to content
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

Jump to bottom

feat: added dark mode #2647

Closed
wants to merge 17 commits into from
Closed

feat: added dark mode #2647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6a3f802
dark mode toggle button added
vishvamsinh28 Feb 6, 2024
ed22b4e
added darkmode class
vishvamsinh28 Feb 7, 2024
107c82a
navbar issue fixed
vishvamsinh28 Feb 9, 2024
ab007a5
navbar updates
vishvamsinh28 Feb 9, 2024
cc1474b
home page updates
vishvamsinh28 Feb 9, 2024
2b7c4c3
community page updates
vishvamsinh28 Feb 10, 2024
1c1a5c8
finance page updated
vishvamsinh28 Feb 10, 2024
2a3d0e4
blog page updated
vishvamsinh28 Feb 10, 2024
e3bc5f2
design updates
vishvamsinh28 Feb 10, 2024
48485cf
tools design updates
vishvamsinh28 Feb 10, 2024
551e11f
adoptors design
vishvamsinh28 Feb 10, 2024
652a17d
design updates
vishvamsinh28 Feb 10, 2024
74f0a6b
community dashboard updates
vishvamsinh28 Feb 10, 2024
39b163c
newsroom update
vishvamsinh28 Feb 10, 2024
7969cda
blog updates
vishvamsinh28 Feb 10, 2024
acdd229
markdown updates
vishvamsinh28 Feb 11, 2024
0679635
added button for mobile view
vishvamsinh28 Feb 11, 2024
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
2 changes: 1 addition & 1 deletion components/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
const eventsExist = eventsData.length > 0;
return (
<div
className={`rounded-md border border-gray-200 overflow-hidden bg-white p-4`}
className={`rounded-md border border-gray-200 overflow-hidden dark:bg-slate-700 bg-white p-4`}
>
<Heading level="h2" typeStyle="heading-md-semibold">
{t("calendar.title")}
Expand Down
4 changes: 2 additions & 2 deletions components/CaseStudyCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ export default function CaseStudyCard({
<div className="pt-10 flex flex-wrap lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center">
{studies.map((study, index) => (
<a key={index} href={`casestudies/${study.id}`}>
<div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4 max-w-sm" data-testid="CaseStudyCard-main">
<div className="rounded-md border border-gray-200 dark:border-slate-700 overflow-hidden dark:bg-slate-700 bg-white p-4 max-w-sm" data-testid="CaseStudyCard-main">
<span className="mr-2">
<img
className="m-auto h-16"
src={study.company.logo}
alt={study.company.name}
/>
</span>
<Paragraph typeStyle="body-md" className="my-4">
<Paragraph typeStyle="body-md" className="my-4 dark:text-gray-400">
{ study.company.description }
</Paragraph>
</div>
Expand Down
23 changes: 23 additions & 0 deletions components/DarkModeToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useTheme } from 'next-themes';
import Image from 'next/image';
import { useState, useEffect } from 'react';

const DarkModeToggle = () => {
const { theme, setTheme } = useTheme();

const toggleDarkMode = () => {
setTheme(theme === 'dark' ? 'light' : 'dark');
};

return (
<button onClick={toggleDarkMode} className="dark-mode-toggle">
{theme !== 'dark' ? (
<Image src="/img/illustrations/moon.webp" alt="Light Mode" width={27} height={27} />
) : (
<Image src="/img/illustrations/sun.webp" alt="Dark Mode" width={27} height={27} />
)}
</button>
);
};

export default DarkModeToggle;
4 changes: 2 additions & 2 deletions components/FinancialSummary/AsyncAPISummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AsyncAPISummary() {
<Heading level="h2" className="text-5xl text-center my-3 mx-3">
AsyncAPI Financial Summary
</Heading>
<Paragraph typeStyle="body-md" className="my-1 max-w-4xl text-darkGunMetal">
<Paragraph typeStyle="body-md" className="my-1 dark:text-gray-600 max-w-4xl text-darkGunMetal">
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 managed through Open Collective and GitHub Sponsors,
Expand All @@ -31,7 +31,7 @@ export default function AsyncAPISummary() {
</Heading>
</div>
<div className="text-center my-4 text-base max-width text-darkGunMetal">
<Paragraph typeStyle="body-sm" className="my-4">
<Paragraph typeStyle="body-sm" className="my-4 dark:text-gray-600">
The easiest way to support AsyncAPI is by becoming a financial sponsor. While <br className="hidden lg:inline-block" />there are alternative options,
they may involve greater effort. Contribute <br className="hidden lg:inline-block" />monetarily using the following channels.
</Paragraph>
Expand Down
6 changes: 3 additions & 3 deletions components/FinancialSummary/BarChartComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const CustomTooltip = ({ active, payload }) => {
if (active && payload && payload.length) {
const data = payload[0].payload;
return (
<div className="bg-opacity-90 bg-white border border-gray-300 p-2 shadow-md rounded-md">
<div className="bg-opacity-90 bg-white dark:bg-gray-700 border border-gray-300 p-2 shadow-md rounded-md">
<p className="text-14 font-bold mb-1">{data.Category}</p>
<p className="text-12 text-gray-900">${data.Amount.toFixed(2)}</p>
<p className="text-12 text-gray-900 dark:text-gray-300">${data.Amount.toFixed(2)}</p>
<p>Click the bar to learn more</p>
</div>
);
Expand Down Expand Up @@ -46,7 +46,7 @@ const categories = getUniqueCategories();

const Card = ({ month, data, links }) => {
return (
<div className="bg-slate-100 shadow-lg rounded-lg p-4 flex flex-col h-56 overflow-hidden">
<div className="bg-slate-100 dark:bg-slate-700 shadow-lg rounded-lg p-4 flex flex-col h-56 overflow-hidden">
<div className="text-lg font-semibold mb-4">{month}</div>
<div className="flex flex-col overflow-x-auto overflow-y-auto">
{data.map((item, index) => (
Expand Down
2 changes: 1 addition & 1 deletion components/FinancialSummary/ContactUs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function ContactUs() {
<Heading level="h1" typeStyle="heading-lg">Interested in getting in touch?</Heading>
<Paragraph typeStyle="body-md" className="my-2 max-w-4xl">
Feel free to contact us if you need more explanation. We are happy to hop on a call and help with
onboarding to the project as a sponsor. Write email to <span><TextLink className="text-violet text-base font-semibold" href="mailto:[email protected]" target='_blank'>[email protected]</TextLink></span>
onboarding to the project as a sponsor. Write email to <span><TextLink className="text-violet text-base dark:hover:text-white font-semibold" href="mailto:[email protected]" target='_blank'>[email protected]</TextLink></span>
</Paragraph>
</div>
</div>
Expand Down
40 changes: 20 additions & 20 deletions components/FinancialSummary/ExpenseBreakdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,78 @@ import Paragraph from '../typography/Paragraph'

export default function ExpenseBreakdown() {
return (
<div className="px-4 sm:px-6 lg:px-8 bg-[#EFFAFE]">
<div className="px-4 sm:px-6 lg:px-8 dark:bg-slate-700 bg-[#EFFAFE]">
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center mb-16">
<div className="col-start-2 col-span-7 my-12">
<div className="mx-2">
<Heading className="my-3 mx-3 text-center text-base">
Expense Breakdown
</Heading>
<Paragraph typeStyle="body-md" className="my-3 max-w-4xl mx-auto text-center text-darkGunMetal">
<Paragraph typeStyle="body-md" className="my-3 dark:text-gray-400 max-w-4xl mx-auto text-center text-darkGunMetal">
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.
</Paragraph>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/MentorshipProgram.webp" alt="Mentorship Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Mentorship Program</h2>
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal dark:text-white">Mentorship Program</h2>
</div>
<p className="text-base text-center text-darkGunMetal">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">Our AsyncAPI Mentorship program offers paid guidance to develop valuable features, investing in tools and motivated individuals for community benefit.</p>
</div>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/BountyProgram.webp" alt="Bounty Program" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Bounty Program</h2>
<h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal dark:text-white">Bounty Program</h2>
</div>
<p className="text-base text-center text-darkGunMetal">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">Rewarding contributors regardless of affiliation or volunteer status. Free mentoring and support for newcomers to build portfolios and unlock tech prospects.</p>
</div>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/Events.webp" alt="Events" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal">Events</h2>
<h2 className="text-2xl text-center font-semibold my-2 text-darkGunMetal dark:text-white">Events</h2>
</div>
<p className="text-base text-center text-darkGunMetal">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">Supporting AsyncAPI conferences incurs costs for services and travel arrangements. Your contributions facilitate event hosting and community growth.</p>
</div>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/SwagStore.webp" alt="Swag Store" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Swag Store</h2>
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal dark:text-white">Swag Store</h2>
</div>
<p className="text-base text-center text-darkGunMetal">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">Creating a swag store for seamless distribution to contributors, mentees, ambassadors, and community members. Store profits can fund complimentary swag expenses.</p>
</div>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/Hiring.webp" alt="Hiring" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Hiring</h2>
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal dark:text-white">Hiring</h2>
</div>
<p className="text-base text-center text-darkGunMetal">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joined us as a community manager, with plans to expand our team.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">To support our community, we require full time commitment. Open Collective helps us hire for AsyncAPI. <a style={{ textDecoration: "underline" }} href="https://www.linkedin.com/in/v-thulisile-sibanda/" target='_blank'>Thulie</a> joined us as a community manager, with plans to expand our team.</p>
</div>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center">
<div className="bg-white dark:bg-slate-800 rounded-md shadow-md p-4 flex flex-col items-center">
<div className="text-darkGunMetal">
<div className="flex flex-col items-center">
<img src="/img/illustrations/Services.webp" alt="Services" className="w-1/5 h-auto object-cover rounded-md m-1" />
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal">Services</h2>
<h2 className="text-2xl font-semibold my-2 text-center text-darkGunMetal dark:text-white">Services</h2>
</div>
<p className="text-base text-center text-darkGunMetal">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
<p className="text-base text-center text-darkGunMetal dark:text-gray-600">Occasionally, we must pay for services such as Zoom or Descript, as they are not available through specific Open Source support programs.</p>
</div>
</div>

Expand Down
16 changes: 8 additions & 8 deletions components/FinancialSummary/OtherFormsComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,38 @@ import Paragraph from '../typography/Paragraph'

export default function OtherFormsComponent() {
return (
<div className="px-4 sm:px-6 lg:px-8 bg-[#F5F5F5]">
<div className="px-4 sm:px-6 lg:px-8 dark:bg-slate-800 bg-[#F5F5F5]">
<div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
<div className="col-start-2 col-span-7 my-12">
<div className="mx-2">
<Heading className="mt-10 mb-5 mx-3 text-center text-base">
Other Forms Of Financial Support
</Heading>
<Paragraph typeStyle="body-md" className="mb-3 max-w-4xl mx-auto text-center text-darkGunMetal">
<Paragraph typeStyle="body-md" className="mb-3 max-w-4xl mx-auto text-center dark:text-gray-400 text-darkGunMetal">
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="grid grid-cols-1 md:grid-cols-3 gap-10 mt-8 mx-3">
<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center text-center">
<div className="bg-white dark:bg-slate-700 rounded-md shadow-md p-4 flex flex-col items-center text-center">
<img src="/img/illustrations/EmployeeInvolvement.webp" alt="Employee involvement" className="w-1/3 h-auto object-cover m-2" />
<h2 className="text-2xl font-semibold my-2">Employee involvement</h2>
<p className="text-base text-darkGunMetal mt-1 mx-2">
<p className="text-base text-darkGunMetal dark:text-gray-600 mt-1 mx-2">
Assign your employees to contribute to projects under the AsyncAPI Initiative on a regular basis, and we'll welcome them as new maintainers.
</p>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center text-center">
<div className="bg-white dark:bg-slate-700 rounded-md shadow-md p-4 flex flex-col items-center text-center">
<img src="/img/illustrations/ServiceProvision.webp" alt="Service provision" className="w-1/3 h-auto object-cover m-2" />
<h2 className="text-2xl font-semibold my-2">Service provision</h2>
<p className="text-base text-darkGunMetal mt-1 mx-2">
<p className="text-base text-darkGunMetal dark:text-gray-600 mt-1 mx-2">
AsyncAPI Initiative relies on numerous tools, many of which incur costs. Your organization can provide services such as hosting or storage to support our efforts.
</p>
</div>

<div className="bg-white rounded-md shadow-md p-4 flex flex-col items-center text-center">
<div className="bg-white dark:bg-slate-700 rounded-md shadow-md p-4 flex flex-col items-center text-center">
<img src="/img/illustrations/EventOrganization.webp" alt="Event organization" className="w-1/3 h-auto object-cover m-2" />
<h2 className="text-2xl font-semibold my-2">Event organization</h2>
<p className="text-base text-darkGunMetal mt-1 mx-2">
<p className="text-base text-darkGunMetal dark:text-gray-600 mt-1 mx-2">
Host AsyncAPI conferences by sponsoring and organizing events under the AsyncAPI brand at your provided venue.
</p>
</div>
Expand Down
Loading
Loading