Polish Foundry desktop UI: billing redesign, sidebar hover menu, org switching fix

- Redesign billing page with task-hours pricing model (Free: 8h, Pro: 200h/seat)
- Add bulk hour purchase packages and Stripe payment management
- Remove Usage nav section, add upgrade CTA in Members for free plan
- Fix gear icon to open menu on hover with debounced timers
- Fix org switching in workspace flyout (portal outside-click detection)
- Fix tab strip padding when sidebar is collapsed
- Update website components and Tauri config

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nicholas Kissel 2026-03-11 19:34:25 -07:00
parent f6656a90af
commit ed6e6f6fa5
24 changed files with 1746 additions and 1028 deletions

View file

@ -7,14 +7,14 @@
--header-height: 3.5rem;
/* Theme colors (HSL for flexibility) */
--background: 20 14.3% 4.1%;
--foreground: 60 9.1% 97.8%;
--primary: 18.5 100% 50%;
--primary-foreground: 60 9.1% 97.8%;
--muted: 34 10% 10%;
--muted-foreground: 24 5.4% 63.9%;
--border: 12 6.5% 15.1%;
--card: 0 9.09% 6.47%;
--background: 240 10% 3.9%;
--foreground: 0 0% 100%;
--primary: 18 100% 50%;
--primary-foreground: 0 0% 100%;
--muted: 240 5% 7%;
--muted-foreground: 240 4% 66%;
--border: 0 0% 100% / 0.10;
--card: 240 6% 4%;
/* Shiki syntax highlighting */
--shiki-color-text: theme('colors.white');
@ -34,9 +34,9 @@
}
body {
@apply bg-black text-white antialiased;
font-family: 'Manrope', system-ui, sans-serif;
font-weight: 500;
@apply bg-[#09090b] text-white antialiased;
font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
font-weight: 400;
}
/* Text selection - matches rivet.dev */
@ -124,7 +124,7 @@
}
.glass-strong {
@apply bg-black/95 backdrop-blur-lg border border-white/10;
@apply bg-[#09090b]/95 backdrop-blur-lg border border-white/10;
}
/* Bento box card effects */
@ -179,11 +179,11 @@
/* Glow effect for buttons and interactive elements */
.glow-accent {
box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
box-shadow: 0 0 20px rgba(255, 79, 0, 0.3);
}
.glow-accent-hover:hover {
box-shadow: 0 0 30px rgba(255, 69, 0, 0.5);
box-shadow: 0 0 30px rgba(255, 79, 0, 0.5);
}
/* Code highlight styling */
@ -196,7 +196,7 @@
}
.code-highlight-ref.is-active {
background-color: rgba(255, 69, 0, 0.1);
background-color: rgba(255, 79, 0, 0.1);
}
.code-highlight-ref.is-active::before {
@ -206,7 +206,7 @@
top: 0;
bottom: 0;
width: 2px;
background-color: #ff4500;
background-color: #ff4f00;
}
/* Hide scrollbar */
@ -228,12 +228,12 @@
/* Backdrop with blur */
.backdrop-glow {
@apply backdrop-blur-lg bg-black/80;
@apply backdrop-blur-lg bg-[#09090b]/80;
}
/* Better focus ring */
.focus-ring {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-black;
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b];
}
}