Skip to content

fix : add dark-mode theming and remove emojis from OnboardingModal#1908

Open
tmdeveloper007 wants to merge 2 commits into
aryandas2911:mainfrom
tmdeveloper007:#1903
Open

fix : add dark-mode theming and remove emojis from OnboardingModal#1908
tmdeveloper007 wants to merge 2 commits into
aryandas2911:mainfrom
tmdeveloper007:#1903

Conversation

@tmdeveloper007

Copy link
Copy Markdown

Summary of What Has Been Done

Replaced all hardcoded dark-mode hex colors in OnboardingModal with Tailwind dark mode variants. Replaced all emoji characters with Lucide React icon components. Added comprehensive ARIA accessibility attributes.

Changes Made

  • Replaced hardcoded bg-[#141f2b] with bg-white dark:bg-slate-900
  • Replaced hardcoded text-[#e2eaf2] with text-slate-900 dark:text-slate-100
  • Replaced hardcoded text-[#7a9bb5] with text-slate-500 dark:text-slate-400
  • Replaced hardcoded text-[#c5d8e8] with text-slate-800 dark:text-slate-200
  • Replaced hardcoded text-[#5a7a92] with text-slate-400 dark:text-slate-500
  • Replaced hardcoded border-[#1e3a4a] with border-slate-200 dark:border-slate-700
  • Replaced hardcoded bg-[#0f1923] with bg-slate-50 dark:bg-slate-800
  • Replaced hardcoded bg-[#1e2e3d] with bg-slate-100 dark:bg-slate-800
  • Replaced hardcoded border-[#1e2e3d] with border-slate-200 dark:border-slate-700
  • Replaced hardcoded border-[#1e3a4a] with border-slate-200 dark:border-slate-700
  • Added aria-label="Skip onboarding tour" to skip button
  • Added aria-label="Go to previous step" to back button
  • Added aria-label="Go to next step" to next button
  • Added aria-label="Start using DailyForge" to Let's go button
  • Added aria-current="step" to active step dot
  • Added role="progressbar" and aria-valuenow/min/max to progress bar
  • Replaced emoji icons (Sparkles, CheckCircle, Calendar, BarChart2, FileText, MousePointer, AlertTriangle, ClipboardList, Flame) with equivalent Lucide React components
  • Replaced "Let's go! 🚀" with "Let's go!" (removed emoji)
  • Replaced "← Back" and "Next →" text arrows with <ArrowLeft> and <ArrowRight> Lucide components

Impact it Made

  • Onboarding modal now adapts to light and dark theme preferences
  • All content is accessible via screen readers with proper labels
  • Consistent visual language using the project's Lucide icon library
  • Better rendering across different fonts and environments

Closes #1903
Closes #1905
Closes #1906

Note

Please assign this PR to the tmdeveloper007 account.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant