From d709ca18bf8e4749132cc0e18d4ee21043d0b416 Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Sat, 5 Oct 2024 18:57:28 +0530 Subject: [PATCH 1/7] Feat:Added Regenerate Button --- src/components/Confirm.js | 102 ++++++------ src/components/My.css | 325 ++++++++++++++++++++++---------------- 2 files changed, 251 insertions(+), 176 deletions(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index 84e9123..d4d34de 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import "./bestbutton.css"; import wives from '../database/wives'; import { TwitterShareButton, TwitterFollowButton } from "react-twitter-embed"; @@ -13,7 +13,6 @@ function ConfirmationCheckbox() { border: "3px solid currentcolor", boxShadow: "0 0 3px currentcolor", borderRadius: "20px", - }; const [person, setPerson] = useState(null); @@ -21,12 +20,19 @@ function ConfirmationCheckbox() { const [isChecked, setIsChecked] = useState(false); const [buttonPlayed, setButtonPlayed] = useState(false); const [inputValue, setInputValue] = useState(""); - const [click,setClick]=useState(false); - const [name, setName] = useState(""); + const [click, setClick] = useState(false); + useEffect(() => { + const storedName = localStorage.getItem("userName"); + if (storedName) { + setInputValue(storedName); + } + }, []); + const storeInput = (input) => { + localStorage.setItem("userName", input); + }; + function handleClick() { - - if(inputValue===""){ - + if (inputValue === "") { toast.error("You didn't enter your name!", { position: "top-right", autoClose: 3000, @@ -36,11 +42,9 @@ function ConfirmationCheckbox() { draggable: true, progress: undefined, theme: "dark", - color:"red", transition: Bounce, - }); - } - else if (!click) { + }); + } else if (!click) { toast.error("You didn't tick the checkbox!", { position: "top-right", autoClose: 3000, @@ -52,16 +56,15 @@ function ConfirmationCheckbox() { theme: "dark", transition: Bounce, }); - } else{ - setIsChecked(oldIsChecked => !oldIsChecked); + } else { + setIsChecked(oldIsChecked => !oldIsChecked); } } function checkboxon(e) { setClick(true); - if(e.target.checked){ - if(inputValue===""){ - + if (e.target.checked) { + if (inputValue === "") { toast.error("You didn't enter your name!", { position: "top-right", autoClose: 3000, @@ -71,17 +74,13 @@ function ConfirmationCheckbox() { draggable: true, progress: undefined, theme: "dark", - color:"red", transition: Bounce, - }); - + }); } - setIsActive(oldIsActive => !oldIsActive); - - - }else{ - setIsActive(oldIsActive => !oldIsActive); - toast.error("You did't click the Checkbox", { + setIsActive(true); + } else { + setIsActive(false); + toast.error("You didn't click the Checkbox", { position: "top-right", autoClose: 3000, hideProgressBar: false, @@ -91,26 +90,28 @@ function ConfirmationCheckbox() { progress: undefined, theme: "dark", transition: Bounce, - }); + }); } } - + function generatorRandomNumber() { return Math.floor(Math.random() * wives.length); } - function handleInputChange(event) { setInputValue(event.target.value); } const playGame = () => { - setButtonPlayed(oldButtonPlayed => !oldButtonPlayed); + setButtonPlayed(true); const randomNum = generatorRandomNumber(); setPerson(wives[randomNum]); }; - + const regenerateResponse = () => { + const randomNum = generatorRandomNumber(); + setPerson(wives[randomNum]); + }; const wifestyle2 = { margin: "0", @@ -137,7 +138,7 @@ function ConfirmationCheckbox() { paddingBottom: "120px", }} > -
+
@@ -146,7 +147,7 @@ function ConfirmationCheckbox() {
- {checkboxon(e)}} /> +   Whichever wife I get, I will accept for the rest of my life.

@@ -184,16 +183,15 @@ function ConfirmationCheckbox() { Ready!

- I, {inputValue}, agree to marry the woman who is about to appear as my - future wife. Backing away from this promise would mean that I am not a man. + I, {inputValue}, solemnly pledge to marry the woman revealed as my future wife. + To break this vow would be to question my honor and integrity as a man.

- Who's My Wife + Reveal My Wife
@@ -209,9 +207,9 @@ function ConfirmationCheckbox() { paddingTop: "20px", }} > - -

{inputValue}, your future wife is

-
+ +

{inputValue},your life’s greatest chapter is

+
{person.name}
@@ -270,6 +269,21 @@ function ConfirmationCheckbox() {
+

Share on Twitter diff --git a/src/components/My.css b/src/components/My.css index e1d6c0e..333da15 100644 --- a/src/components/My.css +++ b/src/components/My.css @@ -1,184 +1,245 @@ -.logo{ - position: relative; +.logo { + position: relative; } -.logo::before{ - content:''; - position: absolute; +.logo::before { + content: ''; + position: absolute; } -.mainnav ul{ - display: flex; - justify-content: center; +.mainnav ul { + display: flex; + justify-content: center; +} + +.mainnav ul li { + margin: 0 24px; + margin-top: -150px; + list-style: none; + font-weight: bold; + font-family: monospace; + font-size: 25px; + color: green; +} + +/* Responsive layout for smaller screens */ +@media (max-width: 768px) { + .mainnav ul li { + margin-top: -100px; + font-size: 20px; } +} -.mainnav ul li{ - margin: 0 24px; - margin-top:-150px; - list-style: none; - font-weight: bold; - font-family: monospace; - font-size: 25px; - color: green; -} +@media (max-width: 480px) { + .mainnav ul { + flex-direction: column; + margin-top: -50px; + } + + .mainnav ul li { + margin: 12px 0; + font-size: 18px; + } +} .curve { - position: absolute; - height: 225px; - width: 100%; - bottom: 0; - } - -.curve::before{ - content:''; - display: block; - position: absolute; - border-radius: 100% 50%; - width: 55%; - height: 100%; - background-color: blue; - transform: translate(85%,60%); -} - -.curve::after{ - content:''; - display: block; - position: absolute; - border-radius: 100% 50%; - width: 55%; - height: 100%; - background-color: red; - transform: translate(-4%,40%); - z-index:1; + position: absolute; + height: 225px; + width: 100%; + bottom: 0; +} + +.curve::before { + content: ''; + display: block; + position: absolute; + border-radius: 100% 50%; + width: 55%; + height: 100%; + background-color: blue; + transform: translate(85%, 60%); +} + +.curve::after { + content: ''; + display: block; + position: absolute; + border-radius: 100% 50%; + width: 55%; + height: 100%; + background-color: red; + transform: translate(-4%, 40%); + z-index: 1; +} + +/* Adjust curve for smaller screens */ +@media (max-width: 768px) { + .curve { + height: 150px; + } + + .curve::before, + .curve::after { + width: 60%; + height: 90%; + } } .custom-shape-divider-top-1683378542 { - position: absolute; - top: 0; - left: 0; - width: 100%; - overflow: hidden; - line-height: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + overflow: hidden; + line-height: 0; } -.spacer{ - aspect-ratio: 960/300; - width: 100%; - background-repeat: no-repeat; - background-size: cover; - background-position: center; +.spacer { + aspect-ratio: 960/300; + width: 100%; + background-repeat: no-repeat; + background-size: cover; + background-position: center; } -.layer1{ - background-image: url('../../public/NavlayerOne.svg'); +.layer1 { + background-image: url('../../public/NavlayerOne.svg'); } -.flip{ - transform: rotate(180deg); +.flip { + transform: rotate(180deg); } -.navlayer{ - background-image: url('../../public/NavlayerOne.svg'); +.navlayer { + background-image: url('../../public/NavlayerOne.svg'); } -.news:hover::after{ - /* transform: scale(1.1); */ - transition: 400ms; - width: 100%; +.news:hover::after { + transition: 400ms; + width: 100%; } - -.news::after{ - content:''; - display:block; - height: 4px; - width:0; - background:green; - transition:all .5 + +.news::after { + content: ''; + display: block; + height: 4px; + width: 0; + background: green; + transition: all .5s; } -.news:hover{ - transform: scale(1.2); - transition: cubic-bezier(0.075, 0.82, 0.165, 1); +.news:hover { + transform: scale(1.2); + transition: cubic-bezier(0.075, 0.82, 0.165, 1); } -html{ - scroll-behavior: smooth; +html { + scroll-behavior: smooth; } -#wifeplay{ - scroll-margin-top: 100px; +#wifeplay { + scroll-margin-top: 100px; } -.letsgo:hover{ - transform: scale(1.2); - transition: 0.2s; - color: yellow; - +.letsgo:hover { + transform: scale(1.2); + transition: 0.2s; + color: yellow; } -.mycheckbox{ - transform: scale(2); +.mycheckbox { + transform: scale(2); } -.mycheckbox:hover{ - transform: scale(2.7); - transition: 0.2s; +.mycheckbox:hover { + transform: scale(2.7); + transition: 0.2s; } -.enternamebar{ - transform: scale(2); +.enternamebar { + transform: scale(2); } -.name:hover{ - transform: scale(1.1); - transition: 0.4s; +.name:hover { + transform: scale(1.1); + transition: 0.4s; +} + +.ready { + animation: colorchange 1.5s infinite; +} + +@keyframes colorchange { + 0% { + color: green; + } + 25% { + color: white; + } + 50% { + color: green; + } + 75% { + color: white; + } + 100% { + color: green; + } } -.ready{ - - animation: colorchange 1.5s infinite; - } - - @keyframes colorchange { - 0% { - color: green; - } - 25% { - color: white; - } - 50% { - color: green; - } - 75% { - color: white; - } - 100% { - color: green; - } - } - -.navclass{ - - - animation: colorchange 1.5s infinite; - +.navclass { + animation: colorchange 1.5s infinite; } @keyframes colorchange { 0% { - color: green; + color: green; } 25% { color: white; - } - 50% { + } + 50% { color: green; - } - 75% { + } + 75% { color: white; - } + } 100% { color: green; - } + } +} +@media (max-width: 768px) { + .letsgo:hover { + transform: scale(1.1); + } + + .mycheckbox { + transform: scale(1.5); + } -} \ No newline at end of file + .enternamebar { + transform: scale(1.5); + } + + .name:hover { + transform: scale(1.05); + } +} + +@media (max-width: 480px) { + .letsgo:hover { + transform: scale(1.05); + } + + .mycheckbox { + transform: scale(1.3); + } + + .enternamebar { + transform: scale(1.3); + } + + .name:hover { + transform: scale(1); + } +} From 9166f7c3b30322a33b22cb5d0b93988eecbd028b Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 02:08:40 +0530 Subject: [PATCH 2/7] Fixed issue with regenerate response and name input --- src/components/Confirm.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index d4d34de..7078034 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -100,6 +100,7 @@ function ConfirmationCheckbox() { function handleInputChange(event) { setInputValue(event.target.value); + storeInput(event.target.value); } const playGame = () => { @@ -109,9 +110,14 @@ function ConfirmationCheckbox() { }; const regenerateResponse = () => { - const randomNum = generatorRandomNumber(); - setPerson(wives[randomNum]); - }; + setPerson(null); + setInputValue(""); + setClick(false); + setIsChecked(false); + setIsActive(false); + setButtonPlayed(false); + localStorage.removeItem("userName"); + }; const wifestyle2 = { margin: "0", From fbc7b32e98a36e663f22e88eab0a7afd633a466b Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 02:35:26 +0530 Subject: [PATCH 3/7] fixed regenerate button issue --- src/components/Confirm.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index 084d10d..e8331b9 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -109,9 +109,13 @@ function ConfirmationCheckbox() { const regenerateResponse = () => { - const randomNum = generatorRandomNumber(); - setPerson(wives[randomNum]); - + setPerson(null); + setInputValue(""); + setClick(false); + setIsChecked(false); + setIsActive(false); + setButtonPlayed(false); + localStorage.removeItem("userName"); }; const wifestyle2 = { From 2cea37c19f202018102b3dba30ab6315efd78c84 Mon Sep 17 00:00:00 2001 From: AdityaPat_ <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 02:40:58 +0530 Subject: [PATCH 4/7] Updated the changes --- src/components/Confirm.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index 084d10d..ce1cc62 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -99,6 +99,7 @@ function ConfirmationCheckbox() { function handleInputChange(event) { setInputValue(event.target.value); + storeInput(event.target.value); } const playGame = () => { @@ -109,10 +110,14 @@ function ConfirmationCheckbox() { const regenerateResponse = () => { - const randomNum = generatorRandomNumber(); - setPerson(wives[randomNum]); - - }; + setPerson(null); + setInputValue(""); + setClick(false); + setIsChecked(false); + setIsActive(false); + setButtonPlayed(false); + localStorage.removeItem("userName"); + }; const wifestyle2 = { margin: "0", From 2f14298c0519dbbd89592707c1a40b53e96dee19 Mon Sep 17 00:00:00 2001 From: AdityaPat_ <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 02:42:55 +0530 Subject: [PATCH 5/7] Update Confirm.js --- src/components/Confirm.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index ce1cc62..e30f4be 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -108,7 +108,6 @@ function ConfirmationCheckbox() { setPerson(wives[randomNum]); }; - const regenerateResponse = () => { setPerson(null); setInputValue(""); From faf5f894d13298a50a23064b125d865ce20c2125 Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 14:08:45 +0530 Subject: [PATCH 6/7] Fixed some CSS issues and removed response regenerate button --- src/App.css | 12 +++---- src/components/Confirm.js | 61 +++------------------------------- src/components/My.css | 64 +++++++++++++++++------------------ src/components/photo.css | 54 +++++++++++++++--------------- src/index.css | 70 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 137 insertions(+), 124 deletions(-) diff --git a/src/App.css b/src/App.css index a12d240..12400a8 100644 --- a/src/App.css +++ b/src/App.css @@ -42,23 +42,21 @@ margin: 0; padding: 0; overflow: visible; + display: flex; + justify-content: center; } .mainnav ul li { - display: inline-block; - margin-right: 1 px; + margin: 0 24px; font-size: 1em; } @media screen and (max-width: 500px) { - .mainnav ul { - display: flex; flex-direction: column; } .mainnav ul li { - padding: 10px; + padding: 10px; } - -} \ No newline at end of file +} diff --git a/src/components/Confirm.js b/src/components/Confirm.js index ce1cc62..80269ed 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -17,7 +17,6 @@ function ConfirmationCheckbox() { borderRadius: "20px", }; - const [person, setPerson] = useState(null); const [isActive, setIsActive] = useState(false); const [isChecked, setIsChecked] = useState(false); @@ -31,13 +30,13 @@ function ConfirmationCheckbox() { setInputValue(storedName); } }, []); + const storeInput = (input) => { localStorage.setItem("userName", input); }; function handleClick() { if (inputValue === "") { - toast.error("You didn't enter your name!", { position: "top-right", autoClose: 3000, @@ -52,14 +51,11 @@ function ConfirmationCheckbox() { transition: Bounce, }); } else { - setIsChecked(oldIsChecked => !oldIsChecked); - } } function checkboxon(e) { - setClick(true); if (e.target.checked) { if (inputValue === "") { @@ -90,7 +86,6 @@ function ConfirmationCheckbox() { transition: Bounce, }); } - } function generatorRandomNumber() { @@ -108,17 +103,6 @@ function ConfirmationCheckbox() { setPerson(wives[randomNum]); }; - - const regenerateResponse = () => { - setPerson(null); - setInputValue(""); - setClick(false); - setIsChecked(false); - setIsActive(false); - setButtonPlayed(false); - localStorage.removeItem("userName"); - }; - const wifestyle2 = { margin: "0", color: "white", @@ -153,7 +137,7 @@ function ConfirmationCheckbox() { -   Whichever wife I get, I will accept for the rest of my life.

@@ -193,10 +174,8 @@ function ConfirmationCheckbox() { Ready!

- I, {inputValue}, solemnly pledge to marry the woman revealed as my future wife. To break this vow would be to question my honor and integrity as a man. -

- -

{inputValue},your life’s greatest chapter is

- +

+ {inputValue}, your life’s greatest chapter is +

-

Share on Twitter

-
- -
)} diff --git a/src/components/My.css b/src/components/My.css index 333da15..f1b2eb6 100644 --- a/src/components/My.css +++ b/src/components/My.css @@ -13,32 +13,28 @@ } .mainnav ul li { - margin: 0 24px; - margin-top: -150px; + margin: 0 24px; list-style: none; font-weight: bold; font-family: monospace; font-size: 25px; color: green; } - -/* Responsive layout for smaller screens */ @media (max-width: 768px) { .mainnav ul li { - margin-top: -100px; - font-size: 20px; + margin-top: -100px; + font-size: 20px; } } - @media (max-width: 480px) { .mainnav ul { - flex-direction: column; - margin-top: -50px; + flex-direction: column; + margin-top: -50px; } .mainnav ul li { - margin: 12px 0; - font-size: 18px; + margin: 12px 0; + font-size: 18px; } } @@ -72,16 +68,15 @@ z-index: 1; } -/* Adjust curve for smaller screens */ @media (max-width: 768px) { .curve { - height: 150px; + height: 150px; } .curve::before, .curve::after { - width: 60%; - height: 90%; + width: 60%; + height: 90%; } } @@ -171,19 +166,19 @@ html { @keyframes colorchange { 0% { - color: green; + color: green; } 25% { - color: white; + color: white; } 50% { - color: green; + color: green; } 75% { - color: white; + color: white; } 100% { - color: green; + color: green; } } @@ -193,53 +188,54 @@ html { @keyframes colorchange { 0% { - color: green; + color: green; } 25% { - color: white; + color: white; } 50% { - color: green; + color: green; } 75% { - color: white; + color: white; } 100% { - color: green; + color: green; } } + @media (max-width: 768px) { .letsgo:hover { - transform: scale(1.1); + transform: scale(1.1); } .mycheckbox { - transform: scale(1.5); + transform: scale(1.5); } .enternamebar { - transform: scale(1.5); + transform: scale(1.5); } .name:hover { - transform: scale(1.05); + transform: scale(1.05); } } @media (max-width: 480px) { .letsgo:hover { - transform: scale(1.05); + transform: scale(1.05); } .mycheckbox { - transform: scale(1.3); + transform: scale(1.3); } .enternamebar { - transform: scale(1.3); + transform: scale(1.3); } .name:hover { - transform: scale(1); + transform: scale(1); } -} +} \ No newline at end of file diff --git a/src/components/photo.css b/src/components/photo.css index 0940e2a..79eeaed 100644 --- a/src/components/photo.css +++ b/src/components/photo.css @@ -1,31 +1,31 @@ /* Styles for screens smaller than 768px */ @media only screen and (max-width: 768px) { - .superClass { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 30px; - } - .circular-image { - margin-bottom: 20px; - } - img { - width: 150px; - height: 150px; - } + .superClass { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + height: auto; } - - /* Styles for screens larger than 768px */ - @media only screen and (min-width: 769px) { - .superClass { - display: flex; - justify-content: space-between; - align-items: center; - } - .circular-image { - margin-right: 20px; - margin-left: 30px; - } + .circular-image { + margin-bottom: 20px; } - \ No newline at end of file + img { + width: 150px; + height: 150px; + } +} + +@media only screen and (min-width: 769px) { + .superClass { + display: flex; + justify-content: space-between; + align-items: center; + height: auto; + .circular-image { + margin-right: 20px; + margin-left: 30px; + } +} +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..78aaae5 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,73 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +html, body { + margin: 0; + padding: 0; + height: 100%; + overflow-x: hidden; +} + +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.mainnav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: visible; + display: flex; + justify-content: center; +} + +.mainnav ul li { + margin: 0 24px; + font-size: 1em; +} + +@media screen and (max-width: 500px) { + .mainnav ul { + flex-direction: column; + } + + .mainnav ul li { + padding: 10px; + } +} From 9a621d3925b67be23a16e99cae8f8f9d6a73f400 Mon Sep 17 00:00:00 2001 From: AdityaP700 <126982848+AdityaP700@users.noreply.github.com> Date: Tue, 8 Oct 2024 22:35:59 +0530 Subject: [PATCH 7/7] Added PlayAgain function & fixed a bug in My.css --- src/components/Confirm.js | 35 +++++++++++++++++++++++------------ src/components/My.css | 2 +- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/components/Confirm.js b/src/components/Confirm.js index 80269ed..6b7e895 100644 --- a/src/components/Confirm.js +++ b/src/components/Confirm.js @@ -8,7 +8,7 @@ import 'react-toastify/dist/ReactToastify.css'; import { useNavigate } from 'react-router-dom'; function ConfirmationCheckbox() { - + const navigate = useNavigate(); const buttonStyle = { backgroundColor: "#132a13", color: "yellowgreen", @@ -51,7 +51,7 @@ function ConfirmationCheckbox() { transition: Bounce, }); } else { - setIsChecked(oldIsChecked => !oldIsChecked); + setIsChecked(true); } } @@ -62,11 +62,6 @@ function ConfirmationCheckbox() { toast.error("You didn't enter your name!", { position: "top-right", autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, theme: "dark", transition: Bounce, }); @@ -77,11 +72,6 @@ function ConfirmationCheckbox() { toast.error("You didn't click the Checkbox", { position: "top-right", autoClose: 3000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, theme: "dark", transition: Bounce, }); @@ -103,6 +93,13 @@ function ConfirmationCheckbox() { setPerson(wives[randomNum]); }; + const playAgain = () => { + setButtonPlayed(false); + setIsChecked(false); + setClick(false); + navigate("/"); + }; + const wifestyle2 = { margin: "0", color: "white", @@ -277,6 +274,20 @@ function ConfirmationCheckbox() {
+ +
)} diff --git a/src/components/My.css b/src/components/My.css index f1b2eb6..5a09cc4 100644 --- a/src/components/My.css +++ b/src/components/My.css @@ -26,7 +26,7 @@ font-size: 20px; } } -@media (max-width: 480px) { +@media (max-width: 500px) { .mainnav ul { flex-direction: column; margin-top: -50px;