Merge pull request #46 from hubHarmony/redesign

better in white 👍 👍 👍 👍 🥇

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Servii - Hebergement facile</title>
     <!-- charger les polices -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

package.json

@@ -4,7 +4,7 @@
   "version": "1.9.45",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",

src/App.jsx

@@ -9,6 +9,10 @@ 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';
+import Javapick from './pages/CreateServer/Javapick/java';
+import Modpack from './pages/CreateServer/modpack/modpack';
+import Bedrock from './pages/CreateServer/bedrock/bedrock';
 
 const App = () => {
   const [user, setUser] = useState(null);
@@ -33,7 +37,10 @@ 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="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
+          <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
+          <Route path="/createServer/modpack" element={user ? <Modpack 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 />} />

src/components/CreateServer/CreateServer.jsx

@@ -133,39 +133,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
+              <div className={styles.subtitle}>Comment voulez vous jouer ?</div>
-                className={styles.input}
+              <div className={styles.GamesContainer}>dd</div>
-                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>
           )
         )

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 {
+.GamesChoice {
-  margin-top: 5rem;
+  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;

src/components/navbar/Navbar.jsx

@@ -2,10 +2,16 @@ 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, 
+  backButtonText = "Retour au dashboard" 
+}) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -34,11 +40,15 @@ 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>{backButtonText}</span> {}
+        </div>
+      )}
+
       <div className={styles.profileSection} onClick={toggleDropdown}>
         {user && user.photoURL ? (
           <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
@@ -46,19 +56,20 @@ const Navbar = ({ user }) => {
           <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 +86,10 @@ Navbar.propTypes = {
       photoURL: PropTypes.string,
     }),
   ]),
+  hasShadow: PropTypes.bool, 
+  showBackButton: PropTypes.bool,  
+  onBackClick: PropTypes.func, 
+  backButtonText: PropTypes.string, 
 };
 
 export default Navbar;

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

src/components/serverCards/DefaultServerCard.jsx

@@ -1,30 +1,23 @@
 import { Link } from 'react-router-dom';
 import styles from './DefaultServerCard.module.scss';
-
+import paper from '../../assets/frameworks/paper.png';
-import bukkit from '../../assets/frameworks/bukkit.png';
 import fabric from '../../assets/frameworks/fabric.png';
 import forge from '../../assets/frameworks/forge.png';
-import paper from '../../assets/frameworks/paper.png';
-import spigot from '../../assets/frameworks/spigot.png';
-import vanilla from '../../assets/frameworks/vanilla.png';
 import PropTypes from "prop-types";
+import { FaTrash } from 'react-icons/fa';
+
+const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => {
 
-// eslint-disable-next-line react/prop-types
-const DefaultServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick , countPlayers , maxPlayers}) => {
   const getFrameworkSource = () => {
     switch (framework) {
-      case "bukkit":
+      case 'frabric':
-        return bukkit;
-      case "fabric":
         return fabric;
-      case "forge":
+      case 'forge':
         return forge;
-      case "paper":
+      case 'bedrock':
         return  paper;
-      case "spigot":
-        return spigot;
       default:
-        return vanilla;
+        return paper;
     }
   };
 
@@ -58,7 +51,7 @@ const DefaultServerCard = ({ status, version, name, framework, onRunClick, onSto
   return (
     <Link 
       to={`/server/${name}/options`} 
-    className={styles.serverCard}
+      className={favoriteServer ? styles.favoriteserverCard : styles.serverCard}
       state={{ status }}>
       <div className={styles.header}>
         <div className={styles.serverInfo}>
@@ -68,36 +61,58 @@ const DefaultServerCard = ({ status, version, name, framework, onRunClick, onSto
             <div className={styles.version}>Version: {version}</div>
           </div>
         </div>
-        <div className={styles.status}>
-          {status === false ? " " : countPlayers + "/"  + maxPlayers + " joueurs"}
-        </div>
       </div>
       <div className={styles.actions}>
         <div>
           {status === false ? (
-            <button className={`${styles.startStopButton} ${styles.stoppedButton}`} onClick={handleRun}>▶ Démarrer</button>
+            <button 
+              className={`${styles.startStopButton} ${styles.stoppedButton}`} 
+              onClick={handleRun}
+              aria-label="Start server"
+            >
+              ▶ Démarrer
+            </button>
           ) : (
-            <button className={`${styles.startStopButton} ${styles.runningButton}`} onClick={handleStop}>◼ Arrêter</button>
+            <button 
+              className={`${styles.startStopButton} ${styles.runningButton}`} 
+              onClick={handleStop}
+              aria-label="Stop server"
+            >
+              ◼ Arrêter
+            </button>
           )}
         </div>
-        <button className={styles.deleteButton} onClick={handleDelete}>🗑 Supprimer</button>
+        <div className={styles.status}>
+          {status ? `${countPlayers}/${maxPlayers} joueurs` : " "}
         </div>
+      </div>
+      <FaTrash 
+        className={styles.trashIcon} 
+        onClick={handleDelete} 
+        aria-label="Delete server"
+      />
     </Link>
   );
-  
 };
 
-DefaultServerCard.propTypes = {
+ServerCard.propTypes = {
-  key: PropTypes.string,
   status: PropTypes.bool,
-  version: PropTypes.string,
+  version: PropTypes.string.isRequired,
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
   framework: PropTypes.string,
   onRunClick: PropTypes.func.isRequired,
   onStopClick: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   countPlayers: PropTypes.number,
-  subdomain: PropTypes.string,
+  maxPlayers: PropTypes.number.isRequired,
+  favoriteServer: PropTypes.bool,
 };
 
-export default DefaultServerCard;
+ServerCard.defaultProps = {
+  framework: 'default',
+  status: false,
+  countPlayers: 0,
+  favoriteServer: false,
+};
+
+export default ServerCard;

src/components/serverCards/DefaultServerCard.module.scss

@@ -2,16 +2,62 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  width: 35.5rem;
+  width: 20rem;
   padding: 2rem;
-  border: 0.2rem solid var(--card-border-color);
+  border: 0.1rem solid black;
   border-radius: 0.8rem;
-  background-color: var(--card-bg-color);
-  color: var(--text-color);
   margin-bottom: 1.5rem;
   cursor: pointer;
   text-decoration: none;
+  color: black;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+}
+
+.favoriteserverCard{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  width: 38.5rem;
+  padding: 3rem 0rem 3rem 3rem;
+  border: 0.1rem solid black;
+  border-radius: 0.8rem;
+  margin-bottom: 3rem;
+  cursor: pointer;
+  text-decoration: none;
+  color: black;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+}
+
+.serverCard:hover{
+  box-shadow: 
+  0 4px 30px rgba(0, 0, 0, 0.1), 
+  2px 2px 10px rgba(255, 0, 0, 0.2), 
+  -2px -2px 15px rgba(0, 255, 0, 0.2), 
+  4px -4px 20px rgba(0, 0, 255, 0.2); box-shadow: 
+  0 
+}
+
+.favoriteserverCard:hover{
+  box-shadow: 
+  0 4px 30px rgba(0, 0, 0, 0.1), 
+  2px 2px 10px rgba(255, 0, 0, 0.2), 
+  -2px -2px 15px rgba(0, 255, 0, 0.2), 
+  4px -4px 20px rgba(0, 0, 255, 0.2); box-shadow: 
+  0 
 }
 
 .header {
@@ -26,13 +72,13 @@
 }
 
 .frameworkIcon {
-  width: 2.5rem;
+  width: 3rem;
-  height: 2.5rem;
+  height: 3rem;
   margin-right: 0.8rem;
 }
 
 .serverName {
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   font-weight: bold;
 }
 
@@ -46,6 +92,7 @@
   font-size: 1.2rem;
   font-weight: bold;
   color: var(--status-color);
+  margin-right: 2rem;
 }
 
 .actions {
@@ -56,8 +103,8 @@
 }
 
 .startStopButton {
-  padding: 1rem 1.8rem;
+  padding: 1rem 1.5rem;
-  border-radius: 0.6rem;
+  border-radius: 0.5rem;
   border: none;
   color: white;
   cursor: pointer;
@@ -80,16 +127,23 @@
   background-color: #8d213ec1;
 }
 
-.deleteButton {
+.trashIcon {
-  background-color: #d9534f;
+  position: absolute;
-  color: white;
+  top: 1rem;
-  border: none;
+  right: 1rem;
-  border-radius: 0.6rem;
+  font-size: 1.5rem;
-  padding: 0.6rem 1rem;
+  opacity: 0;
+  transition: opacity 0.3s ease;
   cursor: pointer;
-  transition: background-color 0.3s ease;
 }
 
-.deleteButton:hover {
+.serverCard:hover .trashIcon {
-  background-color: #c9302c;
+  opacity: 1;
 }
+
+.favoriteserverCard:hover .trashIcon {
+  opacity: 1;
+}
+
+
+

src/main.css

@@ -2,27 +2,21 @@
 html {
   font-size: 12px;
   font-family: 'Poppins', sans-serif;
+  scroll-behavior: smooth;
 }
 
 :root {
-  --navbar-height: 5rem;
+  --navbar-height: 4rem;
-  --navbar-background-color: #100D25;
+  --navbar-background-color: #FFFF;
-  --navbar-color: #fff;
+  --profile-pic-size: 3.5rem;
-  --profile-pic-size: 3rem;
+  --main-background-color: #FFFF;
-  --logout-button-bg: #ff4b4b;
+ 
-  --logout-button-bg-hover: #ff1a1a;
+  --card-bg-color: white;
-  --card-width: 80%;
+  --main-bg-color: white;
-  --card-padding: 3.5rem;
-  --card-border-color: #343947;
-  --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 +54,7 @@ body {
 
 @media (min-width: 2000px) {
   html {
-    font-size: 20px;
+    font-size: 15px;
   }
 }
 

src/pages/CreateServer/CreateServer.jsx

@@ -0,0 +1,61 @@
+import styles from './CreateServer.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+import  bedrockimg from '../../assets/bedrock.png';
+import modedimg from '../../assets/moded.png';
+import javaimg from '../../assets/java.png'
+
+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 quelle façon voulez-vous jouer ?</div>
+            <div className={styles.GamesContainer}>
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/java')}>    
+                  <img src={javaimg} className={styles.imgCard}/>         
+                  <div className={styles.Gamesubtitle}>Java Edition</div>
+                  <div className={styles.Gamedescription}>Découvrez la version classique de Minecraft sur PC, avec un large éventail de mises à jour et de fonctionnalités, couvrant plus de vingt versions !</div>
+                  <button className={styles.GameButton}>Choisir ce modèle </button>
+                </div>
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/bedrock')}> 
+                  <img src={bedrockimg} className={styles.imgCard}/>   
+                  <div className={styles.Gamesubtitle}>Mini-jeu</div>
+                  <div className={styles.Gamedescription}>Plongez dans Minecraft avec des cartes personnalisées et des règles uniques, en solo ou avec vos amis.</div>
+                  <button className={styles.GameButton}>Choisir ce modèle </button>
+                  </div>
+                <div className={styles.GameCard} onClick={() => navigate('/CreateServer/modpack')}>
+                  <img src={modedimg} className={styles.imgCard}/>   
+                  <div className={styles.Gamesubtitle}>Minecraft Modé</div>
+                  <div className={styles.Gamedescription}>Explorez la version modifiée de Minecraft sur PC, avec des modpacks riches et variés, contenant plus de 200 mods pour une expérience de jeu personnalisée.</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,
+    }),
+  ]),
+};
+
+export default CreateServer;

src/pages/CreateServer/CreateServer.module.scss

@@ -0,0 +1,87 @@
+.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;
+}
+
+.imgCard{
+  width: 22rem;
+  height: auto;
+}

src/pages/CreateServer/Javapick/java.jsx

@@ -0,0 +1,123 @@
+import { useState, useEffect, useRef } from 'react'; 
+import { GoTag, GoCheck } from "react-icons/go";
+import { useNavigate } from 'react-router-dom'; 
+import styles from './java.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../../components/navbar/Navbar';
+import serviiApi from "../../../service/api.tsx";
+
+const Javapick = ({ user }) => {
+  const [serverName, setServerName] = useState('');
+  const [serverVersion, setServerVersion] = useState('');
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const navigate = useNavigate();
+  const isValidServerName = serverName.length > 2;
+
+  const buttonRef = useRef(null);
+
+  const validateInput = (input) => {
+    return input.replace(/[^a-zA-Z]/g, '');
+  };
+
+  const handleCreateServer = async () => {
+    try {
+        const framework =  'paper';        
+        await serviiApi.serverCreate(serverName, serverVersion, framework);
+        navigate('/Dashboard');
+    } catch (error) {
+        console.error('Error creating server:', error);
+    }
+  };
+
+  const versions = {
+    paper: [
+      "1.20.6", "1.20.5", "1.20.4", "1.20.2", "1.20.1", "1.20",
+      "1.19.4", "1.19.3", "1.19.2", "1.19", "1.18.2", "1.18.1",
+      "1.17.1", "1.16.5", "1.16.4", "1.16.3", "1.16.2", "1.16.1",
+      "1.15.2", "1.15.1", "1.14.4", "1.14.3", "1.14.2", "1.14.1",
+      "1.13.2", "1.13.1", "1.12.2", "1.11.2", "1.10.2", "1.9.4"
+    ].sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
+  };
+
+  useEffect(() => {
+    if (isValidServerName && serverVersion) {
+      setIsButtonVisible(true);
+      buttonRef.current?.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      setIsButtonVisible(false);
+    }
+  }, [isValidServerName, serverVersion]);
+
+  const VersionChoice = (version) => {
+    return () => {
+      setServerVersion(version);
+      if (isValidServerName) {
+        setTimeout(() => {
+          buttonRef.current?.scrollIntoView({ behavior: 'smooth' });
+        }, 150);  
+      }
+    };
+  };
+
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+        user={user} 
+        hasShadow={true} 
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
+      />
+      <div className={styles.hey}>
+        <div className={`${styles.inputContainer} ${isValidServerName ? styles.inputValid : ''}`}>
+          <h2>Saisissez le nom du serveur</h2>
+          <input 
+            type="text" 
+            placeholder="Nom du serveur..." 
+            value={serverName} 
+            onChange={(e) => setServerName(validateInput(e.target.value))}
+            className={`${styles.serverInput} ${isValidServerName ? styles.validInput : ''}`}
+          />
+        </div>
+
+        {isValidServerName && (
+          <div className={`${styles.ContainerVersion} ${isValidServerName ? styles.visible : ''}`}>
+            <h2>Choisissez la version du serveur</h2>
+            <div className={styles.VersionContainer}>
+              {versions['paper'].map((version, index) => (
+                <div
+                  key={index}
+                  className={`${styles.VersionCard} ${serverVersion === version ? styles.selectedVersion : ''}`}
+                  onClick={VersionChoice(version)}
+                >
+                  {serverVersion === version ? <GoCheck /> : <GoTag />}
+                  {version}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {isButtonVisible && (
+          <button
+            className={styles.createButton} 
+            onClick={handleCreateServer}
+            ref={buttonRef}
+          >
+            Créer le serveur
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Javapick.propTypes = {
+  user: PropTypes.shape({
+    uid: PropTypes.string.isRequired,
+    email: PropTypes.string,
+    photoURL: PropTypes.string,
+  }),
+};
+
+export default Javapick;

src/pages/CreateServer/Javapick/java.module.scss

@@ -0,0 +1,128 @@
+.Container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease-in-out;
+
+    h2{
+      font-weight: 400;
+    }
+  }
+  
+  .hey {
+    margin-top: 8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    transition: all 0.5s ease-in-out;
+  }
+  
+  .inputContainer {
+    margin-bottom: 3rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    transition: all 0.5s ease-in-out;
+    transform: translateX(0); 
+  }
+  
+  .inputContainer.inputValid {
+    align-items: self-end; 
+    transform: translateX(-115%); 
+    transition: transform 0.5s ease-in-out; 
+  }
+  
+  .serverInput {
+    width: 100%;
+    max-width: 500px;
+    padding: 15px;
+    font-size: 1.5rem;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 0 0 0 rgba(0, 170, 255, 0.5);
+    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s ease-in-out;
+  
+    &:focus {
+      outline: none;
+      border-color: #00aaff;
+      box-shadow: 0 0 10px 2px rgba(0, 170, 255, 0.5);
+    }
+  }
+  
+  .validInput {
+    border-color: #198754;
+    box-shadow: 0 0 10px 2px rgba(25, 135, 84, 0.5);
+    transition: border-color 0.4s ease, box-shadow 0.4s ease;
+  }
+  
+  .ContainerVersion {
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding: 2rem;
+    border-radius: 0.4rem;
+    background-color: #fff;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    opacity: 0;
+    transform: translateY(-3rem);
+    transition: opacity 0.4s ease, transform 0.4s ease; 
+  }
+  
+  .ContainerVersion.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .VersionContainer {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr); 
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+    gap: 1rem; 
+  }
+  
+  .VersionCard {
+    height: 4rem;
+    width: 8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    border-radius: 0.3rem;
+    background-color: #f0f0f0; 
+    color: #333; 
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .VersionCard:hover {
+    cursor: pointer;
+    background-color: #00aaff; 
+    color: #fff;
+  }
+  
+  .selectedVersion {
+    background-color: #198754;
+    color: #fff;
+    box-shadow: 0 0 10px 2px rgba(25, 135, 84, 0.5); 
+  }
+  
+  .createButton {
+    padding: 1rem 4rem;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    background-color: #198754;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    align-self: flex-start; 
+}
+
+.createButton:hover {
+    background-color: #145a32;
+    transform: scale(1.05);
+}

src/pages/CreateServer/bedrock/bedrock.jsx

@@ -0,0 +1,38 @@
+import styles from './bedrock.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+
+
+const Bedrock = ({ user }) => {
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+        user={user} 
+        hasShadow={true} 
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
+      />
+        <div className={styles.hey}>
+            <h1> Prochainement disponible</h1>
+        </div>
+    </div>
+  );
+};
+
+Bedrock.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+      photoURL: PropTypes.string,
+    }),
+  ]),
+};
+
+export default Bedrock;

src/pages/CreateServer/bedrock/bedrock.module.scss

@@ -0,0 +1,3 @@
+.hey{
+    margin-top: 8em;
+}

src/pages/CreateServer/modpack/modpack.jsx

@@ -0,0 +1,38 @@
+import styles from './modpack.module.scss';
+import PropTypes from "prop-types";
+import Navbar from '../../../components/navbar/Navbar';
+import { useNavigate } from 'react-router-dom'; 
+
+
+const Modpack = ({ user }) => {
+  const navigate = useNavigate();
+
+ 
+  return (
+    <div className={styles.Container}>
+      <Navbar 
+        user={user} 
+        hasShadow={true} 
+        showBackButton={true} 
+        backButtonText="Retour"
+        onBackClick={() => navigate('/CreateServer')}
+      />
+        <div className={styles.hey}>
+            <h1>Prochainement disponible</h1>
+        </div>
+    </div>
+  );
+};
+
+Modpack.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+      photoURL: PropTypes.string,
+    }),
+  ]),
+};
+
+export default Modpack;

src/pages/CreateServer/modpack/modpack.module.scss

@@ -0,0 +1,3 @@
+.hey{
+    margin-top: 8em;
+}

src/pages/DashboardPage/DashboardPage.jsx

@@ -1,62 +1,48 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
-import DefaultServerCard from '../../components/serverCards/DefaultServerCard.jsx';
+import { useNavigate } from 'react-router-dom'; 
+import ServerCard from '../../components/serverCards/DefaultServerCard';
 import Navbar from '../../components/navbar/Navbar';
-import styles from './DashboardPage.module.scss';
 import Loading from '../Loading/loading';
-import CreateServer from '../../components/CreateServer/CreateServer';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
+import styles from './DashboardPage.module.scss';
 
 const DashboardPage = ({ user }) => {
+  const navigate = useNavigate();
+
   const [servers, setServers] = useState([]);
   const [subdomain, setSubdomain] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [showCreateServer, setShowCreateServer] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [newSubdomain, setNewSubdomain] = useState('');
 
-  const loadServers = async () => {
+  const loadServers = useCallback(async () => {
     try {
-      const ApiResponse = await serviiApi.fetchServers();
-      const data = ApiResponse.message;
 
-      const sortedServers = data.sort((a, b) => b.running - a.running);
+      if (user?.uid) {
-      setServers(sortedServers);
-
-      if (user && user.uid) {
         const userSubdomain = await getUserSubdomain(user.uid);
         setSubdomain(userSubdomain || '');
-      } else {
-        console.error('User or user.uid is undefined');
       }
     } catch (error) {
       console.error('Error fetching data:', error);
     } finally {
       setLoading(false);
     }
-  };
+    
+      const ApiResponse = await serviiApi.fetchServers();
+      const data = ApiResponse.message;
+      const sortedServers = data.sort((a, b) => b.running - a.running);
+      setServers(sortedServers);
+
+     
+  }, [user]);
 
   useEffect(() => {
     loadServers();
-  }, []);
+  }, [loadServers]);
 
-  const handleCreateServer = async (serverName, serverVersion , framework) => {
+  const handleCreateServer = () => navigate('/CreateServer');
-    try {
-      if (!serverName || !serverVersion) return;
-      await serviiApi.serverCreate(serverName, serverVersion, framework);
-      await loadServers();
-      setShowCreateServer(false);
-    } catch (error) {
-      console.error('Error creating server:', error);
-    }
-  };
-
-  const handleCreateServerPage = () => {
-    setShowCreateServer(true);
-  };
-
-  const handleCancelCreateServer = () => {
-    setShowCreateServer(false);
-  };
 
   const handleRunServer = async (serverName) => {
     try {
@@ -87,10 +73,26 @@ const DashboardPage = ({ user }) => {
 
   const handleCopyAddress = () => {
     const address = `${subdomain}.servii.fr`;
-    navigator.clipboard.writeText(address).then(r => r)
+    navigator.clipboard.writeText(address);
-
   };
 
+  const handleSaveSubdomain = async () => {
+    try {
+      const response = await serviiApi.setSubdomain(newSubdomain);
+      if (response.success) {
+        setSubdomain(newSubdomain); 
+        loadServers(); 
+      } else {
+        console.error('Erreur lors de la création du sous-domaine');
+      }
+    } catch (error) {
+      console.error('Erreur lors de la création du sous-domaine:', error);
+    }
+  };
+  
+  const favoriteServer = servers[0] || null;
+  const serversWithoutFavorite = servers.filter(server => server !== favoriteServer);
+
   if (loading) {
     return (
       <div className={styles.dashboardContainer}>
@@ -100,42 +102,99 @@ const DashboardPage = ({ user }) => {
     );
   }
 
+  if (!subdomain) {
+    return (
+      <div className={styles.welcomeContainer}>
+          <h1 className={styles.welcomeMessage}>
+            Bienvenue, {user?.displayName || ' '} !
+          </h1>
+          <p className={styles.subdomainMessage}>
+            Le sous-domaine est le nom sous lequel vos amis et vous rejoignez le serveur. Choisissez-le bien, car il nest pas facilement modifiable !
+          </p>
+          <div className={styles.subdomainInputContainer}>
+            <input
+              type="text"
+              placeholder="Saisissez un nom de domaine"
+              value={newSubdomain}
+              onChange={(e) => setNewSubdomain(e.target.value)}
+              className={styles.subdomainInput}
+              onKeyPress={(e) => e.key === 'Enter' && handleSaveSubdomain()} 
+            />
+            <button className={styles.btnCreateSubdomain} onClick={handleSaveSubdomain}>
+              Envoyer
+            </button>
+          </div>
+        </div>
+    );
+  }
+  
+
+  if (servers.length === 0) {
     return (
       <div className={styles.dashboardContainer}>
         <Navbar user={user} />
-      {showCreateServer ? (
+        <div className={styles.mainContent}>
-        <CreateServer
+          <button className={styles.btnCreate} onClick={handleCreateServer}>
-          user={user}
+            <div className={styles.plusIcon}>+</div>
-          onCreateServer={handleCreateServer}
+            Créer un nouveau serveur
-          onSubdomainUpdate={setSubdomain}
+          </button>
-          onCancel={handleCancelCreateServer}
+        </div>
-        />
+      </div>
-      ) : (
+    );
-        <div className={styles.cardsContainer}>
+  }
-          {servers.length === 0 ? (
+
-            <CreateServer
+  return (
-              user={user}
+    <div className={styles.dashboardContainer}>
-              onCreateServer={handleCreateServerPage}
+      <Navbar user={user} />
-              onSubdomainUpdate={setSubdomain}
+        <div className={styles.mainContent}>
-              onCancel={handleCancelCreateServer} 
-              noServers
-            />
-          ) : (
-            <div>
           <div className={styles.iptitle}>
             Adresse de connexion à vos serveurs : 
-                <span onClick={handleCopyAddress}>
+            <span onClick={handleCopyAddress} className={styles.subdomain}>
               {" " + subdomain}.servii.fr
             </span>
           </div>
-              <button
+
-                className={styles.btncreate}
+          <div className={styles.headerContainer}>
-                onClick={handleCreateServerPage}
+            <input
-              >
+              type="text"
-                Créer un nouveau serveur
+              placeholder="Filtrer par nom"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className={styles.searchInput}
+            />
+            <button className={styles.btnCreate} onClick={handleCreateServer}>
+              <div className={styles.plusIcon}>+</div>
+              <div>Créer un nouveau serveur</div>
             </button>
-              {servers.map((server) => (
+          </div>
-                  <DefaultServerCard
+
+          <div className={styles.FavoriteServerContainer}>
+            {favoriteServer ? (
+              <div className={styles.favoriteServerCard}>
+                <ServerCard
+                  key={favoriteServer.id}
+                  status={favoriteServer.running}
+                  version={favoriteServer.version}
+                  name={favoriteServer.name}
+                  framework={favoriteServer.framework}
+                  maxPlayers={favoriteServer.maxPlayers}
+                  countPlayers={favoriteServer.onlinePlayers}
+                  onRunClick={() => handleRunServer(favoriteServer.name)}
+                  onStopClick={() => handleStopServer(favoriteServer.name)}
+                  onDeleteClick={() => handleDeleteServer(favoriteServer.name)}
+                  subdomain={subdomain}
+                  favoriteServer={true}
+                />
+              </div>
+            ) : null}
+          </div>
+          
+          <div className={styles.cardsContainer}>
+            {serversWithoutFavorite.length > 0 ? (
+              serversWithoutFavorite.filter(server => 
+                server.name.toLowerCase().includes(searchTerm.toLowerCase())
+              ).map((server) => (
+                <ServerCard
                   key={server.id}
                   status={server.running}
                   version={server.version}
@@ -148,23 +207,20 @@ const DashboardPage = ({ user }) => {
                   onDeleteClick={() => handleDeleteServer(server.name)}
                   subdomain={subdomain}
                 />
-              ))}
+              ))
+            ) : null}
           </div>
-          )}
         </div>
-      )}
     </div>
   );
 };
 
 DashboardPage.propTypes = {
-  user: PropTypes.oneOfType([
+  user: PropTypes.shape({
-    PropTypes.shape({
     uid: PropTypes.string.isRequired,
     displayName: PropTypes.string,
     email: PropTypes.string,
   }),
-  ]),
 };
 
 export default DashboardPage;

src/pages/DashboardPage/DashboardPage.module.scss

@@ -2,54 +2,145 @@ 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);
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--text-color);
+  background-color: var(--main-background-color);
+  color: black;
+}
+
+.mainContent {
+  width: 90%;
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%; 
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.searchInput {
+  border: .2rem solid #ccc;
+  border-radius: 8px;
+  padding: .8rem 1rem;
+  font-size: 1.25rem;
+  width: 16rem; 
+  flex: none;
 }
 
 .cardsContainer {
-  width: 50rem;
+  display: grid;
-  margin-top: 5rem; 
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 25rem));
-  display: flex;
-  flex-direction: column;
   gap: 1rem;
-  align-items: center;
+  width: 100%;
+  max-width: 60rem; 
+  margin: 0 auto; 
+  justify-items: center;
   justify-content: center;
 }
 
-.iptitle{
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--text-color);
-  font-style: italic;
-  margin-bottom: 1.5rem;
-}
 
-.iptitle span {
+
+.subdomain {
   color: violet;
   cursor: pointer;
+  text-decoration: none;
 }
 
-.btncreate{
+.btnCreate {
   display: flex;
   justify-content: center;
   align-items: center;
-    background-color: #1D1836;
+  background-color: #2f2f2f; 
-    width: 40rem;
+  border: none;
-    height: 5rem;
+  padding: .5rem 1rem;
-    color: white;
-    border: solid 0.1rem #090325;
   cursor: pointer;
-    font-size: 2rem;
+  font-size: 1rem;
-    font-weight: 900;
+  font-weight: 600;
-    border-radius: 1rem;
+  border-radius: 0.5rem;
-    margin-bottom: 3rem;
+  color: white;
+  transition: background-color 0.3s ease;
+  margin-left: 1rem;
+}
+
+.plusIcon {
+  font-size: 2rem;
+  margin-right: 1rem;
+}
+
+.AllserversTitle, .favoriteServerTitle, .iptitle {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--text-color);
+  margin: 1rem 0;
+}
+
+.welcomeContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4rem;
+  padding: 2rem;
+  background-color: #f7f7f7;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.welcomeMessage {
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1rem;
+}
+
+.subdomainMessage {
+  font-size: 1.2rem;
+  color: #666;
+  margin-bottom: 2rem;
+  text-align: center;
+  max-width: 50rem;
+}
+
+.subdomainInputContainer {
+  display: flex;
+  flex-direction: row; 
+  justify-content: center;
+  align-items: center;
+  gap: .25rem; 
+}
+
+.subdomainInput {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #ccc;
+  font-size: 1.25rem;
+  width: 20rem;
+}
+
+.btnCreateSubdomain {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #2f2f2f; 
+  padding: .80rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  color: white;
+  transition: background-color 0.3s ease;
+  margin-left: 1rem;
+  border-radius: 0.5rem;
 }

src/pages/ServerDetails/ServerDetails.jsx

@@ -9,15 +9,14 @@ import FeatureSoon from './FeatureSoon';
 import styles from './ServerDetails.module.scss';
 import PropTypes from "prop-types";
 import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
-import { TbArrowBackUp } from 'react-icons/tb';
 import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi";
 import NotFoundPage from '../NotFoundPage/NotFoundPage';
-import { useLocation } from 'react-router-dom';
+import { useLocation,useNavigate} from 'react-router-dom';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
   const location = useLocation();
-  
+  const navigate = useNavigate();
   const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false;
   const [status, setStatus] = useState(initialStatus);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
@@ -38,7 +37,7 @@ const ServerDetails = ({ user }) => {
 
   return (
     <>
-      <Navbar user={user} />
+      <Navbar user={user} hasShadow={true} showBackButton={true} onBackClick={() => navigate('/Dashboard')} />
       <div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
         <div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
           <div className={styles.menu}>            
@@ -88,11 +87,6 @@ const ServerDetails = ({ user }) => {
               <FaLock /> {!isSidebarCollapsed && 'Accès'}
             </NavLink>
             
-            <NavLink 
-              to={`/dashboard`} 
-              className={`${styles.menuItem} ${styles.extraMargin}`}>  
-              <TbArrowBackUp /> {!isSidebarCollapsed && 'Dashboard'}
-            </NavLink>
           </div>
         </div>
         <div className={styles.serverDetailsContainer}>

src/pages/ServerDetails/ServerDetails.module.scss

@@ -6,15 +6,15 @@
 
 .sidebar {
   width: 20rem;
-  background-color: #100D25;
+  background-color: white;
   padding-left: 0rem;
   padding-right: 1rem;
   box-sizing: border-box;
   position: fixed;
   height: calc(100vh - var(--navbar-height));  
   top: var(--navbar-height);
-  color: white;
   transition: width 0.3s;
+  box-shadow: 0.125rem 0 0.3125rem rgba(0, 0, 0, 0.1); 
 }
 
 .sidebar.collapsed {
@@ -30,28 +30,24 @@
 
 .menuItem {
   display: flex;
+  color:black;
   align-items: center;
   padding: 0.7rem 1rem;
-  margin: .8rem 0rem;
+  margin: .5rem 0rem;
   padding-right: 0rem;
-  font-size: 1.25rem;
+  font-size: 1.15rem;
   cursor: pointer;
-  color: #D1D5DB;
   text-decoration: none;
   width: 100%;
   &.active { 
-    background-color: #1D1836;
+    background-color: white;
-    color: white;
   }
 }
 
-.menuItem:hover {
-  color: white;
-}
 
 .menuItem svg {
   margin-right: 1rem;
-  font-size: 1.8rem;
+  font-size: 1.25rem;
 }
 
 .toggleButton {
@@ -59,8 +55,7 @@
   align-items: center;
   justify-content: center;
   font-size: 2rem;
-  color: white;
+  background-color: white;
-  background-color: #100D25;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s;

src/pages/ServerHistory/ServerHistory.module.scss

@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: row; 
     gap: 1.5rem;
-    background-color: #1D1836;
+    background-color: white;
     color: black;
     margin-bottom: 1rem;
     padding: 2.5rem;
@@ -23,8 +23,8 @@
     border: 1px solid #ccc;
     padding: 1rem;
     border-radius: 4px;
-    background-color: #100D25;
+    background-color: white;
-    color: white;
+    color: black;
     border: .1rem solid #343947;
 
   }
@@ -34,7 +34,7 @@
     display: flex; 
     align-items: center; 
     gap: 0.5rem; 
-    color: white;
+    color: black;
 }
 
 .filterContainer input[type="checkbox"] {
@@ -49,6 +49,6 @@
     display: block;
     text-align: center;
     font-size: 1.5rem;
-    color: white; 
+    color: black; 
     font-weight: bold;
 }

src/pages/ServerProperties/ServerProperties.module.scss

@@ -1,6 +1,6 @@
 .serverDetailsContainer {
   padding-top: var(--navbar-height);
-  background-color: var(--main-bg-color);
+  background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -11,9 +11,8 @@
 
 .details {
   padding: 2rem;
-  background-color: #100D25;
+  background-color: white;
   width: 50rem;
-  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
   border-radius: 0.5rem;
   border: 0.1rem solid #343947;
   box-sizing: border-box;
@@ -40,7 +39,7 @@
     font-weight: 600;
     margin-bottom: 0.5rem; 
     font-size: 1rem;
-    color: #EAEAEA;
+    color: black;
   }
 
   input,
@@ -48,10 +47,10 @@
     width: 15rem; 
     max-width: 20rem; 
     padding: 0.7rem;
-    background-color: #2C2C44;
+    background-color: white;
     border: 0.1rem solid #44476A;
     border-radius: 0.5rem;
-    color: #EAEAEA;
+    color: black;
     font-size: 1rem;
     box-sizing: border-box;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
@@ -87,7 +86,7 @@
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.3s ease;
   font-size: 1.1rem;
-  background-color: #1D1836;
+  background-color: black;
 
 
 
@@ -104,7 +103,7 @@
 .details h1 {
   font-size: 1.75rem;
   margin-bottom: 2rem;
-  color: #FFF;
+  color: black;
   text-align: center;
 }