Feat: Dark Mode #335
Feat: Dark Mode #335
Conversation
|
@jainaryan04 is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces several updates across various components in the Changes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (39)
frontend/src/App.jsx (1)
9-9: Remove unnecessary empty lines.There are a few unnecessary empty lines in the code:
- Line 9: This empty line between imports and the App function is not needed.
- Lines 18-19: These two empty lines at the end of the return statement are unnecessary.
Consider removing these lines to maintain consistent code style and improve readability.
Here's the suggested change:
import Preloader from './components/Preloader'; - function App() { return ( <> <Preloader /> <BackToTopButton /> <Navbar /> <Outlet /> <Footer /> - - </> ); }Also applies to: 18-19
frontend/src/hooks/useDarkMode.js (2)
4-5: LGTM: State initialization and theme computation are well-implemented.The use of localStorage for theme persistence is a good practice. The default theme 'light' is a sensible choice for accessibility.
Consider using a constant for the default theme value:
const DEFAULT_THEME = 'light'; const [theme, setTheme] = useState(localStorage.getItem('theme') || DEFAULT_THEME);This would make it easier to change the default theme in the future if needed.
7-12: LGTM: useEffect implementation is correct and efficient.The effect correctly applies the theme changes to the document root and updates localStorage. The dependency array is properly set.
Consider extracting the theme application logic into a separate function for improved readability:
const applyTheme = (newTheme, oppositeTheme) => { const root = window.document.documentElement; root.classList.remove(oppositeTheme); root.classList.add(newTheme); localStorage.setItem('theme', newTheme); }; useEffect(() => { applyTheme(theme, colorTheme); }, [theme, colorTheme]);This separation of concerns could make the code more maintainable in the future.
frontend/src/components/Pages/Pages.jsx (1)
Line range hint
1-26: Consider performance optimizations and best practicesThe overall structure of the component looks good, but here are a few suggestions for improvement:
Memoization: Since this is a potentially reusable component, consider wrapping it with React.memo to prevent unnecessary re-renders.
Dependency array for useEffect: Although the current useEffect doesn't depend on any variables, it's a good practice to always include an empty dependency array to ensure it only runs once on mount.
Accessibility: Consider adding an aria-label to the main div for better screen reader support.
Here's how you could implement these suggestions:
import React, { useEffect, forwardRef, memo } from 'react'; import PropTypes from "prop-types"; const Page = memo(forwardRef((props, ref) => { useEffect(() => { window.scrollTo(0, 0); }, []); // Empty dependency array return ( <div className="demoPage bg-amber-100" ref={ref} aria-label="Page content"> <div className="h-full">{props.children}</div> <p className="text-xs text-end text-black pb-4"> Page number: {props.number} </p> </div> ); })); Page.displayName = 'Page'; Page.propTypes = { children: PropTypes.node, number: PropTypes.number, }; export default Page;These changes should help optimize the component's performance and improve its accessibility.
frontend/src/components/ThemeToggle.jsx (2)
1-4: Imports look good, but consider moving CSS import.The imports are appropriate for the component's functionality. However, for better maintainability in larger applications, consider moving the CSS import to a higher-level component (e.g., App.js) or using a CSS-in-JS solution.
1-24: Overall assessment: Good start, but needs refinement.The
ThemeSwitchercomponent provides basic functionality for toggling between light and dark modes. However, there are several areas for improvement:
- Enhance accessibility and semantics.
- Add visual feedback for the current mode.
- Improve code formatting and consistency.
- Consider moving the CSS import to a higher-level component.
Please address these points to improve the component's usability and maintainability. After making the changes, feel free to request another review.
frontend/tailwind.config.js (2)
8-8: LGTM: Good use of dynamic viewport height.The 'screen-dvh' property using '100dvh' is an excellent solution for handling the dynamic viewport height on mobile devices. This addresses the common issue of viewport height changes due to browser UI elements.
Consider adding a fallback for browsers that don't support 'dvh' yet. You could use:
- 'screen-dvh': '100dvh', + 'screen-dvh': ['100vh', '100dvh'],This ensures compatibility with older browsers while still leveraging 'dvh' where supported.
14-27: LGTM: Comprehensive color scheme for light and dark modes.The new color definitions provide a solid foundation for implementing both light and dark modes. The structure is clear and allows for easy maintenance and expansion.
Consider the following enhancements:
- Add more shades for each color to provide greater flexibility in your design:
primary: { light: '#6366f1', dark: '#4f46e5', // ... more shades },
- Consider using CSS variables for easier theme switching:
colors: { primary: { light: 'var(--color-primary-light)', dark: 'var(--color-primary-dark)', }, // ... other colors },This approach would allow for easier runtime theme switching if needed in the future.
frontend/src/components/Pages/About.jsx (1)
11-11: Approve dark mode implementation with a suggestion.The addition of the "dark" class to implement dark mode is good. However, there might be a redundancy in the className.
Consider simplifying the className:
- <div id="about" className="dark relative w-full h-screen md:mt-28 dark:mt-0"> + <div id="about" className="dark relative w-full h-screen md:mt-28 mt-0">This change removes the potentially redundant
dark:mt-0as thedarkclass is always applied, making themt-0style take effect consistently.frontend/src/components/ui/Landing.jsx (3)
11-11: Consider simplifying the import path for index.cssThe current import path
'../../../src/index.css'seems unnecessarily complex. It goes up three directory levels and then back down tosrc/index.css. This could indicate an issue with the project structure or an inefficient import strategy.Consider simplifying this import by adjusting your project's import resolution settings or moving the CSS file to a more accessible location. For example:
-import '../../../src/index.css'; +import 'src/index.css';or
-import '../../../src/index.css'; +import '@/index.css';Depending on your project's configuration, one of these alternatives might provide a cleaner and more maintainable import statement.
38-38: Approve dark mode implementation with a minor suggestionThe addition of
className='bg-amber-100 dark:bg-background-dark'successfully implements the light/dark mode feature for the Landing component's background. This change aligns well with the PR objective of adding dark mode support.For consistency, consider using Tailwind's color palette for both light and dark modes. For example:
-<div className='bg-amber-100 dark:bg-background-dark'> +<div className='bg-amber-100 dark:bg-gray-900'>This assumes that
bg-background-darkis a custom class. Using Tailwind's built-in classes can improve consistency across the project and make the code more self-explanatory.
74-76: Consider adding an adaptive text color classThe removal of the
text-blackclass from the<h1>element allows the text color to adapt based on the theme. However, to ensure good contrast and readability in both light and dark modes, consider adding an adaptive color class.Suggestion:
-<h1 className="text-[4rem] md:text-[18rem] font-bold"> +<h1 className="text-[4rem] md:text-[18rem] font-bold text-gray-900 dark:text-gray-100"> PLAYCAFE </h1>This change ensures that the text will be dark in light mode and light in dark mode, maintaining good contrast in both themes.
frontend/src/components/Pages/Menu.jsx (2)
42-42: LGTM! Consider using a custom color for dark mode.The addition of
dark:bg-blackfor dark mode support is correct and follows Tailwind CSS conventions. However, pure black backgrounds can sometimes cause eye strain in dark mode.Consider using a slightly softer dark color, such as
dark:bg-gray-900, which might provide a more comfortable viewing experience:-className="w-full h-auto bg-amber-100 dark:bg-black items-center justify-center overflow-hidden" +className="w-full h-auto bg-amber-100 dark:bg-gray-900 items-center justify-center overflow-hidden"
82-82: Remove trailing space in className.There's an unnecessary trailing space at the end of the className string. While this doesn't affect functionality, it's good practice to keep the code clean and consistent.
Apply this minor change:
-className="w-full md:flex md:items-center md:justify-center " +className="w-full md:flex md:items-center md:justify-center"frontend/src/index.css (3)
46-60: Excellent implementation of CSS variables for theming!The use of CSS variables for background and text colors, along with the
.darkclass for overriding them, is a great approach for implementing a theme switcher. The transition on the body element ensures a smooth visual change between themes.Consider adding more semantic variable names for better readability:
:root { - --bg-color: white; - --text-color: black; + --theme-background: white; + --theme-text: black; } .dark { - --bg-color: #121212; - --text-color: white; + --theme-background: #121212; + --theme-text: white; } body { - background-color: var(--bg-color); - color: var(--text-color); + background-color: var(--theme-background); + color: var(--theme-text); transition: background-color 0.3s, color 0.3s; }
111-121: Creative and effective checked state styles!The checked state styles effectively change the switch's appearance, creating a visually distinct state. The use of
calc()for positioning the slider in the checked state is a good approach. The moon-like appearance created using box-shadow is creative and visually appealing.For consistency with the unchecked state, consider using a CSS variable for the border color in the checked state:
+:root { + --switch-border-color: #2eaafa; +} .slider { - border: solid 2px #2eaafa; + border: solid 2px var(--switch-border-color); } input:checked + .slider { background-color: rgb(30 41 59); - border: solid 2px 2eaafa; + border: solid 2px var(--switch-border-color); }
Line range hint
1-121: Consider improving overall code organizationThe new styles for the theme switcher are well-implemented. However, to improve the overall structure and maintainability of the CSS file, consider the following suggestions:
Group related styles together. For example, move the new theme-related styles (CSS variables, dark mode class, and switch styles) to a separate section, possibly after the Tailwind directives.
Add comments to clearly separate different sections of the CSS file, such as "Theme Styles", "Custom Components", etc.
Consider using Tailwind's
@applydirective for the switch styles to maintain consistency with the rest of the project if Tailwind is the primary styling approach.Here's an example of how you could reorganize the file:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;...); @tailwind base; @tailwind components; @tailwind utilities; /* Custom Tailwind Extensions */ @layer base { .font-outline-2 { -webkit-text-stroke: 2px white; } } @layer components { .primary-btn { @apply block; } .page-shadow { @apply shadow-[inset_0_0_8px_rgba(0,0,0,0.6),12px_12px_14px_rgba(0,0,0,0.9)]; } } /* Custom Fonts */ .Poppins { font-family: 'Poppins', sans-serif; } /* Scrollbar Styles */ ::-webkit-scrollbar { /* ... */ } /* Theme Styles */ :root { --theme-background: white; --theme-text: black; --switch-border-color: #2eaafa; } .dark { --theme-background: #121212; --theme-text: white; } body { background-color: var(--theme-background); color: var(--theme-text); transition: background-color 0.3s, color 0.3s; } /* Theme Switch Styles */ .switch { /* ... */ } /* ... rest of the switch styles ... */This organization will make the file easier to navigate and maintain as the project grows.
🧰 Tools
🪛 Biome
[error] 107-107: Expected a declaration, or an at rule but instead found ';'.
Expected a declaration, or an at rule here.
(parse)
frontend/src/components/Shared/GoogleTranslate.jsx (3)
53-53: LGTM! Consider adding a dark mode variant.The change from
bg-whitetobg-amber-100for the Google Translate dropdown menu is consistent with the PR's dark mode implementation. The amber color should work well in both light and dark modes.To further improve the component's adaptability to different themes, consider using Tailwind's dark mode variant:
- @apply w-full bg-amber-100 border border-gray-300 rounded px-2 py-1 text-sm; + @apply w-full bg-amber-100 dark:bg-amber-800 border border-gray-300 dark:border-gray-600 rounded px-2 py-1 text-sm text-gray-800 dark:text-gray-200;This change will ensure better contrast and readability in both light and dark modes.
77-77: LGTM! Consider adding a dark mode variant for consistency.The change from
bg-whitetobg-amber-100for the Google Translate menu frame is consistent with the PR's dark mode implementation and matches the styling of the dropdown menu.To maintain consistency with the previous suggestion and improve the component's adaptability to different themes, consider using Tailwind's dark mode variant here as well:
- @apply max-h-96 overflow-y-auto bg-amber-100 border border-gray-300 rounded; + @apply max-h-96 overflow-y-auto bg-amber-100 dark:bg-amber-800 border border-gray-300 dark:border-gray-600 rounded;This change will ensure visual consistency and better readability across both light and dark modes.
Line range hint
1-87: Overall, the changes look good and align with the dark mode implementation.The modifications to the Google Translate component's styling are consistent with the PR's objective. The switch to amber background colors should work well in both light and dark modes.
To further improve the implementation:
- Consider adding dark mode variants as suggested in the previous comments.
- Test the component in both light and dark modes to ensure readability and contrast.
- Verify that the changes don't affect the functionality of the Google Translate integration.
If you need any help implementing the dark mode variants or have any questions about the suggestions, please let me know. I'd be happy to provide more detailed guidance or code examples.
frontend/src/components/Shared/footer/Content.jsx (1)
Line range hint
9-140: Consider refactoring repeated dark mode class namesThe implementation of dark mode support is correct and consistent across all components. However, there's an opportunity to improve code maintainability by refactoring the repeated
text-black dark:text-whiteclass names.Consider creating a custom Tailwind CSS class or a reusable React component for these text elements to reduce repetition and improve maintainability.
Example of a custom Tailwind CSS class:
@layer components { .dark-mode-text { @apply text-black dark:text-white; } }Then you can use it like this:
<div className="dark-mode-text"> {/* Your content here */} </div>This refactoring would make it easier to update the dark mode styling in the future if needed.
frontend/src/components/Pages/Login.jsx (4)
63-63: Consider adjusting dark mode background color for better contrastThe addition of
dark:bg-amber-900to the form's class is correct for implementing dark mode support. However,amber-900might not provide sufficient contrast with the text in dark mode. Consider using a darker shade or a different color that ensures better readability and meets accessibility standards.You might want to try
dark:bg-gray-800ordark:bg-slate-900for better contrast. For example:- className="form z-10 p-16 bg-lightblue dark:bg-amber-900 flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]" + className="form z-10 p-16 bg-lightblue dark:bg-gray-800 flex flex-col items-start justify-center gap-4 rounded-lg border-2 border-black shadow-[4px_4px_0px_0px_black] bg-[#f1e9dc]"
99-105: LGTM: Dark mode updates for link colors with a suggestionThe dark mode color updates for the "Forgot Password" and "Register Here" links are correct and align with the PR's objective. The different hover colors for each link can improve user experience by distinguishing their functions.
For consistency, you might want to consider using the same hover color for both links in dark mode. For example:
- <div className="transform hover:text-red-500 dark:hover:text-yellow-300 transition"> + <div className="transform hover:text-red-500 dark:hover:text-green-200 transition">This would make both links use
dark:hover:text-green-200in dark mode, maintaining a consistent color scheme.
111-111: Consider updating button background for dark modeThe addition of
dark:text-whiteto the Google sign-in button's class is correct for implementing dark mode support. This change ensures the text is visible in dark mode.To further improve the button's appearance in dark mode, consider updating its background color as well. For example:
- className="text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 transition w-full" + className="text-[#666] dark:text-white font-semibold text-xl transform hover:scale-110 hover:-translate-y-1 hover:text-green-500 dark:hover:text-green-200 transition w-full"Also, consider adding a dark mode background to the button itself:
- className="button-confirm dark:text-white px-4 w-full h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]" + className="button-confirm dark:text-white px-4 w-full h-10 rounded-md border-2 border-black bg-beige dark:bg-gray-700 shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_gray-500] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"These changes will ensure the button is visually consistent in both light and dark modes.
123-123: Consider updating login button background for dark modeThe addition of
dark:text-whiteto the "Let's Log you in" button's class is correct for implementing dark mode support. This change ensures the text is visible in dark mode.To further improve the button's appearance in dark mode, consider updating its background color as well. You can apply the same changes suggested for the Google sign-in button:
- className="button-confirm dark:text-white px-4 w-30 h-10 rounded-md border-2 border-black bg-beige shadow-[4px_4px_0px_0px_black] text-[17px] font-semibold text-[#323232] cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]" + className="button-confirm dark:text-white px-4 w-30 h-10 rounded-md border-2 border-black bg-beige dark:bg-gray-700 shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_gray-500] text-[17px] font-semibold text-[#323232] dark:text-white cursor-pointer active:shadow-none active:translate-x-[3px] active:translate-y-[3px]"This change will ensure the button is visually consistent in both light and dark modes.
frontend/src/components/Pages/TodaysSpecial.jsx (2)
61-61: LGTM! Consider extracting common classes.The addition of
dark:bg-amber-900for dark mode support is good. The transition and hover effects are maintained, which is great for consistency.Consider extracting the common classes into a separate variable or utility class to reduce duplication, as this className is likely to be repeated for other cards.
const cardBaseClasses = "p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2"; const coffeeCardClasses = `${cardBaseClasses} bg-pink-100 dark:bg-amber-900`;Then you can use it like this:
<div className={coffeeCardClasses} style={{ minHeight: '350px', maxHeight: '350px' }} onMouseEnter={() => setHoveredItem('coffee')} onMouseLeave={() => setHoveredItem(null)} > {/* ... */} </div>
Line range hint
1-118: Overall feedback: Good implementation of dark mode with room for minor improvementsThe changes successfully add dark mode support to the TodaysSpecial component. Here's a summary of the review:
- Dark mode classes have been added consistently to most elements.
- The transition and hover effects are maintained, preserving the existing user experience.
- The use of Tailwind CSS classes is consistent with the existing code style.
Areas for improvement:
- Inconsistent dark mode background color for the food card.
- Potential for code duplication in className definitions.
- Possible missing dark mode text color for the food card description.
Consider addressing these minor issues to enhance the overall consistency and maintainability of the component. Great job on implementing the dark mode feature!
To further improve the component, consider:
- Extracting the card styles into a separate component or custom Tailwind class to reduce repetition.
- Using CSS variables for theme colors to make future changes easier.
- Implementing a theme context to manage dark mode state across the application, if not already done.
frontend/src/components/ui/ReviewCarousel.jsx (1)
110-110: Consider removing redundant dark mode classThe
dark:bg-blackclass on this div appears to be redundant, as it's already applied to the outermost div (line 103). Since this div is a child of the outermost div, it will inherit the dark background. Consider removing this class to avoid unnecessary repetition.Suggested change:
- <div className="dark:bg-black h-full p-4 md:p-20 items-center justify-center flex relative "> + <div className="h-full p-4 md:p-20 items-center justify-center flex relative">frontend/src/components/ui/FeedbackForm.jsx (2)
Line range hint
179-183: LGTM: Dark mode styling for submit button and loading stateThe changes to the submit button are appropriate:
- The addition of
dark:bg-green-700ensures proper styling in dark mode.- The button text changes to "Submitting..." during the loading state, providing good user feedback.
- The button is disabled during loading, preventing multiple submissions.
These changes improve both the visual consistency in dark mode and the overall user experience.
Consider adding a loading spinner or animation alongside the "Submitting..." text for enhanced visual feedback during form submission.
Line range hint
148-172: Consider adding dark mode support for star ratingWhile most of the component has been updated with dark mode classes, the star rating system still uses fixed colors. This might lead to visibility issues in dark mode.
Consider updating the star colors to be more visible in dark mode. You could use Tailwind classes or CSS variables to achieve this. For example:
<span className="star" style={{ color: currentRating <= (hover || rating) ? 'var(--star-selected-color, #ffc107)' : 'var(--star-unselected-color, #e4e5e9)', }} > <FaStar /> </span>Then, you can define these CSS variables in your global styles:
:root { --star-selected-color: #ffc107; --star-unselected-color: #e4e5e9; } .dark { --star-selected-color: #ffd700; --star-unselected-color: #718096; }This approach would ensure that the star rating is visible and consistent in both light and dark modes.
frontend/src/components/Shared/Navbar.jsx (3)
74-80: LGTM: Improved responsive styling with dark mode support.The conditional styling based on scroll state and theme is well-implemented. Consider extracting the className logic into a separate variable for improved readability:
const navClassName = `w-full fixed top-0 z-50 transition duration-300 ${ isScrolled ? 'bg-background-light dark:bg-background-dark shadow-lg' : 'bg-transparent text-black dark:text-white' }`;Then use it like this:
<nav className={navClassName}>This change would make the JSX cleaner and easier to maintain.
118-132: LGTM: Enhanced button styling with dark mode support.The updated styling for login/logout buttons is well-implemented, providing consistent appearance and behavior across different themes. The hover effects and shadow styling add depth and improve user interaction.
For consistency, consider applying the same dark mode border and shadow styling to the logout button as well:
className={`${baseTextColorClass} ${hoverTextColorClass} px-4 py-1 rounded-md border-2 border-black dark:border-white bg-beige shadow-[4px_4px_0px_0px_black] dark:shadow-[4px_4px_0px_0px_white] font-semibold`}This change would ensure both buttons have a consistent appearance in dark mode.
177-177: LGTM: Enhanced mobile menu styling with improved visual consistency.The changes to the mobile menu background improve its visual consistency with the main navbar. The conditional background color based on scroll state and the added shadow enhance the overall user experience.
To fully support dark mode, consider adding dark mode classes for the mobile menu background:
className={`md:hidden ${ isScrolled ? 'bg-amber-100 dark:bg-gray-800 shadow-lg' : 'bg-[#E0F0B1] dark:bg-gray-700 shadow-lg' }`}This change would ensure the mobile menu adapts to both light and dark themes.
frontend/src/components/Pages/Register.jsx (1)
47-50: Heading and button dark mode support looks good, but consider button background in dark modeThe dark mode classes added to the heading (
dark:text-white) and button (dark:text-black) are appropriate and maintain visibility and contrast in dark mode. However, the button's background color remains light in both modes.Consider adding a dark mode specific background color to the button for better visual harmony in dark mode. For example:
- <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] rounded-full p-4 dark:text-black"> + <button className="inline-flex items-center justify-center mt-4 bg-[#D9D9D9] hover:bg-[#C9C9C9] dark:bg-[#4A4A4A] dark:hover:bg-[#5A5A5A] rounded-full p-4 dark:text-white">This change would provide a darker background for the button in dark mode while maintaining readability.
frontend/src/components/Pages/Event.jsx (3)
Line range hint
133-141: LGTM: Dark mode support and responsive designThe changes appropriately implement dark mode support and maintain responsive design principles. The background color switches to black in dark mode, and the images are conditionally rendered for medium and larger screens.
For consistency with the previous dark mode implementation, consider using
dark:bg-amber-800instead ofdark:bg-blackto match the style of the calendar section.
178-178: Improve contrast for calendar dates in dark modeThe addition of
dark:bg-blackfor non-current dates in the calendar is consistent with the dark mode implementation. However, this might lead to poor contrast between the text and background in dark mode, especially if the text color isn't adjusted.Consider adding a
dark:text-whiteclass to ensure better readability:- : 'bg-gray-100 dark:bg-black' + : 'bg-gray-100 dark:bg-black dark:text-white'This change will improve the visibility of the calendar dates in dark mode.
191-193: Consider adjusting the "Learn More" button colors for dark modeThe changes to the "Learn More" button implement dark mode support, which is good. However, the use of
dark:bg-yellowmight be too bright in a dark environment and could cause eye strain for users.Consider using a softer color for the dark mode background, such as
dark:bg-amber-600ordark:bg-yellow-700, which would maintain the yellow theme while being easier on the eyes. For example:- <button className="bg-amber-100 dark:bg-yellow border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 dark:text-black hover:bg-green-500 hover:text-white"> + <button className="bg-amber-100 dark:bg-amber-600 border border-green-500 px-4 py-2 rounded-md mt-2 text-green-500 dark:text-white hover:bg-green-500 hover:text-white">This change will improve readability and user experience in dark mode.
frontend/src/components/Pages/Boardgame.jsx (2)
289-291: Card styling update looks great, with a minor suggestionThe updated card styling with
bg-amber-100for light mode anddark:bg-amber-800for dark mode provides excellent contrast and maintains the interactive nature of the cards. Great job on preserving the transition and hover effects!Consider adding a subtle border color for dark mode to enhance the card's visibility against the dark background:
- className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-amber-100 dark:bg-amber-800" + className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2 card border border-white bg-amber-100 dark:bg-amber-800 dark:border-amber-700"
318-318: Newsletter section background adapts well to dark modeThe addition of
dark:bg-blackfor the newsletter section ensures it adapts correctly to dark mode. The contrast between light and dark themes is maintained effectively.For consistency with the boardgame cards, consider using a dark amber shade instead of black:
- <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-black"> + <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-amber-900">This change would maintain the amber theme throughout the page in dark mode.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (22)
- frontend/package.json (1 hunks)
- frontend/src/App.jsx (2 hunks)
- frontend/src/components/Pages/About.jsx (1 hunks)
- frontend/src/components/Pages/Boardgame.jsx (5 hunks)
- frontend/src/components/Pages/Event.jsx (4 hunks)
- frontend/src/components/Pages/Login.jsx (2 hunks)
- frontend/src/components/Pages/Menu.jsx (2 hunks)
- frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx (1 hunks)
- frontend/src/components/Pages/Pages.jsx (1 hunks)
- frontend/src/components/Pages/Register.jsx (4 hunks)
- frontend/src/components/Pages/TodaysSpecial.jsx (4 hunks)
- frontend/src/components/Preloader.jsx (1 hunks)
- frontend/src/components/Shared/GoogleTranslate.jsx (2 hunks)
- frontend/src/components/Shared/Navbar.jsx (4 hunks)
- frontend/src/components/Shared/footer/Content.jsx (5 hunks)
- frontend/src/components/ThemeToggle.jsx (1 hunks)
- frontend/src/components/ui/FeedbackForm.jsx (6 hunks)
- frontend/src/components/ui/Landing.jsx (3 hunks)
- frontend/src/components/ui/ReviewCarousel.jsx (2 hunks)
- frontend/src/hooks/useDarkMode.js (1 hunks)
- frontend/src/index.css (1 hunks)
- frontend/tailwind.config.js (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/src/components/Preloader.jsx
🧰 Additional context used
🪛 Biome
frontend/src/index.css
[error] 107-107: Expected a declaration, or an at rule but instead found ';'.
Expected a declaration, or an at rule here.
(parse)
🔇 Additional comments (52)
frontend/src/App.jsx (3)
Line range hint
5-6: LGTM: New component imports.The new imports for
BackToTopButtonandPreloaderare correctly placed and follow the existing import style. This indicates good component organization.
Line range hint
13-14: LGTM: New components added to App structure.The addition of
PreloaderandBackToTopButtoncomponents enhances the app's functionality. ThePreloaderat the top of the component tree is logically placed, as it should be rendered first. TheBackToTopButtonplacement before theNavbaris appropriate.
Line range hint
13-14: Consider conditional rendering and performance implications.The addition of
PreloaderandBackToTopButtoncomponents can enhance user experience, but there are a few considerations:
The
Preloadermight affect the initial load time. Ensure it's implemented efficiently and doesn't delay the rendering of the main content.The
BackToTopButtonis useful for long pages, but consider rendering it conditionally based on scroll position to optimize performance.Both components are currently rendered unconditionally. Depending on their implementation, this might not be optimal for all pages or scenarios.
To better understand the implementation and potential impact, could you provide more details about these components? Specifically:
- How is the
Preloaderimplemented? Does it block the rendering of other components?- Is the
BackToTopButtonalready implemented with conditional rendering based on scroll position?You can use the following script to check the implementation of these components:
This will help us ensure these components are implemented optimally for performance and user experience.
✅ Verification successful
Performance and Rendering Optimizations Confirmed
After reviewing the implementations of
PreloaderandBackToTopButton, it's clear that both components manage their own conditional rendering internally:
Preloader
- Handles its
loadingstate to display the loader only when necessary.- Does not block the rendering of other components beyond the intended loading animation.
BackToTopButton
- Renders the button based on the user's scroll position, ensuring it only appears when needed.
Therefore, rendering these components unconditionally in
App.jsxdoes not adversely affect performance or user experience.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check the implementation of Preloader and BackToTopButton components # Check Preloader implementation echo "Preloader Implementation:" fd --type f --glob '**/Preloader.{js,jsx,ts,tsx}' | xargs cat echo "\nBackToTopButton Implementation:" fd --type f --glob '**/BackToTopButton.{js,jsx,ts,tsx}' | xargs catLength of output: 4225
frontend/src/hooks/useDarkMode.js (3)
1-3: LGTM: Imports and hook declaration are correct.The imports are appropriate for the hook's functionality, and the hook naming follows the React convention for custom hooks.
14-17: LGTM: Hook return value and export are correctly implemented.The hook follows the common pattern of returning the state and setter function as an array. The default export makes the hook easily importable in other components.
1-17: Overall assessment: Well-implemented custom hook for dark mode management.The
useDarkModehook is a well-structured and efficient implementation for managing theme state in the application. It correctly handles theme persistence using localStorage and applies theme changes to the document root. The code follows React best practices and provides a reusable solution for dark mode functionality.Minor suggestions for improvement have been made, including:
- Using a constant for the default theme value.
- Extracting the theme application logic into a separate function.
These suggestions aim to enhance code readability and maintainability but are not critical issues.
Great job on implementing this custom hook!
frontend/src/components/Pages/Pages.jsx (1)
11-11:⚠️ Potential issueConsider the implications of changing the background color
The background color class has been changed from
bg-whitetobg-amber-100. While this change does alter the appearance of the component, there are a few points to consider:
- This change doesn't seem to directly contribute to the implementation of a dark mode, which is the main objective of this PR.
- The amber background might not be suitable for all themes or color schemes, especially when considering accessibility and contrast ratios.
- Hardcoding a specific background color in this component might limit its reusability across different themes.
Consider the following suggestions:
- If this change is intended to support the dark mode feature, consider using a CSS variable or a theme-aware class that can adapt to both light and dark modes.
- If the amber background is a design decision, ensure it meets accessibility standards for contrast with the text color.
- For better theme support, consider using a more neutral or theme-dependent background color.
Example of a theme-aware approach:
<div className={`demoPage ${isDarkMode ? 'bg-gray-800' : 'bg-gray-100'}`} ref={ref}>This approach assumes you have a
isDarkModevariable available, which should be part of your theming logic.To ensure consistency across the project, let's check if similar background color changes have been made in other components:
This will help us verify if this change is part of a broader styling update or an isolated modification.
frontend/src/components/ThemeToggle.jsx (2)
6-7: Component declaration and hook usage look great!The
ThemeSwitchercomponent is well-structured as a functional component. The use of the customuseDarkModehook for managing the dark mode state demonstrates good separation of concerns and follows React best practices.
23-23: Export statement is correct.The default export of the
ThemeSwitchercomponent is appropriate and follows common practices for React components.frontend/tailwind.config.js (3)
3-3: LGTM: Dark mode configuration added correctly.The addition of
darkMode: 'class'is a good choice for implementing dark mode. This strategy allows for more granular control over dark mode application, which aligns well with the PR objective of implementing a dark mode feature.
Line range hint
1-45: Summary: Tailwind configuration successfully updated for dark mode support.The changes to
tailwind.config.jseffectively set up the foundation for implementing dark mode in the project. The new color schemes and the dark mode configuration are well-structured and align perfectly with the PR's objective. The existing configuration has been preserved where appropriate, maintaining consistency with the current design system.While the implementation is solid, consider the suggested enhancements for color shades and CSS variables in future iterations to provide even more flexibility and ease of maintenance.
Overall, this configuration update is a crucial step towards achieving the dark mode feature and improving the overall user experience of the application.
4-7: LGTM: Existing configuration retained appropriately.The unchanged sections of the configuration file, including content paths, font families, keyframes, and animations, have been correctly preserved. This maintains consistency with the existing design system while accommodating the new dark mode feature.
To ensure that the existing animations are still used in the updated codebase, let's run a quick check:
This will help confirm that the retained animations are still relevant to the project.
Also applies to: 9-13, 28-45
✅ Verification successful
Verified: Existing animations are being utilized correctly.
The search confirmed that
fadeInBounceandfadeOutBounceanimations are actively used in the codebase, ensuring that the existing Tailwind configuration is appropriately retained.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify usage of existing animations in the codebase # Test: Search for usage of fadeInBounce and fadeOutBounce animations rg --type css --type javascript --type typescript 'fadeInBounce|fadeOutBounce'Length of output: 115
Script:
#!/bin/bash # Description: Verify usage of existing animations in the codebase # Test: Search for usage of fadeInBounce and fadeOutBounce animations rg --type css --type js --type ts 'fadeInBounce|fadeOutBounce'Length of output: 473
frontend/package.json (1)
29-29: Approved: react-icons package updated to latest minor version.The update of react-icons from ^5.2.1 to ^5.3.0 is a good practice for keeping dependencies current. This minor version update likely includes new features or non-breaking changes.
To ensure this update doesn't introduce any unexpected behavior:
Review the changelog for react-icons 5.3.0 to understand the changes:
After merging, thoroughly test the application, particularly components using react-icons, to verify that all icons render correctly and there are no regressions.
Keep an eye on the application's performance metrics after deploying this change, as updates to frequently used packages like react-icons can sometimes have unforeseen impacts.
frontend/src/components/Pages/About.jsx (2)
Line range hint
1-58: Overall implementation looks good, suggest thorough testing.The changes successfully implement dark mode in the About component without altering its core functionality. This aligns well with the PR objectives.
To ensure the dark mode works as expected across different scenarios:
- Test the component in various screen sizes to verify responsive behavior.
- Check the component in different browsers to ensure cross-browser compatibility.
- Verify that the dark mode doesn't negatively impact the readability of the text over the background image.
Consider running the following commands to check for any responsive design issues:
4-4: Consider the implications of importing global styles.The addition of
import '../../../src/index.css';might lead to unintended style conflicts or overrides. Also, the use of a relative path with multiple parent directory references (../../../) could make the import fragile if the file structure changes.To ensure this import doesn't cause unintended side effects, please run the following script:
frontend/src/components/ui/Landing.jsx (1)
Line range hint
1-85: Overall assessment: Dark mode implementation looks good with minor suggestions for improvementThe changes in this file successfully contribute to the implementation of the dark mode feature, which aligns well with the PR objectives. The modifications are straightforward and don't introduce any major issues.
Key points:
- The CSS import path could be simplified for better maintainability.
- The background color implementation for light/dark modes is effective, with a minor suggestion for using consistent Tailwind classes.
- The text color for the "PLAYCAFE" heading could benefit from an explicit adaptive color class to ensure good contrast in both themes.
These minor improvements will enhance the consistency and robustness of the dark mode implementation. Great work on implementing this feature!
frontend/src/components/Pages/Menu.jsx (3)
47-47: LGTM! Proper implementation of dark mode for text.The addition of
dark:text-whitefor dark mode support is correct and follows Tailwind CSS conventions. This change ensures that the heading text remains visible and readable in both light and dark modes.
54-54: Excellent choice for dark mode color!The addition of
dark:bg-amber-900for dark mode support is well-implemented. Using a darker shade of amber (amber-900) for the dark mode is a great choice as it maintains the color theme while ensuring sufficient contrast. This approach creates a cohesive look across both light and dark modes.
Line range hint
1-93: Overall, excellent implementation of dark mode support!The changes made to implement dark mode in this component are well-executed and follow Tailwind CSS conventions. The color choices for dark mode are appropriate and maintain the visual theme of the component. A few minor suggestions were made for further improvement, but overall, this is a solid implementation of dark mode support.
Great job on enhancing the user experience by adding this feature!
frontend/src/index.css (1)
62-81: Well-structured custom switch component styles!The use of CSS variables for switch dimensions is excellent for maintainability. Hiding the default checkbox is the correct approach for custom styling. The switch dimensions seem appropriate for most use cases.
frontend/src/components/Shared/footer/Content.jsx (5)
9-9: LGTM: Dark mode support added correctlyThe background color change to support dark mode has been implemented correctly using Tailwind CSS classes. This change enhances the component's adaptability to different theme preferences.
43-43: LGTM: Consistent dark mode support for textThe text color change to support dark mode has been implemented correctly and consistently with the previous background color change. This ensures proper contrast and readability in both light and dark modes.
111-112: LGTM: Dark mode support added to About sectionThe text color changes in the About section of the Nav component have been implemented correctly to support dark mode. This maintains consistency with the overall theme and improves readability across different mode preferences.
123-124: LGTM: Dark mode support added to Socials sectionThe text color changes in the Socials section of the Nav component have been implemented correctly to support dark mode. This maintains consistency with the overall theme and improves readability across different mode preferences.
139-140: LGTM: Dark mode support added to Contact Us sectionThe text color changes in the Contact Us section of the Nav component have been implemented correctly to support dark mode. This maintains consistency with the overall theme and improves readability across different mode preferences.
frontend/src/components/Pages/Login.jsx (3)
59-59: LGTM: Dark mode support added to main containerThe addition of
dark:bg-blackto the main container's class is correct for implementing dark mode support. This change aligns well with the PR's objective of adding dark mode functionality.
65-68: LGTM: Dark mode text color updates for title and subtitleThe addition of
dark:text-whiteto the title and subtitle classes is correct for implementing dark mode support. This change ensures good contrast and readability in dark mode, aligning well with the PR's objective.
Line range hint
1-132: Overall: Good implementation of dark mode with minor suggestions for improvementThe changes made to the Login component successfully implement dark mode support, aligning well with the PR objectives. The dark mode styles have been consistently applied to text elements, containers, and buttons throughout the component.
Key points:
- Main container and form background colors have been updated for dark mode.
- Text colors have been adjusted to ensure readability in dark mode.
- Button and link hover states have been considered for dark mode.
The suggested improvements mainly focus on:
- Adjusting the form's dark mode background color for better contrast.
- Ensuring consistency in link hover colors.
- Updating button backgrounds for better visibility in dark mode.
These changes significantly enhance the user experience by providing a cohesive dark mode option. Great job on implementing this feature!
frontend/src/components/ui/ReviewCarousel.jsx (3)
103-103: LGTM: Dark mode background addedThe addition of
dark:bg-blackto the outermost div correctly implements dark mode support for the component's background. This change aligns with Tailwind CSS best practices for dark mode implementation.
105-107: LGTM: Dark mode text color addedThe addition of
dark:text-whiteto the h1 element ensures proper text visibility in dark mode. This change is consistent with the dark mode implementation and improves the overall user experience.
Line range hint
1-190: Overall feedback on dark mode implementationThe dark mode implementation in the
ReviewCarouselcomponent is generally well-executed. You've consistently used Tailwind CSS classes to apply dark mode styles, which is a good practice. The changes improve the component's compatibility with dark themes, enhancing user experience.Here's a summary of the review:
- The dark background and text color changes are appropriate and approved.
- There's a potential redundancy in applying
dark:bg-blackto a child div, which could be removed.- The margin change (mb-4 to mb-1) needs clarification as it's unrelated to dark mode and might affect layout.
Consider addressing these minor points to further improve the implementation. Great job on adding dark mode support to this component!
frontend/src/components/ui/FeedbackForm.jsx (4)
87-87: LGTM: Dark mode background addedThe addition of
dark:bg-blackto the outer div is appropriate for implementing dark mode support. This ensures the background color changes to black when the dark mode is active.
97-101: LGTM: Dark mode text colors addedThe addition of
dark:text-green-500to the heading anddark:text-whiteto the paragraph is appropriate for dark mode support. These changes ensure good text visibility and contrast when the dark mode is active.
108-113: LGTM: Dark mode background for image container and form wrapperThe addition of
dark:bg-green-500to both the image container and form wrapper is appropriate. This change ensures visual consistency between these elements in dark mode.
Line range hint
123-145: LGTM: Dark mode background for form inputsThe addition of
dark:bg-blackto the input fields and textarea is appropriate. This change ensures that the form elements have a suitable background color in dark mode, maintaining readability and visual consistency.frontend/src/components/Shared/Navbar.jsx (5)
5-6: LGTM: New imports for theming support.The addition of the global CSS import and the ThemeToggle component are appropriate for implementing dark mode support.
87-87: LGTM: Improved logo compatibility with dark mode.Removing the
bg-whiteclass from the logo image is a good change. It allows the logo to adapt to different themes, improving its visibility in both light and dark modes.
111-115: LGTM: Improved desktop menu layout and theme toggle integration.The added space between menu items and the login/logout button improves the overall layout. The insertion of the ThemeToggle component in this location provides easy access for users to switch between light and dark modes.
137-143: LGTM: Improved mobile menu layout with theme toggle integration.The changes to the mobile menu button area are well-implemented. Adding space between the ThemeToggle and the mobile menu button improves the layout and usability on smaller screens. The insertion of the ThemeToggle component ensures that users can switch themes regardless of the device they're using.
Line range hint
1-265: Overall assessment: Well-implemented dark mode support with minor suggestions for improvement.The changes to the Navbar component effectively implement dark mode support and improve overall responsiveness. The code is well-structured and follows React best practices. Here's a summary of the main points:
- Appropriate imports and integration of the ThemeToggle component.
- Responsive styling with smooth transitions between scroll states and themes.
- Improved button styling with consistent hover effects and shadow styling.
- Enhanced mobile menu layout with theme toggle integration.
- Conditional background colors for improved visual consistency.
Consider implementing the suggested minor improvements for even better consistency and maintainability:
- Extracting the nav className logic into a separate variable.
- Applying consistent dark mode styling to both login and logout buttons.
- Adding dark mode classes to the mobile menu background.
These changes will further enhance the dark mode implementation and improve the overall code quality.
frontend/src/components/Pages/Register.jsx (4)
44-44: LGTM: Dark mode support added to main containerThe addition of
dark:bg-blackanddark:text-whiteclasses to the main container div correctly implements dark mode support. This change is consistent with the PR objective and provides a good base for the dark theme.
64-64: LGTM: Dark mode support added to reservation form containerThe addition of the
dark:bg-amber-900class to the reservation form container is appropriate and consistent with the dark mode implementation. This change provides a suitable background color for the form in dark mode, maintaining visual hierarchy and readability.
138-138: Dark mode implementation looks good, but consider text color in board games sectionThe dark mode classes added to the "Reserve Now" button (
dark:bg-amber-500 dark:text-black) and the popular board games container (dark:bg-black) are appropriate and consistent with the dark theme implementation.However, there might be a potential issue with the text color of the board game titles and player counts in dark mode. No specific dark mode class was added for these text elements, which might result in poor visibility against the dark background.
To verify this, please check if the text is visible in dark mode. If not, consider adding appropriate dark mode text color classes to the title and player count elements.
For example, you might need to add
dark:text-whiteor a similar light color class to these elements:<div className="font-medium dark:text-white">{game.title}</div> <div className="text-muted-foreground text-sm dark:text-gray-300"> {game.players} </div>Please confirm if this adjustment is necessary after testing in dark mode.
Also applies to: 151-151
Line range hint
1-191: Overall, good implementation of dark mode supportThe changes in this file consistently implement dark mode support across the Register component, aligning well with the PR objective. The dark mode classes added to various elements generally maintain good visual consistency and readability.
A few minor suggestions were made:
- Consider adjusting the button background color in dark mode for better visual harmony.
- Verify the text color visibility in the board games section when in dark mode.
These small tweaks will further enhance the dark mode user experience. Great job on implementing this feature!
frontend/src/components/Pages/Event.jsx (5)
120-120: LGTM: Dark mode support added to main containerThe addition of
dark:bg-blackto the main container div is appropriate for implementing dark mode support. This change ensures that the background color switches to black in dark mode, improving visibility and user experience.
150-153: LGTM: Consistent dark mode implementationThe changes to the background colors for both the main container and the sub-container (calendar section) are appropriate for dark mode support. The use of
dark:bg-blackfor the main container anddark:bg-amber-800for the calendar section provides a good contrast and maintains visual hierarchy in dark mode.
186-188: LGTM: Dark mode support for "Register for Event" buttonThe changes to the "Register for Event" button appropriately implement dark mode support. The use of
dark:bg-blackfor the background anddark:text-whitefor the text ensures that the button remains visible and readable in both light and dark modes.
197-197: LGTM: Consistent dark mode support for "Event Pictures" sectionThe addition of
dark:bg-amber-800to the "Event Pictures" section background is appropriate and consistent with the dark mode implementation in the calendar section. This change ensures visual consistency across different sections of the page in dark mode.
Line range hint
1-292: Summary: Dark mode implementation is well-executed with minor suggestions for improvementThe changes in this file successfully implement dark mode support across various components of the Event page. The modifications are consistent and improve the user experience in dark mode. Here's a summary of the review:
- Dark mode backgrounds are appropriately applied to containers and sections.
- Button styles are updated to ensure visibility and readability in both light and dark modes.
- The calendar component now supports dark mode, with a suggestion to improve text contrast for non-current dates.
- The "Learn More" button color in dark mode could be adjusted for better user comfort.
Overall, the implementation is solid, with only minor suggestions for improvement. Great job on enhancing the accessibility and user experience of the Event page!
frontend/src/components/Pages/Boardgame.jsx (3)
216-216: Dark mode implementation looks good!The addition of
dark:bg-blackanddark:text-whiteclasses to the main container div correctly implements dark mode support. This ensures that the background and text colors adapt appropriately when the dark theme is activated.
301-301: Card content styling is consistent with dark modeThe addition of
dark:bg-amber-800to the card content container ensures visual consistency in dark mode. The preservation of transition and transform properties maintains the smooth interactive sliding effect. Well done!
Line range hint
1-371: Overall, great progress on dark mode implementation!The changes made to implement dark mode support in the Boardgame component are well-executed. The use of Tailwind CSS classes for dark mode is consistent and effective throughout most of the component. Here's a summary of the review:
- The main container, boardgame cards, and card content areas have been successfully updated to support dark mode.
- The newsletter section background adapts to dark mode, though there's a suggestion to use a dark amber shade for consistency.
- The instructions modal background needs dark mode support to ensure visibility in both themes.
To further improve the implementation:
- Consider adding a subtle border color to the cards in dark mode for better visibility.
- Ensure consistency in the use of amber shades across all sections in dark mode, including the newsletter section and modal background.
These minor adjustments will enhance the overall user experience and maintain visual consistency across different themes. Great job on the dark mode implementation!
frontend/src/components/Pages/MenuPages.jsx/ThankPage/ThankPage.jsx
Outdated
Show resolved
Hide resolved
|
@jainaryan04 remove the conflicts and delete package.json |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Also the hamburger munu is not visible |
@RamakrushnaBiswal Let me know if any changes are needed. Also, it would be great if you could update it to level 3 instead of 2 since I had to change almost all the files :)
Summary by CodeRabbit
Release Notes
New Features
ThemeSwitchercomponent for toggling between light and dark themes.PreloaderandBackToTopButtoncomponents to enhance user experience.Styling Enhancements
Navbar,About,Boardgame, and others.Bug Fixes
Documentation