Skip to content

✨Enhancement: Adapt "How it works" text color for Light Mode theme (#73) #90

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

Open
nitishchaubeyy wants to merge 1 commit into
base: main
Choose a base branch
from
+15 −15
Open

✨Enhancement: Adapt "How it works" text color for Light Mode theme (#73) #90

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 15 additions & 15 deletions src/components/ui/HowItWorksModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const HowItWorksModal = ({ onClose }) => {
{
num: "05",
title: "Climb Leaderboards & Mint Badges",
desc: "Compare your ratings globally, locally, or in specialized tracks like RankHer. Unlock verified developer badges and showcase your achievements. Soon, badges will be minted as Polygon blockchain tokens for profile verification.",
desc: "Compare your ratings globally, locally, or in specialized tracks like RankHer. Unlock verified developer badges and showcase your achievements. Soon, badges builds will be minted as Polygon blockchain tokens for profile verification.",
icon: Trophy,
color: "from-amber-600 to-yellow-500 text-amber-400"
}
Expand All @@ -50,39 +50,39 @@ export const HowItWorksModal = ({ onClose }) => {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
className="absolute inset-0 bg-slate-950/70 backdrop-blur-md"
className="absolute inset-0 bg-slate-900/40 dark:bg-slate-950/70 backdrop-blur-md"
/>

{/* Modal Box */}
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className="relative w-full max-w-3xl max-h-[85vh] bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 p-6 md:p-8 text-slate-100 flex flex-col gap-6"
className="relative w-full max-w-3xl max-h-[85vh] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl shadow-2xl overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300 dark:scrollbar-thumb-slate-800 p-6 md:p-8 text-slate-800 dark:text-slate-100 flex flex-col gap-6"
>
{/* Close Button */}
<button
onClick={onClose}
className="absolute top-4 right-4 md:top-6 md:right-6 p-2 rounded-xl border border-slate-800 hover:bg-slate-800 text-slate-400 hover:text-white transition cursor-pointer"
className="absolute top-4 right-4 md:top-6 md:right-6 p-2 rounded-xl border border-slate-200 dark:border-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition cursor-pointer"
>
<X className="w-5 h-5" />
</button>

{/* Header */}
<div className="space-y-2 pr-10">
<span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
<span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-indigo-100 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-500/20">
Platform Lifecycle
</span>
<h2 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-violet-400 via-indigo-400 to-blue-400 my-0">
<h2 className="text-3xl font-black bg-clip-text text-transparent bg-gradient-to-r from-violet-600 via-indigo-600 to-blue-600 dark:from-violet-400 dark:via-indigo-400 dark:to-blue-400 my-0">
How RankerHub Works
</h2>
<p className="text-sm text-slate-400 font-medium my-0">
<p className="text-sm text-slate-600 dark:text-slate-400 font-medium my-0">
Follow these steps to synchronize your metrics, conquer challenges, and unlock verified achievements.
</p>
</div>

{/* Steps Vertical Timeline Layout */}
<div className="relative border-l border-slate-800/80 ml-4 md:ml-6 my-4 pl-6 md:pl-8 space-y-6">
<div className="relative border-l border-slate-200 dark:border-slate-800/80 ml-4 md:ml-6 my-4 pl-6 md:pl-8 space-y-6">
{steps.map((step, idx) => {
const Icon = step.icon;
return (
Expand All @@ -94,16 +94,16 @@ export const HowItWorksModal = ({ onClose }) => {

<div className="space-y-2">
<div className="flex items-center gap-2">
<span className="text-[10px] font-black text-violet-500 dark:text-violet-400 bg-violet-500/10 px-2 py-0.5 rounded border border-violet-500/20 tracking-wider">
<span className="text-[10px] font-black text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-500/10 px-2 py-0.5 rounded border border-violet-200 dark:border-violet-500/20 tracking-wider">
STEP {step.num}
</span>
<h3 className="text-base font-extrabold text-white my-0 leading-tight">
<h3 className="text-base font-extrabold text-slate-900 dark:text-white my-0 leading-tight">
{step.title}
</h3>
</div>

{/* Detailed Description */}
<p className="text-xs text-slate-400 leading-relaxed font-semibold max-w-2xl my-0">
<p className="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold max-w-2xl my-0">
{step.desc}
</p>
</div>
Expand All @@ -113,9 +113,9 @@ export const HowItWorksModal = ({ onClose }) => {
</div>

{/* Footer info banner */}
<Card className="p-4 bg-gradient-to-r from-violet-900/20 to-indigo-900/20 border-violet-800/40 text-center">
<p className="text-xs text-indigo-300 font-bold my-0 flex items-center justify-center gap-1.5">
<CheckCircle2 className="w-4 h-4 text-indigo-400" />
<Card className="p-4 bg-gradient-to-r from-violet-100 to-indigo-100 dark:from-violet-900/20 dark:to-indigo-900/20 border-violet-200 dark:border-violet-800/40 text-center">
<p className="text-xs text-indigo-700 dark:text-indigo-300 font-bold my-0 flex items-center justify-center gap-1.5">
<CheckCircle2 className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
Ready to climb? Link your profile, start coding, and watch your developer standings rise!
</p>
</Card>
Expand All @@ -124,4 +124,4 @@ export const HowItWorksModal = ({ onClose }) => {
);
};

export default HowItWorksModal;
export default HowItWorksModal;
Loading