Fixed some CSS issues and removed response regenerate button

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; 
   }
-
-}
+}

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() {
               <input
                 onChange={handleInputChange}
                 value={inputValue}
-                type="text" 
+                type="text"
                 style={{
                   textAlign: "center",
                   width: "100%",
@@ -169,17 +153,14 @@ function ConfirmationCheckbox() {
           </div>
 
           <input className="mycheckbox" type="checkbox" id="input" onChange={checkboxon} />
-
           &nbsp; Whichever wife I get, I will accept for the rest of my life.
           <p></p>
           <button
             disabled={!isActive}
             style={buttonStyle}
             onClick={handleClick}
             type="button"
-
             className="btn letsgo btn-success"
-
           >
             Wife Me Up
           </button>
@@ -193,10 +174,8 @@ function ConfirmationCheckbox() {
             Ready!
           </h1>
           <p style={{ color: "green" }}>
-
             I, <b>{inputValue}</b>, 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.
-
           </p>
           <div
             className="bestbutton"
@@ -220,9 +199,9 @@ function ConfirmationCheckbox() {
           }}
         >
           <Confetti />
-
-          <h2 style={{ color: "darkgreen", padding: "10px" }}><b>{inputValue}</b>,your life’s greatest chapter is </h2>
-
+          <h2 style={{ color: "darkgreen", padding: "10px" }}>
+            <b>{inputValue}</b>, your life’s greatest chapter is
+          </h2>
           <div style={{ display: "flex", justifyContent: "center" }}>
             <div
               className="card"
@@ -283,26 +262,10 @@ function ConfirmationCheckbox() {
             </div>
           </div>
 
-          <button
-            style={{
-              padding: "10px 20px",
-              backgroundColor: "#132a13",
-              color: "yellowgreen",
-              border: "3px solid currentcolor",
-              borderRadius: "20px",
-              cursor: "pointer",
-              marginTop: "20px",
-              transition: "background-color 0.3s ease"
-            }}
-            onClick={regenerateResponse}
-          >
-            Regenerate Response
-          </button>
           <div className="my-3">
             <p style={{ color: "green", textDecoration: "underline 3px" }}>
               <b>Share on Twitter</b>
             </p>
-
             <div className="mid-col-6">
               <TwitterShareButton
                 url={"wife-predictor.netlify.app"}
@@ -314,20 +277,6 @@ function ConfirmationCheckbox() {
               <TwitterFollowButton screenName={"1Shubham7"} />
             </div>
           </div>
-
-          <button
-            onClick={playAgain}
-            style={{
-              backgroundColor: "white",
-              color: "green",
-              border: "3px solid #386641",
-              boxShadow: "0 0 3px green",
-              borderRadius: "20px",
-              padding: "10px 20px",
-            }}
-          >
-            Play Again
-          </button>
         </div>
       )}
     </>

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);
   }
-}
+}