Skip to content

Fixed #713 : light theme in interview prep #739

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 2 commits into from
Oct 4, 2025
Merged

Fixed #713 : light theme in interview prep #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bed6177
light theme in interview prep
prathamesh424 Oct 3, 2025
46adf39
bot suggestion
prathamesh424 Oct 3, 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
64 changes: 52 additions & 12 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
[data-theme="light"] .interview-prep-page p,
[data-theme="light"] .interview-prep-page li,
[data-theme="light"] .interview-prep-page span,
[data-theme="light"] .interview-prep-page div {
color: inherit;
}
/* You can override the default Infima variables here. */
@import "tailwindcss";

Expand Down Expand Up @@ -826,6 +832,25 @@ html.theme-light .text-gray-900 {
color: #1a1a1a !important;
}

/* ==== Interview Prep: enforce proper light theme surfaces ==== */
/* Some Tailwind dark: classes may not be recognized by Docusaurus data-theme in all cases.
Ensure that in light mode, all Interview Prep cards use white surfaces and readable text. */
[data-theme="light"] .interview-prep-page .bg-white,
[data-theme="light"] .interview-prep-page [class*="bg-white/"],
[data-theme="light"] .interview-prep-page .question-card,
[data-theme="light"] .interview-prep-page .technical-inner,
[data-theme="light"] .interview-prep-page .technical-inner-success,
[data-theme="light"] .interview-prep-page .interview-prep-sidebar {
background-color: #ffffff !important;
color: #111827; /* gray-900 */
}

/* Ensure common dark-surface utilities don't leak into light theme in this area */
[data-theme="light"] .interview-prep-page [class*="bg-gray-800"],
[data-theme="light"] .interview-prep-page [class*="bg-gray-900"] {
background-color: #ffffff !important;
}

/*==== SECTION 13 Modern Blog Enhancements ======*/
.modern-gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Expand Down Expand Up @@ -1123,7 +1148,8 @@ html {
[data-theme="light"] .interview-prep-page h4,
[data-theme="light"] .interview-prep-page h5,
[data-theme="light"] .interview-prep-page h6 {
color: #ffffff !important;
/* Use a dark heading color in light mode for readability */
color: #111827 !important; /* Tailwind gray-900 */
}

.watch-video-btn {
Expand Down Expand Up @@ -1249,6 +1275,9 @@ html {
}

.explore-btn {
color: inherit;
}
[data-theme="dark"] .explore-btn {
color: white;
}

Expand All @@ -1262,17 +1291,24 @@ html {
box-sizing: border-box !important;
}

.explore-btn:hover {
[data-theme="dark"] .explore-btn:hover {
color: white;
}

.custom-input {
background-color: #374151;
color: white; /* cyan-500 */
/* Make the custom input theme-aware to avoid white text on light backgrounds */
[data-theme="dark"] .custom-input {
background-color: #374151; /* gray-700 */
color: #ffffff;
}
[data-theme="light"] .custom-input {
background-color: #f9fafb; /* gray-50 */
color: #111827; /* gray-900 */
}
.company-border {
border-color: #6b7280;
color: white;
}
[data-theme="dark"] .company-border {
color: #ffffff;
}
.company-blue-border {
border-color: #3b82f6;
Expand Down Expand Up @@ -1316,14 +1352,17 @@ html {
border-color: #1f2937; /* border-gray-800 */
background-color: #1f2937; /* bg-gray-800 */
}
.company-tab-link {
[data-theme="dark"] .company-tab-link {
color: white;
}
.company-tab-link:hover {
[data-theme="dark"] .company-tab-link:hover {
color: white;
}
.company-tab-community-link {
color: #fdba74;
color: #9a3412; /* orange-800 for light */
}
[data-theme="dark"] .company-tab-community-link {
color: #fdba74; /* orange-300 in dark */
}
.company-tab-community-link:hover {
color: #fdba74;
Expand Down Expand Up @@ -1365,12 +1404,13 @@ html {
padding: 0 !important;
}
.practice-tab-link:hover{
color: white;
text-decoration: none;
}
.practice-tab-link{
[data-theme="dark"] .practice-tab-link{
color: white;

}
[data-theme="light"] .practice-tab-link{
color: #1d4ed8; /* blue-700 */
}

/* ===== SECTION 14: SMOOTH PAGE TRANSITIONS ===== */
Expand Down
10 changes: 5 additions & 5 deletions src/pages/interview-prep/BehavioralTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
<motion.div initial="hidden" animate="visible" variants={staggerContainer}>
{/* Introduction Section */}
<motion.div className="text-center mb-12" variants={fadeIn}>
<h2 className="text-4xl font-bold mb-4 text-white">Behavioral Interview Preparation</h2>
<h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Behavioral Interview Preparation</h2>
<p className="text-xl text-center ml-3 text-gray-600 dark:text-gray-300 ">
Master the art of storytelling and showcase your soft skills with confidence
</p>
Expand All @@ -35,7 +35,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
variants={fadeIn}
>
<div className="max-w-4xl mx-auto">
<h3 className="text-2xl font-bold mb-6 text-white flex items-center">
<h3 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white flex items-center">
<span className="text-3xl mr-3">🤝</span>
What are Behavioral Interviews?
</h3>
Expand Down Expand Up @@ -411,11 +411,11 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
<h4 className="font-bold text-gray-900 dark:text-white mb-2">{video.title}</h4>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">{video.description}</p>
<div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
<span>{video.channel}</span>
<span>{video.duration}</span>
<span className="text-gray-500 dark:text-gray-400">{video.channel}</span>
<span className="text-gray-500 dark:text-gray-400">{video.duration}</span>
</div>
<a href={video.url} target="_blank" rel="noopener noreferrer" className="watch-video-btn">
<span className="mr-2">▶️</span>
<span className="mr-2 text-inherit">▶️</span>
Watch Video
</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/interview-prep/CompaniesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
/>
<span className="relative z-10">{item.icon}</span>
<span className="relative z-10 text-inherit">{item.icon}</span>
</div>
<h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3 leading-relaxed">{item.description}</p>
Expand All @@ -205,7 +205,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
>
<div className={`text-3xl font-bold ${stat.color} mb-2`}>{stat.metric}</div>
<div className="text-sm text-gray-600 dark:text-gray-300 flex items-center justify-center gap-2">
<span>{stat.icon}</span>
<span className="text-inherit">{stat.icon}</span>
{stat.label}
</div>
</motion.div>) : null
Expand All @@ -225,7 +225,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
placeholder="Search companies, focus areas, technologies, or interview types..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
/>
</div>
<div className="flex gap-3">
Expand Down Expand Up @@ -622,7 +622,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
/>
<span className="relative z-10">{item.icon}</span>
<span className="relative z-10 text-inherit">{item.icon}</span>
</div>
<h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
<p className="text-sm text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">{item.description}</p>
Expand Down
12 changes: 6 additions & 6 deletions src/pages/interview-prep/OverviewTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
</span>
Comprehensive Coverage
</h3>
<ul className="space-y-3 text-gray-600 dark:text-gray-300">
<ul className="space-y-3">
<li className="flex items-start">
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<span>
Expand All @@ -153,21 +153,21 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<span>
<span className="text-gray-700 dark:text-gray-300">
<strong>Behavioral Excellence:</strong> STAR method framework, leadership scenarios, and
communication skills
</span>
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<span>
<span className="text-gray-700 dark:text-gray-300">
<strong>Company Intelligence:</strong> FAANG-specific strategies, culture insights, and
insider tips
</span>
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-orange-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
<span>
<span className="text-gray-700 dark:text-gray-300">
<strong>Mock Practice:</strong> Real-time simulations with feedback and performance tracking
</span>
</li>
Expand Down Expand Up @@ -290,7 +290,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
/>
<span className="relative z-10">{stage.step}</span>
<span className="relative z-10 text-inherit">{stage.step}</span>
</div>
<motion.div
className="absolute -top-2 -right-2 w-8 h-8 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center shadow-md"
Expand Down Expand Up @@ -401,7 +401,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
transition={{ duration: 0.4, delay: tipIndex * 0.1 }}
>
<span className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
<span className="leading-relaxed">{tip}</span>
<span className="leading-relaxed text-gray-700 dark:text-gray-300">{tip}</span>
</motion.li>
))}
</ul>
Expand Down
18 changes: 9 additions & 9 deletions src/pages/interview-prep/PracticeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
{showHints.has(question.id) ? "🔽" : "▶️"}
</motion.span>
<span className="font-bold">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
<span className="font-bold text-gray-900 dark:text-white">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
</div>
<motion.span
className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900/40 dark:to-purple-900/40 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full font-bold border border-blue-200 dark:border-blue-700"
Expand All @@ -623,7 +623,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
💡
</motion.span>
<span>Helpful Hints:</span>
<span className="text-gray-900 dark:text-white">Helpful Hints:</span>
</h4>
<ul className="space-y-4">
{question.hints.map((hint, i) => (
Expand All @@ -641,7 +641,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
{i + 1}
</motion.span>
<span className="leading-relaxed font-medium">{hint}</span>
<span className="leading-relaxed font-medium text-gray-700 dark:text-gray-300">{hint}</span>
</motion.li>
))}
</ul>
Expand All @@ -665,7 +665,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
{showResources.has(question.id) ? "🔽" : "▶️"}
</motion.span>
<span className="font-bold">
<span className="font-bold text-gray-900 dark:text-white">
{showResources.has(question.id) ? "Hide Resources" : "Show Resources"}
</span>
</div>
Expand Down Expand Up @@ -693,7 +693,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
🔗
</motion.span>
<span>Helpful Resources:</span>
<span className="text-gray-900 dark:text-white">Helpful Resources:</span>
</h4>
<div className="grid gap-3">
{question.links.map((link, i) => {
Expand Down Expand Up @@ -795,7 +795,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
🎯
</motion.span>
<span>Session Active</span>
<span className="text-gray-900 dark:text-white">Session Active</span>
</span>
<motion.span
className="text-2xl font-black text-blue-600 dark:text-blue-400"
Expand All @@ -818,7 +818,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
✓
</motion.span>
<span>Complete Practice</span>
<span className="text-gray-900 dark:text-white">Complete Practice</span>
</motion.button>
</motion.div>
) : (
Expand All @@ -845,7 +845,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
✓
</motion.span>
<span>Completed</span>
<span className="text-gray-900 dark:text-white">Completed</span>
</>
) : (
<>
Expand All @@ -855,7 +855,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
>
🚀
</motion.span>
<span>Start Practice</span>
<span className="text-gray-900 dark:text-white">Start Practice</span>
</>
)}
</motion.button>
Expand Down
Loading
Loading