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

Improve desktop UI readability

Browse Source 
Typography improvements:
- Base font size increased to 15px
- Better text color contrast (darker text-secondary/muted)
- Stat card values: 2rem with font-weight 700
- Page titles: 1.75rem with font-weight 700
- Table font: 0.9375rem with better padding
- Toggle switches: larger buttons (0.8125rem, 6px 14px padding)
- Metric selector buttons: 0.8125rem with better padding
- Filter controls: larger labels and inputs
- Period banner: 1.75rem year display
- Metric cards: larger values (1.25rem)
- Nav links: 0.9375rem font size

Visual improvements:
- Subtle box shadows on stat/metric cards
- Better border contrast
- Improved spacing throughout
This commit is contained in:
fahed
2026-02-03 15:39:03 +03:00
parent eb477158cb
commit 00724aac3d
1 changed files with 110 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/App.css
View File

@@ -3,12 +3,12 @@
======================================== */ ======================================== */
:root { :root {
--bg: #fafafa; --bg: #f8fafc;
--surface: #ffffff; --surface: #ffffff;
--border: #e5e5e5; --border: #e2e8f0;
--text-primary: #171717; --text-primary: #0f172a;
--text-secondary: #525252; --text-secondary: #334155;
--text-muted: #a3a3a3; --text-muted: #64748b;
--accent: #2563eb; --accent: #2563eb;
--primary: #2563eb; --primary: #2563eb;
--accent-light: #dbeafe; --accent-light: #dbeafe;
@@ -17,8 +17,8 @@
--danger: #dc2626; --danger: #dc2626;
--danger-light: #fee2e2; --danger-light: #fee2e2;
--gold: #b8860b; --gold: #b8860b;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow: 0 4px 12px rgba(0,0,0,0.05); --shadow: 0 4px 12px rgba(0,0,0,0.08);
--radius: 12px; --radius: 12px;
} }
@@ -32,8 +32,10 @@ body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text-primary); color: var(--text-primary);
line-height: 1.5; font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* Loading & Error */ /* Loading & Error */
@@ -178,8 +180,8 @@ body {
.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.125rem; font-size: 1.25rem;
font-weight: 600; font-weight: 700;
color: #1e3a5f; color: #1e3a5f;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
@@ -230,9 +232,9 @@ body {
.nav-link { .nav-link {
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
padding: 10px 18px; padding: 10px 20px;
border-radius: 8px; border-radius: 8px;
font-size: 0.875rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 600;
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
@@ -314,15 +316,16 @@ body {
} }
.page-title h1 { .page-title h1 {
font-size: 1.5rem; font-size: 1.75rem;
font-weight: 600; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin-bottom: 4px; margin-bottom: 6px;
color: var(--text-primary);
} }
.page-title p { .page-title p {
color: var(--text-muted); color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.9375rem;
} }
/* Page Title with Actions (Labels toggle) */ /* Page Title with Actions (Labels toggle) */
@@ -331,7 +334,7 @@ body {
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
margin-bottom: 24px; margin-bottom: 28px;
} }
.page-title-with-actions .page-title { .page-title-with-actions .page-title {
@@ -341,14 +344,14 @@ body {
.toggle-with-label { .toggle-with-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
margin-top: 4px; margin-top: 6px;
} }
.toggle-with-label .toggle-text { .toggle-with-label .toggle-text {
font-size: 0.6875rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
color: var(--text-muted); color: var(--text-secondary);
} }
/* Filters - now uses .controls for consistency */ /* Filters - now uses .controls for consistency */
@@ -363,31 +366,32 @@ body {
.stat-card { .stat-card {
background: var(--surface); background: var(--surface);
padding: 24px; padding: 28px;
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
} }
.stat-card h3 { .stat-card h3 {
font-size: 0.75rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
margin-bottom: 8px; margin-bottom: 10px;
} }
.stat-value { .stat-value {
font-size: 1.75rem; font-size: 2rem;
font-weight: 600; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
.stat-change { .stat-change {
font-size: 0.75rem; font-size: 0.875rem;
font-weight: 500; font-weight: 600;
margin-top: 4px; margin-top: 6px;
} }
.stat-change.positive { color: var(--success); } .stat-change.positive { color: var(--success); }
@@ -425,7 +429,7 @@ body {
} }
.chart-card h2 { .chart-card h2 {
font-size: 0.875rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 20px; margin-bottom: 20px;
@@ -463,24 +467,24 @@ body {
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.8125rem; font-size: 0.9375rem;
} }
table th { table th {
font-weight: 500; font-weight: 600;
font-size: 0.6875rem; font-size: 0.75rem;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
padding: 12px; padding: 14px 12px;
text-align: right; text-align: right;
border-bottom: 1px solid var(--border); border-bottom: 2px solid var(--border);
} }
table th:first-child { text-align: left; } table th:first-child { text-align: left; }
table td { table td {
padding: 12px; padding: 14px 12px;
text-align: right; text-align: right;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
color: var(--text-secondary); color: var(--text-secondary);
@@ -492,12 +496,12 @@ table tbody tr:hover {
background: var(--bg); background: var(--bg);
} }
.bold { font-weight: 600; 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); } .primary { color: var(--accent); font-weight: 600; }
.purple { color: #7c3aed; } .purple { color: #7c3aed; font-weight: 600; }
.positive { color: var(--success); } .positive { color: var(--success); font-weight: 600; }
.negative { color: var(--danger); } .negative { color: var(--danger); font-weight: 600; }
/* Comparison Page */ /* Comparison Page */
.controls { .controls {
@@ -526,20 +530,20 @@ table tbody tr:hover {
} }
.controls h3 { .controls h3 {
font-size: 0.75rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 600;
color: var(--text-muted); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
} }
.controls-reset { .controls-reset {
background: transparent; background: transparent;
border: 1px solid var(--border); border: 1px solid var(--border);
color: var(--text-muted); color: var(--text-secondary);
padding: 4px 12px; padding: 6px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -578,22 +582,22 @@ table tbody tr:hover {
} }
.control-group label { .control-group label {
font-size: 0.6875rem; font-size: 0.75rem;
font-weight: 500; font-weight: 600;
color: var(--text-muted); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
} }
.control-group select, .control-group select,
.control-group input[type="date"] { .control-group input[type="date"] {
padding: 10px 14px; padding: 12px 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 6px; border-radius: 8px;
font-size: 0.875rem; font-size: 0.9375rem;
background: var(--surface); background: var(--surface);
color: var(--text-primary); color: var(--text-primary);
min-width: 150px; min-width: 160px;
} }
.control-group select:focus, .control-group select:focus,
@@ -630,16 +634,16 @@ table tbody tr:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 24px; gap: 32px;
background: var(--bg); background: var(--bg);
padding: 20px 32px; padding: 24px 40px;
border-radius: 12px; border-radius: 12px;
margin-bottom: 24px; margin-bottom: 28px;
} }
.period-display-banner .period-box { .period-display-banner .period-box {
text-align: center; text-align: center;
min-width: 180px; min-width: 200px;
} }
.period-display-banner .period-box.prev { .period-display-banner .period-box.prev {
@@ -651,30 +655,30 @@ table tbody tr:hover {
} }
.period-display-banner .period-label { .period-display-banner .period-label {
font-size: 0.6875rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 4px; margin-bottom: 6px;
} }
.period-display-banner .period-value { .period-display-banner .period-value {
font-size: 1.5rem; font-size: 1.75rem;
font-weight: 600; font-weight: 700;
margin-bottom: 2px; margin-bottom: 4px;
} }
.period-display-banner .period-dates { .period-display-banner .period-dates {
font-size: 0.8125rem; font-size: 0.9375rem;
color: var(--text-muted); color: var(--text-secondary);
} }
.period-display-banner .period-vs { .period-display-banner .period-vs {
font-size: 0.875rem; font-size: 1rem;
font-weight: 500; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
padding: 0 8px; padding: 0 12px;
} }
/* Comparison Metrics */ /* Comparison Metrics */
@@ -687,25 +691,26 @@ table tbody tr:hover {
.metric-card { .metric-card {
background: var(--surface); background: var(--surface);
padding: 20px; padding: 24px;
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
} }
.metric-card h4 { .metric-card h4 {
font-size: 0.75rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 600;
color: var(--text-muted); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.04em;
margin-bottom: 12px; margin-bottom: 14px;
} }
.metric-values { .metric-values {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 14px;
} }
.metric-period { .metric-period {
@@ -713,15 +718,15 @@ table tbody tr:hover {
} }
.metric-period .year { .metric-period .year {
font-size: 0.625rem; font-size: 0.75rem;
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 2px; margin-bottom: 4px;
} }
.metric-period .value { .metric-period .value {
font-size: 1.125rem; font-size: 1.25rem;
font-weight: 600; font-weight: 700;
} }
.metric-period.previous .value { color: var(--text-muted); } .metric-period.previous .value { color: var(--text-muted); }
@@ -729,19 +734,19 @@ table tbody tr:hover {
.metric-change { .metric-change {
text-align: center; text-align: center;
padding: 6px 10px; padding: 8px 12px;
border-radius: 6px; border-radius: 8px;
min-width: 70px; min-width: 80px;
} }
.metric-change .pct { .metric-change .pct {
font-size: 0.875rem; font-size: 0.9375rem;
font-weight: 600; font-weight: 700;
} }
.metric-change .abs { .metric-change .abs {
font-size: 0.625rem; font-size: 0.75rem;
opacity: 0.8; opacity: 0.9;
} }
.metric-change.positive { .metric-change.positive {
@@ -797,31 +802,32 @@ table tbody tr:hover {
.toggle-switch { .toggle-switch {
display: flex; display: flex;
background: var(--border); background: var(--border);
padding: 2px; padding: 3px;
border-radius: 12px; border-radius: 10px;
gap: 0; gap: 2px;
} }
.toggle-switch button { .toggle-switch button {
border: none; border: none;
background: transparent; background: transparent;
color: var(--text-muted); color: var(--text-muted);
padding: 3px 10px; padding: 6px 14px;
border-radius: 10px; border-radius: 8px;
font-size: 0.625rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.25s ease; transition: all 0.2s ease;
} }
.toggle-switch button:hover:not(.active) { .toggle-switch button:hover:not(.active) {
color: var(--text-secondary); color: var(--text-secondary);
background: rgba(0,0,0,0.03);
} }
.toggle-switch button.active { .toggle-switch button.active {
background: var(--surface); background: var(--surface);
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
/* Data Labels Toggle */ /* Data Labels Toggle */
@@ -855,9 +861,9 @@ table tbody tr:hover {
border: none; border: none;
background: transparent; background: transparent;
color: var(--text-muted); color: var(--text-muted);
padding: 6px 12px; padding: 7px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 0.75rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;