fix: modernize design system, improve responsiveness and resolve UI inconsistencies

[BatoolAmina]

🔗 Related Issue

Closes #1506

📌 Summary

This PR delivers a comprehensive frontend design system modernization focused on improving theme consistency, responsiveness, accessibility, layout stability, and overall user experience. The update replaces inconsistent styling patterns with standardized design tokens, fixes cross-theme visibility issues, resolves component scaling bugs, improves typography hierarchy, and enhances dashboard interaction behavior.

🛠 Type of Change

• 🐛 Bug Fix
• 🚀 UI/UX Enhancement
• ♻️ Code Refactoring
• ⚡ Performance Improvement

---

✨ Changes Made

🎨 Theme & Design System Standardization

• Replaced hardcoded color values with semantic theme-aware utility classes.
• Unified application backgrounds using bg-slate-50 and dark:bg-slate-950.
• Standardized card surfaces and component styling across the application.
• Improved light and dark mode consistency.

🔤 Typography Improvements

• Standardized metadata labels using:
  • text-xs
  • font-bold
  • uppercase
  • tracking-wider
• Enhanced heading hierarchy using:
  • font-black
  • tracking-tight
• Improved readability and visual consistency.

📱 Responsive Layout Fixes

• Applied box-border and w-full sizing patterns across forms and modals.
• Fixed overflow and clipping issues on smaller screens.
• Improved responsive behavior across mobile and tablet breakpoints.

📊 Dashboard & Analytics Enhancements

• Refined dashboard spacing and alignment.
• Updated productivity heatmap colors with a modern cyan/teal palette.
• Fixed Contribution Heatmap tooltip positioning during vertical scrolling.
• Improved chart visibility across light and dark themes.
• Added safer fallback handling for empty states.

✅ Task & Kanban Improvements

• Stabilized horizontal scrolling behavior inside Kanban swim lanes.
• Improved task card styling and priority indicators.
• Fixed modal scaling issues on smaller devices.
• Standardized notes widget layout and separators.

📅 Routine Builder Improvements

• Unified timeline grid proportions and spacing.
• Improved task library alignment and interactions.
• Standardized routine cards and overview modals.
• Enhanced shared routine page responsiveness.

🔐 Authentication & Shared Components

• Improved onboarding modal visibility.
• Optimized Theme Toggle and Two-Factor Authentication responsiveness.
• Standardized loading and error states using design tokens.

⚡ Performance & Infrastructure Updates

• Removed unnecessary page transitions from dashboard-related routes.
• Limited animations to onboarding and landing experiences.
• Updated timer displays to use monospaced fonts and prevent layout shifting.
• Simplified conditional rendering logic across core components.

---

📸 Screenshots

---

✅ Checklist

• Code runs locally
• Followed project structure
• No console errors
• Properly tested changes
• Linked the issue

---

🚀 Notes for Reviewers

Please verify:

• Contribution Heatmap tooltips remain aligned during scrolling.
• Modal forms scale correctly on mobile devices.
• Theme switching works consistently across all pages.
• Kanban horizontal scrolling behaves smoothly.
• Dashboard typography and spacing remain consistent.
• Live clock updates no longer cause layout shifts.

[BatoolAmina]

@aryandas2911 I have completed the requested changes and pushed the latest commits to this PR. Please check the updates and let me know if any further modifications are needed.

[aryandas2911]

resolve conflicts and lint

[BatoolAmina]

Hi, I have resolved the conflicts and fixed the lint issues. The changes have been pushed. Please review them