admin/honeyDueWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign app UI — top nav, clean dashboard, warm branding

Browse Source 
- Replace sidebar with top navigation bar (like Airbnb/Nextdoor)
- Redesign dashboard: home cards, coming up tasks, quick action pills
- Remove widget-heavy layout (charts, stats, activity feed)
- Add landing page with hero, features, how-it-works, CTA sections
- Update auth pages with split layout
- Clean white theme with neutral grays, brand orange/teal accents
- Friendly copy across all empty states and page headers
- Add Bricolage Grotesque + Outfit fonts
- Default to light mode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
treyt
2026-03-03 13:06:13 -06:00
parent a0e38e5ae5
commit db89ddb861
37 changed files with 1622 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/loading-skeleton.tsx
+11 -11
View File
@@ -10,9 +10,9 @@ export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{Array.from({ length: count }).map((_, i) => (
<div key={i} className="rounded-lg border p-4 space-y-3">
<Skeleton className="h-5 w-3/4" />
<Skeleton className="h-4 w-1/2" />
<div key={i} className="rounded-2xl border bg-card p-5 space-y-3">
<Skeleton className="h-5 w-3/4 rounded-lg" />
<Skeleton className="h-4 w-1/2 rounded-lg" />
<div className="flex gap-2 pt-2"><Skeleton className="h-6 w-16 rounded-full" /><Skeleton className="h-6 w-16 rounded-full" /></div>
</div>
))}
@@ -23,10 +23,10 @@ export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
return (
<div className="space-y-3">
{Array.from({ length: count }).map((_, i) => (
<div key={i} className="flex items-center gap-4 rounded-lg border p-4">
<Skeleton className="size-10 rounded-full" />
<div className="flex-1 space-y-2"><Skeleton className="h-4 w-1/3" /><Skeleton className="h-3 w-1/2" /></div>
<Skeleton className="h-8 w-20" />
<div key={i} className="flex items-center gap-4 rounded-2xl border bg-card p-4">
<Skeleton className="size-10 rounded-xl" />
<div className="flex-1 space-y-2"><Skeleton className="h-4 w-1/3 rounded-lg" /><Skeleton className="h-3 w-1/2 rounded-lg" /></div>
<Skeleton className="h-8 w-20 rounded-lg" />
</div>
))}
</div>
@@ -35,10 +35,10 @@ export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
if (variant === "detail") {
return (
<div className="space-y-6">
<Skeleton className="h-8 w-1/3" />
<Skeleton className="h-8 w-1/3 rounded-lg" />
<div className="grid grid-cols-2 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="space-y-2"><Skeleton className="h-3 w-20" /><Skeleton className="h-5 w-full" /></div>
<div key={i} className="space-y-2"><Skeleton className="h-3 w-20 rounded-lg" /><Skeleton className="h-5 w-full rounded-lg" /></div>
))}
</div>
</div>
@@ -47,8 +47,8 @@ export function LoadingSkeleton({ variant, count = 4 }: LoadingSkeletonProps) {
return (
<div className="flex gap-4 overflow-x-auto pb-4">
{Array.from({ length: count }).map((_, i) => (
<div key={i} className="min-w-[280px] rounded-lg border p-4 space-y-3">
<Skeleton className="h-5 w-24" /><Skeleton className="h-24 w-full rounded-md" /><Skeleton className="h-24 w-full rounded-md" />
<div key={i} className="min-w-[280px] rounded-2xl border bg-card p-4 space-y-3">
<Skeleton className="h-5 w-24 rounded-lg" /><Skeleton className="h-24 w-full rounded-xl" /><Skeleton className="h-24 w-full rounded-xl" />
</div>
))}
</div>