Sd 447 create page mention legal

client/src/App.css

@@ -104,6 +104,14 @@
   box-shadow: 0px 0px 20.3424px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
 }
+.app-sofan-block-access-mentions-legales a{
+text-decoration: none;
+color: black;
+}
+.app-sofan-block-access-mentions-legales a:hover{
+color: #f6d463;
+transition-duration: 200ms;
+}
 /* button:active {
   transform: scale(0.45) !important;
 } */

client/src/Components/Navbar/NavProfile/NavProfile.css

@@ -17,7 +17,7 @@
   cursor: pointer;
 }
 .navbar-navprofile > img:hover {
-  border: .5px black solid;
+  border: 0.5px black solid;
 }
 
 /* .navbar-navprofile-container:hover .navbar-dropdown {
@@ -37,7 +37,7 @@
   align-items: center;
   justify-content: space-evenly;
   width: 120px;
-  height: 150px;
+  height: 120px;
   background-color: #ffffff;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
@@ -50,4 +50,9 @@
 .navbar-dropdown > a:hover {
   color: #f6d463;
   transition: 0.3s;
-}
+}
+.navbar-dropdown-separation-line {
+  width: 70%;
+  border-bottom: 0.3px solid rgba(0, 0, 0, 0.2);
+  opacity: 0.5;
+}

client/src/Components/Navbar/NavProfile/NavProfile.js

@@ -54,12 +54,11 @@ const NavProfile = ({ web3auth, isProfileClicked, src, userInfo = null }) => {
           >
             Voir profil
           </Link>
+          <div className="navbar-dropdown-separation-line"></div>
           <Link to="/settings">Settings</Link>
-          <Link to="/cgu">
-            Mentions
-            <br />
-            légales
-          </Link>
+          <div className="navbar-dropdown-separation-line"></div>
+          <Link to="/cgu">CGU</Link>
+          <div className="navbar-dropdown-separation-line"></div>
           <Link
             onClick={handleSignOut}
             // to="/"

client/src/Pages/Home/Home.css

@@ -14,9 +14,19 @@
   max-height: 686px; /* A modif*/
   padding-top: 50px;
 }
-.home-left-separation-line{
+.home-left-separation-line {
   border: 0.3px solid rgba(0, 0, 0, 0.1);
-
+}
+.home-legals-mentions-container {
+  font-size: 13px;
+}
+.home-legals-mentions-container a {
+  text-decoration: underline;
+  color: black;
+}
+.home-legals-mentions-container a:hover {
+  color: #f6d463;
+  transition-duration: 200ms;
 }
 .home-navlink-create-post-wrap {
   display: flex;
@@ -175,7 +185,7 @@
   .home-left-container {
     /* min-height: 420px; */
     display: flex;
-    flex-direction: column-reverse;
+    /* flex-direction: column-reverse; */
     max-height: 492px;
     padding-top: 70px;
     /* background-color: red; */

client/src/Pages/Home/Home.js

@@ -66,6 +66,7 @@ function Home({
   const [athletesSupportingData, setAthletesSupportingData] = useState([]);
   const [isSupportingOrFollowingAthlete, setIsSupportingOrFollowingAthlete] =
     useState();
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   function handleDisplayPremiumContent(i) {
     if (isUserFan === false && dataPost[i]?.visibility === false) {
       return true;
@@ -334,15 +335,28 @@ function Home({
     getNftsForOwner();
   }, [isLogged]);
   // console.log("nftsFromOwner --> ",nftsFromOwner, "athletesSupportingData --> ",athletesSupportingData)
-  console.log(athletesSupportingData);
+  // console.log(athletesSupportingData);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    }
+  }, []);
+
+  // console.log(windowWidth);
   return (
     <>
       <section className="home-component">
         <div
           className="home-left-container"
           style={
             isLogged?.account_type === "athlete"
-              ? { height: "686px", maxHeight: "686px" }
+              ? windowWidth < 950 ? {height:"500px"}: { height: "726px", maxHeight: "726px" }
               : athletesFollowing.length === 0 &&
                 athletesSupportingData.length === 0
               ? { height: "398px" }
@@ -410,6 +424,9 @@ function Home({
             suggestionsAthletes={suggestionsAthletes}
             athletesSupportingData={athletesSupportingData}
           />
+          <div style={loggedInUser?.account_type === "free" ? {paddingTop:"15px"}:{}} className="home-legals-mentions-container">
+            <a target="_blank" href="/mentions-legales">© 2023 Sofan</a> Tout droits réservés
+          </div>
         </div>
         <div className="home-center-container">
           <div>
@@ -447,7 +464,7 @@ function Home({
                       handleClickCopyPostLink={handleClickCopyPostLink}
                       postFeedHomeStyle={true}
                       postCommentNumber={commentCounts[post.id] || 0}
-                      userType={loggedInUser?.account_type}
+                      userType={loggedInUser?. account_type}
                       commentCounterIncrementLocal={
                         commentCounterIncrementLocal
                       }

client/src/Pages/LegalsMentions/LegalsMentions.css

@@ -0,0 +1,50 @@
+.legals-mentions-page-container {
+  /* background-color: red; */
+  margin-top: 91px;
+  width: 80%;
+  height: 100%;
+}
+.legals-mentions-page-title {
+  padding: 30px;
+  font-size: 25px;
+  font-family: "britanica-heavy";
+}
+.legals-mentions-page-company-registration {
+  width: 40%;
+  padding: 30px;
+  /* background-color: yellow; */
+  font-size: 20px;
+  font-family: "britanica-regular";
+  font-weight: 500;
+  text-align: justify;
+}
+.legals-mentions-page-contact {
+  padding: 30px;
+  /* display: flex; */
+  font-size: 20px;
+}
+.legals-mentions-page-contact div {
+  font-family: "britanica-heavy";
+  padding-bottom: 10px;
+}
+.legals-mentions-page-publication-director {
+  padding: 30px;
+  /* display: flex; */
+  font-size: 20px;
+}
+.legals-mentions-page-publication-director div {
+  font-family: "britanica-heavy";
+  padding-bottom: 10px;
+}
+.legals-mentions-page-hosting {
+  padding: 30px;
+  /* display: flex; */
+  font-size: 20px;
+  width: 40%;
+  text-align: justify;
+
+}
+.legals-mentions-page-hosting div {
+  font-family: "britanica-heavy";
+  padding-bottom: 10px;
+}

client/src/Pages/LegalsMentions/LegalsMentions.js

@@ -0,0 +1,32 @@
+import React from "react";
+import "./LegalsMentions.css";
+
+function LegalsMentions() {
+  return (
+    <div className="legals-mentions-page-container">
+      <div className="legals-mentions-page-title">Mentions Légales</div>
+      <div className="legals-mentions-page-company-registration">
+        Le Site www.sofan.app est une publication de la société : SoFan, SAS, au
+        capital de 1 000€, enregistrée auprès de la Préfecture de Lille
+        Métropole sous le siret 92227287700015, dont le siège social est situé
+        au 125, Bois d’Achelles, 59200 Tourcoing, représentée par son Président
+        habilité aux fins des présentes
+      </div>
+      <div className="legals-mentions-page-contact">
+        <div>Contact: </div> [email protected]
+      </div>
+      <div className="legals-mentions-page-publication-director">
+        <div>Directeur de la publication :</div>
+        Grégoire de la LANDE d’OLCE
+      </div>
+      <div className="legals-mentions-page-hosting">
+        <div>Hébergeur :</div>
+        Nom de l'entreprise: Google LLC Adresse: 1600 Amphitheatre Parkway,
+        Mountain View, CA 94043, USA Numéro de téléphone: +1 650-253-0000 Site
+        Web: https://firebase.google.com/
+      </div>
+    </div>
+  );
+}
+
+export default LegalsMentions;