Skip to content
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

Added Dark Theme Implementation #79

Closed
wants to merge 1 commit into from
Closed

Added Dark Theme Implementation #79

Show file tree
Hide file tree
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
17 changes: 10 additions & 7 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
// src/App.js
import React from 'react';
import './App.css';

import Navbar from './Components/Shared/Navbar';
import Footer from "./Components/Shared/Footer"
import Footer from './Components/Shared/Footer';
import { ThemeProvider } from './context/themeContext.jsx';
import { Outlet } from 'react-router-dom';

function App() {
return (
<div>
<Navbar />
<Outlet />
<Footer />
</div>
<ThemeProvider>
<div className="min-h-screen">
<Navbar />
<Outlet />
<Footer />
</div>
</ThemeProvider>
);
}

Expand Down
4 changes: 2 additions & 2 deletions src/Components/Pages/Boardgame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ export default function Boardgame() {
</div>
</div>
</section>
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-[#070707]">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Extend dark mode implementation across the component

While the dark mode implementation for the newsletter section is a good start, it appears to be incomplete for the entire Boardgame component. Consider applying dark mode styles to other sections of the component to ensure a consistent user experience.

To address this, you could:

  1. Add dark mode classes to other sections, such as the hero section and the boardgame grid.
  2. Use a consistent color scheme for dark mode across all sections.

Example for the hero section:

<section className="w-full pt-12 md:pt-24 lg:pt-32 dark:bg-gray-900 dark:text-white">

Example for the boardgame grid:

<section className="w-full py-12 md:py-24 lg:py-32 dark:bg-gray-900">

🛠️ Refactor suggestion

Consider using a theme variable for the dark background color

The dark background color (#070707) is hardcoded. It's generally better to use a theme variable for such colors to ensure consistency across the application and ease of maintenance.

Consider using a Tailwind CSS theme variable or a CSS custom property for the dark background color. For example:

- <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-[#070707]">
+ <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900">

This assumes that you have defined appropriate colors in your Tailwind configuration.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-[#070707]">
<section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900">

<div className="container mx-auto px-4 md:px-6 text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl mb-4">
Subscribe to our Newsletter
Expand All @@ -221,7 +221,7 @@ export default function Boardgame() {
<form className="flex flex-col items-center space-y-4 sm:space-y-0 sm:flex-row sm:space-x-4 justify-center">
<input
type="email"
className="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
className="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#fff] dark:text-black"
placeholder="Enter your email"
required
/>
Expand Down
62 changes: 31 additions & 31 deletions src/Components/Pages/Event.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,31 +41,31 @@ useEffect(() => {
<>
<div
id="event"
className="w-full h-full bg-amber-100 md:overflow-hidden "
className="w-full h-full bg-amber-100 dark:bg-dark-bg md:overflow-hidden "
>
<section className="w-full h-full py-12 md:py-24 lg:py-32 bg-muted flex justify-center md:overflow-hidden ">
<div className="container grid items-center justify-center gap-4 px-4 text-center md:px-6">
<div className="space-y-4">
<h1 className="text-5xl font-bold mt-6 md:mt-0 tracking-tighter md:text-4xl/tight lg:text-7xl">
<h1 className="text-5xl font-bold mt-6 md:mt-0 dark:text-[#faf6cb] tracking-tighter md:text-4xl/tight lg:text-7xl">
Upcoming Events and Programs
</h1>
<p className="mx-auto max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed ">
<p className="mx-auto max-w-[600px] text-muted-foreground dark:text-gray-300 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed ">
Explore our exciting lineup of board game events and educational
programs.
</p>
</div>

</div>
</section>
<div className="min-h-screen bg-amber-100 p-4">
<div className="container mx-auto flex flex-col flex-col-reverse lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
<div className="min-h-screen bg-amber-100 dark:bg-dark-bg p-4">
<div className="container mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
{/* Calendar */}
<div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-1/3">
<h2 className="text-xl font-bold mb-4">Event Calendar</h2>
<div className="bg-white dark:bg-[#040f1b] shadow-md rounded-lg p-6 w-full lg:w-1/3">
<h2 className="text-xl dark:text-[#4FF0D4] font-bold mb-4">Event Calendar</h2>
<div className="text-center mb-4">
<span className="text-2xl font-semibold">{months[currentMonth]}</span> <span className="text-2xl">{currentYear}</span>
<span className="text-2xl dark:text-[#09c5d6] text-font-semibold">{months[currentMonth]}</span> <span className="text-2xl dark:text-[#a5db2e]">{currentYear}</span>
</div>
<div className="grid grid-cols-7 gap-4 text-center">
<div className="grid grid-cols-7 gap-4 text-center dark:text-[#ff3434]">
{daysOfWeek.map((day) => (
<div key={day} className="font-bold">{day}</div>
))}
Expand All @@ -89,8 +89,8 @@ useEffect(() => {
</div>
</div>
{/* Pictures */}
<div className="bg-white shadow-md rounded-lg p-6 w-full lg:w-2/3">
<h2 className="text-xl font-bold mb-4">Event Pictures</h2>
<div className="bg-white dark:bg-[#dae15c] shadow-md rounded-lg p-6 w-full lg:w-2/3">
<h2 className="text-xl dark:text-[#676761] font-bold mb-4">Event Pictures</h2>
<div className="splide w-full h-full">
<div className="splide__track w-full ">
<ul className="splide__list">
Expand Down Expand Up @@ -120,23 +120,23 @@ useEffect(() => {
/>
</div>
<div className="w-full lg:m-10 md:m-10">
<h1 className="text-4xl font-semibold">
<h1 className="text-4xl dark:text-gray-300 font-semibold">
5-Minute MARVEL Cinematic Experience
</h1>
<h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8 ">
<h4 className="text-xl text-muted text-slate-700 dark:text-white italic mt-2 leading-8 ">
5-Minute Marvel is a cooperative card game designed for
fast-paced, high-energy play, perfect for Marvel fans and those
who enjoy quick and dynamic gameplay.
</h4>
<div className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
<div className="text-xl text-muted text-slate-700 dark:text-slate-300 italic mt-2 leading-8">
<b>Date: </b> <i>May 10, 2023</i>
<br />
<b>Time: </b> <i>2:00 PM - 3:30 PM</i>
<br />
<b>Age: </b> <i>All ages</i>
<br />
</div>
<button className="btn btn-primary bg-[#C3E0DC] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
<button className="btn btn-primary bg-[#C3E0DC] dark:bg-[#bc832d] dark:hover:bg-[#c8a153] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
Book your slot
</button>
</div>
Expand All @@ -150,24 +150,24 @@ useEffect(() => {
/>
</div>
<div className="w-full lg:m-10 md:m-10">
<h1 className="text-4xl font-semibold">
<h1 className="text-4xl dark:text-gray-300 font-semibold">
A Game of Thrones: The Board Game
</h1>
<h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8 text-wrap ">
<h4 className="text-xl text-muted text-slate-700 dark:text-white italic mt-2 leading-8 text-wrap ">
Set in the world of Westeros, players represent the great houses
vying for control of the Iron Throne. The game captures the
political intrigue, warfare, and alliances from the books and TV
series.
</h4>
<div className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
<div className="text-xl text-muted text-slate-700 dark:text-slate-300 italic mt-2 leading-8">
<b>Date: </b> <i>May 10, 2023</i>
<br />
<b>Time: </b> <i>2:00 PM - 3:30 PM</i>
<br />
<b>Age: </b> <i>All ages</i>
<br />
</div>
<button className="btn btn-primary bg-[#C3E0DC] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
<button className="btn btn-primary bg-[#C3E0DC] dark:bg-[#bc832d] dark:hover:bg-[#c8a153] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
Book your slot
</button>
</div>
Expand All @@ -181,24 +181,24 @@ useEffect(() => {
/>
</div>
<div className="w-full lg:m-10 md:m-10">
<h1 className="text-4xl font-semibold">
<h1 className="text-4xl dark:text-gray-300 font-semibold">
Bang! Dice Expansion: Old Saloon
</h1>
<h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8 ">
<h4 className="text-xl text-muted text-slate-700 dark:text-white italic mt-2 leading-8 ">
The game retains its Wild West theme, where players assume roles
such as Sheriff, Outlaws, Renegades, and Deputies. The expansion
adds a thematic layer of the board game &quot;Old Saloon&quot;
with new dice, characters, and modules.
</h4>
<div className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
<div className="text-xl text-muted text-slate-700 dark:text-slate-300 italic mt-2 leading-8">
<b>Date: </b> <i>May 10, 2023</i>
<br />
<b>Time: </b> <i>2:00 PM - 3:30 PM</i>
<br />
<b>Age: </b> <i>All ages</i>
<br />
</div>
<button className="btn btn-primary bg-[#C3E0DC] p-4 rounded-xl text-sm font-medium mt-4 hover:bg-[#FFF9B1]">
<button className="btn btn-primary bg-[#C3E0DC] dark:bg-[#bc832d] dark:hover:bg-[#c8a153] p-4 rounded-xl text-sm font-medium mt-4 hover:bg-[#FFF9B1]">
Book your slot
</button>
</div>
Expand All @@ -212,21 +212,21 @@ useEffect(() => {
/>
</div>
<div className="w-full lg:m-10 md:m-10 ">
<h1 className="text-4xl font-semibold">Battle for the island</h1>
<h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8 ">
<h1 className="text-4xl dark:text-gray-300 font-semibold">Battle for the island</h1>
<h4 className="text-xl text-muted text-slate-700 dark:text-white italic mt-2 leading-8 ">
It is a thematic and strategic board game where players compete
to control a mythical island rich with resources and secrets.
The game features a modular board, hidden objectives, and more.
</h4>
<div className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
<div className="text-xl text-muted text-slate-700 dark:text-slate-300 italic mt-2 leading-8">
<b>Date: </b> <i>May 10, 2023</i>
<br />
<b>Time: </b> <i>2:00 PM - 3:30 PM</i>
<br />
<b>Age: </b> <i>All ages</i>
<br />
</div>
<button className="btn btn-primary bg-[#C3E0DC] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
<button className="btn btn-primary bg-[#C3E0DC] dark:bg-[#bc832d] dark:hover:bg-[#c8a153] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
Book your slot
</button>
</div>
Expand All @@ -240,23 +240,23 @@ useEffect(() => {
/>
</div>
<div className="w-full lg:m-10 md:m-10 ">
<h1 className="text-4xl font-semibold">
<h1 className="text-4xl dark:text-gray-300 font-semibold">
Chameleons: A cooperative card game
</h1>
<h4 className="text-xl text-muted text-slate-700 italic mt-2 leading-8 ">
<h4 className="text-xl text-muted text-slate-700 dark:text-white italic mt-2 leading-8 ">
Chameleons is a cooperative card game designed for fast-paced,A
lighthearted game where players must identify a hidden Chameleon
among them using deduction, quick thinking, and clever bluffing.
</h4>
<div className="text-xl text-muted text-slate-700 italic mt-2 leading-8">
<div className="text-xl text-muted text-slate-700 dark:text-slate-300 italic mt-2 leading-8">
<b>Date: </b> <i>May 10, 2023</i>
<br />
<b>Time: </b> <i>2:00 PM - 3:30 PM</i>
<br />
<b>Age: </b> <i>All ages</i>
<br />
</div>
<button className="btn btn-primary bg-[#C3E0DC] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
<button className="btn btn-primary bg-[#C3E0DC] dark:bg-[#bc832d] dark:hover:bg-[#c8a153] p-4 rounded-xl text-md font-medium mt-4 hover:bg-[#FFF9B1]">
Book your slot
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import About from "./About";

export default function Home() {
return (
<div id="home" className="bg-[#FDF3C7]">
<div id="home" className="bg-[#FDF3C7] dark:bg-dark-bg">
<Landing />
<About/>
<ReviewCarousel/>
Expand Down
12 changes: 6 additions & 6 deletions src/Components/Pages/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ function ParallaxImage() {

return (
<>
<div className="w-full h-auto bg-amber-100 items-center justify-center overflow-hidden" onMouseMove={handleMouseMove}>
<div className="w-full h-auto bg-amber-100 dark:bg-[#1b1717ef] items-center justify-center overflow-hidden" onMouseMove={handleMouseMove}>
<div className="flex md:flex-row flex-col items-center justify-between mt-24 mb-20">
<div className="w-3/4 pl-8 text-left animate-fadeIn">
<h1 className="md:text-7xl text-4xl text-black font-bold font-mono mb-4">Discover Sip & Play</h1>
<p className="md:text-3xl text-xl font-mono mb-8">
Dive into a world of flavor with our immersive 3D Menu experience
<h1 className="md:text-7xl text-4xl text-black dark:text-white font-bold font-mono mb-4">Discover Sip & Play</h1>
<p className="md:text-3xl dark:text-gray-300 text-xl font-mono mb-8">
Dive into a world of flavor with our immersive 3D Menu experience..
</p>
</div>
<div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 animate-slideIn">
<div className="w-full flex justify-center items-center rounded-e-full z-1 shadow-lg bg-amber-200 dark:bg-[#fff308] animate-slideIn">
AdityaP700 marked this conversation as resolved.
Show resolved Hide resolved
<motion.img
src={Cafe3dImg}
alt="3D Coffee Shop"
Expand All @@ -52,7 +52,7 @@ function ParallaxImage() {
</div>
</div>
<div className="flex flex-col items-center mb-2">
<h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
<h1 className="text-5xl dark:text-white md:text-9xl font-roboto">Flip Menu</h1>
<GiArrowDunk size={60} className="mt-2 text-orange-400" />
</div>
<div className="w-full md:flex md:items-center md:justify-center">
Expand Down
Loading