Amélioration page editor

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

@@ -175,48 +175,65 @@ const QuizForm: React.FC = () => {
     }
 
     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"
+                    onClick={handleQuizSave}
+                    sx={{ display: 'flex', alignItems: 'center' }}
+                >
+                    <SaveIcon sx={{ fontSize: 20 }} />
+                    Enregistrer
+                </Button>
+            </div>
 
-                <div className='dumb'></div>
+            <div style={{ textAlign: 'center', marginTop: '30px' }}>
+                <div className="title">Éditeur de quiz</div>
             </div>
 
             {/* <h2 className="subtitle">Éditeur</h2> */}
 
-            <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"
+             <NativeSelect
-                color="primary"
+                    id="select-folder"
-                value={selectedFolder}
+                    color="primary"
-                onChange={handleSelectFolder}
+                    value={selectedFolder}
-                disabled={!isNewQuiz}
+                    onChange={handleSelectFolder}
-                style={{ marginBottom: '16px' }} // Ajout de marge en bas
+                    disabled={!isNewQuiz}
+                    style={{ marginBottom: '16px', width: '200px', marginTop: '10px' }}
                 >
-                <option disabled value=""> Choisir un dossier... </option>
+                    <option disabled value="">
+                        Choisir un dossier...
+                    </option>
+                    {folders.map((folder: FolderType) => (
+                        <option value={folder._id} key={folder._id}>
+                            {folder.title}
+                        </option>
+                    ))}
+                </NativeSelect>
+            </div>
 
-                {folders.map((folder: FolderType) => (
-                    <option value={folder._id} key={folder._id}> {folder.title} </option>
-                ))}
-            </NativeSelect></label>
-
-            <Button variant="contained" onClick={handleQuizSave}>
-            <SaveIcon sx={{ fontSize: 20 }} />
-                Enregistrer
-            </Button>
 
             <Divider style={{ margin: '16px 0' }} />
 

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

@@ -386,32 +386,41 @@ const ManageRoom: React.FC = () => {
 
     return (
         <div className="room">
-            <h1>Salle : {formattedRoomName}</h1>
+            <div className="disconnectWrapper" style={{ marginBottom: '20px' }}>
-            <div className="roomHeader">
                 <DisconnectButton
                     onReturn={handleReturn}
                     askConfirm
                     message={`Êtes-vous sûr de vouloir quitter?`}
                 />
+            </div>
 
+            <div className="roomHeader">
                 <div
-                    className="headerContent"
                     style={{
                         display: 'flex',
-                        justifyContent: 'space-between',
+                        justifyContent: 'center',
                         alignItems: 'center',
-                        width: '100%'
+                        width: '100%',
+                        marginBottom: '10px'
                     }}
                 >
-                    {
+                    <h1 style={{ margin: 0, display: 'flex', alignItems: 'center' }}>
+                        Salle : {formattedRoomName}
                         <div
-                            className="userCount subtitle smallText"
+                            className="userCount subtitle"
-                            style={{ display: 'flex', justifyContent: 'flex-end' }}
+                            style={{
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                marginLeft: '20px',
+                                marginBottom: '0px'
+                            }}
                         >
-                            <GroupIcon style={{ marginRight: '5px' }} />
+                            <GroupIcon style={{ marginRight: '5px', verticalAlign: 'middle' }} />{' '}
                             {students.length}/60
                         </div>
-                    }
+                    </h1>
                 </div>
 
                 <div className="dumb"></div>

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

@@ -2,25 +2,31 @@
 .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%;
+    position: absolute;
-
+    top: 10px;
-    display: flex;
+    left: 0;
-    justify-content: center;
+    z-index: 10;
 }
 
 .room .roomHeader .centerTitle {
     flex-basis: auto;
-
     display: flex;
-    flex-direction: column;
+    justify-content: flex-start;
-    justify-content: flex-end;
+    align-items: flex-start;
-    align-items: flex-end;
+    margin-top: 40px;
+}
 
+.room .roomHeader .headerContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 60px;
 }
 
 .room .roomHeader .dumb {
@@ -34,7 +40,6 @@
 
     overflow: auto;
     justify-content: center;
-    /* align-items: center; */
 }
 
 .room .finishQuizButton {
@@ -44,146 +49,7 @@
     width: 100%;
 }
 
-
+.room h1 {
-
+    text-align: center;
-/* .create-room-container {
+    margin-top: 50px;
-    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;
-    }
-} */