Update modules/ui/views/landing_view.py

modules/ui/views/landing_view.py

@@ -22,109 +22,67 @@ def get_asset_path(filename, asset_type='img_logo'):
     asset_path = current_dir / 'assets' / asset_type / filename
     return str(asset_path)
 
-def create_landing_view():
-    """Crea la vista de landing con header y distribución 25-75"""
-    # Para el logo
-    logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
-    
-    # Definir los estilos como una cadena separada para mejor manejo
     custom_css = """
-        /* Reset y variables */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
         /* Variables de color corporativo */
         :root {
-            --color-primary: rgb(174, 0, 37);
-            --color-secondary: rgb(7, 60, 99);
+            --color-primary: rgb(174, 0, 37);    /* Rojo corporativo */
+            --color-secondary: rgb(7, 60, 99);   /* Azul corporativo */
             --color-background: #ffffff;
             --color-border: #e0e0e0;
         }
         
-        /* Layout principal */
-        #header-logo {
-            text-align: center;
-            padding: 2rem 0;
-            margin-bottom: 2rem;
-            background-color: var(--color-background);
-        }
-        
-        #header-logo img {
-            max-width: 200px;
-            height: auto;
-            display: block;
-            margin: 0 auto;
-        }
-        
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 0 2rem;
-        }
-        
-        /* Formularios */
-        .gr-form {
-            border: 1px solid var(--color-border);
-            padding: 1.5rem;
-            border-radius: 8px;
-            background-color: var(--color-background);
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 1rem;
-        }
-        
-        /* Botones */
-        .primary-btn {
+        /* Sobreescribir los estilos por defecto de Gradio */
+        .dark button.primary-btn,
+        button.primary-btn {
             background-color: var(--color-primary) !important;
+            border-color: var(--color-primary) !important;
             color: white !important;
-            border: none !important;
-            padding: 0.5rem 1rem !important;
-            border-radius: 4px !important;
-            cursor: pointer !important;
-            transition: opacity 0.3s ease !important;
-        }
-        
-        .primary-btn:hover {
-            opacity: 0.9 !important;
         }
         
-        .secondary-btn {
+        .dark button.secondary-btn,
+        button.secondary-btn {
             background-color: var(--color-secondary) !important;
+            border-color: var(--color-secondary) !important;
             color: white !important;
-            border: none !important;
-            padding: 0.5rem 1rem !important;
-            border-radius: 4px !important;
-            cursor: pointer !important;
-            transition: opacity 0.3s ease !important;
         }
-        
-        .secondary-btn:hover {
-            opacity: 0.9 !important;
+    
+        /* Sobreescribir los estilos de los tabs */
+        .tabs.svelte-1g805jl .tabitem.svelte-1g805jl.selected {
+            color: var(--color-primary) !important;
+            border-color: var(--color-primary) !important;
         }
-        
-        /* Tabs */
-        .tabs {
-            border-bottom: 2px solid var(--color-secondary) !important;
-            margin-bottom: 1rem !important;
+    
+        .tabs.svelte-1g805jl {
+            border-bottom-color: var(--color-secondary) !important;
         }
-        
-        .tab-selected {
-            color: var(--color-primary) !important;
-            border-bottom: 2px solid var(--color-primary) !important;
-            font-weight: bold !important;
+    
+        /* Asegurar que los botones mantengan los colores al hacer hover */
+        .dark button.primary-btn:hover,
+        button.primary-btn:hover {
+            background-color: rgb(144, 0, 27) !important;  /* Versión más oscura del rojo */
+            border-color: rgb(144, 0, 27) !important;
         }
-        
-        /* Contenido multimedia */
-        .media-box {
-            padding: 1.5rem;
-            background-color: var(--color-background);
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    
+        .dark button.secondary-btn:hover,
+        button.secondary-btn:hover {
+            background-color: rgb(5, 40, 79) !important;  /* Versión más oscura del azul */
+            border-color: rgb(5, 40, 79) !important;
         }
     """
     
+    # En los botones, asegúrate de que las clases se apliquen correctamente
+    login_button = gr.Button(
+        "Ingresar",
+        elem_classes="primary-btn",
+        variant="primary"
+    )
+    
+    register_button = gr.Button(
+        "Enviar Solicitud",
+        elem_classes="secondary-btn",
+        variant="secondary"
+    )
+    
     with gr.Blocks(css=custom_css) as view:
         # El resto del código permanece igual pero con algunas modificaciones en las clases