Merge d242ccec34 into ee7a7a0544

client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx

@@ -1,6 +1,7 @@
 // GiftCheatSheet.tsx
 import React, { useState } from 'react';
 import './giftCheatSheet.css';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
 
 const GiftCheatSheet: React.FC = () => {
     const [copySuccess, setCopySuccess] = useState(false);
@@ -19,7 +20,7 @@ const GiftCheatSheet: React.FC = () => {
                 console.error('Erreur lors de la copie dans le presse-papiers : ', error);
             });
     };
-    
+
 
     const QuestionVraiFaux = "::Exemple de question vrai/faux:: \n 2+2 \\= 4 ? {T}  //Utilisez les valeurs {T}, {F}, {TRUE} et {FALSE}.";
     const QuestionChoixMul = "::Ville capitale du Canada:: \nQuelle ville est la capitale du Canada? {\n~ Toronto\n~ Montréal\n= Ottawa #Rétroaction spécifique.\n}  // Commentaire non visible (au besoin)";
@@ -42,7 +43,10 @@ const GiftCheatSheet: React.FC = () => {
                     </code>
 
                 </pre>
-                <button onClick={() => copyToClipboard(QuestionVraiFaux)}>Copier</button>
+                <button onClick={() => copyToClipboard(QuestionVraiFaux)}>
+                    <FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
+                    Copier
+                </button>
             </div>
 
             <div className="question-type">
@@ -54,7 +58,10 @@ const GiftCheatSheet: React.FC = () => {
                         }
                     </code>
                 </pre>
-                <button onClick={() => copyToClipboard(QuestionChoixMul)}>Copier</button>
+                <button onClick={() => copyToClipboard(QuestionChoixMul)}>
+                    {' '}
+                    <FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
+                </button>
             </div>
             <div className="question-type">
                 <h4>3. Questions à choix multiple avec plusieurs réponses</h4>
@@ -65,7 +72,10 @@ const GiftCheatSheet: React.FC = () => {
                         }
                     </code>
                 </pre>
-                <button onClick={() => copyToClipboard(QuestionChoixMulMany)}>Copier</button>
+                <button onClick={() => copyToClipboard(QuestionChoixMulMany)}>
+                    <FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} />
+                    Copier
+                </button>
             </div>
 
             <div className="question-type">
@@ -75,7 +85,10 @@ const GiftCheatSheet: React.FC = () => {
                         {QuestionCourte}
                     </code>
                 </pre>
-                <button onClick={() => copyToClipboard(QuestionCourte)}>Copier</button>
+                <button onClick={() => copyToClipboard(QuestionCourte)}>
+                    {' '}
+                    <FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
+                </button>
             </div>
 
             <div className="question-type">
@@ -87,7 +100,10 @@ const GiftCheatSheet: React.FC = () => {
                         }
                     </code>                    
                 </pre>
-                <button onClick={() => copyToClipboard(QuestionNum)}>Copier</button>
+                <button onClick={() => copyToClipboard(QuestionNum)}>
+                    {' '}
+                    <FileCopyIcon style={{ fontSize: 18, marginRight: '5px' }} /> Copier
+                </button>
             </div>
 
             <div className="question-type">
@@ -185,7 +201,7 @@ const GiftCheatSheet: React.FC = () => {
                     Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
                     supportée.
                 </p>
-                </div>
+            </div>
             <div className="question-type">
                 <h4> 10. Informations supplémentaires </h4>
                 <p>
@@ -199,6 +215,6 @@ const GiftCheatSheet: React.FC = () => {
             </div>
         </div>
     );
-};  
+};
 
 export default GiftCheatSheet;

client/src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import * as React from 'react';
 import './header.css';
 import { Button } from '@mui/material';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp'; 
 
 interface HeaderProps {
     isLoggedIn: boolean;
@@ -28,8 +29,9 @@ const Header: React.FC<HeaderProps> = ({ isLoggedIn, handleLogout }) => {
                         handleLogout();
                         navigate('/');
                     }}
+                    startIcon={<ExitToAppIcon />} 
                 >
-                    Logout
+                    Déconnexion
                 </Button>
             )}
 

client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx

@@ -59,7 +59,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     disabled={disableButton}
                 >
                     {showAnswer ? (<div> {(question.isTrue ? '✅' : '❌')}</div>) : ``}
-                    <div className={`circle ${selectedTrue}`}>V</div>
                     <div className={`answer-text ${selectedTrue}`}>Vrai</div>
 
                     {showAnswer && answer && question.trueFormattedFeedback && (
@@ -76,7 +75,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
 
                 >
                     {showAnswer ? (<div> {(!question.isTrue ? '✅' : '❌')}</div>) : ``}
-                    <div className={`circle ${selectedFalse}`}>F</div>
                     <div className={`answer-text ${selectedFalse}`}>Faux</div>
 
                     {showAnswer && !answer && question.falseFormattedFeedback && (

client/src/components/StudentWaitPage/StudentWaitPage.tsx

@@ -21,16 +21,15 @@ const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode })
 
     return (
         <div className="wait">
-            <div className='button'>
+            <div className="button" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
                 <Button
                     variant="contained"
                     onClick={handleLaunchClick}
                     startIcon={<PlayArrow />}
-                    fullWidth
+                    sx={{ fontWeight: 600, fontSize: 20, width: 'auto' }}
-                    sx={{ fontWeight: 600, fontSize: 20 }}
                 >
-                    Lancer 
+                    Lancer
-                </Button> 
+                </Button>
             </div>
 
             <div className="students">

client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx

@@ -116,7 +116,7 @@ const TeacherModeQuiz: React.FC<TeacherModeQuizProps> = ({
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={handleFeedbackDialogClose} color="primary">
-                        OK
+                        Fermer
                     </Button>
                 </DialogActions>
             </Dialog>

client/src/pages/AuthManager/providers/SimpleLogin/Login.tsx

@@ -44,7 +44,6 @@ const SimpleLogin: React.FC = () => {
                 variant="outlined"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="Nom d'utilisateur"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />
@@ -55,7 +54,6 @@ const SimpleLogin: React.FC = () => {
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                placeholder="Nom de la salle"
                 sx={{ marginBottom: '1rem' }}
                 fullWidth
             />

client/src/pages/Teacher/Dashboard/Dashboard.tsx

@@ -66,6 +66,7 @@ const Dashboard: React.FC = () => {
     const [selectedRoom, selectRoom] = useState<RoomType>(); // menu
     const [errorMessage, setErrorMessage] = useState('');
     const [showErrorDialog, setShowErrorDialog] = useState(false);
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
 
     // Filter quizzes based on search term
     // const filteredQuizzes = quizzes.filter(quiz =>
@@ -105,7 +106,7 @@ const Dashboard: React.FC = () => {
 
         fetchData();
     }, []);
-    
+
     useEffect(() => {
         if (rooms.length > 0 && !selectedRoom) {
             selectRoom(rooms[rooms.length - 1]);
@@ -120,42 +121,45 @@ const Dashboard: React.FC = () => {
             selectRoomByName(event.target.value);
         }
     };
+    const toggleSearchVisibility = () => {
+        setIsSearchVisible(!isSearchVisible); // Alterne entre afficher et cacher la barre de recherche
+    };
 
-  // Créer une salle
+    // Créer une salle
-  const createRoom = async (title: string) => {
+    const createRoom = async (title: string) => {
-    // Créer la salle et récupérer l'objet complet
+        // Créer la salle et récupérer l'objet complet
-    const newRoom = await ApiService.createRoom(title);
+        const newRoom = await ApiService.createRoom(title);
-    
+
-    // Mettre à jour la liste des salles
+        // Mettre à jour la liste des salles
-    const updatedRooms = await ApiService.getUserRooms();
+        const updatedRooms = await ApiService.getUserRooms();
-    setRooms(updatedRooms as RoomType[]);
+        setRooms(updatedRooms as RoomType[]);
-    
+
-    // Sélectionner la nouvelle salle avec son ID
+        // Sélectionner la nouvelle salle avec son ID
-    selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
+        selectRoomByName(newRoom); // Utiliser l'ID de l'objet retourné
-  };
+    };
 
 
-  // Sélectionner une salle
+    // Sélectionner une salle
-  const selectRoomByName = (roomId: string) => {
+    const selectRoomByName = (roomId: string) => {
     const room = rooms.find(r => r._id === roomId);
-    selectRoom(room);
+        selectRoom(room);
-    localStorage.setItem('selectedRoomId', roomId);
+        localStorage.setItem('selectedRoomId', roomId);
-  };
+    };
 
-  const handleCreateRoom = async () => {
+    const handleCreateRoom = async () => {
-    if (newRoomTitle.trim()) {
+        if (newRoomTitle.trim()) {
-      try {
+            try {
                 await createRoom(newRoomTitle);
                 const userRooms = await ApiService.getUserRooms();
                 setRooms(userRooms as RoomType[]);
-        setOpenAddRoomDialog(false);
+                setOpenAddRoomDialog(false);
-        setNewRoomTitle('');
+                setNewRoomTitle('');
-      } catch (error) {
+            } catch (error) {
         setErrorMessage(error instanceof Error ? error.message : "Erreur inconnue");
-        setShowErrorDialog(true);
+                setShowErrorDialog(true);
-      }
+            }
-    }
+        }
-  };
+    };
 
     const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
         setSelectedFolderId(event.target.value);
@@ -398,7 +402,7 @@ const Dashboard: React.FC = () => {
         } else {
             const randomSixDigit = Math.floor(100000 + Math.random() * 900000);
             navigate(`/teacher/manage-room/${quiz._id}/${randomSixDigit}`);
-        }    
+        }
     };
 
     const handleShareQuiz = async (quiz: QuizType) => {
@@ -425,30 +429,63 @@ const Dashboard: React.FC = () => {
 
     return (
         <div className="dashboard">
-            <div className="title">Tableau de bord</div>
+            {/* Conteneur pour le titre et le sélecteur de salle */}
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '20px'
+                }}
+            >
+                {/* Titre tableau de bord */}
+                <div className="title" style={{ fontSize: '30px', fontWeight: 'bold' }}>
+                    Tableau de bord
+                </div>
 
-            <div className="roomSelection">
+                {/* Sélecteur de salle */}
-                <label htmlFor="select-room">Sélectionner une salle: </label>
+                <div
-                <select value={selectedRoom?._id || ''} onChange={(e) => handleSelectRoom(e)}>
+                    className="roomSelection"
-                    <option value="" disabled>
+                    style={{ display: 'flex', justifyContent: 'flex-end', gap: '15px' }}
-                        -- Sélectionner une salle --
+                >
-                    </option>
+                    <select
-                    {rooms.map((room) => (
+                        value={selectedRoom?._id || ''}
-                        <option key={room._id} value={room._id}>
+                        onChange={(e) => handleSelectRoom(e)}
-                            {room.title}
+                        id="room-select"
+                        style={{
+                            padding: '8px 12px',
+                            fontSize: '14px',
+                            borderRadius: '8px',
+                            border: '1px solid #ccc',
+                            backgroundColor: '#fff',
+                            maxWidth: '200px',
+                            cursor: 'pointer',
+                            fontWeight: '500'
+                        }}
+                    >
+                        <option value="" disabled>
+                            Sélectionner une salle
                         </option>
-                    ))}
+                        {rooms.map((room) => (
-                    <option value="add-room">Ajouter salle</option>
+                            <option key={room._id} value={room._id}>
-                </select>
+                                {room.title}
-
+                            </option>
+                        ))}
+                        <option
+                            value="add-room"
+                            style={{
+                                color: 'black',
+                                backgroundColor: '#f0f0f0',
+                                fontWeight: 'bold'
+                            }}
+                        >
+                            Ajouter une salle
+                        </option>
+                    </select>
+                </div>
             </div>
 
-            {selectedRoom && (
+            {/* Dialog pour créer une salle */}
-                <div className="roomTitle">
-                    <h2>Salle sélectionnée: {selectedRoom.title}</h2>
-                </div>
-            )}
-
             <Dialog open={openAddRoomDialog} onClose={() => setOpenAddRoomDialog(false)}>
                 <DialogTitle>Créer une nouvelle salle</DialogTitle>
                 <DialogContent>
@@ -463,6 +500,8 @@ const Dashboard: React.FC = () => {
                     <Button onClick={handleCreateRoom}>Créer</Button>
                 </DialogActions>
             </Dialog>
+
+            {/* Dialog d'erreur */}
             <Dialog open={showErrorDialog} onClose={() => setShowErrorDialog(false)}>
                 <DialogTitle>Erreur</DialogTitle>
                 <DialogContent>
@@ -473,101 +512,79 @@ const Dashboard: React.FC = () => {
                 </DialogActions>
             </Dialog>
 
-            <div className="search-bar">
+            <div
-                <TextField
+                style={{
-                    onChange={handleSearch}
+                    display: 'flex',
-                    value={searchTerm}
+                    justifyContent: 'flex-end',
-                    placeholder="Rechercher un quiz par son titre"
+                    alignItems: 'center',
-                    fullWidth
+                    width: '100%',
-                    InputProps={{
+                    gap: '20px'
-                        endAdornment: (
+                }}
-                            <InputAdornment position="end">
+            >
-                                <IconButton>
+                {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
-                                    <Search />
+                <div
-                                </IconButton>
+                    className="search-bar"
-                            </InputAdornment>
+                    style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
-                        )
+                >
-                    }}
+                    {!isSearchVisible ? (
-                />
+                        <IconButton
-            </div>
+                            onClick={toggleSearchVisibility}
-
+                            sx={{
-            <div className="folder">
+                                borderRadius: '8px',
-                <div className="select">
+                                border: '1px solid #ccc',
-                    <NativeSelect
+                                padding: '8px 12px',
-                        id="select-folder"
+                                backgroundColor: '#fff',
-                        color="primary"
+                                color: '#5271FF'
-                        value={selectedFolderId}
+                            }}
-                        onChange={handleSelectFolder}
+                        >
-                    >
+                            <Search />
-                        <option value=""> Tous les dossiers... </option>
+                        </IconButton>
-
+                    ) : (
-                        {folders.map((folder: FolderType) => (
+                        // Barre de recherche visible
-                            <option value={folder._id} key={folder._id}>
+                        <TextField
-                                {' '}
+                            onChange={handleSearch}
-                                {folder.title}{' '}
+                            value={searchTerm}
-                            </option>
+                            placeholder="Rechercher un quiz"
-                        ))}
+                            fullWidth
-                    </NativeSelect>
+                            autoFocus
+                            sx={{
+                                borderRadius: '8px',
+                                border: '1px solid #ccc',
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                maxWidth: '1000px',
+                                width: '100%',
+                                fontWeight: 500
+                            }}
+                            InputProps={{
+                                endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            onClick={toggleSearchVisibility}
+                                            sx={{
+                                                borderRadius: '8px',
+                                                border: '1px solid #ccc',
+                                                backgroundColor: '#fff',
+                                                color: '#5271FF'
+                                            }}
+                                        >
+                                            <Search />
+                                        </IconButton>
+                                    </InputAdornment>
+                                )
+                            }}
+                        />
+                    )}
                 </div>
 
-                <div className="actions">
-                    <Tooltip title="Ajouter dossier" placement="top">
-                        <IconButton color="primary" onClick={handleCreateFolder}>
-                            {' '}
-                            <Add />{' '}
-                        </IconButton>
-                    </Tooltip>
-
-                    <Tooltip title="Renommer dossier" placement="top">
-                        <div>
-                        <IconButton
-                            color="primary"
-                            onClick={handleRenameFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <Edit />{' '}
-                        </IconButton>
-                        </div>
-                    </Tooltip>
-
-                    <Tooltip title="Dupliquer dossier" placement="top">
-                        <div>
-                        <IconButton
-                            color="primary"
-                            onClick={handleDuplicateFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <FolderCopy />{' '}
-                        </IconButton>
-                        </div>
-                    </Tooltip>
-
-                    <Tooltip title="Supprimer dossier" placement="top">
-                        <div>
-                        <IconButton
-                            aria-label="delete"
-                            color="primary"
-                            onClick={handleDeleteFolder}
-                            disabled={selectedFolderId == ''} // cannot action on all
-                        >
-                            {' '}
-                            <DeleteOutline />{' '}
-                        </IconButton>
-                        </div>
-                    </Tooltip>
-                </div>
-            </div>
-
-            <div className="ajouter">
                 <Button
                     variant="outlined"
                     color="primary"
                     startIcon={<Add />}
                     onClick={handleCreateQuiz}
+                        sx={{ borderRadius: '8px' }}
                 >
-                    Ajouter un nouveau quiz
+                    Nouveau quiz
                 </Button>
 
                 <Button
@@ -575,91 +592,181 @@ const Dashboard: React.FC = () => {
                     color="primary"
                     startIcon={<Upload />}
                     onClick={handleOnImport}
+                        sx={{ borderRadius: '8px' }}
                 >
-                    Import
+                    Importer
                 </Button>
             </div>
-            <div className="list">
+
-                {Object.keys(quizzesByFolder).map((folderName) => (
+            {/* Conteneur principal avec les actions et la liste des quiz */}
-                    <CustomCard key={folderName} className="folder-card">
+            <div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>
-                        <div className="folder-tab">{folderName}</div>
+                {/* Barre d'outils pour le sélecteur de dossier et les actions */}
-                        <CardContent>
+                <div
-                            {quizzesByFolder[folderName].map((quiz: QuizType) => (
+                    className="folder-toolbar"
-                                <div className="quiz" key={quiz._id}>
+                    style={{
-                                    <div className="title">
+                        display: 'flex',
-                                        <Tooltip title="Lancer quiz" placement="top">
+                        justifyContent: 'space-between',
-                                            <div>
+                        alignItems: 'center',
+                        marginBottom: '20px'
+                    }}
+                >
+                    {/* Sélecteur de dossier */}
+                    <NativeSelect
+                        id="select-folder"
+                        color="primary"
+                        value={selectedFolderId}
+                        onChange={handleSelectFolder}
+                        sx={{
+                            padding: '6px 12px',
+                            maxWidth: '180px',
+                            borderRadius: '8px',
+                            borderColor: '#e0e0e0',
+                            '&:hover': { borderColor: '#5271FF' }
+                        }}
+                    >
+                        <option value="">Tous les dossiers...</option>
+                        {folders.map((folder) => (
+                            <option value={folder._id} key={folder._id}>
+                                {folder.title}
+                            </option>
+                        ))}
+                    </NativeSelect>
+
+                    {/* Actions dossiers */}
+                    <div style={{ display: 'flex', gap: '15px' }}>
+                        <Tooltip title="Ajouter dossier" placement="top">
+                            <IconButton color="primary" onClick={handleCreateFolder}>
+                                <Add />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Renommer dossier" placement="top">
+                            <IconButton
+                                color="primary"
+                                onClick={handleRenameFolder}
+                                disabled={selectedFolderId === ''}
+                            >
+                                <Edit />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Dupliquer dossier" placement="top">
+                            <IconButton
+                                color="primary"
+                                onClick={handleDuplicateFolder}
+                                disabled={selectedFolderId === ''}
+                            >
+                                <FolderCopy />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Supprimer dossier" placement="top">
+                            <IconButton
+                                color="error"
+                                onClick={handleDeleteFolder}
+                                disabled={selectedFolderId === ''}
+                            >
+                                <DeleteOutline />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+                </div>
+
+                {/* Liste des quiz organisés par dossier */}
+                <div className="list" style={{ marginTop: '20px' }}>
+                    {Object.keys(quizzesByFolder).map((folderName) => (
+                        <CustomCard
+                            key={folderName}
+                            className="folder-card"
+                            sx={{ marginBottom: '20px' }}
+                        >
+                            <div
+                                className="folder-tab"
+                                style={{
+                                    fontWeight: 'bold',
+                                    padding: '10px',
+                                    backgroundColor: '#f5f5f5'
+                                }}
+                            >
+                                {folderName}
+                            </div>
+                            <CardContent>
+                                {quizzesByFolder[folderName].map((quiz) => (
+                                    <div
+                                        className="quiz"
+                                        key={quiz._id}
+                                        style={{ marginBottom: '10px' }}
+                                    >
+                                        <div className="title">
+                                            <Tooltip title="Lancer quiz" placement="top">
                                                 <Button
                                                     variant="outlined"
                                                     onClick={() => handleLancerQuiz(quiz)}
                                                     disabled={!validateQuiz(quiz.content)}
+                                                    sx={{ width: '100%' }}
                                                 >
-                                                    {`${quiz.title} (${quiz.content.length} question${
+                                                    {`${quiz.title} (${
+                                                        quiz.content.length
+                                                    } question${
                                                         quiz.content.length > 1 ? 's' : ''
                                                     })`}
                                                 </Button>
-                                            </div>
+                                            </Tooltip>
-                                        </Tooltip>
+                                        </div>
+
+                                        <div
+                                            className="actions"
+                                            style={{ display: 'flex', gap: '10px' }}
+                                        >
+                                            <Tooltip title="Télécharger quiz" placement="top">
+                                                <IconButton
+                                                    color="primary"
+                                                    onClick={() => downloadTxtFile(quiz)}
+                                                >
+                                                    <FileDownload />
+                                                </IconButton>
+                                            </Tooltip>
+
+                                            <Tooltip title="Modifier quiz" placement="top">
+                                                <IconButton
+                                                    color="primary"
+                                                    onClick={() => handleEditQuiz(quiz)}
+                                                >
+                                                    <Edit />
+                                                </IconButton>
+                                            </Tooltip>
+
+                                            <Tooltip title="Dupliquer quiz" placement="top">
+                                                <IconButton
+                                                    color="primary"
+                                                    onClick={() => handleDuplicateQuiz(quiz)}
+                                                >
+                                                    <ContentCopy />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title="Partager quiz" placement="top">
+                                                <IconButton
+                                                    color="primary"
+                                                    onClick={() => handleShareQuiz(quiz)}
+                                                >
+                                                    <Share />
+                                                </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title="Supprimer quiz" placement="top">
+                                                <IconButton
+                                                    color="error"
+                                                    onClick={() => handleRemoveQuiz(quiz)}
+                                                >
+                                                    <DeleteOutline />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </div>
                                     </div>
-
+                                ))}
-                                    <div className="actions">
+                            </CardContent>
-                                        <Tooltip title="Télécharger quiz" placement="top">
+                        </CustomCard>
-                                            <IconButton
+                    ))}
-                                                color="primary"
+                </div>
-                                                onClick={() => downloadTxtFile(quiz)}
-                                            >
-                                                {' '}
-                                                <FileDownload />{' '}
-                                            </IconButton>
-                                        </Tooltip>
-
-                                        <Tooltip title="Modifier quiz" placement="top">
-                                            <IconButton
-                                                color="primary"
-                                                onClick={() => handleEditQuiz(quiz)}
-                                            >
-                                                {' '}
-                                                <Edit />{' '}
-                                            </IconButton>
-                                        </Tooltip>
-
-                                        <Tooltip title="Dupliquer quiz" placement="top">
-                                            <IconButton
-                                                color="primary"
-                                                onClick={() => handleDuplicateQuiz(quiz)}
-                                            >
-                                                {' '}
-                                                <ContentCopy />{' '}
-                                            </IconButton>
-                                        </Tooltip>
-
-                                        <Tooltip title="Supprimer quiz" placement="top">
-                                            <IconButton
-                                                aria-label="delete"
-                                                color="primary"
-                                                onClick={() => handleRemoveQuiz(quiz)}
-                                            >
-                                                {' '}
-                                                <DeleteOutline />{' '}
-                                            </IconButton>
-                                        </Tooltip>
-
-                                        <Tooltip title="Partager quiz" placement="top">
-                                            <IconButton
-                                                color="primary"
-                                                onClick={() => handleShareQuiz(quiz)}
-                                            >
-                                                {' '}
-                                                <Share />{' '}
-                                            </IconButton>
-                                        </Tooltip>
-                                    </div>
-                                </div>
-                            ))}
-                        </CardContent>
-                    </CustomCard>
-                ))}
             </div>
+
+            {/* Modal d'importation */}
             <ImportModal
                 open={showImportModal}
                 handleOnClose={() => setShowImportModal(false)}

client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx

@@ -11,12 +11,22 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview
 import { QuizType } from '../../../Types/QuizType';
 
 import './editorQuiz.css';
-import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material';
+import {
+    Button,
+    TextField,
+    NativeSelect,
+    Divider,
+    Dialog,
+    DialogTitle,
+    DialogActions,
+    DialogContent
+} from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
 
 import ApiService from '../../../services/ApiService';
 import { escapeForGIFT } from '../../../utils/giftUtils';
 import { Upload } from '@mui/icons-material';
+import SaveIcon from '@mui/icons-material/Save';
 
 interface EditQuizParams {
     id: string;
@@ -61,7 +71,7 @@ const QuizForm: React.FC = () => {
         };
     }, []);
 
-    const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
+    const scrollToImagesSection = (event: { preventDefault: () => void }) => {
         event.preventDefault();
         const section = document.getElementById('images-section');
         if (section) {
@@ -86,10 +96,12 @@ const QuizForm: React.FC = () => {
                     return;
                 }
 
-                const quiz = await ApiService.getQuiz(id) as QuizType;
+                const quiz = (await ApiService.getQuiz(id)) as QuizType;
 
                 if (!quiz) {
-                    window.alert(`Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`)
+                    window.alert(
+                        `Une erreur est survenue.\n Le quiz ${id} n'a pas été trouvé\nVeuillez réessayer plus tard`
+                    );
                     console.error('Quiz not found for id:', id);
                     navigate('/teacher/dashboard');
                     return;
@@ -102,9 +114,8 @@ const QuizForm: React.FC = () => {
                 setSelectedFolder(folderId);
                 setFilteredValue(content);
                 setValue(quiz.content.join('\n\n'));
-
             } catch (error) {
-                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
                 console.error('Error fetching quiz:', error);
                 navigate('/teacher/dashboard');
             }
@@ -119,7 +130,7 @@ const QuizForm: React.FC = () => {
         }
 
         // split value when there is at least one blank line
-        const linesArray = value.split(/\n{2,}/); 
+        const linesArray = value.split(/\n{2,}/);
 
         // if the first item in linesArray is blank, remove it
         if (linesArray[0] === '') linesArray.shift();
@@ -137,12 +148,12 @@ const QuizForm: React.FC = () => {
         try {
             // check if everything is there
             if (quizTitle == '') {
-                alert("Veuillez choisir un titre");
+                alert('Veuillez choisir un titre');
                 return;
             }
 
             if (selectedFolder == '') {
-                alert("Veuillez choisir un dossier");
+                alert('Veuillez choisir un dossier');
                 return;
             }
 
@@ -156,8 +167,8 @@ const QuizForm: React.FC = () => {
 
             navigate('/teacher/dashboard');
         } catch (error) {
-            window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+            window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
-            console.log(error)
+            console.log(error);
         }
     };
 
@@ -176,106 +187,123 @@ const QuizForm: React.FC = () => {
             }
 
             if (!inputElement.files || inputElement.files.length === 0) {
-                window.alert("Veuillez d'abord choisir une image à téléverser.")
+                window.alert("Veuillez d'abord choisir une image à téléverser.");
                 return;
             }
 
             const imageUrl = await ApiService.uploadImage(inputElement.files[0]);
 
             // Check for errors
-            if(imageUrl.indexOf("ERROR") >= 0) {
+            if (imageUrl.indexOf('ERROR') >= 0) {
-                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
+                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`);
                 return;
             }
 
-            setImageLinks(prevLinks => [...prevLinks, imageUrl]);
+            setImageLinks((prevLinks) => [...prevLinks, imageUrl]);
 
             // Reset the file input element
             if (fileInputRef.current) {
                 fileInputRef.current.value = '';
             }
         } catch (error) {
-            window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`)
+            window.alert(`Une erreur est survenue.\n${error}\nVeuillez réessayer plus tard.`);
-
         }
     };
 
     const handleCopyToClipboard = async (link: string) => {
         navigator.clipboard.writeText(link);
-    }
+    };
 
     return (
-        <div className='quizEditor'>
+        <div className="quizEditor">
-
+            <div
-            <div className='editHeader'>
+                className="editHeader"
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '32px'
+                }}
+            >
                 <ReturnButton
                     askConfirm
                     message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`}
                 />
 
-                <div className='title'>Éditeur de quiz</div>
+                <Button
-
+                    variant="contained"
-                <div className='dumb'></div>
+                    onClick={handleQuizSave}
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                >
+                    <SaveIcon sx={{ fontSize: 20 }} />
+                    Enregistrer
+                </Button>
             </div>
 
-            {/* <h2 className="subtitle">Éditeur</h2> */}
+            <div style={{ textAlign: 'center', marginTop: '30px' }}>
+                <div className="title">Éditeur de quiz</div>
+            </div>
 
-            <TextField
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                onChange={handleQuizTitleChange}
+                <TextField
-                value={quizTitle}
+                    onChange={handleQuizTitleChange}
-                placeholder="Titre du quiz"
+                    value={quizTitle}
-                label="Titre du quiz"
+                    color="primary"
-                fullWidth
+                    placeholder="Titre du quiz"
-            />
+                    label="Titre du quiz"
-            <label>Choisir un dossier:
+                    sx={{ width: '200px', marginTop: '50px' }}
-            <NativeSelect
+                />
-                id="select-folder"
+
-                color="primary"
+                <NativeSelect
-                value={selectedFolder}
+                    id="select-folder"
-                onChange={handleSelectFolder}
+                    color="primary"
-                disabled={!isNewQuiz}
+                    value={selectedFolder}
-                style={{ marginBottom: '16px' }} // Ajout de marge en bas
+                    onChange={handleSelectFolder}
+                    disabled={!isNewQuiz}
+                    style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
                 >
-                <option disabled value=""> Choisir un dossier... </option>
+                    <option disabled value="">
-
+                        Choisir un dossier...
-                {folders.map((folder: FolderType) => (
+                    </option>
-                    <option value={folder._id} key={folder._id}> {folder.title} </option>
+                    {folders.map((folder: FolderType) => (
-                ))}
+                        <option value={folder._id} key={folder._id}>
-            </NativeSelect></label>
+                            {folder.title}
-
+                        </option>
-            <Button variant="contained" onClick={handleQuizSave}>
+                    ))}
-                Enregistrer
+                </NativeSelect>
-            </Button>
+            </div>
 
             <Divider style={{ margin: '16px 0' }} />
 
-            <div className='editSection'>
+            <div className="editSection">
-
+                <div className="edit">
-                <div className='edit'>
                     <Editor
                         label="Contenu GIFT du quiz:"
                         initialValue={value}
-                        onEditorChange={handleUpdatePreview} />
+                        onEditorChange={handleUpdatePreview}
+                    />
 
-                    <div className='images'>
+                    <div className="images">
-                        <div className='upload'>
+                        <div className="upload">
                             <label className="dropArea">
-                                <input type="file" id="file-input" className="file-input"
+                                <input
-                                accept="image/jpeg, image/png"
+                                    type="file"
-                                multiple 
+                                    id="file-input"
-                                ref={fileInputRef} />
+                                    className="file-input"
+                                    accept="image/jpeg, image/png"
+                                    multiple
+                                    ref={fileInputRef}
+                                />
 
                                 <Button
-                                variant="outlined"
+                                    variant="outlined"
-                                aria-label='Téléverser'
+                                    aria-label="Téléverser"
-                                onClick={handleSaveImage}>
+                                    onClick={handleSaveImage}
-                                    Téléverser <Upload /> 
+                                >
+                                    Téléverser <Upload />
                                 </Button>
-
                             </label>
-                            <Dialog
+                            <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
-                                open={dialogOpen}
-                                onClose={() => setDialogOpen(false)} >
                                 <DialogTitle>Erreur</DialogTitle>
                                 <DialogContent>
                                     Veuillez d&apos;abord choisir une image à téléverser.
@@ -290,23 +318,32 @@ const QuizForm: React.FC = () => {
 
                         <h4>Mes images :</h4>
                         <div>
-                                <div>
+                            <div>
-                                <div style={{ display: "inline" }}>(Voir section </div>
+                                <div style={{ display: 'inline' }}>(Voir section </div>
-                                    <a href="#images-section"style={{ textDecoration: "none" }} onClick={scrollToImagesSection}>
+                                <a
-                                        <u><em><h4 style={{ display: "inline" }}> 9. Images </h4></em></u>
+                                    href="#images-section"
-                                    </a>
+                                    style={{ textDecoration: 'none' }}
-                                <div style={{ display: "inline" }}> ci-dessous</div>
+                                    onClick={scrollToImagesSection}
-                                <div style={{ display: "inline" }}>)</div>
+                                >
+                                    <u>
+                                        <em>
+                                            <h4 style={{ display: 'inline' }}> 9. Images </h4>
+                                        </em>
+                                    </u>
+                                </a>
+                                <div style={{ display: 'inline' }}> ci-dessous</div>
+                                <div style={{ display: 'inline' }}>)</div>
                                 <br />
                                 <em> - Cliquez sur un lien pour le copier</em>
-                                </div>                            
+                            </div>
-                                <ul>
+                            <ul>
                                 {imageLinks.map((link, index) => {
-                                    const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`;
+                                    const imgTag = `![alt_text](${escapeForGIFT(
+                                        link
+                                    )} "texte de l'infobulle")`;
                                     return (
                                         <li key={index}>
-                                            <code
+                                            <code onClick={() => handleCopyToClipboard(imgTag)}>
-                                                onClick={() => handleCopyToClipboard(imgTag)}>
                                                 {imgTag}
                                             </code>
                                         </li>
@@ -317,10 +354,9 @@ const QuizForm: React.FC = () => {
                     </div>
 
                     <GiftCheatSheet />
-
                 </div>
 
-                <div className='preview'>
+                <div className="preview">
                     <div className="preview-column">
                         <h4>Prévisualisation</h4>
                         <div>
@@ -328,7 +364,6 @@ const QuizForm: React.FC = () => {
                         </div>
                     </div>
                 </div>
-
             </div>
 
             {showScrollButton && (
@@ -356,7 +391,7 @@ const scrollToTopButtonStyle: CSSProperties = {
     backgroundColor: '#5271ff',
     border: 'none',
     cursor: 'pointer',
-    zIndex: 1000,
+    zIndex: 1000
 };
 
 export default QuizForm;

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -25,29 +25,29 @@ const ManageRoom: React.FC = () => {
     const navigate = useNavigate();
     const [socket, setSocket] = useState<Socket | null>(null);
     const [students, setStudents] = useState<StudentType[]>([]);
-    const { quizId = '', roomName = '' }  = useParams<{ quizId: string, roomName: string }>();
+    const { quizId = '', roomName = '' } = useParams<{ quizId: string; roomName: string }>();
     const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
     const [quiz, setQuiz] = useState<QuizType | null>(null);
     const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
     const [connectingError, setConnectingError] = useState<string>('');
     const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
     const [quizStarted, setQuizStarted] = useState<boolean>(false);
-    const [formattedRoomName, setFormattedRoomName] = useState("");
+    const [formattedRoomName, setFormattedRoomName] = useState('');
     const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
 
-    // Handle the newly connected user in useEffect, because it needs state info 
+    // Handle the newly connected user in useEffect, because it needs state info
     // not available in the socket.on() callback
     useEffect(() => {
         if (newlyConnectedUser) {
             console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
             setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
-    
+
             // only send nextQuestion if the quiz has started
             if (!quizStarted) {
                 console.log(`!quizStarted: returning.... `);
                 return;
             }
-    
+
             if (quizMode === 'teacher') {
                 webSocketService.nextQuestion({
                     roomName: formattedRoomName,
@@ -60,7 +60,7 @@ const ManageRoom: React.FC = () => {
             } else {
                 console.error('Invalid quiz mode:', quizMode);
             }
-    
+
             // Reset the newly connected user state
             setNewlyConnectedUser(null);
         }
@@ -91,7 +91,7 @@ const ManageRoom: React.FC = () => {
         return () => {
             disconnectWebSocket();
         };
-      }, [roomName, navigate]);
+    }, [roomName, navigate]);
 
     useEffect(() => {
         if (quizId) {
@@ -138,8 +138,8 @@ const ManageRoom: React.FC = () => {
         setFormattedRoomName(roomNameUpper);
         console.log(`Creating WebSocket room named ${roomNameUpper}`);
 
-        /** 
+        /**
-         * ATTENTION: Lire les variables d'état dans 
+         * ATTENTION: Lire les variables d'état dans
          * les .on() n'est pas une bonne pratique.
          * Les valeurs sont celles au moment de la création
          * de la fonction et non au moment de l'exécution.
@@ -179,7 +179,6 @@ const ManageRoom: React.FC = () => {
     };
 
     useEffect(() => {
-
         if (socket) {
             console.log(`Listening for submit-answer-room in room ${formattedRoomName}`);
             socket.on('submit-answer-room', (answerData: AnswerReceptionFromBackendType) => {
@@ -253,10 +252,12 @@ const ManageRoom: React.FC = () => {
         if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
 
         setCurrentQuestion(quizQuestions[nextQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, 
+        webSocketService.nextQuestion({
-                                       questions: quizQuestions, 
+            roomName: formattedRoomName,
-                                       questionIndex: nextQuestionIndex, 
+            questions: quizQuestions,
-                                       isLaunch: false});
+            questionIndex: nextQuestionIndex,
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -266,7 +267,12 @@ const ManageRoom: React.FC = () => {
 
         if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
         setCurrentQuestion(quizQuestions[prevQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false});
+        webSocketService.nextQuestion({
+            roomName: formattedRoomName,
+            questions: quizQuestions,
+            questionIndex: prevQuestionIndex,
+            isLaunch: false
+        });
     };
 
     const initializeQuizQuestion = () => {
@@ -294,7 +300,12 @@ const ManageRoom: React.FC = () => {
         }
 
         setCurrentQuestion(quizQuestions[0]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true});
+        webSocketService.nextQuestion({
+            roomName: formattedRoomName,
+            questions: quizQuestions,
+            questionIndex: 0,
+            isLaunch: true
+        });
     };
 
     const launchStudentMode = () => {
@@ -331,7 +342,12 @@ const ManageRoom: React.FC = () => {
         if (quiz?.content && quizQuestions) {
             setCurrentQuestion(quizQuestions[questionIndex]);
             if (quizMode === 'teacher') {
-                webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false});
+                webSocketService.nextQuestion({
+                    roomName: formattedRoomName,
+                    questions: quizQuestions,
+                    questionIndex,
+                    isLaunch: false
+                });
             }
         }
     };
@@ -365,7 +381,6 @@ const ManageRoom: React.FC = () => {
 
     return (
         <div className="room">
-            <h1>Salle : {formattedRoomName}</h1>
             <div className="roomHeader">
                 <DisconnectButton
                     onReturn={handleReturn}
@@ -381,20 +396,37 @@ const ManageRoom: React.FC = () => {
                         alignItems: 'center',
                         width: '100%'
                     }}
-                >
+                ></div>
-                    {(
-                        <div
-                            className="userCount subtitle smallText"
-                            style={{ display: "flex", justifyContent: "flex-end" }}
-                        >
-                            <GroupIcon style={{ marginRight: '5px' }} />
-                            {students.length}/60
-                        </div>
-                    )}
-                </div>
 
                 <div className="dumb"></div>
             </div>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: '100%',
+                    marginBottom: '10px'
+                }}
+            >
+                <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                    Salle : {formattedRoomName}
+                    <div
+                        className="userCount subtitle"
+                        style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            fontSize: '1.5rem',
+                            fontWeight: 'bold',
+                            marginLeft: '20px',
+                            marginBottom: '0px'
+                        }}
+                    >
+                        <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
+                        {students.length}/60
+                    </div>
+                </h1>
+            </div>
 
             {/* the following breaks the css (if 'room' classes are nested) */}
             <div className="">
@@ -425,7 +457,6 @@ const ManageRoom: React.FC = () => {
                                     <QuestionDisplay
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}
-                                        
                                     />
                                 )}
 

client/src/pages/Teacher/ManageRoom/manageRoom.css

@@ -1,26 +1,33 @@
-
 .room .roomHeader {
     width: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    justify-content: space-between;
+    align-items: flex-start;
-    align-content: stretch
+    position: relative;
 }
-.room .roomHeader .returnButton {
-    flex-basis: 10%;
 
-    display: flex;
+.room .roomHeader .returnButton {
-    justify-content: center;
+    position: absolute;
+    top: 10px;
+    left: 0;
+    z-index: 10;
 }
 
 .room .roomHeader .centerTitle {
     flex-basis: auto;
-
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
+    justify-content: flex-start;
-    align-items: flex-end;
+    align-items: flex-start;
+    margin-top: 40px;
+}
 
+.room .roomHeader .headerContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 60px;
 }
 
 .room .roomHeader .dumb {
@@ -31,155 +38,11 @@
     width: 100%;
     height: 70vh;
     display: flex;
-
     overflow: auto;
     justify-content: center;
-    /* align-items: center; */
 }
 
-
+.room h1 {
-
+    text-align: center;
-
+    margin-top: 50px;
-
-
-/* .create-room-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
 }
-
-.manage-room-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-
-.quiz-setup-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-top: 2rem;
-}
-
-.quiz-mode-selection {
-    display: flex;
-    flex-grow: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    height: 15vh;
-}
-
-.users-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-grow: 1;
-    gap: 2vh;
-}
-
-.launch-quiz-btn {
-    width: 20vw;
-    height: 11vh;
-    margin-top: 2vh;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.mode-choice {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 20vw;
-    margin-top: 2vh;
-}
-
-.user {
-    background-color: #e7dad1;
-    padding: 10px 20px;
-    border: 1px solid black;
-    border-radius: 10px;
-    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.bottom-btn {
-    display: flex;
-    width: 100%;
-    justify-content: flex-end;
-    margin-top: 2vh;
-}
-
-.room-container {
-    position: relative;
-    width: 100%;
-    max-width: 60vw;
-}
-
-@media only screen and (max-device-width: 768px) {
-    .room-container {
-        max-width: 100%;
-    }
-}
-
-.room-wrapper {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-}
-
-.room-name-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-}
-.user-item {
-    width: 100%;
-}
-
-.flex-column-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    overflow: auto;
-}
-
-.preview-and-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.nextQuestionButton {
-    align-self: flex-end;
-    margin-bottom: 5rem !important;
-}
-
-.top-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-@media only screen and (max-device-height: 4000px) {
-    .flex-column-wrapper {
-        height: 60vh;
-    }
-}
-
-@media only screen and (max-device-height: 1079px) {
-    .flex-column-wrapper {
-        height: 50vh;
-    }
-}
-
-@media only screen and (max-device-height: 741px) {
-    .flex-column-wrapper {
-        height: 40vh;
-    }
-} */

client/src/pages/Teacher/Share/Share.tsx

@@ -10,6 +10,7 @@ import { Button, NativeSelect } from '@mui/material';
 import ReturnButton from 'src/components/ReturnButton/ReturnButton';
 
 import ApiService from '../../../services/ApiService';
+import SaveIcon from '@mui/icons-material/Save';
 
 const Share: React.FC = () => {
     console.log('Component rendered');
@@ -119,6 +120,7 @@ const Share: React.FC = () => {
                     </NativeSelect>
 
                     <Button variant="contained" onClick={handleQuizSave}>
+                        {<SaveIcon sx={{ fontSize: 20, marginRight: '8px' }} />}
                         Enregistrer
                     </Button>