Merge pull request #24 from valihna/hotfixcss

Hotfixcss
valihna · Nov 24, 2023 · b33d6f9 · b33d6f9
2 parents 2f774ae + 99284dc
commit b33d6f9
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 269 deletions.
diff --git a/frontend/components/Calendrier/calendrier.css b/frontend/components/Calendrier/calendrier.css
@@ -31,7 +31,7 @@
 }
 
 .calender-container {
-  margin-top: 50px;
+  margin-top: 150px;
 }
 
 .case {

diff --git a/frontend/components/CardCalendrier/CardCalendrier.css b/frontend/components/CardCalendrier/CardCalendrier.css
@@ -1,28 +1,38 @@
 @keyframes myAnim {
-	0% {
-		transform: scale(0);
-	}
+  0% {
+    transform: scale(0);
+  }
 
-	100% {
-		transform: scale(1);
-	}
+  100% {
+    transform: scale(1);
+  }
 }
 
-.cadeau{
-    animation: myAnim 1s ease 0s 1 normal forwards;
-    position: absolute;
-    top: 15%;
-    left: 37%;
-    color:white;
-    border-radius: 10px;
-    padding: 10px;
-    text-align: center;
-    background-color: goldenrod;
+.cadeau {
+  animation: myAnim 1s ease 0s 1 normal forwards;
+  position: absolute;
+  top: 15%;
+  left: 37%;
+  color: white;
+  border-radius: 10px;
+  padding: 10px;
+  text-align: center;
+  background-color: goldenrod;
 }
 
-
-span{
-    color: black;
-    font-weight: bold;
-    font-size: 20px;
-}
+span {
+  color: black;
+  font-weight: bold;
+  font-size: 20px;
+}
+.header-container {
+  display: flex;
+}
+.croos-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 80px;
+  border-radius: 50px;
+  cursor: pointer;
+}
diff --git a/frontend/components/CardCalendrier/CardCalendrier.jsx b/frontend/components/CardCalendrier/CardCalendrier.jsx
@@ -3,12 +3,16 @@ import "./CardCalendrier.css";
 
 function CardCalendrier({ urlImg, title, fermer }) {
   return (
-    <div className="cadeau">
-      <span onClick={fermer}>X</span>
-      <div>
-        <h1>{title}</h1>
+    <div className="cadeau-container">
+      <div className="cadeau">
+        <div className="header-container">
+          <h1>{title}</h1>
+          <span className="croos-form" onClick={fermer}>
+            X
+          </span>
+        </div>
+        <img src={urlImg} alt={title} />
       </div>
-      <img src={urlImg} alt={title} />
     </div>
   );
 }

diff --git a/frontend/components/Contact/FormulaireContact.jsx b/frontend/components/Contact/FormulaireContact.jsx
@@ -4,10 +4,10 @@ import CalendrierContext from "../../src/context/calendrierContext";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import "./contactForm.css";
+import { Link } from "react-router-dom";
 
 function FormulaireContact() {
-
-  const {sageOuPas, setSageOuPas} = useContext(CalendrierContext);
+  const { sageOuPas, setSageOuPas } = useContext(CalendrierContext);
   console.log(sageOuPas);
 
   const [formValue, setFormValue] = useState({
@@ -25,14 +25,20 @@ function FormulaireContact() {
   const toastQuestion = () => {
     if (question === "oui") {
       setSageOuPas("oui");
-      toast.success("Tu as été sage, tu peux choisir un cadeau dans le calendrier !", {
-        position: toast.POSITION.TOP_RIGHT,
-      });
+      toast.success(
+        "Tu as été sage, tu peux choisir un cadeau dans le calendrier !",
+        {
+          position: toast.POSITION.TOP_RIGHT,
+        }
+      );
     } else {
       setSageOuPas("non");
-      toast.error("Tu n'as pas été sage, tu dois me battre au morpion si tu veux un cadeau !", {
-        position: toast.POSITION.TOP_RIGHT,
-      });
+      toast.error(
+        "Tu n'as pas été sage, tu dois me battre au morpion si tu veux un cadeau !",
+        {
+          position: toast.POSITION.TOP_RIGHT,
+        }
+      );
     }
   };
 
@@ -50,65 +56,72 @@ function FormulaireContact() {
   };
 
   return (
-    <div className="contactCard">
-      <h1>Messagerie du Père Noël</h1>
-      <form onSubmit={handleSubmit} className="contactForm">
-        <div className="firstQuestion">
-          <label>
-            Comment t'appelles-tu ? <br />
-            <input
-              type="text"
-              name="name"
-              value={formValue.lastname}
-              onChange={handleChange}
-            />
-          </label>
-        </div>
-        <div className="secondQuestion">
-          <label>
-            As-tu été sage ? <br />
-            <input
-              type="radio"
-              name="question"
-              value="oui"
-              checked={question === "oui"}
-              onChange={handleChangement}
-            />
-            Oui
-          </label>
-          <label>
-            <input
-              type="radio"
-              name="question"
-              value="non"
-              checked={question === "non"}
-              onChange={handleChangement}
-            />
-            Non
-          </label>
-        </div>
-        <div className="messageForm">
-          <label>
-            <span>
-              Quels cadeaux aimerais-tu pour Noël ?<br />
-            </span>
-            <textarea
-              className="textArea"
-              name="message"
-              value={formValue.message}
-              onChange={handleChange}
-              id="description"
-              maxLength={400}
-              required
-            />
-          </label>
-          <div className="submit">
-            <input type="submit" className="submitButton" value="Envoyer" />
+    <>
+      <div className="contactCard">
+        <h1>Messagerie du Père Noël</h1>
+        <form onSubmit={handleSubmit} className="contactForm">
+          <div className="firstQuestion">
+            <label>
+              Comment t'appelles-tu ? <br />
+              <input
+                type="text"
+                name="name"
+                value={formValue.lastname}
+                onChange={handleChange}
+              />
+            </label>
+          </div>
+          <div className="secondQuestion">
+            <label>
+              As-tu été sage ? <br />
+              <input
+                type="radio"
+                name="question"
+                value="oui"
+                checked={question === "oui"}
+                onChange={handleChangement}
+              />
+              Oui
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="question"
+                value="non"
+                checked={question === "non"}
+                onChange={handleChangement}
+              />
+              Non
+            </label>
+          </div>
+          <div className="messageForm">
+            <label>
+              <span>
+                Quels cadeaux aimerais-tu pour Noël ?<br />
+              </span>
+              <textarea
+                className="textArea"
+                name="message"
+                value={formValue.message}
+                onChange={handleChange}
+                id="description"
+                maxLength={400}
+                required
+              />
+            </label>
+            <div className="submit">
+              <input type="submit" className="submitButton" value="Envoyer" />
+            </div>
           </div>
+        </form>
+        <ToastContainer />
+      </div>
+      <Link to="/2">
+        <div className="julien-container">
+          <img src="./public/Design_sans_titre-removebg-preview.png" />
         </div>
-      </form>
-      <ToastContainer />
-    </div>
+      </Link>
+    </>
   );
 }
 

diff --git a/frontend/components/Contact/contactForm.css b/frontend/components/Contact/contactForm.css
@@ -14,7 +14,7 @@ body {
   flex-direction: column;
   align-items: center;
   grid-template-columns: 1fr;
-  margin-top: 20%;
+  margin-top: 7%;
   color: #daa520;
 }
 

diff --git a/frontend/components/Footer/Footer.css b/frontend/components/Footer/Footer.css
@@ -2,7 +2,9 @@
   list-style-type: none;
   color: white;
   margin-right: 90px;
-  font-size: 30px;
+  font-size: 45px;
   font-weight: bold;
-  position: fixed bottom;
+  position: absolute;
+  bottom: 0px;
+  left: 35px;
 }
diff --git a/frontend/components/Footer/Footer.jsx b/frontend/components/Footer/Footer.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import "../../components/Footer/Footer.css";
 function Footer() {
   return (

diff --git a/frontend/components/Morpion/Consignes.jsx b/frontend/components/Morpion/Consignes.jsx
@@ -57,7 +57,7 @@ const Consignes = () => {
 
   const winner = calculateWinner(carres);
   const status = winner
-    ? `Winner: ${winner}`
+    ? `Bravo ,tu peux aller sur la messagerie du père Noël !`
     : `Next player: ${xSuivant ? "X" : "O"}`;
 
   return (

diff --git a/frontend/components/Morpion/Morpion.css b/frontend/components/Morpion/Morpion.css
@@ -32,7 +32,6 @@
 }
 
 .status {
-  font-size: 1.2em;
   font-weight: bold;
   margin-bottom: 10px;
 }
diff --git a/frontend/components/Nav/Nav.css b/frontend/components/Nav/Nav.css
@@ -1,17 +1,17 @@
-ul{
-    display: flex;
-    justify-content: center;
-    align-items: center;
+ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-
-li{
-    list-style-type: none;
-    color: white;
-    margin-right: 90px;
-    font-size: 30px;
-    font-weight: bold;
+li {
+  list-style-type: none;
+  color: white;
+  font-weight: bold;
+  font-family: "Cedarville Cursive", cursive;
+  font-size: 2.5rem;
+  margin: 20px 35px;
 }
 
-a{
-    text-decoration:none;
-}
+a {
+  text-decoration: none;
+}
diff --git a/frontend/components/Surprise/Surprise.css b/frontend/components/Surprise/Surprise.css
@@ -1,27 +1,18 @@
-<<<<<<< HEAD
-/* * {
+/* {
   background-image: url(frontend/src/assets/imageSurprise.jpg);
-=======
-.surprise {
-  background-image: url(public/imageSurprise.jpg);
->>>>>>> 8485bddcb17696aa999f14b25f7e9b36c36e6940
   background-size: 100%;
   background-attachment: fixed;
   margin: 0;
   padding: O;
-} */
+}  */
 
 .containerSurprise {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-  width: 100%;
 }
 
 .imgSurprise {
-  width: 500px;
+  width: 800px;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ @@
     }
     .calender-container {
-      margin-top: 50px;
+      margin-top: 150px;
     }
     .case {
@@ Expand Down @@