Merge pull request #51 from WildCodeSchool-2023-09/dev

Dev
WildCodeSchool-2023-09 · Jan 12, 2024 · 6b1a8f2 · 6b1a8f2
2 parents 14d470a + c47cf45
commit 6b1a8f2
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 108 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -3,6 +3,7 @@ import Home from "./pages/Home";
 import NavBar from "./components/NavBar";
 import NavBarM from "./components/NavBarM";
 import "./styles/commons.scss";
+import logo from "./assets/Logo.svg";
 
 function App() {
   const isMobile = useMediaQuery("only screen and (max-width: 600px)");
@@ -11,6 +12,9 @@ function App() {
     <div>
       {isMobile ? (
         <>
+          <div className="logo-container">
+            <img src={logo} alt="logo" className="logo-mobile" />
+          </div>
           <Home />
           <NavBarM />
         </>

diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import "../styles/modals.scss";
 import axios from "axios";
+import CrossButton from "../assets/picto/yellow/cross_yell.svg";
 
 function Login() {
   const [loginInfo, setLoginInfo] = useState({
@@ -52,10 +53,7 @@ function Login() {
         <header>
           <div>
             <Link to="/" className="img-modal">
-              <img
-                src="src/assets/picto/yellow/cross_yell.svg"
-                alt="close-window"
-              />
+              <img src={CrossButton} alt="close-window" />
             </Link>
             <div>
               <h2>Connexion</h2>

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -2,6 +2,8 @@ import { Link } from "react-router-dom";
 
 import "./NavBar.scss";
 import "../styles/commons.scss";
+import login from "../assets/picto/white/connexion_white.svg";
+import register from "../assets/picto/white/profil_white.svg";
 
 function NavBar() {
   return (
@@ -18,11 +20,11 @@ function NavBar() {
           <h3>CARTE</h3>
         </Link>
         <Link to="/register" className="img-nav-link">
-          <img src="./src/assets/picto/white/profil_white.svg" alt="" />
+          <img src={register} alt="" />
           <p>Inscription</p>
         </Link>
         <Link to="/login" className="img-nav-link">
-          <img src="./src/assets/picto/white/connexion_white.svg" alt="" />
+          <img src={login} alt="" />
           <p>Connexion</p>
         </Link>
       </nav>

diff --git a/frontend/src/components/NavBar.scss b/frontend/src/components/NavBar.scss
@@ -5,7 +5,6 @@
   border-bottom: 3px solid $yellow;
   background-color: $deep-purple;
   padding: 15px;
-  // color: white;
   font-family: "Roboto";
   display: flex;
   justify-content: space-around;
@@ -18,7 +17,6 @@
   .nav-link {
     @include flex-center;
     text-decoration: none;
-    // color: white;
   }
   .img-nav-link {
     text-decoration: none;

diff --git a/frontend/src/components/NavBarM.jsx b/frontend/src/components/NavBarM.jsx
@@ -2,24 +2,29 @@ import { Link } from "react-router-dom";
 
 import "./NavBarM.scss";
 import "../styles/commons.scss";
+import home from "../assets/picto/white/home_white.svg";
+import map from "../assets/picto/white/map_white.svg";
+import gallery from "../assets/picto/white/galery_white.svg";
+import register from "../assets/picto/white/profil_white.svg";
+import login from "../assets/picto/white/connexion_white.svg";
 
 function NavBar() {
   return (
     <nav className="navbar-mobile">
       <Link to="/">
-        <img src="./src/assets/picto/white/home_white.svg" alt="" />
+        <img src={home} alt="" />
       </Link>
       <Link to="/galery">
-        <img src="./src/assets/picto/white/galery_white.svg" alt="" />
+        <img src={gallery} alt="" />
       </Link>
       <Link to="/map">
-        <img src="./src/assets/picto/white/map_white.svg" alt="" />
+        <img src={map} alt="" />
       </Link>
       <Link to="/register">
-        <img src="./src/assets/picto/white/profil_white.svg" alt="" />
+        <img src={register} alt="" />
       </Link>
       <Link to="/login">
-        <img src="./src/assets/picto/white/connexion_white.svg" alt="" />
+        <img src={login} alt="" />
       </Link>
     </nav>
   );

diff --git a/frontend/src/components/Register.jsx b/frontend/src/components/Register.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import axios from "axios";
 import "../styles/modals.scss";
+import CrossButton from "../assets/picto/yellow/cross_yell.svg";
 
 function Register() {
   const [registerInfo, setRegisterInfo] = useState({
@@ -49,10 +50,7 @@ function Register() {
         <header>
           <div>
             <Link to="/" className="img-modal">
-              <img
-                src="src/assets/picto/yellow/cross_yell.svg"
-                alt="close-window"
-              />
+              <img src={CrossButton} alt="close-window" />
             </Link>
             <div>
               <h2>Inscription</h2>

diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
@@ -1,31 +1,28 @@
 import NavBar from "../components/NavBar";
 import "./Admin.scss";
+import MapAndFlag from "../assets/panel-admin/maps-and-flags-map-svgrepo-com.svg";
+import Avatar from "../assets/panel-admin/avatar-svgrepo-com.svg";
+import Hourglass from "../assets/panel-admin/hourglass-not-done-svgrepo-com.svg";
+import badge from "../assets/panel-admin/badge-award-svgrepo-com.svg";
+import strafari from "../assets/panel-admin/strafari-street-art-hunter.webp";
+import light from "../assets/panel-admin/light-bulb-idea-svgrepo-com.svg";
 
 function admin() {
   return (
     <>
       <NavBar />
       <div className="notif-h2-img">
         <h2 className="admin-h2">Notifications</h2>
-        <img
-          alt="ampoule"
-          src="./src/assets/panel-admin/light-bulb-idea-svgrepo-com.svg"
-        />
+        <img alt="ampoule" src={light} />
       </div>
       <div className="notif-parent-div">
         <div className="notif-grid-div notif-child-div-yellow">
           <p>12 Street Art en attente de validation</p>
-          <img
-            alt="Sablier"
-            src="./src/assets/panel-admin/hourglass-not-done-svgrepo-com.svg"
-          />
+          <img alt="Sablier" src={Hourglass} />
         </div>
         <div className="notif-grid-div notif-child-div-cyan">
           <p>3 Street Art sont portés disparus</p>
-          <img
-            alt="Carte"
-            src="./src/assets/panel-admin/maps-and-flags-map-svgrepo-com.svg"
-          />
+          <img alt="Carte" src={MapAndFlag} />
         </div>
       </div>
       <h2 className="admin-h2">Utilisateurs</h2>
@@ -43,16 +40,8 @@ function admin() {
       </div>
       <div className="profil-uti-parent">
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -66,16 +55,8 @@ function admin() {
           </p>
         </div>
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -89,16 +70,8 @@ function admin() {
           </p>
         </div>
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -112,16 +85,8 @@ function admin() {
           </p>
         </div>
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -135,16 +100,8 @@ function admin() {
           </p>
         </div>
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -158,16 +115,8 @@ function admin() {
           </p>
         </div>
         <div className="profil-uti-child">
-          <img
-            alt="avatar du profil"
-            className="avatar-grid"
-            src="./src/assets/panel-admin/avatar-svgrepo-com.svg"
-          />
-          <img
-            alt="badge du profil"
-            className="badge-grid"
-            src="./src/assets/panel-admin/badge-award-svgrepo-com.svg"
-          />
+          <img alt="avatar du profil" className="avatar-grid" src={Avatar} />
+          <img alt="badge du profil" className="badge-grid" src={badge} />
           <p className="pseudo-grid">Pseudo</p>
           <p className="name-grid">Prénom Nom</p>
           <p className="capture-grid">
@@ -183,11 +132,7 @@ function admin() {
       </div>
       <h2 className="admin-h2">Street Art</h2>
       <div className="sa-grid">
-        <img
-          alt="Street Art"
-          className="img-grid"
-          src="./src/assets/panel-admin/strafari-street-art-hunter.webp"
-        />
+        <img alt="Street Art" className="img-grid" src={strafari} />
         <p className="posted-grid">
           Posté par{" "}
           <span className="posted-grid-red">Pseudo de l'utilisateur</span>
@@ -198,11 +143,7 @@ function admin() {
         <button type="button" className="refuse-grid">
           Refuser
         </button>
-        <img
-          alt="Street Art"
-          className="original-img-grid"
-          src="./src/assets/panel-admin/strafari-street-art-hunter.webp"
-        />
+        <img alt="Street Art" className="original-img-grid" src={strafari} />
         <p className="original-work-grid">Oeuvre Originale</p>
       </div>
       <h2 className="admin-h2">Ajouter un artiste</h2>

diff --git a/frontend/src/pages/Home.scss b/frontend/src/pages/Home.scss
@@ -1,7 +1,7 @@
 @import "../styles/commons.scss";
 
 .home-page {
-  margin: 8vh 8vw;
+  margin: 0vh 8vw 20vh 8vw;
   button {
     margin-top: 4vh;
     margin-bottom: 10vh;
@@ -69,18 +69,11 @@
       }
     }
   }
-  // ol {
-  //   padding: 0;
-  //   margin: 0;
-  //   list-style-position: inside;
-  //   li::before {
-  //     padding-right: 8px;
-  //     text-align: center;
-  //   }}
 }
 
 @media screen and (min-width: 768px) and (max-width: 1024px) {
   .home-page {
+    margin: 8vh 8vw;
     .kesako-content,
     .instructions {
       display: flex;
@@ -108,6 +101,7 @@
 
 @media screen and (min-width: 1024px) {
   .home-page {
+    margin: 8vh 8vw;
     .kesako-content,
     .instructions {
       display: flex;

diff --git a/frontend/src/styles/commons.scss b/frontend/src/styles/commons.scss
@@ -16,6 +16,18 @@ $light-yellow: #f1f370;
 $light-cyan: #9beeda;
 $light-red: #ff8bb5;
 
+// Logo
+.logo-container {
+  display: flex;
+  justify-content: center;
+
+  .logo-mobile {
+    max-width: 30vh;
+    margin-bottom: 3vh;
+    margin-top: 3vh;
+  }
+}
+
 // TEXTS
 %h1 {
   font-family: "Knewave";