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

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;