Merge 1981a7f7d5 into ee7a7a0544

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

@@ -66,7 +66,6 @@ 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 =>
@@ -121,9 +120,6 @@ 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
     const createRoom = async (title: string) => {
@@ -515,68 +511,42 @@ const Dashboard: React.FC = () => {
             <div
                 style={{
                     display: 'flex',
-                    justifyContent: 'flex-end',
+                    justifyContent: 'space-between',
                     alignItems: 'center',
-                    width: '100%',
+                    marginBottom: '20px'
-                    gap: '20px'
                 }}
             >
-                {/* Barre de recherche avec un bouton d'icône qui s'affiche ou se cache */}
+                <div className="search-bar" style={{ flexGrow: 1, maxWidth: '400px' }}>
-                <div
-                    className="search-bar"
-                    style={{ display: 'flex', gap: '20px', alignItems: 'center' }}
-                >
-                    {!isSearchVisible ? (
-                        <IconButton
-                            onClick={toggleSearchVisibility}
-                            sx={{
-                                borderRadius: '8px',
-                                border: '1px solid #ccc',
-                                padding: '8px 12px',
-                                backgroundColor: '#fff',
-                                color: '#5271FF'
-                            }}
-                        >
-                            <Search />
-                        </IconButton>
-                    ) : (
-                        // Barre de recherche visible
                     <TextField
                         onChange={handleSearch}
                         value={searchTerm}
-                            placeholder="Rechercher un quiz"
+                        placeholder="Rechercher un quiz par son titre"
                         fullWidth
-                            autoFocus
+                        variant="outlined"
-                            sx={{
-                                borderRadius: '8px',
-                                border: '1px solid #ccc',
-                                padding: '8px 12px',
-                                backgroundColor: '#fff',
-                                maxWidth: '1000px',
-                                width: '100%',
-                                fontWeight: 500
-                            }}
                         InputProps={{
                             endAdornment: (
                                 <InputAdornment position="end">
-                                        <IconButton
+                                    <IconButton>
-                                            onClick={toggleSearchVisibility}
-                                            sx={{
-                                                borderRadius: '8px',
-                                                border: '1px solid #ccc',
-                                                backgroundColor: '#fff',
-                                                color: '#5271FF'
-                                            }}
-                                        >
                                         <Search />
                                     </IconButton>
                                 </InputAdornment>
                             )
                         }}
+                        sx={{
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: '8px',
+                                '& fieldset': {
+                                    borderColor: '#e0e0e0'
+                                },
+                                '&:hover fieldset': {
+                                    borderColor: '#5271FF'
+                                }
+                            }
+                        }}
                     />
-                    )}
                 </div>
 
+                <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
                     <Button
                         variant="outlined"
                         color="primary"
@@ -597,6 +567,7 @@ const Dashboard: React.FC = () => {
                         Importer
                     </Button>
                 </div>
+            </div>
 
             {/* Conteneur principal avec les actions et la liste des quiz */}
             <div className="folder" style={{ display: 'flex', flexDirection: 'column' }}>