Cambios esteticos con imagenes como fondos y tambien estilos para algunos componentes

src/main/frontend/themes/docsign/styles.css

@@ -4,28 +4,94 @@
 
 
 /*°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ESTILOS PARA LAS TARJETAS °º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ */
-.card {
-    width: 250px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    padding: 16px;
-    text-align: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    margin: 10px;
-    transition: transform 0.2s;
+vaadin-combo-box::part(input-field) {
+    color: #691b31; /* Color del texto */
+    border: 1px solid #691b31; /* Color del borde */
+    background-color: white;
 }
 
-.card:hover {
-    transform: scale(1.05);
+vaadin-combo-box-item::part(checkmark)::before, vaadin-combo-box-item:hover
+{
+    color: #691b31;
 }
 
-.card-title {
-    font-size: 1.5em;
-    margin-bottom: 8px;
+/* (*)(*) (*)(*) INDICADOR DE CARGA DE LA APLICACION (*)(*) (*)(*) */
+.v-loading-indicator { /* Cambiar el color de la barra de carga que sale cuando la aplicacion esta cargando */
+    background: #691b31 !important;
+}
+
+/* (*)(*) (*)(*) ESTILOS PARA LA SIDEBAR (*)(*) (*)(*) */
+vaadin-side-nav-item[aria-current="page"]::part(content) {
+    color: white;
+}
+
+vaadin-side-nav-item:hover::part(content) {
+    background-color: #ddc9a3; /* Color de fondo al hacer hover*/
+    fill-opacity: 50%;
+    border-radius: 5px;
+}
+
+vaadin-side-nav-item::part(content) {
+    color: white; /* Color del texto deseado */
+}
+
+
+/*Estilos para los botones */
+vaadin-button[theme~="primary"] {
+    background-color: #691b31;
+}
+
+vaadin-button[theme~="tertiary"] {
+    background-color: white;
+}
+
+vaadin-button:not([theme]) {
+    color: #a02142;
+}
+
+vaadin-button[theme~="tertiary-inline"] {
+    color: white;
+    background-color: white;
+}
+
+vaadin-button:hover::before {
+    color: blue;
+}
+
+
+
+/*Estilos especificos para los CheckBox y RadioButtons */
+vaadin-checkbox[checked]::part(checkbox) {
+    background-color: #691b31; /* Cambia el color del CheckBox */
+}
+
+vaadin-checkbox-group::part(label), vaadin-radio-group::part(label) {
+    color: #691b31;
+}
+
+vaadin-radio-button[checked]::part(radio) {
+    background-color: #691b31;
+}
+
+
+
+/*Estilos para los campos de entrada texto y numeros*/
+vaadin-text-field::part(input-field) {
+    background-color: white;
+    border: 1px;
+    border: 1px solid #691b31;
+}
+
+vaadin-input-field-border-color {
+    color: #691b31;
+}
+
+vaadin-input-field-value-color {
+    color: #691b31;
+}
+
+vaadin-number-field::part(input-field) {
+    background-color: white;
+    border: 1px solid #691b31;
 }
 
-.card-description {
-    font-size: 1em;
-    color: #666;
-}

src/main/java/mx/gob/jumapacelaya/views/CuestionarioView.java

@@ -96,6 +96,10 @@ public class CuestionarioView extends VerticalLayout implements BeforeEnterObser
 
         Span fecha = new Span();
         fecha.setText("Celaya, Guanajuato a " + fechaFormateada);
+        fecha.getStyle().set("border", "1px solid #ccc");
+        fecha.getStyle().set("border-radius", "8px");
+        fecha.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        fecha.getStyle().set("background-color", "#fff");
 
         Image logoJmpa = new Image("images/LOGO_24'27.PNG", "JUMAPA logo");
         logoJmpa.setWidth("110px");
@@ -115,6 +119,10 @@ public class CuestionarioView extends VerticalLayout implements BeforeEnterObser
 
         H4 lblTitulo = new H4();
         lblTitulo.setText("VALORACIÓN DE CONDICIÓN SOCIOECONÓMICA DE USUARIOS DOMÉSTICOS");
+        lblTitulo.getStyle().set("border", "1px solid #ccc");
+        lblTitulo.getStyle().set("border-radius", "8px");
+        lblTitulo.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblTitulo.getStyle().set("background-color", "#fff");
 
 
         tituloLayout.add(lblTitulo);
@@ -139,38 +147,59 @@ public class CuestionarioView extends VerticalLayout implements BeforeEnterObser
         // Contenedoreres para cada bloque de preguntas
         HorizontalLayout contenedor1 = new HorizontalLayout();
         contenedor1.setWidthFull();
-        contenedor1.setSpacing(false);
-        contenedor1.getStyle().set("border", "1px solid black");
+        //contenedor1.setSpacing(false);
+        contenedor1.getStyle().set("border", "1px solid #ccc");
+        contenedor1.getStyle().set("border-radius", "8px");
+        contenedor1.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor1.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor2 = new HorizontalLayout();
         contenedor2.setWidthFull();
         contenedor2.setSpacing(false);
-        contenedor2.getStyle().set("border", "1px solid black");
+        contenedor2.getStyle().set("border", "1px solid #ccc");
+        contenedor2.getStyle().set("border-radius", "8px");
+        contenedor2.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor2.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor3 = new HorizontalLayout();
         contenedor3.setWidthFull();
         contenedor3.setSpacing(false);
-        contenedor3.getStyle().set("border", "1px solid black");
+        contenedor3.getStyle().set("border", "1px solid #ccc");
+        contenedor3.getStyle().set("border-radius", "8px");
+        contenedor3.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor3.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor4 = new HorizontalLayout();
         contenedor4.setWidthFull();
         contenedor4.setSpacing(false);
-        contenedor4.getStyle().set("border", "1px solid black");
+        contenedor4.getStyle().set("border", "1px solid #ccc");
+        contenedor4.getStyle().set("border-radius", "8px");
+        contenedor4.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor4.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor5 = new HorizontalLayout();
         contenedor5.setWidthFull();
         contenedor5.setSpacing(false);
-        contenedor5.getStyle().set("border", "1px solid black");
+        contenedor5.getStyle().set("border", "1px solid #ccc");
+        contenedor5.getStyle().set("border-radius", "8px");
+        contenedor5.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor5.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor6 = new HorizontalLayout();
         contenedor6.setWidthFull();
         contenedor6.setSpacing(false);
-        contenedor6.getStyle().set("border", "1px solid black");
+        contenedor6.getStyle().set("border", "1px solid #ccc");
+        contenedor6.getStyle().set("border-radius", "8px");
+        contenedor6.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor6.getStyle().set("background-color", "#fff");
 
         HorizontalLayout contenedor7 = new HorizontalLayout();
         contenedor7.setWidthFull();
         contenedor7.setSpacing(false);
-        contenedor7.getStyle().set("border", "1px solid black");
+        contenedor7.getStyle().set("border", "1px solid #ccc");
+        contenedor7.getStyle().set("border-radius", "8px");
+        contenedor7.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        contenedor7.getStyle().set("background-color", "#fff");
 
         // Contenedor para los resultados
         VerticalLayout resultadosLayout = new VerticalLayout();

src/main/java/mx/gob/jumapacelaya/views/HomeView.java

@@ -72,6 +72,10 @@ public class HomeView extends VerticalLayout {
         // Subtitulo
         VerticalLayout subTitleLayout = new VerticalLayout();
         H3 lblSubTitle = new H3(fechaFormat);
+        lblSubTitle.getStyle().set("border", "1px solid #ccc");
+        lblSubTitle.getStyle().set("border-radius", "8px");
+        lblSubTitle.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblSubTitle.getStyle().set("background-color", "#fff");
         subTitleLayout.setAlignItems(Alignment.END);
         subTitleLayout.setPadding(false);
         subTitleLayout.setMargin(false);
@@ -81,6 +85,10 @@ public class HomeView extends VerticalLayout {
         // Titulo Principal
         VerticalLayout titleLayout = new VerticalLayout();
         H1 lblTitle = new H1("App para firma de formatos digitales");
+        lblTitle.getStyle().set("border", "1px solid #ccc");
+        lblTitle.getStyle().set("border-radius", "8px");
+        lblTitle.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblTitle.getStyle().set("background-color", "#fff");
         titleLayout.setAlignItems(Alignment.CENTER);
         titleLayout.setMargin(false);
         titleLayout.add(lblTitle, subTitleLayout);

src/main/java/mx/gob/jumapacelaya/views/MainLayout.java

@@ -2,6 +2,7 @@ package mx.gob.jumapacelaya.views;
 
 import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Footer;
 import com.vaadin.flow.component.html.H1;
 import com.vaadin.flow.component.html.Header;
@@ -22,7 +23,7 @@ import org.vaadin.lineawesome.LineAwesomeIcon;
  */
 @Layout
 @AnonymousAllowed
-//@CssImport("./themes/docsign/styles.css")
+@CssImport("./themes/docsign/styles.css")
 public class MainLayout extends AppLayout {
 
     private H1 viewTitle;
@@ -31,6 +32,8 @@ public class MainLayout extends AppLayout {
         setPrimarySection(Section.DRAWER);
         addDrawerContent();
         addHeaderContent();
+        this.getStyle().set("background-image", "url('images/fondopay_.png')");
+        this.getStyle().set("background-size", "cover");
     }
 
     private void addHeaderContent() {
@@ -49,6 +52,7 @@ public class MainLayout extends AppLayout {
         Header header = new Header(appName);
 
         Scroller scroller = new Scroller(createNavigation());
+        scroller.getStyle().set("background-image", "url('images/fondopay.png')");
 
         addToDrawer(header, scroller, createFooter());
     }

src/main/java/mx/gob/jumapacelaya/views/SolicitudDescView.java

@@ -6,6 +6,8 @@ import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.checkbox.CheckboxGroup;
 import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.html.*;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -78,9 +80,17 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
 
         Span fecha = new Span();
         fecha.setText("Celaya, Guanajuato a " + fechaFormateada);
+        fecha.getStyle().set("border", "1px solid #ccc");
+        fecha.getStyle().set("border-radius", "8px");
+        fecha.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        fecha.getStyle().set("background-color", "#fff");
 
         H2 presolicitud = new H2();
         presolicitud.setText("PreSolicitud");
+        presolicitud.getStyle().set("border", "1px solid #ccc");
+        presolicitud.getStyle().set("border-radius", "8px");
+        presolicitud.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        presolicitud.getStyle().set("background-color", "#fff");
 
         encabezadoLayout.add(fecha);
         encabezadoLayout.addAndExpand(new HorizontalLayout());
@@ -95,6 +105,10 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
 
         H2 lblTitulo = new H2();
         lblTitulo.setText("JUNTA MUNICIPAL DE AGUA POTABLE Y ALCANTARILLADO DE CELAYA, GTO");
+        lblTitulo.getStyle().set("border", "1px solid #ccc");
+        lblTitulo.getStyle().set("border-radius", "8px");
+        lblTitulo.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblTitulo.getStyle().set("background-color", "#fff");
 
 
         tituloLayout.add(lblTitulo);
@@ -115,9 +129,10 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
         Span labelTexto = new Span();
         labelTexto.setText("Prepara la solicitud:");
 
-        Button btnCierraSesion = new Button("Cerrar Sesion");
+        Button btnCierraSesion = new Button("Cerrar Sesion", VaadinIcon.SIGN_OUT.create());
         btnCierraSesion.addThemeVariants(ButtonVariant.LUMO_ERROR);
         btnCierraSesion.addThemeVariants(ButtonVariant.LUMO_SMALL);
+        btnCierraSesion.getStyle().set("background-color", "#fff");
 
         btnCierraSesion.addClickListener(event -> {
             UI.getCurrent().getSession().setAttribute("usuarioSesion", null);
@@ -136,7 +151,7 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
         NumberField predioTxt = new NumberField("Predio:");
 
         TextField solicitante = new TextField("Solicitante:");
-        solicitante.setWidth("30em");
+        solicitante.setWidthFull();
 
         TextField txtParentesco = new TextField("Parentesco:");
 
@@ -149,10 +164,11 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
         ComboBox<String> cmbTipoIdentificacion = new ComboBox<>();
         cmbTipoIdentificacion.setPlaceholder("Selecciona una opcion");
         cmbTipoIdentificacion.setItems("INE/IFE", "Lic. de conducir", "Pasaporte", "Cedula profesional", "Visa", "Otro...");
+        cmbTipoIdentificacion.setWidthFull();
 
         TextField numIdentificacion = new TextField();
         numIdentificacion.setPlaceholder("No. identificacion");
-        numIdentificacion.setWidth("400px");
+        numIdentificacion.setWidthFull();
         numIdentificacion.setMaxLength(40);
 
         Button btnVerSolicitud = new Button("Ver Solicitud");
@@ -243,9 +259,9 @@ public class SolicitudDescView extends VerticalLayout implements BeforeEnterObse
         formularioLayout.add(hltSesion, labelTexto,
                 tipoSolicitudGroup, predioTxt,
                 solicitante, identificacionTexto,
-                identificacionLayout, txtParentesco);
+                identificacionLayout, txtParentesco, btnVerSolicitud);
         formularioLayout.setSpacing(false);
-        this.add(formularioLayout, btnVerSolicitud);
+        this.add(formularioLayout);
     }
 
     /*

src/main/java/mx/gob/jumapacelaya/views/tiposSolicitud/DescEspView.java

@@ -59,6 +59,10 @@ public class DescEspView extends VerticalLayout implements BeforeEnterObserver {
         {
             presolicitud.setText("PreSolicitud");
             presolicitud.getStyle().set("color", "black");
+            presolicitud.getStyle().set("border", "1px solid #ccc");
+            presolicitud.getStyle().set("border-radius", "8px");
+            presolicitud.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+            presolicitud.getStyle().set("background-color", "#fff");
         }
 
         // Verificar que los datos estén disponibles
@@ -88,8 +92,14 @@ public class DescEspView extends VerticalLayout implements BeforeEnterObserver {
             System.out.println(userPadDescBase64);
             UI.getCurrent().navigate("cuestionario");
         });
+        btnGuardarSolicitud.getStyle().set("border", "1px solid #ccc");
+        btnGuardarSolicitud.getStyle().set("border-radius", "8px");
+        btnGuardarSolicitud.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        btnGuardarSolicitud.getStyle().set("background-color", "#fff");
+        btnGuardarSolicitud.addThemeVariants(ButtonVariant.LUMO_SUCCESS);
 
         this.add(btnGuardarSolicitud);
+        this.setAlignItems(Alignment.CENTER);
     }
 
     private void cabezera() {
@@ -105,6 +115,10 @@ public class DescEspView extends VerticalLayout implements BeforeEnterObserver {
 
         Span fecha = new Span();
         fecha.setText("Celaya, Guanajuato a " + fechaFormateada);
+        fecha.getStyle().set("border", "1px solid #ccc");
+        fecha.getStyle().set("border-radius", "8px");
+        fecha.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        fecha.getStyle().set("background-color", "#fff");
 
         encabezadoLayout.add(fecha);
         encabezadoLayout.addAndExpand(new HorizontalLayout());
@@ -119,9 +133,17 @@ public class DescEspView extends VerticalLayout implements BeforeEnterObserver {
 
         H2 lblTitulo = new H2();
         lblTitulo.setText("JUNTA MUNICIPAL DE AGUA POTABLE Y ALCANTARILLADO DE CELAYA, GTO");
+        lblTitulo.getStyle().set("border", "1px solid #ccc");
+        lblTitulo.getStyle().set("border-radius", "8px");
+        lblTitulo.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblTitulo.getStyle().set("background-color", "#fff");
 
         H3 lblSubtitulo = new H3();
         lblSubtitulo.setText("A QUIEN CORRESPONDA");
+        lblSubtitulo.getStyle().set("border", "1px solid #ccc");
+        lblSubtitulo.getStyle().set("border-radius", "8px");
+        lblSubtitulo.getStyle().set("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)");
+        lblSubtitulo.getStyle().set("background-color", "#fff");
 
 
         tituloLayout.add(lblTitulo, lblSubtitulo);