custom fixes

src/App.css

@@ -42,8 +42,10 @@
 }
 
 .Mui-selected{
-    color : #FFF !important;
-    background-color : #fd4b4b !important;
+    /* se desahilito para la tabla de password */
+    /* color : #FFF !important; */
+    /* background-color : #fd4b4b !important; */
+    /* background-color : rgba(253, 75, 75, 0.1) !important; */
 }
 
 .Mui-selected > .MuiListItemIcon-root{
@@ -203,4 +205,3 @@
     padding-top: 10px;
     align-items: baseline !important;
 }
-

src/Components/Password/config.js

@@ -29,7 +29,9 @@ new Array(50).fill(50).forEach( (_,i) => {
 export const action_icon =  {
     color: '#ec5e69',
     fontSize: "20",
-    padding:1
+    padding:1, 
+    border : "1px solid red",
+    margin :5
 }
 
 export const TableEncabezadoOperation = (props) => {

src/Pages/Contras.jsx

@@ -1,12 +1,8 @@
 import * as React from 'react';
 
-import {
-    EditSharp,
-    MailSharp,
-} from '@mui/icons-material'
+import { EditSharp, MailSharp } from '@mui/icons-material'
 
 import { 
-    // descendingComparator,
     rows,
     action_icon,
     Comparar,
@@ -20,12 +16,8 @@ import {
     TableRow, TablePagination,
     Paper, Box, Switch, FormControlLabel,
     Checkbox,
-    // TableSortLabel,TableHead,Card
 } from '@mui/material';
 
-import { Row, Col, Container } from 'react-bootstrap';
-
-
 export function Contras() {
 
     const [order, setOrder] = React.useState('asc');
@@ -43,20 +35,18 @@ export function Contras() {
 
     const SeleccionarTodos = (event) => {
         if (event.target.checked) {
-            const newSelecteds = rows.map( (n) => n.name);
+            const newSelecteds = rows.map( (n) => n.pass);
             setSelected(newSelecteds);
             return;
         }
         setSelected([]);
     };
 
-    const Seleccionar = (event, name) => {
+    const Seleccionar = (_event, name) => {
 
         const selectedIndex = selected.indexOf(name);
         let newSelected = [];
 
-        console.log(name, selectedIndex)
-
         if (selectedIndex === -1) {
             newSelected = newSelected.concat(selected, name);
         } else if (selectedIndex === 0) {
@@ -93,117 +83,113 @@ export function Contras() {
     return (
         <div className="content-section">
             <div className="main">
-                <Container>
-                    <Row>
-                        <Col>
-                            <Box sx={{ width: '100%' }}>
-                                <Paper sx={{ width: '100%', mb: 2 }}>
-
-                                    <TableEncabezadoOperation numSelected={selected.length} />
-
-                                    <TableContainer>
-
-                                        <Table
-                                            sx={{ minWidth: 750 }}
-                                            aria-labelledby="tableTitle"
-                                            size={dense ? 'small' : 'medium'} 
-                                        >
-
-                                            <EnhancedTableHead
-                                                numSelected={selected.length}
-                                                order={order}
-                                                orderBy={orderBy}
-                                                onSelectAllClick={SeleccionarTodos}
-                                                onRequestSort={CambiarTipoOrden}
-                                                rowCount={rows.length} />
-
-
-                                            <TableBody>
-                                                {Cuerpo(rows, Comparar(order, orderBy))
-                                                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                                .map( (row, index) => {
-
-                                                    const isItemSelected = isSelected(row.pass);
-                                                    const labelId = `enhanced-table-checkbox-${index}`;
-
-                                                    return (
-                                                        <TableRow
-                                                            hover
-                                                            onClick={(event) => Seleccionar(event, row.pass)}
-                                                            // onClick={(event) => console.log(event)}
-                                                            role="checkbox"
-                                                            aria-checked={isItemSelected}
-                                                            tabIndex={-1}
-                                                            key={row.pass}
-                                                            selected={isItemSelected}
-                                                        >
-                                                            <TableCell padding="checkbox">
-                                                                <Checkbox
-                                                                    color="primary"
-                                                                    checked={isItemSelected}
-                                                                    inputProps={{
-                                                                        'aria-labelledby': labelId,
-                                                                    }}
-                                                                    />
-                                                            </TableCell>
-                                                            <TableCell
-                                                                component="th"
-                                                                id={labelId}
-                                                                scope="row"
-                                                                padding="none"
-                                                            >
-                                                                {row.pass}
-                                                            </TableCell>
-                                                            <TableCell align="right">{row.nivel}</TableCell>
-                                                            <TableCell align="right">{row.puesto}</TableCell>
-                                                            <TableCell align="right">{row.cui}</TableCell>
-                                                            <TableCell align="right">{row.uso}</TableCell>
-                                                            <TableCell align="right">{row.picture}</TableCell>
-                                                            <TableCell align="right">{row.cv}</TableCell>
-                                                            <TableCell align="right">{row.replic}</TableCell>
-                                                            <TableCell align="center">
-                                                                <EditSharp  style={action_icon} />
-                                                                <MailSharp style={action_icon}/>
-                                                            </TableCell>
-                                                        </TableRow>
-                                                    );
-                                                })}
-                                                {emptyRows > 0 && (
-                                                    <TableRow
-                                                        style={{
-                                                            height: (dense ? 33 : 53) * emptyRows,
+                <Box sx={{ width: '100%' }}>
+                    <Paper sx={{ width: '100%', mb: 2 }}>
+
+                        <TableEncabezadoOperation numSelected={selected.length} />
+
+                        <TableContainer>
+
+                            <Table
+                                sx={{ minWidth: 750 }}
+                                aria-labelledby="Contrasenas"
+                                size={dense ? 'small' : 'medium'} 
+                            >
+
+                                <EnhancedTableHead
+                                    numSelected={selected.length}
+                                    order={order}
+                                    orderBy={orderBy}
+                                    onSelectAllClick={SeleccionarTodos}
+                                    onRequestSort={CambiarTipoOrden}
+                                    rowCount={rows.length} />
+
+
+                                <TableBody>
+                                    {Cuerpo(rows, Comparar(order, orderBy))
+                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                    .map( (row, index) => {
+
+                                        const isItemSelected = isSelected(row.pass);
+                                        const labelId = `enhanced-table-checkbox-${index}`;
+
+                                        return (
+                                            <TableRow
+                                                hover
+                                                onClick={(event) => Seleccionar(event, row.pass)}
+                                                // onClick={(event) => console.log(event)}
+                                                role="checkbox"
+                                                aria-checked={isItemSelected}
+                                                tabIndex={-1}
+                                                key={row.pass}
+                                                selected={isItemSelected}
+                                            >
+                                                <TableCell padding="checkbox">
+                                                    <Checkbox
+                                                        color="primary"
+                                                        checked={isItemSelected}
+                                                        inputProps={{
+                                                            'aria-labelledby': labelId,
                                                         }}
-                                                    >
-                                                        <TableCell colSpan={6} />
-                                                    </TableRow>
-                                                )}
-                                            </TableBody>
-                                        </Table>
-                                    </TableContainer>
-
-                                    <TablePagination
-                                        rowsPerPageOptions={[5, 10, 25]}
-                                        component="div"
-                                        count={rows.length}
-                                        rowsPerPage={rowsPerPage}
-                                        page={page}
-                                        onPageChange={handleChangePage}
-                                        onRowsPerPageChange={handleChangeRowsPerPage}
-                                    />
-
-
-                                </Paper>
-
-                                <FormControlLabel
-                                    control={<Switch checked={dense} onChange={handleChangeDense} />}
-                                    label="Comprimir"
-                                />
-
-                            </Box>
-                        </Col>
-                    </Row>
-                </Container>
+                                                        />
+                                                </TableCell>
+                                                <TableCell
+                                                    component="th"
+                                                    id={labelId}
+                                                    scope="row"
+                                                    padding="none"
+                                                >
+                                                    {row.pass}
+                                                </TableCell>
+                                                <TableCell align="right">{row.nivel}</TableCell>
+                                                <TableCell align="right">{row.puesto}</TableCell>
+                                                <TableCell align="right">{row.cui}</TableCell>
+                                                <TableCell align="right">{row.uso}</TableCell>
+                                                <TableCell align="right">{row.picture}</TableCell>
+                                                <TableCell align="right">{row.cv}</TableCell>
+                                                <TableCell align="right">{row.replic}</TableCell>
+                                                <TableCell align="center">
+                                                    <EditSharp style={action_icon} />
+                                                    <MailSharp style={action_icon}/>
+                                                </TableCell>
+                                            </TableRow>
+                                        );
+                                    })}
+                                    {emptyRows > 0 && (
+                                        <TableRow
+                                            style={{
+                                                height: (dense ? 33 : 53) * emptyRows,
+                                            }}
+                                        >
+                                            <TableCell colSpan={6} />
+                                        </TableRow>
+                                    )}
+                                </TableBody>
+                            </Table>
+                        </TableContainer>
+
+                        <TablePagination
+                            rowsPerPageOptions={[5, 10, 25]}
+                            component="div"
+                            count={rows.length}
+                            rowsPerPage={rowsPerPage}
+                            page={page}
+                            onPageChange={handleChangePage}
+                            onRowsPerPageChange={handleChangeRowsPerPage}
+                            labelRowsPerPage={"Mostrar: "}
+                            />
+
+
+                    </Paper>
+
+                    <FormControlLabel
+                        control={<Switch checked={dense} onChange={handleChangeDense} />}
+                        label="Comprimir"
+                        />
+
+                </Box>
             </div>
         </div>
     );
+
 }