feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
This commit is contained in:
Antigravity
@@ -151,8 +151,8 @@ export function OrganizeNotebookDialog({
|
||||
{/* Header */}
|
||||
<div className="px-6 py-5 border-b border-border/60 flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-blueprint/10 flex items-center justify-center">
|
||||
<Sparkles size={16} className="text-blueprint" />
|
||||
<div className="w-8 h-8 rounded-lg bg-brand-accent/10 flex items-center justify-center">
|
||||
<Sparkles size={16} className="text-brand-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-[13px] font-semibold text-ink">{t('organizeNotebook.title')}</h2>
|
||||
@@ -194,7 +194,7 @@ export function OrganizeNotebookDialog({
|
||||
<ul className="space-y-2">
|
||||
{[t('organizeNotebook.bulletThemes'), t('organizeNotebook.bulletSubfolders'), t('organizeNotebook.bulletPreview')].map(item => (
|
||||
<li key={item} className="flex items-center gap-2 text-[12px] text-muted-ink">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-blueprint shrink-0" />
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-brand-accent shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
@@ -213,13 +213,13 @@ export function OrganizeNotebookDialog({
|
||||
className="flex flex-col items-center justify-center p-12 gap-6 min-h-[300px]"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 rounded-2xl bg-blueprint/10 flex items-center justify-center">
|
||||
<Sparkles size={28} className="text-blueprint" />
|
||||
<div className="w-16 h-16 rounded-2xl bg-brand-accent/10 flex items-center justify-center">
|
||||
<Sparkles size={28} className="text-brand-accent" />
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
|
||||
className="absolute -inset-2 rounded-2xl border-2 border-transparent border-t-blueprint/40"
|
||||
className="absolute -inset-2 rounded-2xl border-2 border-transparent border-t-brand-accent/40"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center space-y-1.5">
|
||||
@@ -232,7 +232,7 @@ export function OrganizeNotebookDialog({
|
||||
key={i}
|
||||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||||
transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.2 }}
|
||||
className="w-1.5 h-1.5 rounded-full bg-blueprint"
|
||||
className="w-1.5 h-1.5 rounded-full bg-brand-accent"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -249,9 +249,9 @@ export function OrganizeNotebookDialog({
|
||||
className="p-5 space-y-4"
|
||||
>
|
||||
{/* Summary bar */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-blueprint/5 border border-blueprint/20">
|
||||
<Sparkles size={12} className="text-blueprint shrink-0" />
|
||||
<p className="text-[11px] text-blueprint font-medium">
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-brand-accent/5 border border-brand-accent/20">
|
||||
<Sparkles size={12} className="text-brand-accent shrink-0" />
|
||||
<p className="text-[11px] text-brand-accent font-medium">
|
||||
{t('organizeNotebook.previewSummary', {
|
||||
groups: editableGroups.length,
|
||||
notes: totalNotes,
|
||||
@@ -282,17 +282,17 @@ export function OrganizeNotebookDialog({
|
||||
<div className="flex items-center gap-2 px-3 py-2.5">
|
||||
<div className="w-6 h-6 rounded-md flex items-center justify-center shrink-0">
|
||||
{group.isNew
|
||||
? <FolderPlus size={13} className="text-blueprint" />
|
||||
? <FolderPlus size={13} className="text-brand-accent" />
|
||||
: <Folder size={13} className="text-muted-ink" />
|
||||
}
|
||||
</div>
|
||||
<input
|
||||
value={group.name}
|
||||
onChange={e => handleRenameGroup(idx, e.target.value)}
|
||||
className="flex-1 bg-transparent text-[12px] font-semibold text-ink outline-none focus:text-blueprint transition-colors min-w-0"
|
||||
className="flex-1 bg-transparent text-[12px] font-semibold text-ink outline-none focus:text-brand-accent transition-colors min-w-0"
|
||||
/>
|
||||
{group.isNew && (
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-blueprint/10 text-blueprint shrink-0">
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-brand-accent/10 text-brand-accent shrink-0">
|
||||
{t('organizeNotebook.badgeNew')}
|
||||
</span>
|
||||
)}
|
||||
@@ -328,8 +328,8 @@ export function OrganizeNotebookDialog({
|
||||
className="flex items-center gap-2 py-1.5 rounded-lg px-2 hover:bg-foreground/3 transition-colors group cursor-pointer"
|
||||
onClick={() => handleToggleNote(idx, note.id)}
|
||||
>
|
||||
<div className="w-4 h-4 rounded border border-border flex items-center justify-center shrink-0 group-hover:border-blueprint/50 transition-colors">
|
||||
<Check size={10} className="text-blueprint" />
|
||||
<div className="w-4 h-4 rounded border border-border flex items-center justify-center shrink-0 group-hover:border-brand-accent/50 transition-colors">
|
||||
<Check size={10} className="text-brand-accent" />
|
||||
</div>
|
||||
<span className="text-[11px] text-muted-ink truncate group-hover:text-ink transition-colors">
|
||||
{note.title || t('organizeNotebook.untitledNote')}
|
||||
@@ -361,7 +361,7 @@ export function OrganizeNotebookDialog({
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center justify-center p-12 gap-5 min-h-[300px]"
|
||||
>
|
||||
<Loader2 size={32} className="text-blueprint animate-spin" />
|
||||
<Loader2 size={32} className="text-brand-accent animate-spin" />
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-[14px] font-medium text-ink">{t('organizeNotebook.executingTitle')}</p>
|
||||
<p className="text-[12px] text-muted-ink">{t('organizeNotebook.executingSubtitle')}</p>
|
||||
|
||||
Reference in New Issue
Block a user