fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Normalize + Adapt: CSS tokens, RTL fixes, mobile nav, fluid charts

Browse Source 
Normalize:
- Add 10+ new CSS variables (brand-icon, brand-text, text-inverse, warning-*, etc.)
- Replace 35+ hardcoded hex colors with CSS variable references

Adapt:
- Add Slides link to mobile bottom nav (was unreachable on mobile)
- Fix RTL table alignment: text-align left → start
- Make chart height fluid: 380px → clamp(280px, 30vw, 420px)
- Fix carousel dot touch targets to minimum 24px
- Fix margin-left → margin-inline-start for RTL

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-25 18:27:27 +03:00
parent 25066af67c
commit cf169b6b69
2 changed files with 59 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/App.css
View File

@@ -17,6 +17,17 @@
--danger: #dc2626; --danger: #dc2626;
--danger-light: #fee2e2; --danger-light: #fee2e2;
--gold: #b8860b; --gold: #b8860b;
--brand-icon: #3b82f6;
--brand-text: #1e3a5f;
--text-inverse: #ffffff;
--warning-bg: #fef3c7;
--warning-text: #92400e;
--warning-border: #fcd34d;
--accent-hover: #1d4ed8;
--purple: #7c3aed;
--muted-light: #f1f5f9;
--dark-surface: #1e293b;
--dark-muted: #94a3b8;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 4px 12px rgba(0,0,0,0.08); --shadow: 0 4px 12px rgba(0,0,0,0.08);
--radius: 12px; --radius: 12px;
@@ -72,7 +83,7 @@ html[dir="rtl"] {
.error-container button { .error-container button {
padding: 10px 20px; padding: 10px 20px;
background: var(--text-primary); background: var(--text-primary);
color: white; color: var(--text-inverse);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@@ -129,7 +140,7 @@ html[dir="rtl"] {
.empty-state-action { .empty-state-action {
padding: 10px 20px; padding: 10px 20px;
background: var(--primary); background: var(--primary);
color: white; color: var(--text-inverse);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-weight: 500; font-weight: 500;
@@ -139,7 +150,7 @@ html[dir="rtl"] {
} }
.empty-state-action:hover { .empty-state-action:hover {
background: #1d4ed8; background: var(--accent-hover);
} }
/* Skeleton Loader */ /* Skeleton Loader */
@@ -192,14 +203,14 @@ html[dir="rtl"] {
} }
.nav-brand-icon { .nav-brand-icon {
color: #3b82f6; color: var(--brand-icon);
} }
.nav-brand-text { .nav-brand-text {
font-family: 'DM Sans', 'Inter', -apple-system, sans-serif; font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #1e3a5f; color: var(--brand-text);
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
@@ -208,13 +219,13 @@ html[dir="rtl"] {
-webkit-appearance: none; -webkit-appearance: none;
background: transparent; background: transparent;
border: none; border: none;
color: #3b82f6; color: var(--brand-icon);
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
padding: 2px 20px 2px 6px; padding: 2px 20px 2px 6px;
margin-left: 4px; margin-inline-start: 4px;
border-radius: 6px; border-radius: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -233,13 +244,13 @@ html[dir="rtl"] {
} }
.data-source-select option { .data-source-select option {
color: #1e3a5f; color: var(--brand-text);
background: white; background: var(--surface);
font-weight: 500; font-weight: 500;
} }
.data-source-select option:disabled { .data-source-select option:disabled {
color: #94a3b8; color: var(--text-muted);
} }
.nav-links { .nav-links {
@@ -279,7 +290,7 @@ html[dir="rtl"] {
.nav-link.active { .nav-link.active {
background: var(--primary); background: var(--primary);
color: white; color: var(--text-inverse);
border-color: var(--primary); border-color: var(--primary);
} }
@@ -327,12 +338,12 @@ html[dir="rtl"] .nav-lang-toggle {
align-items: center; align-items: center;
gap: 5px; gap: 5px;
padding: 6px 12px; padding: 6px 12px;
background: #fef3c7; background: var(--warning-bg);
color: #92400e; color: var(--warning-text);
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
border: 1px solid #fcd34d; border: 1px solid var(--warning-border);
} }
.offline-badge svg { .offline-badge svg {
@@ -538,7 +549,7 @@ html[dir="rtl"] .nav-lang-toggle {
} }
.chart-container { .chart-container {
height: 380px; height: clamp(280px, 30vw, 420px);
position: relative; position: relative;
} }
@@ -564,7 +575,7 @@ table th {
border-bottom: 2px solid var(--border); border-bottom: 2px solid var(--border);
} }
table th:first-child { text-align: left; } table th:first-child { text-align: start; }
table td { table td {
padding: 14px 12px; padding: 14px 12px;
@@ -573,7 +584,7 @@ table td {
color: var(--text-secondary); color: var(--text-secondary);
} }
table td:first-child { text-align: left; } table td:first-child { text-align: start; }
table tbody tr:hover { table tbody tr:hover {
background: var(--bg); background: var(--bg);
@@ -582,7 +593,7 @@ table tbody tr:hover {
.bold { font-weight: 700; color: var(--text-primary); } .bold { font-weight: 700; color: var(--text-primary); }
.muted { color: var(--text-muted); } .muted { color: var(--text-muted); }
.primary { color: var(--accent); font-weight: 600; } .primary { color: var(--accent); font-weight: 600; }
.purple { color: #7c3aed; font-weight: 600; } .purple { color: var(--purple); font-weight: 600; }
.positive { color: var(--success); font-weight: 600; } .positive { color: var(--success); font-weight: 600; }
.negative { color: var(--danger); font-weight: 600; } .negative { color: var(--danger); font-weight: 600; }
@@ -844,8 +855,8 @@ table tbody tr:hover {
} }
.metric-change.pending { .metric-change.pending {
background: var(--muted-light, #f1f5f9); background: var(--muted-light);
color: var(--text-muted, #64748b); color: var(--text-muted);
} }
.metric-change .pending-msg { .metric-change .pending-msg {
@@ -1032,9 +1043,15 @@ table tbody tr:hover {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 8px;
background-clip: content-box;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
} }
.carousel-dot .dot-label { .carousel-dot .dot-label {
@@ -1083,7 +1100,7 @@ table tbody tr:hover {
} }
.carousel-dots.labeled .carousel-dot.active .dot-label { .carousel-dots.labeled .carousel-dot.active .dot-label {
color: white; color: var(--text-inverse);
} }
/* Chart Sections */ /* Chart Sections */
@@ -1520,11 +1537,11 @@ table tbody tr:hover {
.btn-primary { .btn-primary {
background: var(--accent); background: var(--accent);
color: white; color: var(--text-inverse);
} }
.btn-primary:hover { .btn-primary:hover {
background: #2563eb; background: var(--accent);
} }
.btn-secondary { .btn-secondary {
@@ -1568,7 +1585,7 @@ table tbody tr:hover {
margin-top: 16px; margin-top: 16px;
padding: 8px 16px; padding: 8px 16px;
background: var(--accent); background: var(--accent);
color: white; color: var(--text-inverse);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@@ -1654,8 +1671,8 @@ table tbody tr:hover {
} }
.slide-actions button.delete:hover { .slide-actions button.delete:hover {
background: #fee2e2; background: var(--danger-light);
color: #dc2626; color: var(--danger);
} }
/* Slide Editor */ /* Slide Editor */
@@ -1793,7 +1810,7 @@ table tbody tr:hover {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); background: linear-gradient(135deg, var(--text-primary) 0%, var(--dark-surface) 100%);
z-index: 1000; z-index: 1000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1809,7 +1826,7 @@ table tbody tr:hover {
} }
.preview-title { .preview-title {
color: #f8fafc; color: var(--bg);
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 600; font-weight: 600;
margin-bottom: 40px; margin-bottom: 40px;
@@ -1838,11 +1855,11 @@ table tbody tr:hover {
} }
.preview-content .preview-kpis .kpi-label { .preview-content .preview-kpis .kpi-label {
color: #94a3b8; color: var(--dark-muted);
} }
.preview-footer { .preview-footer {
color: #64748b; color: var(--text-muted);
font-size: 14px; font-size: 14px;
margin-top: 40px; margin-top: 40px;
} }
@@ -1858,7 +1875,7 @@ table tbody tr:hover {
.preview-controls button { .preview-controls button {
padding: 10px 24px; padding: 10px 24px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: white; color: var(--text-inverse);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
@@ -2040,7 +2057,7 @@ html[dir="rtl"] .chart-export-btn.visible {
} }
.skeleton-card { .skeleton-card {
background: #f1f5f9; background: var(--muted-light);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
animation: skeleton-pulse 1.5s ease-in-out infinite; animation: skeleton-pulse 1.5s ease-in-out infinite;
@@ -2051,7 +2068,7 @@ html[dir="rtl"] .chart-export-btn.visible {
} }
.skeleton-line { .skeleton-line {
background: #e2e8f0; background: var(--border);
border-radius: 6px; border-radius: 6px;
} }

8
src/App.tsx
View File

@@ -224,6 +224,14 @@ function App() {
</svg> </svg>
<span>{t('nav.compare')}</span> <span>{t('nav.compare')}</span>
</NavLink> </NavLink>
<NavLink to="/slides" className="mobile-nav-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<line x1="8" y1="21" x2="16" y2="21"/>
<line x1="12" y1="17" x2="12" y2="21"/>
</svg>
<span>{t('nav.slides')}</span>
</NavLink>
<button <button
className="mobile-nav-item" className="mobile-nav-item"
onClick={switchLanguage} onClick={switchLanguage}