feat: Refactor styling and theme integration across components; update button gradients and remove unused component

frontend/src/components/Appshell/Appshell.module.css

@@ -31,7 +31,7 @@
   
   /* Esta es la barra izquierda pequeña donde los iconos */
   .aside {
-    flex: 0 0 54px;
+    flex: 0 0 52px;
     background-color: var(--mantine-color-body);
     display: flex;
     flex-direction: column;
@@ -67,8 +67,8 @@
     &[data-active] {
       &,
       &:hover {
-        background-color: var(--mantine-color-blue-light);
+        background-color: var(--mantine-color-brand-7);
-        color: var(--mantine-color-blue-light-color);
+        color: var(--mantine-color-brand-2);
       }
     }
   }
@@ -96,9 +96,8 @@
     &[data-active] {
       &,
       &:hover {
-        border-left-color: var(--mantine-color-blue-filled);
+        background-color: var(--mantine-color-brand-7);
-        background-color: var(--mantine-color-blue-filled);
+        color: linear-gradient(90deg, var(--mantine-color-brand-7), var(--mantine-color-brand-4));
-        color: var(--mantine-color-white);
       }
     }
   }

frontend/src/components/Appshell/Appshell.tsx

@@ -151,7 +151,7 @@ import {
         {/* Header */}
 
         <AppShell.Header>
-          <Group h="100%" px="md">
+          <Group h="100%" px="sm">
             <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
             <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
             <img src="/src/public/favicon.svg" alt="Logo" style={{ width: 30, height: 30 }} />

frontend/src/components/LlamadorAPI.tsx

@@ -10,6 +10,7 @@ import {
   Group,
 } from '@mantine/core';
 import { MetodoSelect } from './MetodoSelect';
+import { useMantineTheme } from '@mantine/core';
 
 export function LlamadorAPI() {
   const [direccion, setDireccion] = useState('http://localhost:8000/api/saludo');
@@ -25,6 +26,9 @@ export function LlamadorAPI() {
     return 'red';
   };
 
+  const theme = useMantineTheme();
+  
+
   const llamarAPI = async () => {
     try {
       const options: RequestInit = {
@@ -101,7 +105,12 @@ export function LlamadorAPI() {
             minRows={3}
           />
 
-          <Button onClick={llamarAPI} color="blue">
+          <Button onClick={llamarAPI} 
+          variant="gradient"
+          gradient={{
+                  from: theme.colors.brand[7],
+                  to: theme.colors.brand[4],
+                }}>
             Enviar solicitud
           </Button>
 

frontend/src/components/Welcome/Welcome.tsx

@@ -1,12 +1,16 @@
 import { Anchor, Text, Title } from '@mantine/core';
 import classes from './Welcome.module.css';
+import { useMantineTheme } from '@mantine/core';
 
 export function Welcome() {
+
+  const theme = useMantineTheme();
+
   return (
     <>
       <Title className={classes.title} ta="center" mt={100}>
         Hola! {' '}
-        <Text inherit variant="gradient" component="span" gradient={{ from: 'blue', to: 'green' }} style={{ letterSpacing: '1px' }}>
+        <Text inherit variant="gradient" component="span" gradient={{ from: theme.colors.brand[7], to: theme.colors.secondary[4], }} style={{ letterSpacing: '1px' }}>
           Egutierrez
         </Text>
       </Title>

frontend/src/components/botoncito.tsx

@@ -1,16 +0,0 @@
-// src/components/MiBoton.tsx
-
-import { Button } from '@mantine/core';
-import { MouseEventHandler } from 'react';
-
-type MiBotonProps = {
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  label?: string;
-  color?: string;
-};
-
-function MiBoton({ onClick, label = 'Hola que tal!', color = 'teal' }: MiBotonProps) {
-  return <Button color={color} onClick={onClick}>{label}</Button>;
-}
-
-export default MiBoton;

frontend/src/pages/404.tsx

@@ -1,10 +1,16 @@
 import { Box, Title, Text, Button, Group, Stack, Image, Center } from '@mantine/core';
+import { useMantineTheme } from '@mantine/core';
 import { IconArrowLeft } from '../assets/icons';
 import { Link } from 'react-router-dom';
 import { MantineCardWithShader } from '../components/HoloShader'; // Ajusta ruta si es necesario
 import { AppShellWithMenu } from '../components/Appshell/Appshell';
 
+
 export function Error_404() {
+
+  const theme = useMantineTheme();
+
+
   return (
     <AppShellWithMenu>
       <Box
@@ -41,7 +47,10 @@ export function Error_404() {
                 to="/"
                 size="md"
                 variant="gradient"
-                gradient={{ from: 'blue', to: 'cyan' }}
+                gradient={{
+                  from: theme.colors.brand[7],
+                  to: theme.colors.secondary[4],
+                }}
                 leftSection={<IconArrowLeft width={18} height={18} />}
               >
                 Volver al inicio

frontend/src/theme.ts

@@ -1,5 +1,58 @@
 import { createTheme } from '@mantine/core';
 
 export const theme = createTheme({
-  /** Put your mantine theme override here */
+  colors: {
-});
+    // Definición de la paleta principal
+    brand: [
+      "#ffeaff",
+      "#fdd3fc",
+      "#f6a5f3",
+      "#ef74eb",
+      "#e841e2",
+      "#e631e0",
+      "#e521de",
+      "#cc12c5",
+      "#b608b1",
+      "#9f009b"
+    ],
+    // Puedes añadir hasta 3 colores adicionales si lo deseas
+    secondary: [
+      "#f7ecff",
+      "#e7d6fb",
+      "#caaaf1",
+      "#ac7ce8",
+      "#9354e0",
+      "#833bdb",
+      "#7b2eda",
+      "#6921c2",
+      "#5d1cae",
+      "#501599"
+    ],
+    accent: [
+      '#fff3e0',
+      '#ffe0b2',
+      '#ffcc80',
+      '#ffb74d',
+      '#ffa726',
+      '#ff9800',
+      '#fb8c00',
+      '#f57c00',
+      '#ef6c00',
+      '#e65100',
+    ],
+    neutral: [
+      '#fafafa',
+      '#f5f5f5',
+      '#eeeeee',
+      '#e0e0e0',
+      '#bdbdbd',
+      '#9e9e9e',
+      '#757575',
+      '#616161',
+      '#424242',
+      '#212121',
+    ],
+  },
+  primaryColor: 'brand', // Establece 'brand' como el color primario
+  primaryShade: { light: 6, dark: 8 }, // Define los tonos primarios para los esquemas de color claro y oscuro
+});