Unificación de diseño y mejora de diseños de interfaz existentes

[Aval0G]

✨ [Unificación de Diseño y Mejora de Interfaces]
🔍 Descripción
Se trabajará en la unificación y mejora de las interfaces de usuario para los módulos de Listado de Clientes, Renovación de Membresía, Nuevo Cliente y Modificar Cliente en la aplicación Blazor. El objetivo es proporcionar una experiencia de usuario más intuitiva y visualmente consistente, que facilite la navegación y el uso eficiente del sistema.

💡 Propuesta de Mejoras
Estilos de Botones (colores de Bootstrap):

Botones de Acción:
Guardar o Confirmar: Usar el botón btn-primary de Bootstrap para acciones de guardado o confirmación en los formularios de Nuevo Cliente, Modificar Cliente y Renovación de Membresía.
Modificar: Emplear el botón btn-warning en el listado de clientes para distinguir claramente esta opción.
Eliminar: Usar btn-danger para las opciones de eliminación en los registros, enfatizando que es una acción irreversible.
Cancelar o Volver: Para acciones de cancelación, aplicar btn-secondary, lo cual permite que este botón tenga un color neutro y menos llamativo.
Diseño y Organización del Formulario:

Formulario Vertical con Espaciado Uniforme: Mantener todos los campos alineados verticalmente con suficiente espacio entre ellos, para evitar una apariencia sobrecargada. Las etiquetas y campos de entrada deben tener una separación uniforme y clara.
Etiquetas y Ayudas Visuales: Usar etiquetas consistentes y, cuando sea necesario, añadir tooltips para guiar al usuario en la entrada de datos, especialmente en campos como el teléfono de emergencia y la fecha de registro.

Mensajes de Error: Colocar mensajes de error con el color text-danger para mejorar la visibilidad de las validaciones, permitiendo al usuario corregir cualquier error de entrada de datos.
Tablas para Listado de Clientes:

Tabla Responsiva: Utilizar una tabla de Bootstrap (table-responsive table-bordered table-hover) para permitir que el listado de clientes se vea claramente en distintos dispositivos, especialmente en pantallas más pequeñas.

Encabezados y Color de Fondo: Resaltar los encabezados de la tabla con table-dark o table-primary para diferenciar claramente las secciones de la tabla y mejorar la visibilidad de las columnas.

Botones en Cada Fila: Colocar botones de Modificar (color btn-warning) y Eliminar (btn-danger) al final de cada fila, proporcionando acceso directo a estas acciones para cada cliente en el listado.
Consistencia en el Diseño (Color y Tipografía):

Paleta de Colores: Utilizar los colores de Bootstrap para mantener la coherencia en todos los módulos.

Tipografía: Utilizar una fuente simple y legible, como Open Sans, para asegurar claridad en todos los componentes de la interfaz.
Estructura de Interfaz para una Navegación Fácil:

Encabezado Principal: Colocar el título de cada página, como "Listado de Clientes" o "Renovación de Membresía", dentro de un encabezado

con el color text-primary para una identificación rápida del módulo.

Organización de Contenido: En cada interfaz, agrupar botones de acción (como Guardar, Cancelar, etc.) al final del formulario o componente de manera consistente.

📝 Notas adicionales
Información extra o referencias útiles.