samastek/Tempering-Machine-Control-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update button and status indicator colors for improved visual consistency

Browse Source
This commit is contained in:
Sami Alzein
2025-08-06 22:41:53 +02:00
parent e4a0f74e1b
commit 041c500f9d
2 changed files with 29 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
python_rewrite/frontend/src/index.css
View File

@@ -62,23 +62,23 @@
}
.btn-primary {
@apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
@apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
}
.btn-secondary {
@apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 active:bg-secondary-300;
@apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300;
}
.btn-success {
@apply bg-success-600 text-white hover:bg-success-700 active:bg-success-800;
@apply bg-green-600 text-white hover:bg-green-700 active:bg-green-800;
}
.btn-warning {
@apply bg-warning-500 text-white hover:bg-warning-600 active:bg-warning-700;
@apply bg-yellow-500 text-white hover:bg-yellow-600 active:bg-yellow-700;
}
.btn-danger {
@apply bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
@apply bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
}
.btn-lg {
@@ -108,16 +108,16 @@
/* Input components */
.input {
@apply flex h-12 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
@apply flex h-12 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
/* Status indicators */
.status-running {
@apply status-indicator bg-success-500 animate-pulse;
@apply status-indicator bg-green-500 animate-pulse;
}
.status-paused {
@apply status-indicator bg-warning-500;
@apply status-indicator bg-yellow-500;
}
.status-stopped {
@@ -125,20 +125,20 @@
}
.status-error {
@apply status-indicator bg-danger-500 animate-bounce;
@apply status-indicator bg-red-500 animate-bounce;
}
/* Temperature displays */
.temp-normal {
@apply temperature-display text-success-600;
@apply temperature-display text-green-600;
}
.temp-warning {
@apply temperature-display text-warning-600;
@apply temperature-display text-yellow-600;
}
.temp-critical {
@apply temperature-display text-danger-600 animate-pulse;
@apply temperature-display text-red-600 animate-pulse;
}
}

57
python_rewrite/frontend/tailwind.config.js
View File

@@ -19,47 +19,10 @@ export default {
800: '#991b1b',
900: '#7f1d1d',
950: '#450a0a',
DEFAULT: '#dc2626',
},
secondary: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617',
},
success: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
950: '#052e16',
},
warning: {
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
950: '#451a03',
},
danger: {
// Make primary an alias for red for consistency
red: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
@@ -72,6 +35,20 @@ export default {
900: '#7f1d1d',
950: '#450a0a',
},
// Simplified color palette for industrial use
gray: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],