Skip to content

Commit 03cc73f

Browse files
kh-ub-aybkh-ub-ayb
committed
fixed the issues in dark mode
1 parent 23e303b commit 03cc73f

File tree

10 files changed

+72
-53
lines changed

10 files changed

+72
-53
lines changed

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const App = () => {
2323
}, []);
2424

2525
return (
26-
<div className="min-h-screen flex flex-col">
26+
<div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
2727
<RouterProvider router={router} />
2828
</div>
2929
);

‎src/components/TryNow/FeatureSection.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,15 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
3030
variants={featureSectionAnimations.textContainer}
3131
>
3232
<h1 className="text-5xl font-bold text-blue-600">{data.title}</h1>
33-
<h2 className="text-4xl font-bold text-black mt-2">{data.subtitle}</h2>
34-
<p className="text-lg font-semibold mt-4">{data.quote}</p>
35-
<p className="text-gray-700 mt-4">{data.description}</p>
33+
<h2 className="text-4xl font-bold text-black dark:text-white mt-2">
34+
{data.subtitle}
35+
</h2>
36+
<p className="text-lg font-semibold mt-4 dark:text-gray-300">
37+
{data.quote}
38+
</p>
39+
<p className="text-gray-700 dark:text-gray-300 mt-4">
40+
{data.description}
41+
</p>
3642
</motion.div>
3743

3844
{/* Right Side: Image Carousel */}
@@ -69,20 +75,22 @@ const FeatureSection = ({ data }: { data: FeatureData }) => {
6975
</Carousel>
7076
) : (
7177
<motion.div
72-
className="w-full max-w-lg h-64 bg-gray-300 rounded-lg flex items-center justify-center"
78+
className="w-full max-w-lg h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center"
7379
initial="hidden"
7480
animate="visible"
7581
variants={featureSectionAnimations.image}
7682
>
77-
<p className="text-gray-500">No Image Available</p>
83+
<p className="text-gray-500 dark:text-gray-400">
84+
No Image Available
85+
</p>
7886
</motion.div>
7987
)}
8088
</motion.div>
8189

8290
{/* Optional Note */}
8391
{data.note && (
8492
<motion.p
85-
className="text-black font-bold mt-6 text-center w-full"
93+
className="text-black dark:text-white font-bold mt-6 text-center w-full"
8694
initial="hidden"
8795
whileInView="visible"
8896
viewport={{ once: true }}

‎src/components/TryNow/LogoCards.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
1414
{data.map((card, index) => (
1515
<motion.div
1616
key={index}
17-
className="bg-white shadow-lg rounded-xl p-6 flex flex-col items-center text-center border border-blue-500"
17+
className="bg-white dark:bg-gray-800 shadow-lg rounded-xl p-6 flex flex-col items-center text-center border border-blue-500 dark:border-blue-400"
1818
initial="hidden"
1919
whileInView="visible"
2020
viewport={{ once: true, amount: 0.2 }}
@@ -32,13 +32,15 @@ const LogoCards = ({ data }: { data: LogoCard[] }) => {
3232
</motion.div>
3333

3434
{/* Title */}
35-
<h3 className="text-xl font-bold text-blue-600 mt-4">{card.title}</h3>
35+
<h3 className="text-xl font-bold text-blue-600 dark:text-blue-400 mt-4">
36+
{card.title}
37+
</h3>
3638

3739
{/* Divider */}
38-
<hr className="w-full my-3 border-gray-300" />
40+
<hr className="w-full my-3 border-gray-300 dark:border-gray-600" />
3941

4042
{/* Description */}
41-
<ul className="text-gray-600 text-sm text-left list-disc list-inside">
43+
<ul className="text-gray-600 dark:text-gray-300 text-sm text-left list-disc list-inside">
4244
{card.description.map((point, i) => (
4345
<li key={i}>{point}</li>
4446
))}

‎src/components/TryNow/NumberedCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ const NumberedCard: React.FC<NumberedCardProps> = ({
4242
</motion.div>
4343

4444
{/* Title */}
45-
<h3 className="text-lg font-semibold mt-6">{title}</h3>
45+
<h3 className="text-lg font-semibold mt-6 dark:text-white">{title}</h3>
4646

4747
{/* Description */}
48-
<p className="text-gray-700 mt-2">{description}</p>
48+
<p className="text-gray-700 dark:text-gray-300 mt-2">{description}</p>
4949

5050
{/* Conditionally Render Image */}
5151
{image && (

‎src/components/TryNow/Paragraph.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ const Paragraph: React.FC<ParagraphProps> = ({
3333
>
3434
{/* Styled Title */}
3535
<motion.h2
36-
className="text-4xl font-semibold border-b-2 border-gray-300 inline-block pb-2 font-[Caveat]"
36+
className="text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 inline-block pb-2 font-[Caveat] dark:text-white"
3737
variants={paragraphAnimations.text}
3838
>
3939
{title}
4040
</motion.h2>
4141

4242
{/* Render Content as a List if Multiple Lines Exist */}
4343
{contentPoints.length > 1 ? (
44-
<ul className="text-gray-700 mt-4 list-disc list-inside text-left">
44+
<ul className="text-gray-700 dark:text-gray-300 mt-4 list-disc list-inside text-left">
4545
{contentPoints.map((point, index) => (
4646
<motion.li
4747
key={index}
@@ -61,7 +61,7 @@ const Paragraph: React.FC<ParagraphProps> = ({
6161
</ul>
6262
) : (
6363
<motion.p
64-
className="text-gray-700 mt-4"
64+
className="text-gray-700 dark:text-gray-300 mt-4"
6565
variants={paragraphAnimations.text}
6666
>
6767
<span

‎src/components/TryNow/StepsToUse.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const StepsToUse = () => {
1010

1111
return (
1212
<section className="w-[90%] mx-auto py-8">
13-
<h2 className="text-3xl font-bold text-center text-black mb-6">
13+
<h2 className="text-3xl font-bold text-center text-black dark:text-white mb-6">
1414
Steps to Boot Sugar on a Stick
1515
</h2>
1616

@@ -28,14 +28,14 @@ const StepsToUse = () => {
2828
{steps.map((step, index) => (
2929
<div key={index} className="relative text-center">
3030
{/* TEXT CONTENT */}
31-
<div className="text-lg font-semibold text-gray-600">
31+
<div className="text-lg font-semibold text-gray-600 dark:text-gray-400">
3232
Step {index + 1}
3333
</div>
34-
<h3 className="text-2xl font-semibold text-black mt-1">
34+
<h3 className="text-2xl font-semibold text-black dark:text-white mt-1">
3535
{step.title}
3636
</h3>
3737
<p
38-
className="text-gray-700 mt-2"
38+
className="text-gray-700 dark:text-gray-300 mt-2"
3939
dangerouslySetInnerHTML={{
4040
__html: DOMPurify.sanitize(
4141
renderContentWithLinks(step.description, step.links),

‎src/components/TryNow/TeamSection.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
2121
>
2222
{/* Title */}
2323
<motion.h1
24-
className="text-5xl font-[Caveat] font-bold"
24+
className="text-5xl font-[Caveat] font-bold dark:text-white"
2525
variants={teamSectionAnimations.heading}
2626
>
2727
Music Blocks Offline Edition
2828
</motion.h1>
2929

3030
<motion.h2
31-
className="text-4xl font-[Caveat] font-bold mt-2"
31+
className="text-4xl font-[Caveat] font-bold mt-2 dark:text-white"
3232
variants={teamSectionAnimations.heading}
3333
>
3434
and <br /> Curriculum Development Team
@@ -41,7 +41,7 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
4141

4242
{/* Grid Layout for Members */}
4343
<motion.div
44-
className="grid md:grid-cols-2 gap-10 mt-12 bg-gray-100 p-10 rounded-lg"
44+
className="grid md:grid-cols-2 gap-10 mt-12 bg-gray-100 dark:bg-gray-800 p-10 rounded-lg"
4545
initial="hidden"
4646
whileInView="visible"
4747
viewport={{ once: true, amount: 0.2 }}
@@ -50,7 +50,7 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
5050
{members.map((member, index) => (
5151
<motion.div
5252
key={index}
53-
className="flex flex-col md:flex-row items-center bg-white shadow-lg rounded-lg p-6"
53+
className="flex flex-col md:flex-row items-center bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6"
5454
variants={teamSectionAnimations.memberCard}
5555
>
5656
{/* Member Image */}
@@ -69,7 +69,9 @@ const TeamSection: React.FC<{ members: TeamMember[] }> = ({ members }) => {
6969
>
7070
{member.name}
7171
</h3>
72-
<p className="text-gray-700 mt-2">{member.description}</p>
72+
<p className="text-gray-700 dark:text-gray-300 mt-2">
73+
{member.description}
74+
</p>
7375
</div>
7476
</motion.div>
7577
))}

‎src/pages/NotFoundPage.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121

2222
const NotFoundPage: React.FC = () => {
2323
return (
24-
<div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9]">
24+
<div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
2525
<Header />
2626
<main className="flex-grow">
2727
{/* Hero Section */}
@@ -99,10 +99,10 @@ const NotFoundPage: React.FC = () => {
9999
whileInView="visible"
100100
viewport={{ once: true, margin: '-100px' }}
101101
variants={fadeIn}
102-
className="py-16 bg-[#FFFEF9]"
102+
className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
103103
>
104104
<div className="container mx-auto px-4 md:px-6 max-w-4xl">
105-
<div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100 p-8">
105+
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-100 dark:border-gray-700 p-8">
106106
<div className="flex flex-col lg:flex-row items-center justify-center">
107107
<motion.div
108108
className="w-full lg:w-1/2 flex justify-center mb-8 lg:mb-0"
@@ -186,7 +186,7 @@ const NotFoundPage: React.FC = () => {
186186
className="w-full lg:w-1/2 lg:pl-8"
187187
transition={{ duration: 0.5, delay: 0.2 }}
188188
>
189-
<h3 className="font-bold text-2xl text-magazine-navy mb-4 border-b-2 border-[#D4B062] pb-2 inline-block">
189+
<h3 className="font-bold text-2xl text-magazine-navy dark:text-white mb-4 border-b-2 border-[#D4B062] pb-2 inline-block">
190190
Connection Status
191191
</h3>
192192

@@ -196,15 +196,19 @@ const NotFoundPage: React.FC = () => {
196196
whileHover={{ x: 5 }}
197197
>
198198
<div className="w-3 h-3 bg-red-500 rounded-full mr-3 animate-pulse"></div>
199-
<p className="text-gray-700">Resource not found</p>
199+
<p className="text-gray-700 dark:text-gray-300">
200+
Resource not found
201+
</p>
200202
</motion.div>
201203

202204
<motion.div
203205
className="flex items-center"
204206
whileHover={{ x: 5 }}
205207
>
206208
<div className="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
207-
<p className="text-gray-700">Server connection: Active</p>
209+
<p className="text-gray-700 dark:text-gray-300">
210+
Server connection: Active
211+
</p>
208212
</motion.div>
209213

210214
<motion.div className="mt-6" variants={bounce}>
@@ -234,22 +238,22 @@ const NotFoundPage: React.FC = () => {
234238
whileInView="visible"
235239
viewport={{ once: true, margin: '-100px' }}
236240
variants={staggerContainer}
237-
className="py-16 bg-[#FFFEF9]"
241+
className="py-16 bg-[#FFFEF9] dark:bg-gray-900"
238242
>
239243
<div className="container mx-auto px-4 md:px-6">
240244
<motion.h2
241245
variants={subtleRise}
242-
className="text-3xl font-bold mb-12 text-center text-magazine-navy border-b-2 border-[#D4B062] pb-2 inline-block mx-auto"
246+
className="text-3xl font-bold mb-12 text-center text-magazine-navy dark:text-white border-b-2 border-[#D4B062] pb-2 inline-block mx-auto"
243247
>
244248
What Happened?
245249
</motion.h2>
246250

247251
<div className="max-w-4xl mx-auto mb-16">
248252
<motion.div
249253
variants={fadeIn}
250-
className="bg-white p-6 rounded-xl shadow-md border border-gray-100"
254+
className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-md border border-gray-100 dark:border-gray-700"
251255
>
252-
<p className="text-gray-600 mb-6 leading-relaxed">
256+
<p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
253257
The page you're looking for might have been removed, had its
254258
name changed, or is temporarily unavailable. This could be due
255259
to:
@@ -269,7 +273,9 @@ const NotFoundPage: React.FC = () => {
269273
variants={cardFadeIn}
270274
>
271275
<div className="mr-3 mt-1 text-[#D4B062]">•</div>
272-
<p className="text-gray-700">{reason}</p>
276+
<p className="text-gray-700 dark:text-gray-300">
277+
{reason}
278+
</p>
273279
</motion.div>
274280
))}
275281
</div>
@@ -278,7 +284,7 @@ const NotFoundPage: React.FC = () => {
278284

279285
<motion.h2
280286
variants={subtleRise}
281-
className="text-3xl font-bold mb-12 text-center text-magazine-navy"
287+
className="text-3xl font-bold mb-12 text-center text-magazine-navy dark:text-white"
282288
>
283289
What You Can Do
284290
</motion.h2>
@@ -308,18 +314,18 @@ const NotFoundPage: React.FC = () => {
308314
custom={index}
309315
variants={statCard}
310316
whileHover="hover"
311-
className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100"
317+
className="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-100 dark:border-gray-700"
312318
>
313319
<div className="p-6">
314320
<div className="flex items-center gap-4 mb-5">
315321
<div className="bg-[#D4B062] p-3 rounded-full border-2 border-[#D4B062] text-white">
316322
{item.icon}
317323
</div>
318-
<h3 className="font-bold text-xl text-magazine-navy">
324+
<h3 className="font-bold text-xl text-magazine-navy dark:text-white">
319325
{item.title}
320326
</h3>
321327
</div>
322-
<p className="text-gray-600 mb-6 leading-relaxed">
328+
<p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
323329
{item.description}
324330
</p>
325331
{item.action ? (

‎src/pages/TryNow/FlatHub.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const FlatHubPage = () => {
5959
/>
6060
))}
6161

62-
<h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10">
62+
<h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mt-10 dark:text-white">
6363
What can you do with <span className="text-[#68A6F7]">Flatpak</span>?
6464
</h2>
6565

@@ -69,7 +69,7 @@ const FlatHubPage = () => {
6969

7070
<div className="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4 my-8">
7171
<div className="w-full md:w-1/2">
72-
<h2 className="text-2xl font-semibold mb-4 text-center font-Caveat">
72+
<h2 className="text-2xl font-semibold mb-4 text-center font-Caveat dark:text-white">
7373
Getting Started
7474
</h2>
7575
<div className="grid grid-cols-1 gap-4 mt-6 p-4">
@@ -86,7 +86,7 @@ const FlatHubPage = () => {
8686
</div>
8787
</div>
8888
<div className="w-full md:w-1/2">
89-
<h2 className="text-2xl font-semibold mb-4 text-center font-[Caveat]">
89+
<h2 className="text-2xl font-semibold mb-4 text-center font-[Caveat] dark:text-white">
9090
Next Steps
9191
</h2>
9292
<div className="grid grid-cols-1 gap-4 mt-6 p-4">
@@ -104,12 +104,13 @@ const FlatHubPage = () => {
104104
</div>
105105

106106
{/* New Developer Section */}
107-
<div className="my-12 p-6 bg-gray-50 rounded-lg shadow-sm">
108-
<h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 pb-2 font-[Caveat] text-center mx-auto w-fit mb-6">
109-
For <span className="text-blue-600">Developers</span>
107+
<div className="my-12 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm">
108+
<h2 className="text-3xl sm:text-4xl font-semibold border-b-2 border-gray-300 dark:border-gray-600 pb-2 font-[Caveat] text-center mx-auto w-fit mb-6 dark:text-white">
109+
For{' '}
110+
<span className="text-blue-600 dark:text-blue-400">Developers</span>
110111
</h2>
111112
<div className="max-w-3xl mx-auto">
112-
<p className="text-lg mb-4">
113+
<p className="text-lg mb-4 dark:text-gray-300">
113114
Looking to package and distribute Sugar activities using Flatpak?
114115
Our comprehensive guide walks you through the entire process of
115116
creating, building, and publishing Flatpak applications.

0 commit comments

Comments
 (0)