+ console part

package-lock.json

@@ -19,6 +19,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.24.0",
         "react-toastify": "^10.0.5",
         "sass": "^1.77.6",
@@ -9754,6 +9755,14 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.24.0",
     "react-toastify": "^10.0.5",
     "sass": "^1.77.6",

src/pages/ServerConsole/ServerConsole.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styles from './ServerConsole.module.scss';
+import serviiApi from "../../service/api.tsx";
+import Loading from '../Loading/loading.jsx';
+import PropTypes from "prop-types";
+
+const ServerConsole = ({ user }) => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const [logs, setLogs] = useState('');
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.serverDetailsContainer}>
+        <div className={styles.error}>
+          <h1>{error}</h1>
+          <button onClick={() => navigate('/dashboard')}>Retour au Dashboard</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.containerConsole}>
+        <h1>Console</h1>
+        <div className={styles.logContainer}>
+          <pre className={styles.logs}>
+            {logs}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ServerConsole.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+    }),
+  ]),
+};
+
+export default ServerConsole;

src/pages/ServerConsole/ServerConsole.module.scss

@@ -0,0 +1,19 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: var(--navbar-height);
+    width: 60rem;
+    height: 90%;
+    margin-bottom: 1rem;
+  }
+
+.containerConsole {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: red;
+    width: 50rem;
+    height: 100%;
+    overflow: auto;
+  }

src/pages/ServerDetails/ServerDetails.jsx

@@ -1,155 +1,76 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import Navbar from '../../components/navbar/Navbar';
+import ServerProperties from '../ServerProperties/ServerProperties'; 
 import styles from './ServerDetails.module.scss';
-import serviiApi from "../../service/api.tsx";
-import Loading from '../Loading/loading';
 import PropTypes from "prop-types";
-
+import { FaServer, FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
+import ServerConsole from '../ServerConsole/ServerConsole';
+// import ServerHistory from '../ServerHistory/ServerHistory';
+// import ServerPlayers from '../ServerPlayers/ServerPlayers';
+// import ServerWorlds from '../ServerWorlds/ServerWorlds';
+// import ServerBackups from '../ServerBackups/ServerBackups';
+// import ServerAccess from '../ServerAccess/ServerAccess';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
   const navigate = useNavigate();
-  const [server, setServer] = useState(null);
+  const [selectedMenu, setSelectedMenu] = useState(''); 
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchServer = async () => {
-      try {
-        const ApiResponse = await serviiApi.fetchServers();
-        const data = ApiResponse.message;
-        const foundServer = data.find(server => server.name === serverName);
-        
-        if (foundServer) {
-          setServer(foundServer);
-        } else {
-          setError('Server not found');
-        }
-      } catch (error) {
-        console.error('Error fetching server:', error);
-        setError('Error fetching server');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchServer();
-  }, [serverName]);
-
-  const validateInput = (input) => {
-    return input.replace(/[^a-zA-Z]/g, '');
-  };
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    const validatedValue = name === 'motd' ? validateInput(value) : value;
-    setServer({ ...server, [name]: validatedValue });
-  };
-
-  const handleSave = async () => {
-    try {
-      const props = [
-        ['max-players', server.maxPlayers.toString()],
-        ['motd', server.motd],
-        ['difficulty', server.difficulty],
-        ['enable-command-block', server.enableCommandBlock.toString()],
-        ['gamemode', server.gamemode.toString()],
-        ['hardcore', server.hardcore.toString()],
-        ['online-mode', server.onlineMode.toString()],
-        ['pvp', server.pvp.toString()]
-      ];
-
-      await serviiApi.updateProperties(server.name, props); 
-    } catch (error) {
-      console.error('Error updating server:', error);
-      alert('Error updating server');
-    }
-    handleQuit();
-  };
 
   const handleQuit = () => {
     navigate('/dashboard');
   };
 
-  if (loading) {
+  const renderContent = () => {
-    return <Loading />;
+    switch (selectedMenu) {
-  }
+      case 'options':
-
+        return <ServerProperties user={user} />;
-  if (error) {
+      case 'console':
-    return (
+        return <ServerConsole user={user} />; 
-      <div className={styles.serverDetailsContainer}>
+      case 'history':
-        <Navbar user={user} />
+        return <h2>Cette fonctionnalité sera prochainement disponible.</h2>; //  <ServerHistory user={user} />
-        <div className={styles.error}>
+      case 'players':
-          <h1>{error}</h1>
+        return <h2>Cette fonctionnalité sera prochainement disponible.</h2>; //  <ServerPlayers user={user} />
-          <button onClick={() => navigate('/dashboard')}>Retour au Dashboard</button>
+      case 'worlds':
-        </div>
+        return <h2>Cette fonctionnalité sera prochainement disponible.</h2>; //  <ServerWorlds user={user} />
-      </div>
+      case 'backups':
-    );
+        return <h2>Cette fonctionnalité sera prochainement disponible.</h2>; //  <ServerBackups user={user} />
+      case 'access':
+        return <h2>Cette fonctionnalité sera prochainement disponible.</h2>; //  <ServerAccess user={user} />
+      default:
+        return <h1>{serverName || 'Server name not available'}</h1>;
     }
+  };
 
   return (
-    <div className={styles.serverDetailsContainer}>
+    <>
       <Navbar user={user} />
-      <div className={styles.details}>
+      <div className={styles.container}>
-        <h1>Détails du serveur {server.name}</h1>
+        <div className={styles.sidebar}>
-        <div className={styles.formGroup}>
+          <div className={styles.logo}>
-          <label htmlFor="difficulty">Difficultée:</label>
+            <img src="/path/to/logo.png" alt="Logo" />
-          <select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
-            <option value="easy">Facile</option>
-            <option value="normal">Normal</option>
-            <option value="hard">Difficile</option>
-          </select>
           </div>
-        <div className={styles.formGroup}>
+          <div className={styles.user}>
-          <label htmlFor="enableCommandBlock">Activation des commandes block:</label>
+            <p>{user.displayName}</p>
-          <select id="enableCommandBlock" name="enableCommandBlock" value={server.enableCommandBlock} onChange={handleChange}>
+            <small>{user.email}</small>
-            <option value="true">Activé</option>
-            <option value="false">Désactivé</option>
-          </select>
           </div>
-        <div className={styles.formGroup}>
+          <div className={styles.menu}>
-          <label htmlFor="gamemode">Gamemode:</label>
+            <a onClick={handleQuit}><div className={styles.menuItem}><FaServer /> Mes serveurs</div></a>
-          <select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
+            <a onClick={() => setSelectedMenu('options')}><div className={styles.menuItem}><FaCogs /> Propriétés</div></a>
-            <option value="survival">Survie</option>
+            <a onClick={() => setSelectedMenu('console')}><div className={styles.menuItem}><FaClipboardList /> Console</div></a>
-            <option value="creative">Créatif</option>
+            <a onClick={() => setSelectedMenu('history')}><div className={styles.menuItem}><FaHistory /> Historique</div></a>
-            <option value="adventure">Aventure</option>
+            <a onClick={() => setSelectedMenu('players')}><div className={styles.menuItem}><FaUserFriends /> Joueurs</div></a>
-            <option value="spectator">Spectateur</option>
+            <a onClick={() => setSelectedMenu('worlds')}><div className={styles.menuItem}><FaGlobe /> Mondes</div></a>
-          </select>
+            <a onClick={() => setSelectedMenu('backups')}><div className={styles.menuItem}><FaSave /> Sauvegardes</div></a>
+            <a onClick={() => setSelectedMenu('access')}><div className={styles.menuItem}><FaLock /> Accès</div></a>
           </div>
-        <div className={styles.formGroup}>
+          <button className={styles.logoutButton} onClick={handleQuit}>Se déconnecter</button>
-          <label htmlFor="hardcore">Hardcore:</label>
-          <select id="hardcore" name="hardcore" value={server.hardcore} onChange={handleChange}>
-            <option value="true">Activé</option>
-            <option value="false">Désactivé</option>
-          </select>
         </div>
-        <div className={styles.formGroup}>
+        <div className={styles.serverDetailsContainer}>
-          <label htmlFor="maxPlayers">Max de joueurs:</label>
+          {renderContent()}
-          <input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
-        </div>
-        <div className={styles.formGroup}>
-          <label htmlFor="motd">Description du serveur:</label>
-          <input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
-        </div>
-        <div className={styles.formGroup}>
-          <label htmlFor="onlineMode">Mode en ligne:</label>
-          <select id="onlineMode" name="onlineMode" value={server.onlineMode} onChange={handleChange}>
-            <option value="true">Activé</option>
-            <option value="false">Désactivé</option>
-          </select>
-        </div>
-        <div className={styles.formGroup}>
-          <label htmlFor="pvp">PVP:</label>
-          <select id="pvp" name="pvp" value={server.pvp} onChange={handleChange}>
-            <option value="true">Activé</option>
-            <option value="false">Désactivé</option>
-          </select>
-        </div>
-        <button className={styles.saveButton} onClick={handleSave}>Sauvegarder et quitter</button>
-        <button className={styles.quitButton} onClick={handleQuit}>Retour</button>
         </div>
       </div>
+    </>
   );
 };
 
@@ -162,4 +83,5 @@ ServerDetails.propTypes = {
     }),
   ]),
 };
+
 export default ServerDetails;

src/pages/ServerDetails/ServerDetails.module.scss

@@ -1,133 +1,94 @@
+.container {
+  display: flex;
+  min-height: 100vh; 
+}
+
+.sidebar {
+  width: 20rem;
+  background-color: #100D25;
+  padding: 2rem;
+  box-sizing: border-box;
+  position: fixed;  
+  height: 100vh;  
+  top: 0;  
+  color: white; 
+}
+
+.logo img {
+  width: 150px;  
+  margin-bottom: 2rem;
+}
+
+.user {
+  margin-bottom: 2rem;
+}
+
+.user p {
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.user small {
+  font-size: 0.875rem;
+  color: #9CA3AF;
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  padding: 1rem 0;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #D1D5DB;
+  text-decoration: none;
+}
+
+.menuItem:hover {
+  color: white;  
+}
+
+.menuItem svg {
+  margin-right: 1rem;
+  font-size: 1.25rem;
+}
+
+.logoutButton {
+  margin-top: 2rem;
+  padding: 0.75rem 1.5rem;
+  background-color: #EF4444;  
+  border: none;
+  color: white;
+  cursor: pointer;
+  width: 100%;
+  text-align: center;
+}
+
+.logoutButton:hover {
+  background-color: #DC2626;
+}
+
 .serverDetailsContainer {
+  flex: 1; 
+  margin-left: 20rem;  
   padding-top: var(--navbar-height);
   background-color: var(--main-bg-color);
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--text-color);
-  width: 100%;
   box-sizing: border-box;
 }
 
-.details {
+.navbar {
-  margin-top: 5rem;
+  position: fixed;
-  padding: 3rem;
+  top: 0;
-  padding-top: 0;
-  background-color: var(--card-bg-color);
   width: 100%;  
-  max-width: 60rem; 
+  height: var(--navbar-height); 
-  border-radius: 1.5rem;
+  background-color: var(--navbar-bg-color);  
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  z-index: 1000;  
-  box-sizing: border-box;
-}
-
-.formGroup {
-  margin-bottom: 2.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup label {
-  font-weight: 600;
-  margin-bottom: 1rem;
-  font-size: 1.4rem;
-  color: var(--label-color);
-}
-
-.formGroup input,
-.formGroup select {
-  width: 100%;
-  padding: 1.2rem;
-  height: auto;  
-  background-color: var(--input-bg-color);
-  border: 1px solid var(--input-border-color);
-  border-radius: 0.75rem;
-  color: var(--text-color);
-  font-size: 1.2rem;
-  line-height: 1.5rem;  
-  box-sizing: border-box;
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.formGroup input:focus,
-.formGroup select:focus {
-  border-color: var(--focus-border-color);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  outline: none;
-}
-
-/* Chrome- styles */
-@supports (-webkit-appearance: none) {
-  .formGroup select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ddd" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
-    background-repeat: no-repeat;
-    background-position: right 1.2rem center;
-    background-size: 1rem;
-    padding-right: 3rem; 
-  }
-}
-
-.saveButton,
-.quitButton {
-  padding: 1.2rem 2.5rem;
-  color: var(--button-text-color);
-  border: none;
-  border-radius: 0.75rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease, transform 0.3s ease;
-  font-size: 1.2rem;
-  margin-top: 1rem;
-}
-
-.saveButton {
-  background-color: #05a771;
-}
-
-.saveButton:hover {
-  background-color: #05a77183;
-}
-
-.quitButton {
-  background-color: gray;
-  margin-left: 1rem;
-}
-
-
-.error {
-  color: var(--error-color);
-  font-size: 1.2rem;
-}
-
-.details h1 {
-  font-size: 2.5rem;
-  margin-bottom: 3rem;
-  color: var(--header-color);
-}
-
-@media (max-width: 768px) {
-  .details {
-    width: 90%;
-    padding: 2rem;
-  }
-
-  .formGroup input,
-  .formGroup select {
-    height: auto;
-    font-size: 1.1rem;
-    padding: 1rem;
-  }
-
-  .saveButton,
-  .quitButton {
-    padding: 1rem 2rem;
-    font-size: 1.1rem;
-  }
-
-  .details h1 {
-    font-size: 2rem;
-    margin-bottom: 2rem;
-  }
 }

src/pages/ServerProperties/ServerProperties.jsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import styles from './ServerProperties.module.scss';
+import serviiApi from "../../service/api.tsx";
+import Loading from '../Loading/loading';
+import PropTypes from "prop-types";
+
+const ServerProprieties = ({ user }) => {
+  const { serverName } = useParams();
+  const navigate = useNavigate();
+  const [server, setServer] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchServer = async () => {
+      try {
+        const ApiResponse = await serviiApi.fetchServers();
+        const data = ApiResponse.message;
+        const foundServer = data.find(server => server.name === serverName);
+        
+        if (foundServer) {
+          setServer(foundServer);
+        } else {
+          setError('Server not found');
+        }
+      } catch (error) {
+        console.error('Error fetching server:', error);
+        setError('Error fetching server');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServer();
+  }, [serverName]);
+
+  const validateInput = (input) => {
+    return input.replace(/[^a-zA-Z]/g, '');
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    const validatedValue = name === 'motd' ? validateInput(value) : value;
+    setServer({ ...server, [name]: validatedValue });
+  };
+
+  const handleSave = async () => {
+    try {
+      const props = [
+        ['max-players', server.maxPlayers.toString()],
+        ['motd', server.motd],
+        ['difficulty', server.difficulty],
+        ['enable-command-block', server.enableCommandBlock.toString()],
+        ['gamemode', server.gamemode.toString()],
+        ['hardcore', server.hardcore.toString()],
+        ['online-mode', server.onlineMode.toString()],
+        ['pvp', server.pvp.toString()]
+      ];
+
+      await serviiApi.updateProperties(server.name, props); 
+    } catch (error) {
+      console.error('Error updating server:', error);
+      alert('Error updating server');
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.serverDetailsContainer}>
+        <div className={styles.error}>
+          <h1>{error}</h1>
+          <button onClick={() => navigate('/dashboard')}>Retour au Dashboard</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.serverDetailsContainer}>
+      <div className={styles.details}>
+        <h1>Propriétés du serveur {server.name}</h1>
+        <div className={styles.formGroup}>
+          <label htmlFor="difficulty">Difficultée:</label>
+          <select id="difficulty" name="difficulty" value={server.difficulty} onChange={handleChange}>
+            <option value="easy">Facile</option>
+            <option value="normal">Normal</option>
+            <option value="hard">Difficile</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="enableCommandBlock">Activation des commandes block:</label>
+          <select id="enableCommandBlock" name="enableCommandBlock" value={server.enableCommandBlock} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="gamemode">Gamemode:</label>
+          <select id="gamemode" name="gamemode" value={server.gamemode} onChange={handleChange}>
+            <option value="survival">Survie</option>
+            <option value="creative">Créatif</option>
+            <option value="adventure">Aventure</option>
+            <option value="spectator">Spectateur</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="hardcore">Hardcore:</label>
+          <select id="hardcore" name="hardcore" value={server.hardcore} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="maxPlayers">Max de joueurs:</label>
+          <input type="number" id="maxPlayers" name="maxPlayers" value={server.maxPlayers} onChange={handleChange} />
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="motd">Description du serveur:</label>
+          <input type="text" id="motd" name="motd" value={server.motd} onChange={handleChange} />
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="onlineMode">Mode en ligne:</label>
+          <select id="onlineMode" name="onlineMode" value={server.onlineMode} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <div className={styles.formGroup}>
+          <label htmlFor="pvp">PVP:</label>
+          <select id="pvp" name="pvp" value={server.pvp} onChange={handleChange}>
+            <option value="true">Activé</option>
+            <option value="false">Désactivé</option>
+          </select>
+        </div>
+        <button className={styles.saveButton} onClick={handleSave}>Sauvegarder</button>
+      </div>
+    </div>
+  );
+};
+
+ServerProprieties.propTypes = {
+  user: PropTypes.oneOfType([
+    PropTypes.shape({
+      uid: PropTypes.string.isRequired,
+      displayName: PropTypes.string,
+      email: PropTypes.string,
+    }),
+  ]),
+};
+
+export default ServerProprieties;

src/pages/ServerProperties/ServerProperties.module.scss

@@ -0,0 +1,133 @@
+.serverDetailsContainer {
+    padding-top: var(--navbar-height);
+    background-color: var(--main-bg-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--text-color);
+    width: 100%;
+    box-sizing: border-box; 
+  }
+  
+  .details {
+    padding: 3rem;
+    padding-top: 0;
+    background-color: var(--card-bg-color);
+    width: 100%;
+    max-width: 60rem; 
+    border-radius: 1.5rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+  }
+  
+  .formGroup {
+    margin-bottom: 2.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .formGroup label {
+    font-weight: 600;
+    margin-bottom: 1rem;
+    font-size: 1.4rem;
+    color: var(--label-color);
+  }
+  
+  .formGroup input,
+  .formGroup select {
+    width: 100%;
+    padding: 1.2rem;
+    height: auto;  
+    background-color: var(--input-bg-color);
+    border: 1px solid var(--input-border-color);
+    border-radius: 0.75rem;
+    color: var(--text-color);
+    font-size: 1.2rem;
+    line-height: 1.5rem;  
+    box-sizing: border-box;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .formGroup input:focus,
+  .formGroup select:focus {
+    border-color: var(--focus-border-color);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    outline: none;
+  }
+  
+  /* Chrome- styles */
+  @supports (-webkit-appearance: none) {
+    .formGroup select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-image: url('data:image/svg+xml;utf8,<svg fill="%23ddd" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+      background-repeat: no-repeat;
+      background-position: right 1.2rem center;
+      background-size: 1rem;
+      padding-right: 3rem; 
+    }
+  }
+  
+  .saveButton,
+  .quitButton {
+    padding: 1.2rem 2.5rem;
+    color: var(--button-text-color);
+    border: none;
+    border-radius: 0.75rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    font-size: 1.2rem;
+    margin-top: 1rem;
+  }
+  
+  .saveButton {
+    background-color: #05a771;
+  }
+  
+  .saveButton:hover {
+    background-color: #05a77183;
+  }
+  
+  .quitButton {
+    background-color: gray;
+    margin-left: 1rem;
+  }
+  
+  
+  .error {
+    color: var(--error-color);
+    font-size: 1.2rem;
+  }
+  
+  .details h1 {
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    color: var(--header-color);
+  }
+  
+  @media (max-width: 768px) {
+    .details {
+      width: 90%;
+      padding: 2rem;
+    }
+  
+    .formGroup input,
+    .formGroup select {
+      height: auto;
+      font-size: 1.1rem;
+      padding: 1rem;
+    }
+  
+    .saveButton,
+    .quitButton {
+      padding: 1rem 2rem;
+      font-size: 1.1rem;
+    }
+  
+    .details h1 {
+      font-size: 2rem;
+      margin-bottom: 2rem;
+    }
+  }
+