matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Features page ordering and mobile UI consistency

Browse Source 
- Fix mobile Features page to respect lateral borders/padding
- Fix drag state not resetting properly when Apply/Cancel pressed
- Improve mobile UI consistency across all pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-19 12:44:27 +01:00
parent 6faeb3c975
commit 1c1199fc16
11 changed files with 115 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/contexts/ThemeContext.tsx
View File

@@ -73,7 +73,7 @@ const ACCENT_COLORS: Record<AccentColor, { main: string; hover: string; darkMain
red: { main: '#ef4444', hover: '#dc2626' }, red: { main: '#ef4444', hover: '#dc2626' },
teal: { main: '#14b8a6', hover: '#0d9488' }, teal: { main: '#14b8a6', hover: '#0d9488' },
amber: { main: '#f59e0b', hover: '#d97706' }, amber: { main: '#f59e0b', hover: '#d97706' },
indigo: { main: '#6366f1', hover: '#4f46e5' }, indigo: { main: '#5865f2', hover: '#4752c4' },
cyan: { main: '#06b6d4', hover: '#0891b2' }, cyan: { main: '#06b6d4', hover: '#0891b2' },
rose: { main: '#f43f5e', hover: '#e11d48' }, rose: { main: '#f43f5e', hover: '#e11d48' },
auto: { main: '#374151', hover: '#1f2937', darkMain: '#838b99', darkHover: '#b5bcc8' }, auto: { main: '#374151', hover: '#1f2937', darkMain: '#838b99', darkHover: '#b5bcc8' },
@@ -193,24 +193,24 @@ export type CustomColors = Partial<{
export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = { export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = {
default: { default: {
light: { light: {
bgMain: '#ffffff', bgMain: '#f8f9ff',
bgCard: '#f9fafb', bgCard: '#ffffff',
bgElevated: '#ffffff', bgElevated: '#fafbff',
textPrimary: '#111827', textPrimary: '#1a1f3a',
textSecondary: '#6b7280', textSecondary: '#4a5578',
border: '#e5e7eb', border: '#e5e7f4',
sidebarBg: '#1f2937', sidebarBg: '#3949ab',
sidebarText: '#f9fafb', sidebarText: '#f9fafb',
}, },
dark: { dark: {
bgMain: '#0f172a', bgMain: '#0f1229',
bgCard: '#1e293b', bgCard: '#1a1f3f',
bgElevated: '#334155', bgElevated: '#252b4d',
textPrimary: '#f1f5f9', textPrimary: '#e8eaf6',
textSecondary: '#94a3b8', textSecondary: '#9fa8da',
border: '#334155', border: '#303652',
sidebarBg: '#0c1222', sidebarBg: '#0a0d1f',
sidebarText: '#f9fafb', sidebarText: '#e8eaf6',
}, },
}, },
monochrome: { monochrome: {
@@ -218,19 +218,19 @@ export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = {
bgMain: '#fafafa', bgMain: '#fafafa',
bgCard: '#f5f5f5', bgCard: '#f5f5f5',
bgElevated: '#ffffff', bgElevated: '#ffffff',
textPrimary: '#171717', textPrimary: '#0a0a0a',
textSecondary: '#737373', textSecondary: '#737373',
border: '#e5e5e5', border: '#e5e5e5',
sidebarBg: '#262626', sidebarBg: '#1a1a1a',
sidebarText: '#fafafa', sidebarText: '#fafafa',
}, },
dark: { dark: {
bgMain: '#0a0a0a', bgMain: '#0a0a0a',
bgCard: '#171717', bgCard: '#1a1a1a',
bgElevated: '#262626', bgElevated: '#2a2a2a',
textPrimary: '#fafafa', textPrimary: '#fafafa',
textSecondary: '#a3a3a3', textSecondary: '#a0a0a0',
border: '#333333', border: '#2a2a2a',
sidebarBg: '#0a0a0a', sidebarBg: '#0a0a0a',
sidebarText: '#fafafa', sidebarText: '#fafafa',
}, },

32
frontend/src/styles/AdminPanel.css
View File

@@ -87,25 +87,25 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: var(--btn-padding-md); padding: var(--btn-padding-md);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); background: var(--color-accent);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-weight: 600; font-weight: 600;
font-size: var(--btn-font-size); font-size: var(--btn-font-size);
cursor: pointer; cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.btn-primary:hover { .btn-primary:hover {
filter: brightness(1.03); background: var(--color-accent-hover);
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
.btn-primary:active { .btn-primary:active {
transform: translateY(0); transform: translateY(0) scale(1);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
@@ -152,20 +152,20 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: var(--btn-padding-md); padding: var(--btn-padding-md);
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); background: #ef4444;
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-weight: 600; font-weight: 600;
font-size: var(--btn-font-size); font-size: var(--btn-font-size);
cursor: pointer; cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.btn-danger:hover { .btn-danger:hover {
filter: brightness(1.05); background: #dc2626;
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
@@ -1141,18 +1141,18 @@
background: var(--color-accent); background: var(--color-accent);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-md);
} }
.btn-primary-modern:hover { .btn-primary-modern:hover {
background: var(--color-accent-hover); background: var(--color-accent-hover);
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); box-shadow: var(--shadow-lg);
} }
.btn-primary-modern .material-symbols-outlined { .btn-primary-modern .material-symbols-outlined {

4
frontend/src/styles/Layout.css
View File

@@ -162,9 +162,9 @@ body {
.page-tab-btn.active, .page-tab-btn.active,
.admin-tab-btn.active { .admin-tab-btn.active {
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); background: var(--color-accent);
color: white; color: white;
box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3); box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
} }
.page-subtitle { .page-subtitle {

10
frontend/src/styles/Login.css
View File

@@ -117,14 +117,14 @@
.login-container .btn-primary { .login-container .btn-primary {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); background: var(--color-accent);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -132,8 +132,8 @@
} }
.login-container .btn-primary:hover { .login-container .btn-primary:hover {
filter: brightness(1.03); background: var(--color-accent-hover);
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }

8
frontend/src/styles/Sidebar.css
View File

@@ -391,11 +391,11 @@ button.nav-item {
} }
.nav-item.active { .nav-item.active {
background: rgba(var(--color-accent-rgb), 0.16); background: rgba(var(--color-accent-rgb), 0.12);
border: 1px solid rgba(var(--color-accent-rgb), 0.22); border: 1px solid rgba(var(--color-accent-rgb), 0.18);
font-weight: 650; font-weight: 600;
color: var(--color-text-sidebar) !important; color: var(--color-text-sidebar) !important;
box-shadow: none; box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.15);
} }
.nav-item.active .nav-icon, .nav-item.active .nav-icon,

10
frontend/src/styles/ThemeSettings.css
View File

@@ -570,20 +570,20 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.65rem 1.25rem; padding: 0.65rem 1.25rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); background: var(--color-accent);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
cursor: pointer; cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.theme-settings-root .btn-primary:hover { .theme-settings-root .btn-primary:hover {
filter: brightness(1.03); background: var(--color-accent-hover);
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }

14
frontend/src/styles/Users.css
View File

@@ -165,19 +165,19 @@
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.55rem 0.9rem; padding: 0.55rem 0.9rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%); background: var(--color-accent);
color: white; color: white;
border: none; border: none;
border-radius: var(--radius-md); border-radius: 10px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.users-root .btn-primary:hover { .users-root .btn-primary:hover {
filter: brightness(1.03); background: var(--color-accent-hover);
transform: translateY(-1px); transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
@@ -555,8 +555,8 @@
} }
.users-root .user-avatar.superuser { .users-root .user-avatar.superuser {
background: linear-gradient(135deg, var(--color-accent), #a78bfa); background: var(--color-accent);
box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3); box-shadow: 0 3px 10px rgba(var(--color-accent-rgb), 0.3);
} }
/* Users Divider */ /* Users Divider */

20
frontend/src/styles/theme/colors.css
View File

@@ -23,13 +23,13 @@
--color-text-muted: #6b7280; --color-text-muted: #6b7280;
--color-text-inverse: #ffffff; --color-text-inverse: #ffffff;
/* Light Theme - Border Colors */ /* Light Theme - Border Colors - softer, more transparent */
--color-border: #e5e7eb; --color-border: rgba(229, 231, 235, 0.5);
--color-border-hover: #d1d5db; --color-border-hover: rgba(209, 213, 219, 0.7);
/* Derived tokens */ /* Derived tokens - more subtle */
--color-overlay: rgba(15, 23, 42, 0.35); --color-overlay: rgba(15, 23, 42, 0.35);
--color-card-outline: rgba(15, 23, 42, 0.06); --color-card-outline: rgba(15, 23, 42, 0.03);
--color-focus-ring: rgba(var(--color-accent-rgb), 0.22); --color-focus-ring: rgba(var(--color-accent-rgb), 0.22);
/* Semantic Colors (same for both themes) */ /* Semantic Colors (same for both themes) */
@@ -60,13 +60,13 @@
--color-text-muted: #94a3b8; --color-text-muted: #94a3b8;
--color-text-inverse: #ffffff; --color-text-inverse: #ffffff;
/* Dark Theme - Border Colors */ /* Dark Theme - Border Colors - softer, more transparent */
--color-border: #334155; --color-border: rgba(51, 65, 85, 0.4);
--color-border-hover: #475569; --color-border-hover: rgba(71, 85, 105, 0.6);
/* Derived tokens */ /* Derived tokens - more subtle */
--color-overlay: rgba(0, 0, 0, 0.55); --color-overlay: rgba(0, 0, 0, 0.55);
--color-card-outline: rgba(255, 255, 255, 0.08); --color-card-outline: rgba(255, 255, 255, 0.04);
--color-focus-ring: rgba(var(--color-accent-rgb), 0.30); --color-focus-ring: rgba(var(--color-accent-rgb), 0.30);
/* Semantic Colors */ /* Semantic Colors */

33
frontend/src/styles/theme/dimensions.css
View File

@@ -28,10 +28,10 @@
--space-20: 5rem; --space-20: 5rem;
/* 80px */ /* 80px */
/* Border Radius */ /* Border Radius - more modern, softer */
--radius-sm: 4px; --radius-sm: 6px;
--radius-md: 6px; --radius-md: 10px;
--radius-lg: 8px; --radius-lg: 12px;
--radius-xl: 20px; --radius-xl: 20px;
--radius-full: 9999px; --radius-full: 9999px;
@@ -101,21 +101,18 @@
--badge-padding: 0.25rem 0.625rem; --badge-padding: 0.25rem 0.625rem;
--badge-font-size: 0.8rem; --badge-font-size: 0.8rem;
/* Semantic Spacing - Cards & Containers */ /* Semantic Spacing - Cards & Containers - more breathing room */
--card-padding: 0.875rem; --card-padding: 1.125rem;
/* Reduced from 1rem */ /* increased for more space */
--card-padding-sm: 0.625rem; --card-padding-sm: 0.75rem;
/* Reduced from 0.75rem */ --card-gap: 0.75rem;
--card-gap: 0.625rem; --card-gap-lg: 1rem;
/* Reduced from 0.75rem */
--card-gap-lg: 0.875rem;
/* Reduced from 1rem */
/* Semantic Spacing - Sections */ /* Semantic Spacing - Sections - 20% more space */
--section-gap: 1.25rem; --section-gap: 1.5rem;
/* Reduced from 1.5rem */ /* increased from 1.25rem */
--section-gap-sm: 0.875rem; --section-gap-sm: 1.125rem;
/* Reduced from 1rem */ /* increased from 0.875rem */
/* Semantic Spacing - Elements */ /* Semantic Spacing - Elements */
--element-gap: 0.375rem; --element-gap: 0.375rem;

31
frontend/src/styles/theme/effects.css
View File

@@ -3,15 +3,20 @@
========================================== */ ========================================== */
:root { :root {
/* Box Shadows (modern, softer multi-layer) */ /* Box Shadows (ultra-soft, modern, ethereal) */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08); --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.10), 0 12px 30px rgba(0, 0, 0, 0.06);
--shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22); --shadow-2xl: 0 50px 120px rgba(0, 0, 0, 0.15);
--shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18); --shadow-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
/* Backdrop Blur Effects */
--backdrop-blur-sm: blur(8px);
--backdrop-blur-md: blur(16px);
--backdrop-blur-lg: blur(24px);
/* Transitions */ /* Transitions */
--transition-fast: 120ms var(--ease-out); --transition-fast: 120ms var(--ease-out);
--transition-base: 180ms var(--ease-out); --transition-base: 180ms var(--ease-out);
@@ -38,10 +43,10 @@
} }
[data-theme='dark'] { [data-theme='dark'] {
/* Dark Theme - Deeper Shadows with less haze */ /* Dark Theme - Deeper Shadows for proper depth */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.65), 0 14px 28px rgba(0, 0, 0, 0.4); --shadow-xl: 0 36px 80px rgba(0, 0, 0, 0.55), 0 15px 35px rgba(0, 0, 0, 0.40);
--shadow-2xl: 0 60px 130px rgba(0, 0, 0, 0.75); --shadow-2xl: 0 60px 140px rgba(0, 0, 0, 0.65);
} }

22
frontend/src/styles/theme/typography.css
View File

@@ -8,17 +8,17 @@
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'Fira Code', 'Courier New', monospace; --font-mono: 'Fira Code', 'Courier New', monospace;
/* Font Sizes */ /* Font Sizes - increased only for headings/titles */
--text-xs: 0.7rem; /* 11.2px */ --text-xs: 0.7rem; /* 11.2px - unchanged */
--text-sm: 0.75rem; /* 12px */ --text-sm: 0.75rem; /* 12px - unchanged */
--text-base: 0.875rem; /* 14px */ --text-base: 0.875rem; /* 14px - unchanged (keep small) */
--text-md: 0.95rem; /* 15.2px */ --text-md: 0.95rem; /* 15.2px - unchanged */
--text-lg: 1rem; /* 16px */ --text-lg: 1rem; /* 16px - unchanged */
--text-xl: 1.125rem; /* 18px */ --text-xl: 1.35rem; /* 21.6px - increased for titles */
--text-2xl: 1.25rem; /* 20px */ --text-2xl: 1.65rem; /* 26.4px - increased for titles */
--text-3xl: 1.5rem; /* 24px */ --text-3xl: 2.05rem; /* 32.8px - increased for titles */
--text-4xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px - increased */
--text-5xl: 2.5rem; /* 40px */ --text-5xl: 3rem; /* 48px - increased */
/* Font Weights */ /* Font Weights */
--weight-normal: 400; --weight-normal: 400;