Se movieron todos los estilos a clases de css en vez de seguir estando en el estilo en la propia linea del codigo

package.json

@@ -0,0 +1,111 @@
+{
+  "name": "no-name",
+  "license": "UNLICENSED",
+  "type": "module",
+  "dependencies": {
+    "@polymer/polymer": "3.5.1",
+    "@vaadin/bundles": "24.4.5",
+    "@vaadin/common-frontend": "0.0.19",
+    "@vaadin/polymer-legacy-adapter": "24.4.5",
+    "@vaadin/react-components": "24.4.5",
+    "@vaadin/react-components-pro": "24.4.5",
+    "@vaadin/router": "1.7.5",
+    "@vaadin/vaadin-development-mode-detector": "2.0.7",
+    "@vaadin/vaadin-lumo-styles": "24.4.5",
+    "@vaadin/vaadin-material-styles": "24.4.5",
+    "@vaadin/vaadin-themable-mixin": "24.4.5",
+    "@vaadin/vaadin-usage-statistics": "2.1.2",
+    "construct-style-sheets-polyfill": "3.1.0",
+    "date-fns": "2.29.3",
+    "lit": "3.1.4",
+    "proj4": "2.11.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.23.1"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "7.24.7",
+    "@rollup/plugin-replace": "5.0.7",
+    "@rollup/pluginutils": "5.1.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@vitejs/plugin-react": "4.3.1",
+    "async": "3.2.5",
+    "glob": "10.4.1",
+    "rollup-plugin-brotli": "3.1.0",
+    "rollup-plugin-visualizer": "5.12.0",
+    "strip-css-comments": "5.0.0",
+    "transform-ast": "2.4.4",
+    "typescript": "5.4.5",
+    "vite": "5.3.3",
+    "vite-plugin-checker": "0.6.4",
+    "workbox-build": "7.1.1",
+    "workbox-core": "7.1.0",
+    "workbox-precaching": "7.1.0"
+  },
+  "vaadin": {
+    "dependencies": {
+      "@polymer/polymer": "3.5.1",
+      "@vaadin/bundles": "24.4.5",
+      "@vaadin/common-frontend": "0.0.19",
+      "@vaadin/polymer-legacy-adapter": "24.4.5",
+      "@vaadin/react-components": "24.4.5",
+      "@vaadin/react-components-pro": "24.4.5",
+      "@vaadin/router": "1.7.5",
+      "@vaadin/vaadin-development-mode-detector": "2.0.7",
+      "@vaadin/vaadin-lumo-styles": "24.4.5",
+      "@vaadin/vaadin-material-styles": "24.4.5",
+      "@vaadin/vaadin-themable-mixin": "24.4.5",
+      "@vaadin/vaadin-usage-statistics": "2.1.2",
+      "construct-style-sheets-polyfill": "3.1.0",
+      "date-fns": "2.29.3",
+      "lit": "3.1.4",
+      "proj4": "2.11.0",
+      "react": "18.3.1",
+      "react-dom": "18.3.1",
+      "react-router-dom": "6.23.1"
+    },
+    "devDependencies": {
+      "@babel/preset-react": "7.24.7",
+      "@rollup/plugin-replace": "5.0.7",
+      "@rollup/pluginutils": "5.1.0",
+      "@types/react": "18.3.3",
+      "@types/react-dom": "18.3.0",
+      "@vitejs/plugin-react": "4.3.1",
+      "async": "3.2.5",
+      "glob": "10.4.1",
+      "rollup-plugin-brotli": "3.1.0",
+      "rollup-plugin-visualizer": "5.12.0",
+      "strip-css-comments": "5.0.0",
+      "transform-ast": "2.4.4",
+      "typescript": "5.4.5",
+      "vite": "5.3.3",
+      "vite-plugin-checker": "0.6.4",
+      "workbox-build": "7.1.1",
+      "workbox-core": "7.1.0",
+      "workbox-precaching": "7.1.0"
+    },
+    "hash": "f06d8005ffcc9d94c8e92e1b762dd0aac0e0103be3ed4f2479d1479a7d1846ec"
+  },
+  "overrides": {
+    "@vaadin/bundles": "$@vaadin/bundles",
+    "@vaadin/polymer-legacy-adapter": "$@vaadin/polymer-legacy-adapter",
+    "@vaadin/vaadin-development-mode-detector": "$@vaadin/vaadin-development-mode-detector",
+    "@vaadin/router": "$@vaadin/router",
+    "@vaadin/vaadin-usage-statistics": "$@vaadin/vaadin-usage-statistics",
+    "@vaadin/react-components": "$@vaadin/react-components",
+    "@vaadin/react-components-pro": "$@vaadin/react-components-pro",
+    "@vaadin/common-frontend": "$@vaadin/common-frontend",
+    "react-dom": "$react-dom",
+    "construct-style-sheets-polyfill": "$construct-style-sheets-polyfill",
+    "react-router-dom": "$react-router-dom",
+    "lit": "$lit",
+    "@polymer/polymer": "$@polymer/polymer",
+    "react": "$react",
+    "date-fns": "$date-fns",
+    "proj4": "$proj4",
+    "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
+    "@vaadin/vaadin-lumo-styles": "$@vaadin/vaadin-lumo-styles",
+    "@vaadin/vaadin-material-styles": "$@vaadin/vaadin-material-styles"
+  }
+}

src/main/bundles/README.md

@@ -0,0 +1,32 @@
+This directory is automatically generated by Vaadin and contains the pre-compiled 
+frontend files/resources for your project (frontend development bundle).
+
+It should be added to Version Control System and committed, so that other developers
+do not have to compile it again.
+
+Frontend development bundle is automatically updated when needed:
+- an npm/pnpm package is added with @NpmPackage or directly into package.json
+- CSS, JavaScript or TypeScript files are added with @CssImport, @JsModule or @JavaScript
+- Vaadin add-on with front-end customizations is added
+- Custom theme imports/assets added into 'theme.json' file
+- Exported web component is added.
+
+If your project development needs a hot deployment of the frontend changes, 
+you can switch Flow to use Vite development server (default in Vaadin 23.3 and earlier versions):
+- set `vaadin.frontend.hotdeploy=true` in `application.properties`
+- configure `vaadin-maven-plugin`:
+```
+   <configuration>
+       <frontendHotdeploy>true</frontendHotdeploy>
+   </configuration>
+```
+- configure `jetty-maven-plugin`:
+```
+   <configuration>
+       <systemProperties>
+           <vaadin.frontend.hotdeploy>true</vaadin.frontend.hotdeploy>
+       </systemProperties>
+   </configuration>
+```
+
+Read more [about Vaadin development mode](https://vaadin.com/docs/next/flow/configuration/development-mode#precompiled-bundle).

src/main/frontend/themes/sistema-mantenimiento/styles.css

@@ -1 +1,130 @@
-@import url('./main-layout.css');
+@import url('./main-layout.css');
+
+
+
+/* ----------- Estilos para el MainLayout.java ----------- */
+/* Estilos para el DrawerToggle*/
+.drawer-toggle {
+    background-color: #AA86E0;
+}
+
+/* Estilos para el encabezado */
+.header-content {
+    background-color: #AA86E0;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+/* Estilo para el boton de cerrar sesion */
+.logout-button {
+    margin-right: 50px;
+}
+
+/* Estilos para el drawer */
+.drawer-logo {
+    width: 250px;
+}
+
+/* Estilos para el fondo de la aplicacion */
+.app-layout {
+    background-image: url('/images/bckgnd.png');
+}
+/* ------------------ FIN -------------------------------------- */
+/*
+/*
+ */
+
+
+/*!--------------------- Estilos para MantenimientosView.java ------------------- */
+/* Estilo para el fondo del header */
+.plan-anual-header {
+    background-color: #3E8BEA;
+    padding: 0;
+}
+
+/* Estilo para el titulo */
+.plan-anual-titulo {
+    text-align: center;
+    font-size: 24px;
+    color: white;
+}
+
+/* Estilo para el subtitulo */
+.plan-anual-titulo1 {
+    text-align: center;
+    font-size: 18px;
+    color: white;
+}
+
+/* Estilo para el campo de texto nomenclatura */
+.nomenclatura-txt {
+    margin-top: 15px;
+    margin-right: 15px;
+}
+
+/* Estilo para el logo CELAYA */
+.celaya-logo {
+    width: 100px;
+    margin-left: 15px;
+    margin-top: 15px;
+}
+/* ------------------------ FIN -------------------------- */
+/*
+*/
+/*
+*/
+
+
+/* ---------------- Estilos para la vista de MantenimientosView.java ---------------- */
+/* Estilo para el mantenimiento header */
+.mantenimiento-header {
+    width: 100px;
+}
+
+/* Estilo para el comboBox tipo de mantenimiento */
+.mantenimiento-combo {
+    margin-right: 15px;
+}
+
+/* Estilo para los tipos de hardware */
+.mantenimiento-group {
+    width: 100px;
+}
+
+/* Etiqueta MANTENIMIENTO */
+.mantenimiento-label {
+    margin-bottom: 10px;
+}
+
+/* Estilo para los campos de texto */
+.mantenimiento-text-field {
+    margin-bottom: 15px;
+}
+/* ----------------------------- FIN --------------------------- */
+/*
+ */
+/*
+ */
+
+
+/* --------------- Estilos para la vista de ActDiaria.java -------------- */
+/* Estilo para el header */
+.act-diaria-header {
+    background-color: #3E8BEA;
+    padding: 10px;
+}
+
+/* Estilo para el titulo */
+.act-diaria-titulo {
+    color: white;
+    font-size: 24px;
+    text-align: center;
+}
+
+/* Estilo para el grid */
+.act-diaria-grid {
+    margin-top: 20px;
+}
+/* ---------------------------- FIN------------------------ */

src/main/java/mx/gob/jumapacelaya/ui/ActDiariaView.java

@@ -1,16 +1,11 @@
 package mx.gob.jumapacelaya.ui;
+
 import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.component.button.ButtonVariant;
-import com.vaadin.flow.component.grid.ColumnPathRenderer;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.grid.Grid;
-import com.vaadin.flow.component.html.H2;
 import com.vaadin.flow.component.html.H3;
-import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
-import com.vaadin.flow.data.renderer.ComponentRenderer;
-import com.vaadin.flow.data.renderer.LocalDateRenderer;
-import com.vaadin.flow.data.renderer.LocalDateTimeRenderer;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import jakarta.annotation.security.PermitAll;
@@ -24,19 +19,16 @@ import java.util.*;
 @PermitAll
 @PageTitle("Actividades Diarias")
 @Route(value = "actdiaria", layout = MainLayout.class)
+@CssImport("./themes/sistema-mantenimiento/styles.css")
 public class ActDiariaView extends VerticalLayout {
 
     //Variables Locales
     SimpleDateFormat formato = new SimpleDateFormat("dd/MM/yyyy");
-
     HorizontalLayout header = new HorizontalLayout();
-
     H3 titulo = new H3();
-
     Button btnCorrectivo = new Button("Correctivo");
 
     Grid<ActividadDiaria> grdColumnas = new Grid<>(ActividadDiaria.class,false);
-
     List<ActividadDiaria> people = Arrays.asList(
             new ActividadDiaria(11, "Soprote", "Confi", "Sol", "Urgente",new Date(), new Date()),
             new ActividadDiaria(12, "Soprote", "Confi", "Sol", "Urgente",new Date(), new Date()),
@@ -45,13 +37,15 @@ public class ActDiariaView extends VerticalLayout {
 
     public ActDiariaView() {
         VerticalLayout headerLayout = new VerticalLayout();
-        headerLayout.getStyle().set("background-color", "#3e8bea");
+        headerLayout.addClassName("act-diaria-header");
         headerLayout.add(titulo);
         titulo.setText("Listado de Actividades por Atender - Área de Soporte Mantenimiento Técnico");
+        titulo.addClassName("act-diaria-titulo");
         header.setAlignSelf(Alignment.CENTER, titulo);
 
 
         VerticalLayout gridLayout = new VerticalLayout();
+        gridLayout.addClassName("act-diaria-grid");
         gridLayout.add(grdColumnas);
         //Tabla echa con un grid
         grdColumnas.addColumn(ActividadDiaria::getNumero).setHeader("Numero");

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

@@ -4,6 +4,7 @@ import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.*;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
@@ -16,6 +17,7 @@ import com.vaadin.flow.theme.lumo.LumoUtility;
 import mx.gob.jumapacelaya.services.SecurityService;
 
 
+@CssImport("./themes/sistema-mantenimiento/styles.css")
 public class MainLayout extends AppLayout {
 
     private H2 viewTitle;
@@ -23,7 +25,7 @@ public class MainLayout extends AppLayout {
 
     public MainLayout(SecurityService securityService) {
         this.securityService = securityService;
-        this.getStyle().set("background-image", "url('images/bckgnd.png')");
+        this.addClassName("app-layout");
         setPrimarySection(Section.DRAWER);
         addDrawerContent();
         addHeaderContent();
@@ -32,8 +34,7 @@ public class MainLayout extends AppLayout {
     private void addHeaderContent() {
         DrawerToggle toggle = new DrawerToggle();
         toggle.setAriaLabel("Menu toggle");
-        toggle.getStyle().set("border-radius", "50px");
-        toggle.getStyle().set("back-color", "red");
+        toggle.addClassName("drawer-toggle");
 
         viewTitle = new H2();
         viewTitle.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE);
@@ -45,14 +46,12 @@ public class MainLayout extends AppLayout {
         Button logoutButton = new Button("Cerrar sesión", event -> {
             securityService.logout();
         });
-        logoutButton.getStyle().set("margin-right", "50px");
+        logoutButton.addClassName("logout-button");
         logoutButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY ,ButtonVariant.LUMO_ERROR);
 
         HorizontalLayout headerContent = new HorizontalLayout();
         headerContent.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER);
-        headerContent.setWidthFull();
-        headerContent.setHeight("64px");
-        headerContent.getStyle().set("background-color", "#AA86E0");
+        headerContent.addClassName("header-content");
         headerContent.add(viewTitle);
         headerContent.setFlexGrow(1, viewTitle);
         headerContent.add(usrNameLabel, logoutButton);
@@ -67,7 +66,7 @@ public class MainLayout extends AppLayout {
         headerLayout.setAlignItems(FlexComponent.Alignment.CENTER);
 
         Image imgLogo = new Image("images/1027x160.png", "Logo");
-        imgLogo.setWidth("250px");
+        imgLogo.addClassName("drawer-logo");
 
         headerLayout.add(imgLogo);
 

src/main/java/mx/gob/jumapacelaya/ui/MantenimientoView.java

@@ -3,6 +3,7 @@ package mx.gob.jumapacelaya.ui;
 import com.vaadin.flow.component.checkbox.CheckboxGroup;
 import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.datepicker.DatePicker;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -21,6 +22,7 @@ import java.util.List;
 @PermitAll
 @PageTitle("Mantenimiento")
 @Route(value = "mantenimiento", layout = MainLayout.class)
+@CssImport("./themes/sistema-mantenimiento/styles.css")
 public class MantenimientoView extends VerticalLayout {
 
     public MantenimientoView() {
@@ -29,9 +31,11 @@ public class MantenimientoView extends VerticalLayout {
         //Componentes de texto
         TextField nomenclatura = new TextField("Nomenclatura");
         nomenclatura.setReadOnly(true);
+        nomenclatura.addClassName("mantenimiento-text-field");
 
         TextArea otras = new TextArea("¿Cuales?");
         otras.setEnabled(false);
+        otras.addClassName("mantenimiento-text-field");
 
 
         //Selector de fecha
@@ -40,10 +44,12 @@ public class MantenimientoView extends VerticalLayout {
         //ComboBox
         ComboBox<String> area = new ComboBox("Area o Departamento");
         area.setItems("T.I", "Catastro", "Medicion"); //Areas de ejemplo
+        area.addClassName("mantenimiento-combo");
 
         ComboBox<String> tipoMantt = new ComboBox<>("Tipo de Mantenimiento");
         List<String> tiposDeMantenimiento = databaseService.getTiposDeMantenimientos();
         tipoMantt.setItems(tiposDeMantenimiento);
+        tipoMantt.addClassName("mantenimiento-combo");
         tipoMantt.addValueChangeListener(event -> {
             String tipoSeleccionado = event.getValue();
             if (tipoSeleccionado != null) {

src/main/java/mx/gob/jumapacelaya/ui/PlanAnualView.java

@@ -1,19 +1,18 @@
 package mx.gob.jumapacelaya.ui;
 
-import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.*;
-import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import jakarta.annotation.security.PermitAll;
-import mx.gob.jumapacelaya.models.ActividadDiaria;
 
 @PermitAll
 @PageTitle("Plan Anual de Mantenimiento")
 @Route(value = "/", layout = MainLayout.class)
+@CssImport("./themes/sistema-mantenimiento/styles.css")
 public class PlanAnualView extends VerticalLayout {
 
     HorizontalLayout header = new HorizontalLayout();
@@ -22,24 +21,24 @@ public class PlanAnualView extends VerticalLayout {
 
     public PlanAnualView() {
         VerticalLayout headerLayout = new VerticalLayout();
-        headerLayout.getStyle().set("background-color", "#3e8bea");
-        headerLayout.setPadding(false);
+        headerLayout.addClassName("plan-anual-header");
         headerLayout.add(titulo, titulo1);
+
+        titulo.addClassName("plan-anual-titulo");
+        titulo1.addClassName("plan-anual-titulo1");
         titulo.setText("Plan Anual de Mantenimiento Preventivo de Equipo de Computo");
         titulo1.setText("2024");
+
         header.setAlignSelf(Alignment.CENTER, titulo, titulo1);
 
         HorizontalLayout nomenclaturaLayout = new HorizontalLayout();
-       /* Image celayaLogo = new Image("images/logocelaya2124.png", "celaya2024");
-        celayaLogo.setWidth("100px");
-        celayaLogo.getStyle().set("margin-left", "15px");
-        celayaLogo.getStyle().set("margin-top", "15px");*/
+        // Image celayaLogo = new Image("images/logocelaya2124.png", "celaya2024");
+        // celayaLogo.addClassName("celaya-logo");
 
         TextField nomenclaturaTxt = new TextField();
         nomenclaturaTxt.setValue("FR01-PA-7.1.3-02");
         nomenclaturaTxt.setReadOnly(true);
-        nomenclaturaTxt.getStyle().set("margin-right", "15px");
-        nomenclaturaTxt.getStyle().set("margin-top", "15px");
+        nomenclaturaTxt.addClassName("nomenclatura-txt");
 
 
        // nomenclaturaLayout.add(celayaLogo);

tsconfig.json

@@ -0,0 +1,39 @@
+// This TypeScript configuration file is generated by vaadin-maven-plugin.
+// This is needed for TypeScript compiler to compile your TypeScript code in the project.
+// It is recommended to commit this file to the VCS.
+// You might want to change the configurations to fit your preferences
+// For more information about the configurations, please refer to http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
+{
+  "_version": "9.1",
+  "compilerOptions": {
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "inlineSources": true,
+    "module": "esNext",
+    "target": "es2020",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "baseUrl": "src/main/frontend",
+    "paths": {
+      "@vaadin/flow-frontend": ["generated/jar-resources"],
+      "@vaadin/flow-frontend/*": ["generated/jar-resources/*"],
+      "Frontend/*": ["*"]
+    }
+  },
+  "include": [
+    "src/main/frontend/**/*",
+    "types.d.ts"
+  ],
+  "exclude": [
+    "src/main/frontend/generated/jar-resources/**"
+  ]
+}

types.d.ts

@@ -0,0 +1,17 @@
+// This TypeScript modules definition file is generated by vaadin-maven-plugin.
+// You can not directly import your different static files into TypeScript,
+// This is needed for TypeScript compiler to declare and export as a TypeScript module.
+// It is recommended to commit this file to the VCS.
+// You might want to change the configurations to fit your preferences
+declare module '*.css?inline' {
+  import type { CSSResultGroup } from 'lit';
+  const content: CSSResultGroup;
+  export default content;
+}
+
+// Allow any CSS Custom Properties
+declare module 'csstype' {
+  interface Properties {
+    [index: `--${string}`]: any;
+  }
+}

vite.config.ts

@@ -0,0 +1,9 @@
+import { UserConfigFn } from 'vite';
+import { overrideVaadinConfig } from './vite.generated';
+
+const customConfig: UserConfigFn = (env) => ({
+  // Here you can add custom Vite parameters
+  // https://vitejs.dev/config/
+});
+
+export default overrideVaadinConfig(customConfig);