Skip to content

Fix the text visibility on the practice section #936

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
merged 6 commits into from
Oct 15, 2025
+70 −70
Merged

Fix the text visibility on the practice section #936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5c33da
Initial plan
Copilot Oct 15, 2025
c2cccdd
Improve text visibility on interview prep cards - part 1
Copilot Oct 15, 2025
3c1325b
Improve text visibility on interview prep cards - part 2
Copilot Oct 15, 2025
78f96d4
Fix text visibility on practice question cards
Copilot Oct 15, 2025
a2b41ac
Improve button visibility with better backgrounds and borders
Copilot Oct 15, 2025
aa23f33
Fix the cards text visibilty and functions
Adez017 Oct 15, 2025
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
32 changes: 16 additions & 16 deletions src/pages/interview-prep/BehavioralTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<h2 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
Behavioral Interview Preparation
</h2>
<p className="ml-3 text-center text-xl text-gray-600 dark:text-gray-300">
<p className="ml-3 text-center text-xl text-gray-700 dark:text-gray-200">
Master the art of storytelling and showcase your soft skills with
confidence
</p>
Expand All @@ -52,13 +52,13 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
</h3>
<div className="grid gap-12 md:grid-cols-2">
<div>
<p className="mb-4 text-gray-700 dark:text-gray-300">
<p className="mb-4 text-gray-800 dark:text-gray-200">
Behavioral interviews focus on how you've handled situations in
the past to predict your future performance. These questions
typically start with phrases like "Tell me about a time when..."
or "Describe a situation where..."
</p>
<p className="text-gray-700 dark:text-gray-300">
<p className="text-gray-800 dark:text-gray-200">
Unlike technical interviews that test your coding skills,
behavioral interviews evaluate your soft skills, cultural fit,
and ability to work in a team environment.
Expand All @@ -71,25 +71,25 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<ul className="space-y-2 text-sm">
<li className="flex items-start">
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
<span className="text-gray-600 dark:text-gray-300">
<span className="text-gray-700 dark:text-gray-200">
70% of hiring decisions are based on cultural fit
</span>
</li>
<li className="flex items-start">
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
<span className="text-gray-600 dark:text-gray-300">
<span className="text-gray-700 dark:text-gray-200">
Assess leadership and communication skills
</span>
</li>
<li className="flex items-start">
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
<span className="text-gray-600 dark:text-gray-300">
<span className="text-gray-700 dark:text-gray-200">
Evaluate problem-solving approach
</span>
</li>
<li className="flex items-start">
<span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
<span className="text-gray-600 dark:text-gray-300">
<span className="text-gray-700 dark:text-gray-200">
Determine team collaboration ability
</span>
</li>
Expand Down Expand Up @@ -143,7 +143,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<h4 className="mb-2 font-bold text-gray-900 dark:text-white">
{item.word}
</h4>
<p className="text-sm text-gray-600 dark:text-gray-300">
<p className="text-sm text-gray-700 dark:text-gray-200">
{item.desc}
</p>
</div>
Expand All @@ -162,7 +162,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-red-600 dark:text-red-400">
Situation:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"During my internship, our team was behind schedule on a
critical project with only 2 weeks left before the deadline."
</p>
Expand All @@ -171,7 +171,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-yellow-600 dark:text-yellow-400">
Task:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"As the junior developer, I needed to help coordinate efforts
and find ways to accelerate our progress."
</p>
Expand All @@ -180,7 +180,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-green-600 dark:text-green-400">
Action:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"I organized daily stand-ups, created a shared task board, and
volunteered to work extra hours on critical features."
</p>
Expand All @@ -189,7 +189,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-blue-600 dark:text-blue-400">
Result:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"We delivered the project on time, and my manager praised my
initiative. I learned the importance of proactive
communication."
Expand All @@ -208,7 +208,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-red-600 dark:text-red-400">
Situation:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"Our main application was experiencing frequent crashes
affecting 30% of users during peak hours."
</p>
Expand All @@ -217,7 +217,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-yellow-600 dark:text-yellow-400">
Task:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"I was assigned to identify the root cause and implement a
solution within 48 hours."
</p>
Expand All @@ -226,7 +226,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-green-600 dark:text-green-400">
Action:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"I analyzed logs, reproduced the issue, and discovered a
memory leak in our caching system. I implemented a fix and
added monitoring."
Expand All @@ -236,7 +236,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
<strong className="text-blue-600 dark:text-blue-400">
Result:
</strong>
<p className="mt-1 text-gray-600 dark:text-gray-300">
<p className="mt-1 text-gray-700 dark:text-gray-200">
"Crashes reduced by 95%, user satisfaction improved, and we
prevented similar issues with better monitoring."
</p>
Expand Down
20 changes: 10 additions & 10 deletions src/pages/interview-prep/CompaniesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
<h2 className="mb-6 text-5xl font-bold text-gray-900 dark:text-white">
Company-Specific Interview Prep
</h2>
<p className="text-xl leading-relaxed text-gray-600 dark:text-gray-300">
<p className="text-xl leading-relaxed text-gray-700 dark:text-gray-200">
Get insider knowledge, real interview questions, and proven strategies
for landing your dream job at top tech companies
</p>
Expand All @@ -151,7 +151,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
<span className="mr-4 text-4xl">🏢</span>
FAANG+ Companies Overview
</h3>
<p className="text-lg text-gray-600 dark:text-gray-300">
<p className="text-lg text-gray-700 dark:text-gray-200">
Navigate the unique interview processes of the world's most
competitive tech companies
</p>
Expand Down Expand Up @@ -224,10 +224,10 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
<h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
{item.title}
</h4>
<p className="mb-3 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
<p className="mb-3 text-sm leading-relaxed text-gray-700 dark:text-gray-200">
{item.description}
</p>
<div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
<div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-800 dark:bg-gray-700 dark:text-gray-200">
{item.stats}
</div>
</motion.div>
Expand Down Expand Up @@ -486,7 +486,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
{i + 1}
</span>
</div>
<span className="leading-relaxed text-gray-700 dark:text-gray-300">
<span className="leading-relaxed text-gray-800 dark:text-gray-200">
{tip}
</span>
</motion.li>
Expand Down Expand Up @@ -558,7 +558,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
<p className="text-sm leading-relaxed text-gray-700 dark:text-gray-300">
<p className="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
{item.answer}
</p>
</motion.div>
Expand Down Expand Up @@ -590,7 +590,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
Community Contributors Needed!
</h5>
</div>
<p className="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
<p className="mb-6 leading-relaxed text-gray-800 dark:text-gray-200">
Help keep {company.company}'s interview information
current! Share recent questions, tips, or insights
you've encountered to help fellow candidates
Expand Down Expand Up @@ -672,7 +672,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
<span className="mr-4 text-5xl">🤝</span>
Join Our Interview Prep Community
</h3>
<p className="text-xl text-gray-600 dark:text-gray-300">
<p className="text-xl text-gray-700 dark:text-gray-200">
Help build the most comprehensive company interview resource and
accelerate your career growth
</p>
Expand Down Expand Up @@ -744,10 +744,10 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
<h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
{item.title}
</h4>
<p className="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
<p className="mb-4 text-sm leading-relaxed text-gray-700 dark:text-gray-200">
{item.description}
</p>
<div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
<div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-800 dark:bg-gray-700 dark:text-gray-200">
{item.benefit}
</div>
</motion.div>
Expand Down
Loading
Loading