render style improve

src/App.css

@@ -327,3 +327,6 @@
   padding-bottom:35px;
   margin-bottom:35px;
 }
+.nextquestion_btn:hover{
+  background-color: var(--main) !important;
+}

src/Components/Test/Cleaver/Question.jsx

@@ -1,29 +1,22 @@
 import * as React from 'react';
 
-import Card from '@mui/material/Card';
-// import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-// import Button from '@mui/material/Button';
-// import Typography from '@mui/material/Typography';
-// import Avatar from '@mui/material/Avatar';
-import Checkbox from '@mui/material/Checkbox';
-// import { deepPurple } from '@mui/material/colors';
+import { 
+  Remove as RemoveIcon,
+  Add as AddIcon
+} from '@mui/icons-material';
 
-import List from '@mui/material/List';
-import Tooltip from '@mui/material/Tooltip';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
+import {
+  Card,CardContent,Avatar,Checkbox,List,Tooltip,
+  ListItem,ListItemButton,ListItemIcon,ListItemText
+} from '@mui/material'
 
+import { deepPurple } from '@mui/material/colors';
 
 function CheckboxexHeader(prop) {
   return (
     <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
       <ListItem>
+        <Avatar sx={{ bgcolor: deepPurple[500] }}>{prop.group}</Avatar>
         <ListItemButton role={undefined} dense>
           <ListItemText style={{marginRight :25, color:'silver'}} primary={prop.title} />
           <ListItemIcon>
@@ -62,9 +55,11 @@ function CheckboxesGroup(props) {
         return (
           <ListItem key={value.id}>
             <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
-
               <Tooltip title={value.decription} placement="top-start" arrow>
-                <ListItemText className="checkbox_label_question" id={labelId} primary={value.nombre} />
+                <ListItemText 
+                  sx={{ '& .MuiTypography-root' : {
+                      fontWeight:'bold'
+                  }}} className="checkbox_label_question" id={labelId} primary={value.nombre} />
               </Tooltip>
 
               <ListItemIcon>
@@ -93,40 +88,19 @@ function CheckboxesGroup(props) {
   );
 }
 
-export function Question({ quiz, group }) {
-  // console.log('quiz: ', quiz)
-  let { instrucciondepregunta, respuestas } = quiz
+export function Question({ quiz}) {
+  let { instrucciondepregunta, respuestas,id } = quiz
   return (
-
     <Card sx={{ minWidth: 275, margin: '30px !important', borderLeft: '5px solid var(--main)'}}>
       <CardContent>
 
-        {/*
-        <div sx={{ fontSize: 17 }}>
-          <div className="quiz_title_text">
-            <Avatar sx={{ bgcolor: deepPurple[500] }}>{id}</Avatar>
-            <Typography style={{ paddingLeft: 15 }}>
-              {instrucciondepregunta}
-            </Typography>
-          </div>
-        </div>
-      */}
-
         <div variant="body2">
           <List>
-            <CheckboxexHeader title={group + " - " + instrucciondepregunta}/>
+            <CheckboxexHeader  group={id} title={instrucciondepregunta}/>
           </List>
           <CheckboxesGroup quiz={respuestas} />
         </div>
       </CardContent>
-
-        {/*
-      <CardActions>
-        <Button variant="contained" size="small">Anterior</Button>
-        <Button variant="contained" size="small">Siguiente</Button>
-      </CardActions>
-      */}
-
     </Card>
   );
 }

src/Pages/Pruebas/Cleaver.jsx

@@ -1,13 +1,8 @@
 import React, { useMemo } from 'react'
-
 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
-
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Collapse from '@mui/material/Collapse';
-import List from '@mui/material/List';
+import { Box,Button, Collapse, List } from '@mui/material'
 import { TransitionGroup } from 'react-transition-group';
 import * as Scroll from 'react-scroll';
 
@@ -56,7 +51,7 @@ var scroll = Scroll.animateScroll;
             <TransitionGroup >
               {totalRespondidas.map((item) => (
                 <Collapse key={item.id} >
-                  <Question key={item.id} quiz={item} group={item.nombre}/>
+                  <Question key={item.id} id={item.id} quiz={item} />
                 </Collapse>
               ))
             }
@@ -66,6 +61,8 @@ var scroll = Scroll.animateScroll;
 
         <div className="question_btn">
         <Button
+          className="nextquestion_btn"
+          sx={{ backgroundColor: 'var(--main)' }}
           variant="contained"
           disabled={totalPreguntas.length <= 0}
           onClick={handleAddQuestion}