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

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

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

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

@@ -162,9 +162,9 @@ body {
.page-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;
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 {

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

@@ -117,14 +117,14 @@
.login-container .btn-primary {
width: 100%;
padding: 0.75rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
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;
align-items: center;
justify-content: center;
@@ -132,8 +132,8 @@
}
.login-container .btn-primary:hover {
filter: brightness(1.03);
transform: translateY(-1px);
background: var(--color-accent-hover);
transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg);
}

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

@@ -391,11 +391,11 @@ button.nav-item {
}
.nav-item.active {
background: rgba(var(--color-accent-rgb), 0.16);
border: 1px solid rgba(var(--color-accent-rgb), 0.22);
font-weight: 650;
background: rgba(var(--color-accent-rgb), 0.12);
border: 1px solid rgba(var(--color-accent-rgb), 0.18);
font-weight: 600;
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,

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

@@ -570,20 +570,20 @@
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.25rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
background: var(--color-accent);
color: white;
border: none;
border-radius: var(--radius-md);
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
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);
}
.theme-settings-root .btn-primary:hover {
filter: brightness(1.03);
transform: translateY(-1px);
background: var(--color-accent-hover);
transform: translateY(-1px) scale(1.02);
box-shadow: var(--shadow-lg);
}

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

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

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

@@ -23,13 +23,13 @@
--color-text-muted: #6b7280;
--color-text-inverse: #ffffff;
/* Light Theme - Border Colors */
--color-border: #e5e7eb;
--color-border-hover: #d1d5db;
/* Light Theme - Border Colors - softer, more transparent */
--color-border: rgba(229, 231, 235, 0.5);
--color-border-hover: rgba(209, 213, 219, 0.7);
/* Derived tokens */
/* Derived tokens - more subtle */
--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);
/* Semantic Colors (same for both themes) */
@@ -60,13 +60,13 @@
--color-text-muted: #94a3b8;
--color-text-inverse: #ffffff;
/* Dark Theme - Border Colors */
--color-border: #334155;
--color-border-hover: #475569;
/* Dark Theme - Border Colors - softer, more transparent */
--color-border: rgba(51, 65, 85, 0.4);
--color-border-hover: rgba(71, 85, 105, 0.6);
/* Derived tokens */
/* Derived tokens - more subtle */
--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);
/* Semantic Colors */

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

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

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

@@ -3,15 +3,20 @@
========================================== */
:root {
/* Box Shadows (modern, softer multi-layer) */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
--shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22);
--shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
/* Box Shadows (ultra-soft, modern, ethereal) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.10), 0 12px 30px rgba(0, 0, 0, 0.06);
--shadow-2xl: 0 50px 120px rgba(0, 0, 0, 0.15);
--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);
/* Backdrop Blur Effects */
--backdrop-blur-sm: blur(8px);
--backdrop-blur-md: blur(16px);
--backdrop-blur-lg: blur(24px);
/* Transitions */
--transition-fast: 120ms var(--ease-out);
--transition-base: 180ms var(--ease-out);
@@ -38,10 +43,10 @@
}
[data-theme='dark'] {
/* Dark Theme - Deeper Shadows with less haze */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px 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-2xl: 0 60px 130px rgba(0, 0, 0, 0.75);
/* Dark Theme - Deeper Shadows for proper depth */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.35);
--shadow-xl: 0 36px 80px rgba(0, 0, 0, 0.55), 0 15px 35px rgba(0, 0, 0, 0.40);
--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;
--font-mono: 'Fira Code', 'Courier New', monospace;
/* Font Sizes */
--text-xs: 0.7rem; /* 11.2px */
--text-sm: 0.75rem; /* 12px */
--text-base: 0.875rem; /* 14px */
--text-md: 0.95rem; /* 15.2px */
--text-lg: 1rem; /* 16px */
--text-xl: 1.125rem; /* 18px */
--text-2xl: 1.25rem; /* 20px */
--text-3xl: 1.5rem; /* 24px */
--text-4xl: 2rem; /* 32px */
--text-5xl: 2.5rem; /* 40px */
/* Font Sizes - increased only for headings/titles */
--text-xs: 0.7rem; /* 11.2px - unchanged */
--text-sm: 0.75rem; /* 12px - unchanged */
--text-base: 0.875rem; /* 14px - unchanged (keep small) */
--text-md: 0.95rem; /* 15.2px - unchanged */
--text-lg: 1rem; /* 16px - unchanged */
--text-xl: 1.35rem; /* 21.6px - increased for titles */
--text-2xl: 1.65rem; /* 26.4px - increased for titles */
--text-3xl: 2.05rem; /* 32.8px - increased for titles */
--text-4xl: 2.5rem; /* 40px - increased */
--text-5xl: 3rem; /* 48px - increased */
/* Font Weights */
--weight-normal: 400;