yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

style: UI refinements — navbar active state, card shadows, action card borders

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-03-30 16:10:06 -05:00
parent 6023ebf9d0
commit 3956140662
4 changed files with 39 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend-v2/src/app.css
View File

@@ -304,11 +304,18 @@
background: var(--card);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-sm);
padding: var(--card-pad);
transition: box-shadow 0.2s ease;
}
.module:hover {
box-shadow: var(--shadow-md);
}
.module.primary {
padding: var(--card-pad-primary);
box-shadow: var(--shadow-md);
}
.module.primary:hover {
box-shadow: var(--shadow-lg);
}
.module.flush { padding: 0; }
@@ -389,7 +396,7 @@
gap: var(--sp-1.5);
}
.tab:hover { color: var(--text-1); background: var(--card-hover); }
.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
.tab.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
.tab-badge {
font-size: var(--text-xs);
@@ -417,6 +424,13 @@
.page { padding: var(--sp-8) 0 var(--sp-20); }
.page-header { margin-bottom: var(--section-gap); }
.page-title {
font-size: var(--text-xl);
font-weight: 600;
color: var(--text-1);
letter-spacing: -0.01em;
line-height: var(--leading-tight);
}
.page-subtitle {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);

12
frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte
View File

@@ -16,7 +16,7 @@
} = $props();
</script>
<a {href} class="action-card {size}">
<a {href} class="action-card {size} {variant}">
<div class="action-card-left">
<div class="action-card-icon {variant}">
{#if variant === 'budget'}
@@ -44,14 +44,18 @@
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--sp-5);
border-radius: var(--radius-lg);
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
transition: all var(--transition);
border-left: 3px solid var(--border);
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
cursor: pointer;
text-decoration: none;
}
.action-card.budget { border-left-color: var(--accent); }
.action-card.inventory { border-left-color: var(--error); }
.action-card.fitness { border-left-color: var(--success); }
.action-card:hover {
transform: translateY(-2px);

23
frontend-v2/src/lib/components/layout/Navbar.svelte
View File

@@ -97,13 +97,13 @@
-webkit-backdrop-filter: blur(16px);
}
.navbar-inner {
max-width: 1200px;
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
height: 56px;
height: 52px;
padding: 0 var(--sp-6);
gap: var(--sp-6);
gap: var(--sp-5);
}
.navbar-logo {
font-weight: 600;
@@ -123,19 +123,24 @@
flex: 1;
}
.navbar-link {
padding: 6px var(--sp-3);
border-radius: var(--radius-sm);
font-size: var(--text-base);
padding: 5px var(--sp-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
transition: all var(--transition);
transition: all 0.15s ease;
background: none;
border: none;
position: relative;
text-decoration: none;
letter-spacing: 0.01em;
}
.navbar-link:hover { color: var(--text-1); background: var(--card-hover); }
.navbar-link.active {
color: var(--accent);
background: var(--accent-dim);
font-weight: 600;
}
.navbar-link:hover { color: var(--text-1); background: var(--accent-dim); }
.navbar-link.active { color: var(--text-1); background: var(--accent-dim); }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {

2
frontend-v2/src/routes/(app)/+page.svelte
View File

@@ -67,7 +67,7 @@
</aside>
<div class="app-surface">
<div class="page-header">
<div class="page-title">Dashboard</div>
<div class="page-subtitle">Dashboard</div>
<div class="page-greeting">Good to see you, <strong>{userName}</strong></div>
</div>