Skip to content

Cambios de Gerald #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fchaconb merged 3 commits into from
Nov 3, 2024
Merged

Cambios de Gerald #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0e90365
Se ponen nuevas funciones a los dashboards
GeraldDM21 Nov 3, 2024
90517c2
Merge branch 'master' into Gerald
GeraldDM21 Nov 3, 2024
aeca159
Merge branch 'master' into Gerald
fchaconb Nov 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,13 @@ function App() {
{/* Funcionalidades para usuario final */}
<Route path="/ver-multas" element={<ProtectedRoute role="UsuarioFinal"><VerMultas /></ProtectedRoute>} />
<Route path="/iniciar-disputa" element={<ProtectedRoute role="UsuarioFinal"><CreacionDisputa /></ProtectedRoute>} />

{/* Funcionalidades para juez */}
<Route path="/ver-disputas" element={<ProtectedRoute role="Juez"><VerDisputas /></ProtectedRoute>} /> {/* Ver disputas */}

{/* Funcionalidades compartidas entre usuario final y juez */}
<Route path="/ver-disputas" element={<ProtectedRoute role={["Juez", "UsuarioFinal"]}><VerDisputas /></ProtectedRoute>} /> {/* Ver disputas */}

{/* Funcionalidades exclusivas para juez */}
<Route path="/resolver-disputas" element={<ProtectedRoute role="Juez"><ResolverDisputas /></ProtectedRoute>} /> {/* Resolver disputas */}

</Routes>
</Router>
);
Expand Down
137 changes: 71 additions & 66 deletions src/Styles/GestionRoles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,117 +9,122 @@
}

/* Fondo general */
.gestion-roles-background {
background: var(--timberwolf);
.roles-background {
background: linear-gradient(135deg, var(--payne-gray) 35%, var(--caledon) 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.shape-background {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--cadet-gray) 25%, var(--caledon) 75%);
z-index: 0;
padding: 20px;
box-sizing: border-box;
}

/* Contenedor principal */
.gestion-roles-container {
.roles-container {
background-color: var(--white);
width: 400px;
padding: 30px;
border-radius: 16px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
width: 600px;
text-align: center;
position: relative;
z-index: 1;
}

/* Icono de encabezado */
.header-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}

/* Título */
.gestion-roles-container h2 {
.roles-container h2 {
color: var(--payne-gray);
font-size: 24px;
margin-bottom: 20px;
}

/* Formulario */
.input-icon {
position: relative;
margin-bottom: 20px;
/* Mensaje de error y éxito */
.error-message {
color: #d9534f;
font-weight: bold;
margin-bottom: 10px;
}

.input-icon .icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--payne-gray);
.success-message {
color: #5cb85c;
font-weight: bold;
margin-bottom: 10px;
}

.input-icon input {
padding-left: 40px;
width: 100%;
height: 40px;
border-radius: 8px;
/* Formulario de agregar rol */
.form-role {
display: flex;
align-items: center; /* Centrado vertical */
gap: 10px;
margin-bottom: 20px;
}

.form-role input {
flex: 1; /* Hace que el input ocupe el espacio disponible */
padding: 10px;
border: 1px solid var(--cadet-gray);
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
}

/* Botón de agregar */
.btn-add {
.add-button {
background-color: var(--caledon);
border: none;
color: var(--white);
width: 100%;
padding: 12px;
font-size: 18px;
font-weight: bold;
padding: 10px 15px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.3s ease;
}

.btn-add:hover {
background-color: #9cb292;
.add-button:hover {
background-color: var(--cadet-gray);
}

/* Lista de roles */
.lista-roles {
list-style: none;
padding: 0;
/* Tabla de roles */
.roles-table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
}

.role-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
.roles-table th, .roles-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--cadet-gray);
color: var(--payne-gray);
}

.delete-icon {
color: #f76c5e;
cursor: pointer;
.roles-table th {
background-color: var(--timberwolf);
font-weight: bold;
}

.delete-icon:hover {
color: #e05a4f;
.roles-table tr:nth-child(even) {
background-color: var(--lavender-blush);
}

/* Mensaje de error */
.text-danger {
color: #f76c5e;
margin-top: 10px;
/* Botón de eliminar en la tabla */
.delete-button {
background-color: var(--lavender-blush);
color: var(--payne-gray);
padding: 5px 10px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.3s ease;
}

.delete-button:hover {
background-color: var(--caledon);
color: var(--white);
}
94 changes: 49 additions & 45 deletions src/Styles/GestionUsuariosAdmin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* Paleta de colores */
:root {
--payne-gray: #546A76;
--cadet-gray: #88A0A8;
Expand All @@ -8,69 +7,59 @@
--white: #FFFFFF;
}

/* Fondo general */
.crear-usuario-background {
background: var(--timberwolf);
background: linear-gradient(135deg, var(--payne-gray) 35%, var(--caledon) 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
position: relative;
}

.shape-background {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--cadet-gray) 25%, var(--caledon) 75%);
z-index: 0;
}

/* Contenedor principal */
.crear-usuario-container {
display: flex;
gap: 30px;
background-color: var(--white);
width: 400px; /* Aumentar el ancho para dar más espacio */
width: 90%;
max-width: 1200px;
padding: 30px;
border-radius: 16px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
z-index: 1;
}

/* Icono de encabezado */
.profile-image {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
/* Formularios y tablas */
.formulario-container,
.tabla-usuarios-container {
flex: 1;
}

/* Título */
/* Títulos */
.crear-usuario-container h2 {
color: var(--payne-gray);
font-size: 24px;
margin-bottom: 20px;
}

/* Campos de entrada con iconos */
/* Campo de entrada con icono */
.input-icon {
position: relative;
margin-bottom: 15px;
}

.input-icon .icon {
position: absolute;
left: 12px; /* Ajuste del icono más a la izquierda */
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--payne-gray);
font-size: 16px; /* Reducir ligeramente el tamaño del icono */
}

.input-icon input,
.input-icon select {
padding-left: 50px; /* Aumentar para dejar suficiente espacio entre el icono y el texto */
padding-left: 40px;
width: 100%;
height: 40px;
border-radius: 8px;
Expand All @@ -79,19 +68,7 @@
box-sizing: border-box;
}

/* Estilo específico para el select */
.input-icon select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
}

.input-icon select::-ms-expand {
display: none;
}

/* Botón de agregar usuario */
/* Botones */
.btn-submit {
background-color: var(--caledon);
border: none;
Expand All @@ -105,12 +82,39 @@
transition: background-color 0.3s ease;
}

.btn-submit:hover {
background-color: #9cb292;
.delete-button {
background-color: var(--lavender-blush);
color: var(--payne-gray);
padding: 5px 10px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}

.delete-button:hover {
background-color: var(--caledon);
color: var(--white);
}

/* Tabla de usuarios */
.usuarios-table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}

.usuarios-table th,
.usuarios-table td {
padding: 12px;
border-bottom: 1px solid var(--cadet-gray);
text-align: left;
}

.usuarios-table th {
background-color: var(--timberwolf);
}

/* Mensaje de error */
.message {
color: #f76c5e;
margin-top: 10px;
.usuarios-table tr:nth-child(even) {
background-color: var(--lavender-blush);
}
Loading