From d45039e2f58a3033a1735b7d3472576dac5e6a8b Mon Sep 17 00:00:00 2001 From: egutierrez Date: Thu, 8 May 2025 00:05:09 +0200 Subject: [PATCH] feat: Refactor styling and theme integration across components; update button gradients and remove unused component --- .../components/Appshell/Appshell.module.css | 11 ++-- frontend/src/components/Appshell/Appshell.tsx | 2 +- frontend/src/components/LlamadorAPI.tsx | 11 +++- frontend/src/components/Welcome/Welcome.tsx | 6 +- frontend/src/components/botoncito.tsx | 16 ------ frontend/src/pages/404.tsx | 11 +++- frontend/src/theme.ts | 57 ++++++++++++++++++- 7 files changed, 86 insertions(+), 28 deletions(-) delete mode 100644 frontend/src/components/botoncito.tsx diff --git a/frontend/src/components/Appshell/Appshell.module.css b/frontend/src/components/Appshell/Appshell.module.css index 1ef65d8..bce8086 100644 --- a/frontend/src/components/Appshell/Appshell.module.css +++ b/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); - color: var(--mantine-color-blue-light-color); + background-color: var(--mantine-color-brand-7); + 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-blue-filled); - color: var(--mantine-color-white); + background-color: var(--mantine-color-brand-7); + color: linear-gradient(90deg, var(--mantine-color-brand-7), var(--mantine-color-brand-4)); } } } \ No newline at end of file diff --git a/frontend/src/components/Appshell/Appshell.tsx b/frontend/src/components/Appshell/Appshell.tsx index 1a02948..c41b063 100644 --- a/frontend/src/components/Appshell/Appshell.tsx +++ b/frontend/src/components/Appshell/Appshell.tsx @@ -151,7 +151,7 @@ import { {/* Header */} - + Logo diff --git a/frontend/src/components/LlamadorAPI.tsx b/frontend/src/components/LlamadorAPI.tsx index bbe27c9..4426f37 100644 --- a/frontend/src/components/LlamadorAPI.tsx +++ b/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} /> - diff --git a/frontend/src/components/Welcome/Welcome.tsx b/frontend/src/components/Welcome/Welcome.tsx index 7fb8231..8ca8a97 100644 --- a/frontend/src/components/Welcome/Welcome.tsx +++ b/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 ( <> 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> diff --git a/frontend/src/components/botoncito.tsx b/frontend/src/components/botoncito.tsx deleted file mode 100644 index 623fc78..0000000 --- a/frontend/src/components/botoncito.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// src/components/MiBoton.tsx - -import { Button } from '@mantine/core'; -import { MouseEventHandler } from 'react'; - -type MiBotonProps = { - onClick: MouseEventHandler; - label?: string; - color?: string; -}; - -function MiBoton({ onClick, label = 'Hola que tal!', color = 'teal' }: MiBotonProps) { - return ; -} - -export default MiBoton; diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx index e6ad1df..95c9efd 100644 --- a/frontend/src/pages/404.tsx +++ b/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 ( } > Volver al inicio diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts index bf4dee5..47d562c 100644 --- a/frontend/src/theme.ts +++ b/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 +}); \ No newline at end of file