Skip to content

Commit d8f19e8

Browse files
committed
fix: the dark theme issue for the /interview-prep route (#1254)
1 parent 01ac4b9 commit d8f19e8

7 files changed

Lines changed: 159 additions & 100 deletions

File tree

src/pages/interview-prep/BehavioralTab.tsx

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
3434
<h2 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
3535
Behavioral Interview Preparation
3636
</h2>
37-
<p className="ml-3 text-center text-xl text-gray-700 dark:text-gray-200">
37+
<p className="ml-3 text-center text-xl text-gray-800 dark:text-gray-200">
3838
Master the art of storytelling and showcase your soft skills with
3939
confidence
4040
</p>
@@ -71,25 +71,25 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
7171
<ul className="space-y-2 text-sm">
7272
<li className="flex items-start">
7373
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
74-
<span className="text-gray-700 dark:text-gray-200">
74+
<span className="text-gray-800 dark:text-gray-200">
7575
70% of hiring decisions are based on cultural fit
7676
</span>
7777
</li>
7878
<li className="flex items-start">
7979
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
80-
<span className="text-gray-700 dark:text-gray-200">
80+
<span className="text-gray-800 dark:text-gray-200">
8181
Assess leadership and communication skills
8282
</span>
8383
</li>
8484
<li className="flex items-start">
8585
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
86-
<span className="text-gray-700 dark:text-gray-200">
86+
<span className="text-gray-800 dark:text-gray-200">
8787
Evaluate problem-solving approach
8888
</span>
8989
</li>
9090
<li className="flex items-start">
9191
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
92-
<span className="text-gray-700 dark:text-gray-200">
92+
<span className="text-gray-800 dark:text-gray-200">
9393
Determine team collaboration ability
9494
</span>
9595
</li>
@@ -143,7 +143,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
143143
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
144144
{item.word}
145145
</h4>
146-
<p className="text-sm text-gray-700 dark:text-gray-200">
146+
<p className="text-sm text-gray-800 dark:text-gray-200">
147147
{item.desc}
148148
</p>
149149
</div>
@@ -162,7 +162,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
162162
<strong className="text-red-600 dark:text-red-400">
163163
Situation:
164164
</strong>
165-
<p className="mt-1 text-gray-700 dark:text-gray-200">
165+
<p className="mt-1 text-gray-800 dark:text-gray-200">
166166
"During my internship, our team was behind schedule on a
167167
critical project with only 2 weeks left before the deadline."
168168
</p>
@@ -171,7 +171,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
171171
<strong className="text-yellow-600 dark:text-yellow-400">
172172
Task:
173173
</strong>
174-
<p className="mt-1 text-gray-700 dark:text-gray-200">
174+
<p className="mt-1 text-gray-800 dark:text-gray-200">
175175
"As the junior developer, I needed to help coordinate efforts
176176
and find ways to accelerate our progress."
177177
</p>
@@ -180,7 +180,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
180180
<strong className="text-green-600 dark:text-green-400">
181181
Action:
182182
</strong>
183-
<p className="mt-1 text-gray-700 dark:text-gray-200">
183+
<p className="mt-1 text-gray-800 dark:text-gray-200">
184184
"I organized daily stand-ups, created a shared task board, and
185185
volunteered to work extra hours on critical features."
186186
</p>
@@ -189,7 +189,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
189189
<strong className="text-blue-600 dark:text-blue-400">
190190
Result:
191191
</strong>
192-
<p className="mt-1 text-gray-700 dark:text-gray-200">
192+
<p className="mt-1 text-gray-800 dark:text-gray-200">
193193
"We delivered the project on time, and my manager praised my
194194
initiative. I learned the importance of proactive
195195
communication."
@@ -208,7 +208,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
208208
<strong className="text-red-600 dark:text-red-400">
209209
Situation:
210210
</strong>
211-
<p className="mt-1 text-gray-700 dark:text-gray-200">
211+
<p className="mt-1 text-gray-800 dark:text-gray-200">
212212
"Our main application was experiencing frequent crashes
213213
affecting 30% of users during peak hours."
214214
</p>
@@ -217,7 +217,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
217217
<strong className="text-yellow-600 dark:text-yellow-400">
218218
Task:
219219
</strong>
220-
<p className="mt-1 text-gray-700 dark:text-gray-200">
220+
<p className="mt-1 text-gray-800 dark:text-gray-200">
221221
"I was assigned to identify the root cause and implement a
222222
solution within 48 hours."
223223
</p>
@@ -226,7 +226,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
226226
<strong className="text-green-600 dark:text-green-400">
227227
Action:
228228
</strong>
229-
<p className="mt-1 text-gray-700 dark:text-gray-200">
229+
<p className="mt-1 text-gray-800 dark:text-gray-200">
230230
"I analyzed logs, reproduced the issue, and discovered a
231231
memory leak in our caching system. I implemented a fix and
232232
added monitoring."
@@ -236,7 +236,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
236236
<strong className="text-blue-600 dark:text-blue-400">
237237
Result:
238238
</strong>
239-
<p className="mt-1 text-gray-700 dark:text-gray-200">
239+
<p className="mt-1 text-gray-800 dark:text-gray-200">
240240
"Crashes reduced by 95%, user satisfaction improved, and we
241241
prevented similar issues with better monitoring."
242242
</p>
@@ -342,7 +342,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
342342
key={i}
343343
className="interview-prep-sidebar cursor-pointer rounded-lg border-l-4 border-gray-300 bg-gray-50 p-4 transition-colors hover:border-blue-500 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
344344
>
345-
<p className="font-medium text-gray-700 dark:text-gray-300">
345+
<p className="font-medium text-gray-800 dark:text-gray-300">
346346
"{question}"
347347
</p>
348348
</div>
@@ -383,7 +383,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
383383
].map((item, i) => (
384384
<div key={i} className="flex items-start">
385385
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-green-500"></span>
386-
<span className="text-gray-700 dark:text-gray-300">
386+
<span className="text-gray-800 dark:text-gray-300">
387387
{item}
388388
</span>
389389
</div>
@@ -410,7 +410,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
410410
].map((item, i) => (
411411
<div key={i} className="flex items-start">
412412
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-red-500"></span>
413-
<span className="text-gray-700 dark:text-gray-300">
413+
<span className="text-gray-800 dark:text-gray-300">
414414
{item}
415415
</span>
416416
</div>
@@ -471,14 +471,14 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
471471
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
472472
{video.title}
473473
</h4>
474-
<p className="mb-2 text-sm text-gray-600 dark:text-gray-300">
474+
<p className="mb-2 text-sm text-gray-700 dark:text-gray-300">
475475
{video.description}
476476
</p>
477-
<div className="mb-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
478-
<span className="text-gray-500 dark:text-gray-400">
477+
<div className="mb-3 flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
478+
<span className="text-gray-600 dark:text-gray-400">
479479
{video.channel}
480480
</span>
481-
<span className="text-gray-500 dark:text-gray-400">
481+
<span className="text-gray-600 dark:text-gray-400">
482482
{video.duration}
483483
</span>
484484
</div>
@@ -506,7 +506,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
506506
<h5 className="mb-2 font-semibold text-gray-800 dark:text-gray-200">
507507
📚 Recommended Books
508508
</h5>
509-
<ul className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
509+
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-300">
510510
<li>• "Cracking the Coding Interview" by Gayle McDowell</li>
511511
<li>• "The Behavioral Interview Handbook" by Lewis Lin</li>
512512
<li>• "What Color Is Your Parachute?" by Richard N. Bolles</li>
@@ -516,7 +516,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
516516
<h5 className="mb-2 font-semibold text-gray-800 dark:text-gray-200">
517517
🌐 Online Platforms
518518
</h5>
519-
<ul className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
519+
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-300">
520520
<li>• Pramp - Free mock interviews</li>
521521
<li>• InterviewBit - Behavioral question bank</li>
522522
<li>• Glassdoor - Company-specific questions</li>
@@ -536,7 +536,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
536536
<span className="mr-3 text-3xl">🤝</span>
537537
Join Our Community & Contribute
538538
</h3>
539-
<p className="mt-2 text-gray-600 dark:text-gray-300">
539+
<p className="mt-2 text-gray-700 dark:text-gray-300">
540540
Help make this resource better for everyone in the recode hive
541541
community
542542
</p>
@@ -548,7 +548,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
548548
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
549549
Share Your Experience
550550
</h4>
551-
<p className="text-sm text-gray-600 dark:text-gray-300">
551+
<p className="text-sm text-gray-700 dark:text-gray-300">
552552
Share your behavioral interview experiences, both successes and
553553
challenges
554554
</p>
@@ -558,7 +558,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
558558
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
559559
Suggest Resources
560560
</h4>
561-
<p className="text-sm text-gray-600 dark:text-gray-300">
561+
<p className="text-sm text-gray-700 dark:text-gray-300">
562562
Recommend helpful videos, articles, or tools you've found useful
563563
</p>
564564
</div>
@@ -567,7 +567,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
567567
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
568568
Improve Content
569569
</h4>
570-
<p className="text-sm text-gray-600 dark:text-gray-300">
570+
<p className="text-sm text-gray-700 dark:text-gray-300">
571571
Help us add more examples, questions, or improve existing content
572572
</p>
573573
</div>
@@ -585,25 +585,25 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
585585
<ul className="space-y-2 text-sm">
586586
<li className="flex items-start">
587587
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
588-
<span className="text-gray-600 dark:text-gray-300">
588+
<span className="text-gray-700 dark:text-gray-300">
589589
Join our Discord community and share tips
590590
</span>
591591
</li>
592592
<li className="flex items-start">
593593
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
594-
<span className="text-gray-600 dark:text-gray-300">
594+
<span className="text-gray-700 dark:text-gray-300">
595595
Submit interview questions you've encountered
596596
</span>
597597
</li>
598598
<li className="flex items-start">
599599
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
600-
<span className="text-gray-600 dark:text-gray-300">
600+
<span className="text-gray-700 dark:text-gray-300">
601601
Review and suggest improvements to examples
602602
</span>
603603
</li>
604604
<li className="flex items-start">
605605
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
606-
<span className="text-gray-600 dark:text-gray-300">
606+
<span className="text-gray-700 dark:text-gray-300">
607607
Share company-specific behavioral interview tips
608608
</span>
609609
</li>

0 commit comments

Comments
 (0)