From 08b566c35f1ad4000daf4f39f5a4b8e54bd9582f Mon Sep 17 00:00:00 2001
From: AntoninoP <antoninopiraino70pgmail.com>
Date: Wed, 18 Sep 2024 17:40:44 +0200
Subject: [PATCH] new create page and better navbar

---
 src/App.jsx                                   |  3 +-
 src/components/CreateServer/CreateServer.jsx  | 35 +-------
 .../CreateServer/CreateServer.module.scss     | 16 ++--
 src/components/navbar/Navbar.jsx              | 28 ++++---
 src/components/navbar/Navbar.module.scss      | 37 +++++++--
 .../serverCard/serverCard.module.scss         |  2 +-
 src/main.css                                  | 21 ++---
 src/pages/CreateServer/CreateServer.jsx       | 62 ++++++++++++++
 .../CreateServer/CreateServer.module.scss     | 82 +++++++++++++++++++
 src/pages/DashboardPage/DashboardPage.jsx     | 14 ++--
 .../DashboardPage/DashboardPage.module.scss   | 19 +++--
 11 files changed, 227 insertions(+), 92 deletions(-)
 create mode 100644 src/pages/CreateServer/CreateServer.jsx
 create mode 100644 src/pages/CreateServer/CreateServer.module.scss

diff --git a/src/App.jsx b/src/App.jsx
index edea5c8..291f5bb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -9,6 +9,7 @@ import { auth } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
 import NotFoundPage from './pages/NotFoundPage/NotFoundPage';
+import CreatePage from './pages/CreateServer/CreateServer';
 
 const App = () => {
   const [user, setUser] = useState(null);
@@ -33,7 +34,7 @@ const App = () => {
         <Routes>
           <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
           <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
-          <Route path="/createServer" element={<Navigate  />} />
+          <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
           <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
           <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
           <Route path="*" element={<NotFoundPage />} />
diff --git a/src/components/CreateServer/CreateServer.jsx b/src/components/CreateServer/CreateServer.jsx
index 5f19719..c996784 100644
--- a/src/components/CreateServer/CreateServer.jsx
+++ b/src/components/CreateServer/CreateServer.jsx
@@ -132,39 +132,10 @@ const CreateServer = ({ user, onCreateServer, onSubdomainUpdate, onCancel, noSer
               </button>
             </div>
           ) : (
-            <div className={styles.mainCardCreateServ}>
+            <div className={styles.GamesChoice}>
               <div className={styles.title}>Création du serveur</div>
-              <input
-                className={styles.input}
-                type="text"
-                placeholder="Nom du serveur"
-                value={serverName}
-                onChange={(e) => setServerName(validateInput(e.target.value))}
-              />
-
-              <div className={styles.subtitle}>Sélection de la version</div>
-
-              <div className={styles.VersionContainer}>
-                  {versions['paper'].map((version, index) => (
-                    <div
-                      key={index}
-                      value={version}
-                      className={`${styles.VersionCard} ${serverVersion === version ? styles.selectedVersion : ''}`}
-                      onClick={VersionChoice(version)}
-                    >
-                      {serverVersion === version ? <GoCheck /> : <GoTag />} 
-                      {version}
-                    </div>
-                  ))}
-                </div>
-              <div className={styles.buttonContainer}>
-                <button className={styles.btnServCreate} onClick={handleCreateServer}>
-                  Créer
-                </button>
-                <button className={styles.btnServCreate} onClick={onCancel}>
-                  Annuler
-                </button>
-              </div>
+              <div className={styles.subtitle}>Comment voulez vous jouer ?</div>
+              <div className={styles.GamesContainer}>dd</div>
             </div>
           )
         )
diff --git a/src/components/CreateServer/CreateServer.module.scss b/src/components/CreateServer/CreateServer.module.scss
index 1e91405..067dce3 100644
--- a/src/components/CreateServer/CreateServer.module.scss
+++ b/src/components/CreateServer/CreateServer.module.scss
@@ -9,14 +9,12 @@
 
 .title {
   font-size: 2.5rem;
-  color: #F2F2F2;
   font-weight: 700;
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
   font-size: 1.2rem;
-  color: #AAA6C3;
   font-weight: 300;
   text-align: center;
   margin-bottom: 2rem;
@@ -66,7 +64,6 @@
 
 .nsSubTitle {
   font-size: 1.8rem;
-  color: #AAA6C3;
   font-weight: 300;
 }
 
@@ -93,15 +90,15 @@
   background-color: #090325;
 }
 
-.mainCardCreateServ {
-  margin-top: 5rem;
+.GamesChoice {
+  margin-top: var(--navbar-height);
+  width: 50rem;
+  height: 10rem;
+  background-color: red;
   display: flex;
   justify-content: center;
-  align-items: start;
+  align-items: center;
   flex-direction: column;
-  background-color: #1D1836;
-  border-radius: 1rem;
-  padding: 2rem;
 }
 
 .mainCardSubdomain {
@@ -114,7 +111,6 @@
 
 .subtitle {
   font-size: 1.2rem;
-  color: #AAA6C3;
   font-weight: 600;
   text-align: start;
   margin-bottom: 1.5rem;
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 104a13b..f0be8f9 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -2,10 +2,10 @@ import { useState, useEffect, useRef } from 'react';
 import { auth } from '../../service/firebase';
 import styles from './Navbar.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser, faCog, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import { faUser, faCog, faSignOutAlt, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from "prop-types";
 
-const Navbar = ({ user }) => {
+const Navbar = ({ user, hasShadow = true, showBackButton = false, onBackClick }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -34,31 +34,36 @@ const Navbar = ({ user }) => {
     };
   }, []);
 
-  useEffect(() => {
-  }, [user]);
-
   return (
-    <div className={styles.navbar}>
+    <div className={`${styles.navbar} ${hasShadow ? styles.shadow : ''}`}>
+      {showBackButton && (
+        <div className={styles.backButton} onClick={onBackClick}>
+          <FontAwesomeIcon icon={faArrowLeft} className={styles.backIcon} />
+          <span>Retour au dashboard</span>
+        </div>
+      )}
+
       <div className={styles.profileSection} onClick={toggleDropdown}>
         {user && user.photoURL ? (
           <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
         ) : (
-          <div className={styles.defaultProfilePic}>A</div> 
+          <div className={styles.defaultProfilePic}>A</div>
         )}
       </div>
+
       {dropdownOpen && (
         <div className={styles.dropdownMenu} ref={dropdownRef}>
           <div className={styles.menuItem} onClick={toggleDropdown}>
             {user && user.displayName}
           </div>
           <div className={styles.menuItem} onClick={toggleDropdown}>
-            <FontAwesomeIcon icon={faUser} className={styles.icon}/> Informations
+            <FontAwesomeIcon icon={faUser} className={styles.icon} /> Informations
           </div>
           <div className={styles.menuItem} onClick={toggleDropdown}>
-            <FontAwesomeIcon icon={faCog} className={styles.icon}/> Paramètres
+            <FontAwesomeIcon icon={faCog} className={styles.icon} /> Paramètres
           </div>
           <div className={styles.menuItemLogout} onClick={handleLogout}>
-            <FontAwesomeIcon icon={faSignOutAlt} className={styles.icon}/> Se déconnecter
+            <FontAwesomeIcon icon={faSignOutAlt} className={styles.icon} /> Se déconnecter
           </div>
         </div>
       )}
@@ -75,6 +80,9 @@ Navbar.propTypes = {
       photoURL: PropTypes.string,
     }),
   ]),
+  hasShadow: PropTypes.bool, 
+  showBackButton: PropTypes.bool,  
+  onBackClick: PropTypes.func, 
 };
 
 export default Navbar;
diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss
index 0ae7cfc..8b7965a 100644
--- a/src/components/navbar/Navbar.module.scss
+++ b/src/components/navbar/Navbar.module.scss
@@ -2,15 +2,19 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 0.833rem 1.667rem; 
+  padding: 0.65rem 1.6rem; 
   background-color: var(--navbar-background-color);
   color: var(--navbar-color);
-  box-shadow: 0 0.167rem 0.333rem rgba(0, 0, 0, 0.1); 
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   height: var(--navbar-height);
+  transition: box-shadow 0.3s;
+}
+
+.shadow {
+  box-shadow: 0 0.01rem 0.2rem rgba(0, 0, 0, 0.1); 
 }
 
 .profileSection {
@@ -30,26 +34,26 @@
 
 .defaultProfilePic {
   background-color: #ccc;
-  color: #fff; 
+  color: #fff;
   font-size: 1.5rem;
 }
 
 .dropdownMenu {
   position: absolute;
-  top: 4rem; 
-  right: 4rem; 
+  top: 4rem;
+  right: 4rem;
   background-color: #050816;
-  box-shadow: 0 0.167rem 0.833rem rgba(0, 0, 0, 0.15); 
-  border-radius: 0.8rem; 
+  box-shadow: 0 0.167rem 0.833rem rgba(0, 0, 0, 0.15);
+  border-radius: 0.8rem;
   overflow: hidden;
   z-index: 1001;
-  width: 20rem; 
+  width: 20rem;
   border: .1rem solid #444444;
   font-size: 1.1rem;
 }
 
 .menuItem, .menuItemLogout {
-  padding: 1.25rem 2rem; 
+  padding: 1.25rem 2rem;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
   font-weight: bold;
@@ -68,3 +72,18 @@
   margin-right: 1rem;
   font-size: 1.25rem;
 }
+
+.backButton {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: 400;
+  color: var(--primary-color);
+  margin-right: auto; 
+  margin-left: 2rem;
+}
+
+.backIcon {
+  margin-right: 0.5rem;
+  font-size: 1.5rem;
+}
diff --git a/src/components/serverCard/serverCard.module.scss b/src/components/serverCard/serverCard.module.scss
index 1889809..6f9b2f3 100644
--- a/src/components/serverCard/serverCard.module.scss
+++ b/src/components/serverCard/serverCard.module.scss
@@ -8,7 +8,7 @@
   border: 0.2rem solid var(--card-border-color);
   border-radius: 0.8rem;
   background-color: var(--card-bg-color);
-  color: var(--text-color);
+  color: white;
   margin-bottom: 1.5rem;
   cursor: pointer;
   text-decoration: none;
diff --git a/src/main.css b/src/main.css
index 5ccd456..d46cc83 100644
--- a/src/main.css
+++ b/src/main.css
@@ -5,24 +5,17 @@ html {
 }
 
 :root {
-  --navbar-height: 5rem;
-  --navbar-background-color: #100D25;
-  --navbar-color: #fff;
-  --profile-pic-size: 3rem;
-  --logout-button-bg: #ff4b4b;
-  --logout-button-bg-hover: #ff1a1a;
-  --card-width: 80%;
-  --card-padding: 3.5rem;
-  --card-border-color: #343947;
+  --navbar-height: 4rem;
+  --navbar-background-color: #FFFF;
+  --profile-pic-size: 3.5rem;
+  --main-background-color: #FFFF;
+ 
   --card-bg-color: #1D1836;
   --main-bg-color: #050816;
-  --text-color: white;
   --text-color-black: black;
   --input-bg-color: #44475a;
   --input-border-color: #6272a4;
-  --button-bg-color: #50fa7b;
-  --button-text-color: #282a36;
-  --button-bg-color-hover: #8be9fd;
+
 }
 
 body {
@@ -60,7 +53,7 @@ body {
 
 @media (min-width: 2000px) {
   html {
-    font-size: 20px;
+    font-size: 15px;
   }
 }
 
diff --git a/src/pages/CreateServer/CreateServer.jsx b/src/pages/CreateServer/CreateServer.jsx
new file mode 100644
index 0000000..00f4172
--- /dev/null
+++ b/src/pages/CreateServer/CreateServer.jsx
@@ -0,0 +1,62 @@
+import styles from './CreateServer.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+
+const CreateServer = ({ user }) => {
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+          user={user} 
+          hasShadow={false} 
+          showBackButton={true} 
+          onBackClick={() => navigate('/dashboard')}  
+        />
+
+        <div className={styles.GamesChoice}>
+            <div className={styles.title}>Création du serveur</div>
+            <div className={styles.subtitle}>De quels façon voulez-vous jouer ?</div>
+            <div className={styles.GamesContainer}>
+                <div className={styles.GameCard}>    
+                  <img src="http://fakeimg.pl/250x150/"/>         
+                  <div className={styles.Gamesubtitle}>Java Edition</div>
+                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                  <button className={styles.GameButton}>Choisir ce modèle </button>
+                </div>
+                <div className={styles.GameCard}>
+                  <img src="http://fakeimg.pl/250x150/"/>   
+                  <div className={styles.Gamesubtitle}>Bedrock Edition</div>
+                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                  <button className={styles.GameButton}>Choisir ce modèle </button>
+                  </div>
+                <div className={styles.GameCard}>
+                  <img src="http://fakeimg.pl/250x150/"/>   
+                  <div className={styles.Gamesubtitle}>Minecraft Moddé</div>
+                  <div className={styles.Gamedescription}>Lorem ipsum dolor sit, amet consectetur adipisiciiquid, do</div>
+                  <button className={styles.GameButton}>Choisir ce modèle </button>
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+CreateServer.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+      photoURL: PropTypes.string,
+    }),
+  ]),
+  onCreateServer: PropTypes.func.isRequired,
+  onSubdomainUpdate: PropTypes.func.isRequired,
+  onCancel: PropTypes.func,
+  noServers: PropTypes.any
+};
+
+export default CreateServer;
diff --git a/src/pages/CreateServer/CreateServer.module.scss b/src/pages/CreateServer/CreateServer.module.scss
new file mode 100644
index 0000000..30af638
--- /dev/null
+++ b/src/pages/CreateServer/CreateServer.module.scss
@@ -0,0 +1,82 @@
+.Container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.GamesChoice {
+  margin-top: 20rem;
+  width: 50rem;
+  height: 10rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 2rem;
+  margin-top: 5rem;
+  font-weight: 500;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  margin-top: 1rem;
+}
+
+.GamesContainer {
+  margin-top: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: row;
+}
+
+.GameCard {
+  margin: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: .4rem;
+  cursor: pointer;
+  padding: 1rem 1rem 2rem 1rem;
+}
+
+.GameCard:hover {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+img {
+  border-radius: .4rem;
+}
+
+.GameButton {
+  margin-top: 1rem;
+  padding: .5rem 1rem;
+  border-radius: .4rem;
+  background-color: #2f2f2f;
+  color: white;
+  cursor: pointer;
+
+  visibility: hidden;
+  opacity: 0;
+}
+
+.GameCard:hover .GameButton {
+  visibility: visible;
+  opacity: 1;
+
+}
+
+.Gamesubtitle {
+  font-size: 1.2rem;
+  margin-top: .75rem;
+}
+
+.Gamedescription {
+  font-size: 1rem;
+  margin-top: .7rem;
+  text-align: center;
+}
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index adde911..a346742 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -7,8 +7,12 @@ import CreateServer from '../../components/CreateServer/CreateServer';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
+import { useNavigate } from 'react-router-dom'; 
+
 
 const DashboardPage = ({ user }) => {
+  const navigate = useNavigate();
+
   const [servers, setServers] = useState([]);
   const [subdomain, setSubdomain] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -104,12 +108,7 @@ const DashboardPage = ({ user }) => {
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
       {showCreateServer ? (
-        <CreateServer
-          user={user}
-          onCreateServer={handleCreateServer}
-          onSubdomainUpdate={setSubdomain}
-          onCancel={handleCancelCreateServer}
-        />
+        navigate('/CreateServer')
       ) : (
         <div className={styles.cardsContainer}>
           {servers.length === 0 ? (
@@ -131,7 +130,8 @@ const DashboardPage = ({ user }) => {
                 className={styles.btncreate}
                 onClick={handleCreateServerPage}
               >
-                Créer un nouveau serveur
+                <div>+</div>
+                <div>Créer un nouveau serveur</div>
               </button>
               {servers.map((server) => (
                 <ServerCard
diff --git a/src/pages/DashboardPage/DashboardPage.module.scss b/src/pages/DashboardPage/DashboardPage.module.scss
index bf8697a..9080da8 100644
--- a/src/pages/DashboardPage/DashboardPage.module.scss
+++ b/src/pages/DashboardPage/DashboardPage.module.scss
@@ -2,24 +2,24 @@ html, body {
   margin: 0;
   padding: 0;
   font-family: 'Poppins', system-ui, Avenir, Helvetica, Arial, sans-serif;
-  background-color: var(--main-bg-color);
+  background-color: var(--main-background-color);
 }
 
 
 .dashboardContainer {
   padding-top: var(--navbar-height);
-  background-color: var(--main-bg-color);
+  background-color: var(--main-background-color);
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--text-color);
+  color: black;
 }
 
 .cardsContainer {
   width: 50rem;
   margin-top: 5rem; 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 1rem;
   align-items: center;
   justify-content: center;
@@ -42,14 +42,17 @@ html, body {
   display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #1D1836;
+    flex-direction: column;
+    background-color: white;
     width: 40rem;
-    height: 5rem;
-    color: white;
+    height: 10rem;
+
+    
     border: solid 0.1rem #090325;
     cursor: pointer;
     font-size: 2rem;
-    font-weight: 900;
+    font-weight: 600;
     border-radius: 1rem;
     margin-bottom: 3rem;
+    padding: 1.5rem;
 }
\ No newline at end of file