From b3034479ff326ac7c1fb0680fe4bd9d11b0a4c91 Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Fri, 4 Oct 2024 20:11:43 +0530 Subject: [PATCH] Add - Added Dark Theme --- src/App.jsx | 17 ++-- src/Components/Pages/Boardgame.jsx | 4 +- src/Components/Pages/Event.jsx | 62 ++++++------ src/Components/Pages/Home.jsx | 2 +- src/Components/Pages/Menu.jsx | 12 +-- src/Components/Pages/Register.jsx | 39 +++++--- src/Components/Shared/Footer.jsx | 2 +- src/Components/Shared/Navbar.jsx | 137 +++++++++++++-------------- src/Components/ui/FeedbackForm.jsx | 22 +++-- src/Components/ui/Landing.jsx | 47 +++------ src/Components/ui/ReviewCarousel.jsx | 12 +-- src/assets/Logo/moon.webp | Bin 0 -> 634 bytes src/assets/Logo/sunny.webp | Bin 0 -> 3738 bytes src/context/themeContext.jsx | 28 ++++++ src/index.css | 65 ++++++------- tailwind.config.js | 9 +- 16 files changed, 243 insertions(+), 215 deletions(-) create mode 100644 src/assets/Logo/moon.webp create mode 100644 src/assets/Logo/sunny.webp create mode 100644 src/context/themeContext.jsx diff --git a/src/App.jsx b/src/App.jsx index 27408c45..25d85676 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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 ( -
- - -
+ +
+ + +
+ ); } diff --git a/src/Components/Pages/Boardgame.jsx b/src/Components/Pages/Boardgame.jsx index ede290f0..e003dc60 100644 --- a/src/Components/Pages/Boardgame.jsx +++ b/src/Components/Pages/Boardgame.jsx @@ -210,7 +210,7 @@ export default function Boardgame() { -
+

Subscribe to our Newsletter @@ -221,7 +221,7 @@ export default function Boardgame() {
diff --git a/src/Components/Pages/Event.jsx b/src/Components/Pages/Event.jsx index b3788bf8..1ab61e1b 100644 --- a/src/Components/Pages/Event.jsx +++ b/src/Components/Pages/Event.jsx @@ -41,15 +41,15 @@ useEffect(() => { <>
-

+

Upcoming Events and Programs

-

+

Explore our exciting lineup of board game events and educational programs.

@@ -57,15 +57,15 @@ useEffect(() => {
-
-
+
+
{/* Calendar */} -
-

Event Calendar

+
+

Event Calendar

- {months[currentMonth]} {currentYear} + {months[currentMonth]} {currentYear}
-
+
{daysOfWeek.map((day) => (
{day}
))} @@ -89,8 +89,8 @@ useEffect(() => {
{/* Pictures */} -
-

Event Pictures

+
+

Event Pictures

    @@ -120,15 +120,15 @@ useEffect(() => { />
-

+

5-Minute MARVEL Cinematic Experience

-

+

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.

-
+
Date: May 10, 2023
Time: 2:00 PM - 3:30 PM @@ -136,7 +136,7 @@ useEffect(() => { Age: All ages
-
@@ -150,16 +150,16 @@ useEffect(() => { />
-

+

A Game of Thrones: The Board Game

-

+

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.

-
+
Date: May 10, 2023
Time: 2:00 PM - 3:30 PM @@ -167,7 +167,7 @@ useEffect(() => { Age: All ages
-
@@ -181,16 +181,16 @@ useEffect(() => { />
-

+

Bang! Dice Expansion: Old Saloon

-

+

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 "Old Saloon" with new dice, characters, and modules.

-
+
Date: May 10, 2023
Time: 2:00 PM - 3:30 PM @@ -198,7 +198,7 @@ useEffect(() => { Age: All ages
-
@@ -212,13 +212,13 @@ useEffect(() => { />
-

Battle for the island

-

+

Battle for the island

+

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.

-
+
Date: May 10, 2023
Time: 2:00 PM - 3:30 PM @@ -226,7 +226,7 @@ useEffect(() => { Age: All ages
-
@@ -240,15 +240,15 @@ useEffect(() => { />
-

+

Chameleons: A cooperative card game

-

+

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.

-
+
Date: May 10, 2023
Time: 2:00 PM - 3:30 PM @@ -256,7 +256,7 @@ useEffect(() => { Age: All ages
-
diff --git a/src/Components/Pages/Home.jsx b/src/Components/Pages/Home.jsx index 4d3ea1d0..3a690788 100644 --- a/src/Components/Pages/Home.jsx +++ b/src/Components/Pages/Home.jsx @@ -6,7 +6,7 @@ import About from "./About"; export default function Home() { return ( -
+
diff --git a/src/Components/Pages/Menu.jsx b/src/Components/Pages/Menu.jsx index c4730c44..a36e92cf 100644 --- a/src/Components/Pages/Menu.jsx +++ b/src/Components/Pages/Menu.jsx @@ -29,15 +29,15 @@ function ParallaxImage() { return ( <> -
+
-

Discover Sip & Play

-

- Dive into a world of flavor with our immersive 3D Menu experience +

Discover Sip & Play

+

+ Dive into a world of flavor with our immersive 3D Menu experience..

-
+
-

Flip Menu

+

Flip Menu

diff --git a/src/Components/Pages/Register.jsx b/src/Components/Pages/Register.jsx index fbe2244c..077a9034 100644 --- a/src/Components/Pages/Register.jsx +++ b/src/Components/Pages/Register.jsx @@ -4,16 +4,29 @@ import pic3 from "../../assets/img/abt2.png"; import pic4 from "../../assets/img/abt3.png"; import pic5 from "../../assets/img/abt4.png"; +import React from 'react'; export default function Register() { + const toggleTheme = () => { + document.body.classList.toggle("dark"); + const currentTheme = document.body.classList.contains("dark") ? "dark" : "light"; + localStorage.setItem("theme", currentTheme); + }; + React.useEffect(() => { + const savedTheme = localStorage.getItem("theme"); + if (savedTheme === "dark") { + document.body.classList.add("dark"); + } + }, []); return ( <>
-

+

RESERVE YOUR SPOT AT THE BOARD GAME CAFE

-
@@ -28,10 +41,10 @@ export default function Register() {
-

+

Reserve Your Spot

-

+

Fill out the form below to secure your reservation at our board game cafe.

@@ -39,14 +52,14 @@ export default function Register() {
+ {/*
+ +
*/}

Popular Board Games

diff --git a/src/Components/Shared/Footer.jsx b/src/Components/Shared/Footer.jsx index b1406fbc..c643e217 100644 --- a/src/Components/Shared/Footer.jsx +++ b/src/Components/Shared/Footer.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Footer from "./footer/Footer"; +import Footer from "./footer/Footer.jsx"; const StickyFooter = () => { return ( diff --git a/src/Components/Shared/Navbar.jsx b/src/Components/Shared/Navbar.jsx index d1eb94a1..8ae2a656 100644 --- a/src/Components/Shared/Navbar.jsx +++ b/src/Components/Shared/Navbar.jsx @@ -1,8 +1,11 @@ import { useState, useEffect } from "react"; import Logo from "../../assets/Logo/logo.png"; +import lightLogo from '../../assets/Logo/moon.webp'; +import darkLogo from '../../assets/Logo/sunny.webp'; import { Link, useLocation } from "react-router-dom"; - +import { useTheme } from "../../context/themeContext"; const Navbar = () => { + const { isDarkMode, toggleDarkMode } = useTheme(); const [isScrolled, setIsScrolled] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false); const location = useLocation(); @@ -10,11 +13,7 @@ const Navbar = () => { useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY; - if (scrollPosition > 50) { - setIsScrolled(true); - } else { - setIsScrolled(false); - } + setIsScrolled(scrollPosition > 50); }; window.addEventListener("scroll", handleScroll); @@ -27,6 +26,7 @@ const Navbar = () => { const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; + const isHomePage = location.pathname === "/"; const buttonTextClass = isScrolled ? "text-gray-900" @@ -36,17 +36,17 @@ const Navbar = () => { return (
-
- {/*
-

- Our name says it all! -

-

- Founder, Jonathan Li, shares a passion for board games, boba, and - delicious food, so he combined them all to become Sip & Play, Park - Slope’s first board game cafe. It is a straightforward concept: come - in with your friends and family to play any board game from our - library of 300+ games! We hope when you visit, you also enjoy our - coffee, espresso, boba, sandwiches, and snacks! -

-
    -
  • New opening hours:
    • -
  • Sunday: 10am-11pm
    • -
  • Mon-Thurs: 11am-11pm
    • -
  • Fri: 11am-midnight
    • -
  • Sat: 10am-midnight
    • -
- -
*/} -
- +
-

+

PLAYCAFE

diff --git a/src/Components/ui/ReviewCarousel.jsx b/src/Components/ui/ReviewCarousel.jsx index 12d1b238..5fda47e9 100644 --- a/src/Components/ui/ReviewCarousel.jsx +++ b/src/Components/ui/ReviewCarousel.jsx @@ -69,15 +69,13 @@ const ReviewCarousel = () => { prevIndex === 0 ? reviews.length - 4 : prevIndex - 1 ); }; - return (
-

+

Customer Feedback

-
{ key={index} className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 " > -
+
-

{review.name}

-
+

{review.name}

+
{Array(review.rating) .fill() .map((_, i) => ( @@ -108,7 +106,7 @@ const ReviewCarousel = () => { ))}
-

+

{review.review}

diff --git a/src/assets/Logo/moon.webp b/src/assets/Logo/moon.webp new file mode 100644 index 0000000000000000000000000000000000000000..606ad3f48f0c7541b811f6a843b36315503d5f11 GIT binary patch literal 634 zcmV-=0)_ojNk&F;0ssJ4MM6+kP&il$0000G0000=002q=06|PpNZA1Z00EGMZIdBM zF<9HSZQHhO+c(>`ZQFaZZQDkp{!49TWW@3o5fecFxue$@pX1jMsp*bycoE@OkYMy{ z0GLJkqmTLw*XsJ}KY_bHnzmT0@be3#JnId3T&k?xM|d5qtLArjZlkKqcX+R@Dengu zR#24iDNHNt3Ed0h+IsrKyr-HJpBW~p*$Bo>T1tTPf|lJZfmk|nI4r2DV-9%dsEF{I z=~=jj8sM&}VJ_QV4OiJvKwd(JZ;!kRuvkr87aR9tN}FT@i=?fvg7(6;*!fmM)&VU1=kH##l_K=9PaI+>!l#LClb>S+fj$Z(t>_fIeGy!Z^W$0G4j z!dt@bB_*3_o{4&yiR`AkE$Dt`vYq6dn9Iq@eysIE*2W}}Ek6tR){CU3TW@VgS`u9K zoRzbcNqD7$4wG}RA}LHY=&WNDJTovQX^mfJ(yp667vGIt6KlsK^)V8sO&o*%j{^W! zP&goR0001R2mqY{DoX%M06rxSg+d{QXWak>0Ff;q0^0Y$AHY8VKR_w}MXOnLf&cNq#15Ztzr zBuUQRJNHyoXKFqmUd5o>?F@9+4MXql0L-Bv=R|yR{K5EhB0cLU#C4IL;9Lwe6XY+26?T**1z50}F{r&&KOFW$Q##IFJ#8D9Dn=X#Ky&B^2Z!HbfUv zXcYEil@=97bDCg*=i6u_#Y)Q8x)->4FW}B_@HZl5D}p z1`kMPX*2#bG`X5hh2R^wiWG@WPL5Sv=<&23z47dKcgrcr^1I)i**L1TM@c~^sq2PM z46^302ZyEDUBIca^h<-n()eOYhJ6Jw3TIk<5)OOEAUphIy2m1!<}(XIE?XjH`xCOw zC)<)OaoKcGSbr@iwz+3L%qbuCDGcX>^N}dA))BUid+}ctnX;`n@*YOA7U^a7n-QA}!`KFaO8)(n`8S zihZZ5G~W}^loI5X)QP@H3 z-2y`F6aGAo!C(vlI0A!@5O@!Qi~s_GGz69sgbNV(5`#|>mUICO0!jSoOCa{*&ps4( z^XCT?zTy8HLcvJnP8%4gC3i;SFoJzY9EbJXIfuh(?tF{G*NQhlu03|#g2&co%eaTb zZ98s_aQ2S-$)f%_5+37FZp*D z9@c#va0io&M0I;^4d=iyzHyE}af}mkjQKZGu7@g0>(h-mtmDoo9ENkJH4ZHtqrZ_L zxcfa!zsWKBf4dx`AKTM0`s0a$zh7YRi2z^;2J0ajh*D{1dY+&0ffJiK2y}#2VkQ~E%uM`xn>wLMY2`n3U zx$?3=pgET-GXdYPah4|+H9SPZ9~}A1BM@!lW%x%e1f~N6?0RLx1gewyodT{Kc(GOh zqa9-PHVsWcX9XX2Y69G;Ois+0Bk&#UWpSwt9=yE0mjZ1=$dZp2(zf_5Dg-cpq`rneqI7Re>d|+#EUEy&~ zfqdBgfhZ(6MU-nY@DD3g!^7z=Atjec5}cxrroDm#UIoMB-UMM{N0J7nsD_0$)Xrx% ze|5CBg#no4L8;5aiq*G1wy}4-rJAtfWs_i3iPbUrjlLKBw!E%#bzF?qxugUk4Ihw< z(x$??X$wCMg!z+C7NiR6HZZwz%^)f~W4dhk#IVS(2m1ycGusz{vcbfbBR8D>=5|>y zWw*aMy?$hi;N21ShI`rkdQtvv0x5M8LYy6c9acUPOjXu-unN^1@UIY(&*aq5H@5|OTE+|3DD zb^CMF%riO>74qsuMYZjjFVwhB^?v63o^7K$3=wqOekkw14hN=cv^XXBch<{vG60|g9Z&2*~kcW*yszry=~c_kemPrXO^-{o)lFaQ4$ zKY)Hfe3|nA{Q~}j`C|D^wbA5357 zfBE}}{|WT~{vrIM)oc1c`ycDy^gsXq4EqfIy8oB{yZ@*E|DdnuzsSGVetZ0YdH{Nq z{{ZzT>reFW#1GQCcZUHS4YQ&Feig22fDd7WaV`+I#%B`?3bs2{Wt@K`>>3`L9Pgz+ z?kl|k{@W&JtB266;X&4~AZaM<0Oz4HR3$&kK4qf#4iv$RF_3C!3kzpNtNyl{%T~0) zUJ$fdl+k+p_A+bx354_p8Xx)fi3RIP(^VdYq>UD55B|xmffbsXtwnbIz|-u=(FBHP z#9j=lm46S!>7ygZN=2ldVnmrds6H z$0IwU5?c(0092`;sL5&cPWB-_dX!=;T~orAfy77JMYY*&03}R z$4MK}P`~?yJO92$!BV4KYm^?u|F<*h_*L=%JLq9h3nhScD-}tOA#+Wht^qcW1%QN` zRSb7Koj9c;EVJh_V3#4?gYizmFoLCMxj{WtYn0c_vQ!Ze95{tQt|k0Omcye7GpG_d zcfQ6#YQEWUNcMB3=-aPYKQPVae>g8xcs%adt8S;MYs!|Xe};}>Og3?lxrY?hl*SED z5&$PD=?rP3egT4WRZ(gieFKhd?X;9&LG|C`XVim@vN8KO_EWrrn2pPtf_46`QdG^I z#S`{!BBLlu1W`EZii^p$8qq;EZ`>GjoX&U`S}v+3AEvO3QoG?0q*Sfr!I;$XE}hjT z3|%IC?0^4UlETnF$dCQPs_w8iG~VIW^x*{Ztn?*6%9d%wPuSpzP|XVvwVlq%CRX|u z5a?k{n;vvuj}~v$RK60lsFev}N@t4jC8_2zQ^U(#$I%Ov!Y|+lJgi#uljtgWmM&jg zh)F~_jJxM`J`JRhO(e(77DARyK5m&!BR~eL8Pvm}nJ3c6hHrL@cg;ati0csc+lv=S zzsL&0_GG#*d+c;ol0VhU8HeUIi^%SHod_N@x5~?;A-jBhp1sC6EVw}xi@eApqS(M(DI9QB;2gA% zZyc8YFq`E-Z$HO`r-Ys-2DnEgRsxF5qfKlG^56Vucu_u(1-}Y2;RPOIzt%PYfk^PgLHDm zitM;STi{NE`?{$ZjpnGqLTNd*4|eKuCYO@YS0YP)1OhF1f3hb&;>7Mb3z{{8HwrL? zlCDzL<*38uF1IDkdO%3CxB2eCgac2B0X8hlZDa)wqzfzRE>=yM(AE5CLXs5N?PWXD zqOXH!g`=#o1e-(|WSlg++CzI{sT zJxW(%WZ7@+(W)%5@l^~z9Pag=fmAh)Yu@Yy`f&FWvDld@51TI0`>FKE4#f{ge40mA zK-@+mifS@C2k;xe4jUXspm2lL^fltvqBDP^^I=yFOYLObaUR~YvrIasp~bXzRW!p; z2t52u6GM_*VsXsNA|?;!^wX+XoOaIwUGM(faNy6M5TTm)mUO`}O_? z+yh6sFrsu&0NPOsUT!F>m9lA&licvr5LL($rKglaA7q1#;%jLoiGzA;rz1A%S z09MB|hPkT;%SfQ-CQKt<@v9CL&Ea8G;p;tc4aumD@N2>=>LvgW(J(~c_Zql7de}Vh z{y@AQ`LxTJ|J=QdJ79+=XRGey-OS7xnaz>I-->_CV%rJ-y3VWtzCHHB_(j)#&Uh;^ z&i@0o9*9pvn4&?fNdHo7KC&fvE$XSB1mrf{q^IF89@pk~5tFzr@Nqr*0tMr=`A=BF z)>fphQX=Z3_naTQmlD{o)W_i+ZxbJZChN9F>%t)qsyZmrfUr;Fz6FCzFnK{U_#Gt) zTcz?J(ZB-R6<&5ImQgtBmrNiFQ>7a;2K049?f9`yC@DS781c_pbYt->m zVHuu?gsONGIU?3tj&xpfuX4&u5Q=>Kr>zd@P(-&OyARZ6?U=WBvt~lYn zAOBL8Fb{eFtx`KXc&6dylO{|Jh%P4KkW=t#(aG zg$m-8>3yy0z|3ly zMGyiRwEWws{kt~tL!%#Is}qFTfsg0F6?JOqp0i$VxQH6Pp(B9KT6={M1NxK#AOHXW E09@%dYybcN literal 0 HcmV?d00001 diff --git a/src/context/themeContext.jsx b/src/context/themeContext.jsx new file mode 100644 index 00000000..cb5aa278 --- /dev/null +++ b/src/context/themeContext.jsx @@ -0,0 +1,28 @@ +import React, { createContext, useContext, useState, useEffect } from 'react'; + +const ThemeContext = createContext(); + +export const ThemeProvider = ({ children }) => { + const [isDarkMode, setIsDarkMode] = useState(() => { + return localStorage.getItem('theme') === 'dark' || false; + }); + + useEffect(() => { + localStorage.setItem('theme', isDarkMode ? 'dark' : 'light'); + document.body.classList.toggle('dark', isDarkMode); + }, [isDarkMode]); + + const toggleDarkMode = () => { + setIsDarkMode((prevMode) => !prevMode); + }; + + return ( + + {children} + + ); +}; + +export const useTheme = () => { + return useContext(ThemeContext); +}; diff --git a/src/index.css b/src/index.css index dd82a0fd..6d7c3fb6 100644 --- a/src/index.css +++ b/src/index.css @@ -2,39 +2,40 @@ @tailwind components; @tailwind utilities; - - -@layer base{ - .font-outline-2{ - -webkit-text-stroke: 2px white; - +@layer base { + + body { + background-color: white; + color: black; } -} - - - @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)]; - } + .dark { + background-color: #1a1a1a; + color: white; } + .dark .text-primary-foreground { + color: #f9fafb; + } + .dark .bg-card { + background-color: #374151; + color: #f9fafb; + } + .dark .border-input { + border-color: #4b5563; + } + .dark .text-muted-foreground { + color: #9ca3af; + } +} +::-webkit-scrollbar { + width: 7px; + height: 7px; +} +::-webkit-scrollbar-thumb { + background-color: beige; + border-radius: 10px; +} - - ::-webkit-scrollbar { - width: 7px; - height: 7px; - } - - ::-webkit-scrollbar-thumb { - background-color: beige; - border-radius: 10px; - } - - ::-webkit-scrollbar-thumb:hover { - background-color: #004D43; - border-radius: 10px; - } - \ No newline at end of file +.dark ::-webkit-scrollbar-thumb { + background-color: #000; +} diff --git a/tailwind.config.js b/tailwind.config.js index 2e630091..ca01252a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,15 @@ //** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], + darkMode:'class', + content: ['./src/**/*.{js,jsx,ts,tsx,css}', './public/index.html'], theme: { extend: { + colors:{ + 'light-bg':'#FDF3C7', + 'dark-bg':'#1a1a1a', + 'light-text':'#000', + 'dark-text':'#fff' + }, height: { 'screen-dvh': '100dvh', },