Antoni Nuñez Romeu
db0935eb16
Build & Push Docker Images / test-backend (push) Failing after 36s
Build & Push Docker Images / test-frontend (push) Successful in 29s
Build & Push Docker Images / build-backend (push) Has been skipped
Build & Push Docker Images / build-frontend (push) Has been skipped
Build & Push Docker Images / deploy (push) Successful in 7s
This commit introduces comprehensive observability for both backend and frontend, alongside a major UI/UX overhaul to align with modern design standards (Material 3 inspired) and improve localization. Backend changes: - Integrated OpenTelemetry SDK for distributed tracing. - Added Pino for structured JSON logging with OTel instrumentation for trace/span correlation. - Configured OTLP exporters to route traces and logs to Grafana Alloy. - Updated docker-compose to include necessary environment variables for observability. Frontend changes: - Integrated Grafana Faro for Real User Monitoring (RUM), capturing Web Vitals, JS errors, and user interactions. - Redesigned the entire UI using a new color palette and Material 3 design principles. - Refactored component architecture (App, Home, Search, Scanner, Profile, Alerts views) for better state management and navigation. - Improved mobile UX with a redesigned Bottom Navigation bar and Top Bar. - Localized the interface to Spanish (es). - Updated assets, icons, and PWA configuration (manifest, icons). - Refactored CSS to use a centralized design token system (CSS variables). Observability enables better debugging and performance monitoring across the entire stack.
115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
:root {
|
|
--primary: #00450d;
|
|
--on-primary: #ffffff;
|
|
--primary-container: #1b5e20;
|
|
--on-primary-container: #90d689;
|
|
--secondary: #2b5bb5;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #759efd;
|
|
--on-secondary-container: #00337c;
|
|
--tertiary: #4600ad;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #6100e8;
|
|
--on-tertiary-container: #cebbff;
|
|
--surface: #f8fafb;
|
|
--on-surface: #191c1d;
|
|
--on-surface-variant: #41493e;
|
|
--surface-container-lowest: #ffffff;
|
|
--surface-container-low: #f2f4f5;
|
|
--surface-container: #eceeef;
|
|
--surface-container-high: #e6e8e9;
|
|
--surface-container-highest: #e1e3e4;
|
|
--error: #ba1a1a;
|
|
--on-error: #ffffff;
|
|
--error-container: #ffdad6;
|
|
--on-error-container: #93000a;
|
|
--outline: #717a6d;
|
|
--outline-variant: #c0c9bb;
|
|
--on-background: #191c1d;
|
|
--inverse-surface: #2e3132;
|
|
--inverse-on-surface: #eff1f2;
|
|
--inverse-primary: #91d78a;
|
|
--surface-tint: #2a6b2c;
|
|
--surface-dim: #d8dadb;
|
|
--surface-bright: #f8fafb;
|
|
--surface-variant: #e1e3e4;
|
|
--primary-fixed: #acf4a4;
|
|
--primary-fixed-dim: #91d78a;
|
|
--secondary-fixed: #d9e2ff;
|
|
--secondary-fixed-dim: #b0c6ff;
|
|
--tertiary-fixed: #e9ddff;
|
|
--tertiary-fixed-dim: #cfbcff;
|
|
|
|
--radius-sm: 0.25rem;
|
|
--radius: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
|
|
--margin-main: 1.5rem;
|
|
--card-padding: 1.25rem;
|
|
--gutter: 1rem;
|
|
--touch-target-min: 3rem;
|
|
|
|
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
--text-main: var(--on-surface);
|
|
--text-muted: var(--on-surface-variant);
|
|
--surface-muted: var(--surface-container-low);
|
|
--surface-card: var(--surface-container-lowest);
|
|
--border: var(--outline-variant);
|
|
--border-strong: var(--outline);
|
|
--glass-bg: var(--surface-container-lowest);
|
|
--glass-border: var(--outline-variant);
|
|
--glass-shadow: var(--shadow-soft);
|
|
--accent: var(--primary);
|
|
--accent-warm: #b45309;
|
|
--primary-hover: #1a6b2e;
|
|
--primary-ring: rgba(0, 69, 13, 0.22);
|
|
--primary-shadow: rgba(0, 69, 13, 0.18);
|
|
--primary-light: var(--primary-fixed);
|
|
--primary-faint: rgba(0, 69, 13, 0.08);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
html {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
color: var(--on-surface);
|
|
background-color: var(--surface-container-lowest);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url('./assets/bg-SHmHDvQz.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
opacity: 0.5;
|
|
z-index: -1;
|
|
}
|
|
|
|
#root {
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
}
|