Skip to content

Commit 23e303b

Browse files
kh-ub-aybkh-ub-ayb
committed
improved dark mode functionality
1 parent e8c2cec commit 23e303b

File tree

9 files changed

+161
-116
lines changed

9 files changed

+161
-116
lines changed

‎src/components/DirectorCard.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
66
const showPlaceholder = imageError || !director.imageUrl;
77

88
return (
9-
<div className="flex flex-col h-full bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
9+
<div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
1010
<div className="flex justify-center pt-8 pb-4 relative">
11-
<div className="absolute top-0 left-0 w-1 h-full bg-red-500"></div>
12-
<div className="w-32 h-32 rounded-full overflow-hidden border-4 border-white shadow-md">
11+
<div className="absolute top-0 left-0 w-1 h-full bg-red-500 dark:bg-red-400"></div>
12+
<div className="w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-md">
1313
{showPlaceholder ? (
14-
<div className="flex items-center justify-center w-full h-full bg-gray-100 text-gray-700 text-2xl font-bold">
14+
<div className="flex items-center justify-center w-full h-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-2xl font-bold">
1515
{director.name
1616
.split(' ')
1717
.map((n) => n[0])
@@ -30,22 +30,24 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
3030

3131
<div className="flex flex-col flex-grow p-5 gap-3">
3232
<div className="text-center">
33-
<h3 className="text-xl font-bold text-gray-900">{director.name}</h3>
33+
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">
34+
{director.name}
35+
</h3>
3436
{director.position && (
35-
<p className="text-sm font-medium text-red-500 mt-1">
37+
<p className="text-sm font-medium text-red-500 dark:text-red-400 mt-1">
3638
{director.position}
3739
</p>
3840
)}
3941
</div>
4042

41-
<div className="w-16 h-0.5 bg-gray-200 mx-auto"></div>
43+
<div className="w-16 h-0.5 bg-gray-200 dark:bg-gray-700 mx-auto"></div>
4244
<div className="flex-grow">
43-
<div className="text-gray-600 text-sm leading-relaxed max-h-28 overflow-y-auto pr-1 custom-scrollbar">
45+
<div className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed max-h-28 overflow-y-auto pr-1 custom-scrollbar">
4446
{director.bio || 'No biography available.'}
4547
</div>
4648
</div>
4749

48-
<div className="pt-3 mt-auto border-t border-gray-100">
50+
<div className="pt-3 mt-auto border-t border-gray-100 dark:border-gray-700">
4951
<div className="flex items-center justify-center gap-4">
5052
{director.socialLinks?.linkedin && (
5153
<SocialLink
@@ -71,7 +73,7 @@ const DirectorCard: React.FC<DirectorCardProps> = ({ director }) => {
7173
{!director.socialLinks?.linkedin &&
7274
!director.socialLinks?.github &&
7375
!director.socialLinks?.wiki && (
74-
<span className="text-xs text-gray-400">
76+
<span className="text-xs text-gray-400 dark:text-gray-500">
7577
No social links available
7678
</span>
7779
)}
@@ -87,7 +89,7 @@ const SocialLink: React.FC<SocialLinkProps> = ({ href, aria, icon }) => (
8789
href={href}
8890
target="_blank"
8991
rel="noopener noreferrer"
90-
className="text-gray-500 hover:text-red-500 transition-colors"
92+
className="text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
9193
aria-label={aria}
9294
>
9395
{icon}

‎src/components/FAQItem.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
3838
return (
3939
<motion.div
4040
key={index}
41-
className="border-b last:border-b-0"
41+
className="border-b last:border-b-0 border-gray-200 dark:border-gray-700"
4242
variants={faqItemVariants}
4343
initial="initial"
4444
animate="animate"
4545
>
4646
<motion.button
47-
className="w-full text-left py-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer"
47+
className="w-full text-left py-4 text-lg font-medium flex justify-between items-center hover:cursor-pointer text-gray-900 dark:text-gray-100"
4848
onClick={toggleFAQ}
4949
whileHover="hover"
5050
variants={faqQuestionButtonVariants}
@@ -54,6 +54,7 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
5454
variants={faqToggleIconVariants(isOpen)}
5555
initial="initial"
5656
animate="animate"
57+
className="text-gray-600 dark:text-gray-400"
5758
>
5859
{isOpen ? '-' : '+'}
5960
</motion.span>
@@ -64,7 +65,7 @@ const FAQItem = ({ index, question, answer }: FAQItemProps) => {
6465
animate="animate"
6566
style={{ overflow: 'hidden' }}
6667
>
67-
<p className="p-4 text-gray-700">{answer}</p>
68+
<p className="p-4 text-gray-700 dark:text-gray-300">{answer}</p>
6869
</motion.div>
6970
</motion.div>
7071
);

‎src/components/Try.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const Try: React.FC = () => {
6666
animate="visible"
6767
variants={fadeIn}
6868
>
69-
<motion.main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900 px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
69+
<motion.main className="flex-grow bg-[#F6DEC9] dark:bg-gray-900/95 px-3 sm:px-4 md:px-8 lg:px-16 py-6 sm:py-8 md:py-12 lg:py-16">
7070
<div className="max-w-6xl mx-auto space-y-6 sm:space-y-8">
7171
<motion.header
7272
className="space-y-3 sm:space-y-4 md:space-y-6"

‎src/pages/About/FAQs.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ const FAQs = () => {
4646
variants={slideInLeft}
4747
>
4848
<motion.h1
49-
className="text-4xl font-bold text-gray-100 dark:text-gray-100"
49+
className="text-4xl font-bold text-gray-900 dark:text-white"
5050
variants={faqPageAnimations.headingText}
5151
>
5252
FAQs
5353
</motion.h1>
5454
<motion.p
55-
className="text-gray-400 dark:text-gray-400 mt-2 text-lg"
55+
className="text-gray-600 dark:text-gray-300 mt-2 text-lg"
5656
variants={faqPageAnimations.paragraphText}
5757
>
5858
Have questions? Here you'll find the answers most valued by our
@@ -88,7 +88,7 @@ const FAQs = () => {
8888
variants={fadeIn}
8989
>
9090
<motion.h2
91-
className="text-3xl font-bold mb-6"
91+
className="text-3xl font-bold mb-6 text-gray-900 dark:text-white"
9292
variants={headerReveal}
9393
>
9494
Quick Answers
@@ -170,7 +170,7 @@ const FAQs = () => {
170170
variants={faqPageAnimations.faqContainer}
171171
>
172172
<motion.h2
173-
className="text-3xl font-bold mb-6 capitalize"
173+
className="text-3xl font-bold mb-6 capitalize text-gray-900 dark:text-white"
174174
variants={headerReveal}
175175
>
176176
{selectedCategory === 'all'

‎src/pages/Matrix.tsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
5050
<div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white mb-3 inline-flex">
5151
{icon}
5252
</div>
53-
<div className="bg-white p-5 rounded-lg shadow-md">
54-
<h3 className="text-lg font-bold text-magazine-navy mb-2">{title}</h3>
55-
<p className="text-gray-600 text-sm leading-relaxed">
53+
<div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md">
54+
<h3 className="text-lg font-bold text-magazine-navy dark:text-gray-100 mb-2">
55+
{title}
56+
</h3>
57+
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
5658
{description}
5759
{link && (
5860
<a
5961
href={link.url}
6062
target="_blank"
6163
rel="noopener noreferrer"
62-
className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
64+
className="text-[#D4B062] hover:underline hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] ml-1 inline-flex items-center"
6365
>
6466
{link.text} <ChevronRight className="h-3 w-3 ml-1" />
6567
</a>
@@ -72,18 +74,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
7274
{isLeft ? (
7375
<>
7476
<div className="w-1/2 pr-8 mb-0 text-right">
75-
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
76-
<h3 className="text-xl font-bold text-magazine-navy mb-2">
77+
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
78+
<h3 className="text-xl font-bold text-magazine-navy dark:text-gray-100 mb-2">
7779
{title}
7880
</h3>
79-
<p className="text-gray-600 leading-relaxed">
81+
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
8082
{description}
8183
{link && (
8284
<a
8385
href={link.url}
8486
target="_blank"
8587
rel="noopener noreferrer"
86-
className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
88+
className="text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] hover:underline ml-1 inline-flex items-center"
8789
>
8890
{link.text} <ChevronRight className="h-3 w-3 ml-1" />
8991
</a>
@@ -99,7 +101,7 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
99101
<div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white mr-3">
100102
{icon}
101103
</div>
102-
<span className="text-magazine-navy font-bold text-lg">
104+
<span className="text-magazine-navy dark:text-gray-100 font-bold text-lg">
103105
{title.split(' ')[0]}
104106
</span>
105107
</motion.div>
@@ -112,7 +114,7 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
112114
className="flex items-center justify-end"
113115
whileHover={{ x: -5 }}
114116
>
115-
<span className="text-magazine-navy font-bold text-lg mr-3">
117+
<span className="text-magazine-navy dark:text-gray-100 font-bold text-lg mr-3">
116118
{title.split(' ')[0]}
117119
</span>
118120
<div className="bg-[#D4B062] p-2 rounded-full border-2 border-[#D4B062] text-white">
@@ -124,18 +126,18 @@ const TimelineStep: React.FC<TimelineStepProps> = ({
124126
<span className="text-white font-bold">{step}</span>
125127
</div>
126128
<div className="w-1/2 pl-8">
127-
<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
128-
<h3 className="text-xl font-bold text-magazine-navy mb-2">
129+
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
130+
<h3 className="text-xl font-bold text-magazine-navy dark:text-gray-100 mb-2">
129131
{title}
130132
</h3>
131-
<p className="text-gray-600 leading-relaxed">
133+
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">
132134
{description}
133135
{link && (
134136
<a
135137
href={link.url}
136138
target="_blank"
137139
rel="noopener noreferrer"
138-
className="text-[#D4B062] hover:underline ml-1 inline-flex items-center"
140+
className="text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] hover:underline ml-1 inline-flex items-center"
139141
>
140142
{link.text} <ChevronRight className="h-3 w-3 ml-1" />
141143
</a>
@@ -165,23 +167,25 @@ const RoomCard: React.FC<RoomCardProps> = ({ link, getIcon }) => (
165167
key={link.id}
166168
variants={statCard}
167169
whileHover="hover"
168-
className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-300 h-full"
170+
className="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-100 dark:border-gray-700 hover:shadow-lg transition-all duration-300 h-full"
169171
>
170172
<div className="p-4 sm:p-6 flex flex-col h-full">
171173
<div className="flex items-center gap-3 mb-4">
172174
<div className="bg-[#D4B062] p-2 sm:p-3 rounded-full text-white flex-shrink-0">
173175
{getIcon(link.icon)}
174176
</div>
175-
<h3 className="font-bold text-lg sm:text-xl">{link.title}</h3>
177+
<h3 className="font-bold text-lg sm:text-xl text-magazine-navy dark:text-gray-100">
178+
{link.title}
179+
</h3>
176180
</div>
177-
<p className="text-gray-600 mb-4 sm:mb-6 leading-relaxed text-sm sm:text-base flex-grow">
181+
<p className="text-gray-600 dark:text-gray-300 mb-4 sm:mb-6 leading-relaxed text-sm sm:text-base flex-grow">
178182
{link.description}
179183
</p>
180184
<motion.a
181185
href={link.url}
182186
target="_blank"
183187
rel="noopener noreferrer"
184-
className="inline-flex items-center text-[#D4B062] hover:text-magazine-navy transition-colors font-medium mt-auto"
188+
className="inline-flex items-center text-[#D4B062] hover:text-[#e0c17d] dark:text-[#e0c17d] dark:hover:text-[#f0d18d] transition-colors font-medium mt-auto"
185189
whileHover={{ x: 5 }}
186190
>
187191
Join Room <ExternalLink className="ml-2 h-4 w-4" />
@@ -246,7 +250,7 @@ const Matrix: React.FC = () => {
246250
];
247251

248252
return (
249-
<div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9]">
253+
<div className="min-h-screen flex flex-col font-sans bg-[#FFFEF9] dark:bg-gray-900">
250254
<Header />
251255
<main className="flex-grow">
252256
{/* Hero Section*/}
@@ -307,12 +311,12 @@ const Matrix: React.FC = () => {
307311
whileInView="visible"
308312
viewport={{ once: true, margin: '-100px' }}
309313
variants={fadeIn}
310-
className="py-12 sm:py-16 bg-[#FFFEF9]"
314+
className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
311315
>
312316
<div className="container mx-auto px-4 md:px-6">
313317
<div className="max-w-3xl mx-auto">
314318
<motion.h2
315-
className="text-2xl sm:text-3xl font-bold mb-6 text-magazine-navy border-b-2 border-[#D4B062] pb-2 inline-block"
319+
className="text-2xl sm:text-3xl font-bold mb-6 text-magazine-navy dark:text-gray-100 border-b-2 border-[#D4B062] pb-2 inline-block"
316320
variants={fadeIn}
317321
>
318322
What is Matrix?
@@ -350,11 +354,11 @@ const Matrix: React.FC = () => {
350354
whileInView="visible"
351355
viewport={{ once: true, margin: '-100px' }}
352356
variants={staggerContainer}
353-
className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9]"
357+
className="py-12 sm:py-16 md:py-24 bg-[#FFFEF9] dark:bg-gray-900"
354358
>
355359
<div className="container mx-auto px-4 md:px-6">
356360
<motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>
357-
<h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy">
361+
<h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy dark:text-gray-100">
358362
Join Our Matrix Rooms
359363
</h2>
360364
<div className="w-16 h-1 bg-[#D4B062] mx-auto rounded-full"></div>
@@ -375,11 +379,11 @@ const Matrix: React.FC = () => {
375379
whileInView="visible"
376380
viewport={{ once: true, margin: '-100px' }}
377381
variants={staggerContainer}
378-
className="py-12 sm:py-16 bg-[#FFFEF9]"
382+
className="py-12 sm:py-16 bg-[#FFFEF9] dark:bg-gray-900"
379383
>
380384
<div className="container mx-auto px-4 md:px-6">
381385
<motion.div className="text-center mb-8 sm:mb-12" variants={fadeIn}>
382-
<h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy">
386+
<h2 className="text-2xl sm:text-3xl font-bold mb-3 text-magazine-navy dark:text-gray-100">
383387
How to Get Started with Matrix
384388
</h2>
385389
<div className="w-16 h-1 bg-[#D4B062] mx-auto rounded-full"></div>

0 commit comments

Comments
 (0)