diff --git a/packages/app/src/components/shell/ProjectCard.tsx b/packages/app/src/components/shell/ProjectCard.tsx
index add0665..dbdf640 100644
--- a/packages/app/src/components/shell/ProjectCard.tsx
+++ b/packages/app/src/components/shell/ProjectCard.tsx
@@ -27,30 +27,30 @@ export function ProjectCard({ workspaceId, projectId, name, framework, appUrl, d
{
- (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.08)';
- (e.currentTarget as HTMLElement).style.borderColor = 'rgba(0,0,0,0.12)';
+ (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.12)';
+ (e.currentTarget as HTMLElement).style.borderColor = 'rgba(51,133,255,0.35)';
}}
onMouseLeave={e => {
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
- (e.currentTarget as HTMLElement).style.borderColor = 'rgba(0,0,0,0.07)';
+ (e.currentTarget as HTMLElement).style.borderColor = 'var(--card-border)';
}}
>
@@ -59,14 +59,14 @@ export function ProjectCard({ workspaceId, projectId, name, framework, appUrl, d
{appUrl}
)}
{description && (
-
+
{description}
)}
diff --git a/packages/app/src/components/shell/ProjectSettingsForm.tsx b/packages/app/src/components/shell/ProjectSettingsForm.tsx
index 13ee84f..6aa471c 100644
--- a/packages/app/src/components/shell/ProjectSettingsForm.tsx
+++ b/packages/app/src/components/shell/ProjectSettingsForm.tsx
@@ -14,18 +14,19 @@ interface ProjectSettingsFormProps {
}
const SECTION: React.CSSProperties = {
- background: '#FFFFFF',
- border: '1px solid rgba(0,0,0,0.07)',
+ background: 'var(--card-bg)',
+ border: '1px solid var(--card-border)',
borderRadius: 14,
padding: '24px 28px',
marginBottom: 20,
+ transition: 'background 0.2s, border-color 0.2s',
};
const LABEL: React.CSSProperties = {
display: 'block',
fontSize: '0.8125rem',
fontWeight: 600,
- color: '#0A0A0A',
+ color: 'var(--card-text)',
marginBottom: 6,
};
@@ -33,17 +34,17 @@ const INPUT: React.CSSProperties = {
width: '100%',
fontSize: '0.875rem',
padding: '9px 12px',
- border: '1px solid rgba(0,0,0,0.12)',
+ border: '1px solid var(--input-border)',
borderRadius: 9,
fontFamily: "'Inter', -apple-system, sans-serif",
- color: '#0A0A0A',
- background: '#FAFAFA',
+ color: 'var(--input-text)',
+ background: 'var(--input-bg)',
boxSizing: 'border-box',
};
const BTN_PRIMARY: React.CSSProperties = {
display: 'inline-flex', alignItems: 'center', gap: 6,
- background: '#0A0A0A', color: '#FFFFFF',
+ background: 'var(--btn-bg)', color: 'var(--btn-fg)',
fontSize: '0.875rem', fontWeight: 600,
padding: '9px 20px', borderRadius: 9,
border: 'none', cursor: 'pointer', letterSpacing: '-0.01em',
@@ -126,7 +127,7 @@ export function ProjectSettingsForm({
<>
{/* General */}
-
General
+ General
Only Designers, Developers, and Owners can edit project settings.
+ Only Designers, Developers, and Owners can edit project settings.
)}
@@ -205,7 +206,7 @@ export function ProjectSettingsForm({
Danger zone
-
+
Deleting this project is permanent. All artboards, diffs, and origins will be removed. To confirm,
type the project name below.
diff --git a/packages/app/src/components/shell/WorkspaceCard.tsx b/packages/app/src/components/shell/WorkspaceCard.tsx
index 01d5adb..8829fd8 100644
--- a/packages/app/src/components/shell/WorkspaceCard.tsx
+++ b/packages/app/src/components/shell/WorkspaceCard.tsx
@@ -22,20 +22,20 @@ export function WorkspaceCard({ id, name, plan, createdAt }: WorkspaceCardProps)
{
- (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.08)';
- (e.currentTarget as HTMLElement).style.borderColor = 'rgba(0,0,0,0.12)';
+ (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 16px rgba(0,0,0,0.12)';
+ (e.currentTarget as HTMLElement).style.borderColor = 'rgba(51,133,255,0.35)';
}}
onMouseLeave={e => {
(e.currentTarget as HTMLElement).style.boxShadow = 'none';
- (e.currentTarget as HTMLElement).style.borderColor = 'rgba(0,0,0,0.07)';
+ (e.currentTarget as HTMLElement).style.borderColor = 'var(--card-border)';
}}
>
{/* Workspace icon */}
@@ -54,7 +54,7 @@ export function WorkspaceCard({ id, name, plan, createdAt }: WorkspaceCardProps)
-
+
{name}
-
+
Created {new Date(createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
diff --git a/packages/app/src/components/shell/WorkspaceSettingsForm.tsx b/packages/app/src/components/shell/WorkspaceSettingsForm.tsx
index 992581f..3cdcef3 100644
--- a/packages/app/src/components/shell/WorkspaceSettingsForm.tsx
+++ b/packages/app/src/components/shell/WorkspaceSettingsForm.tsx
@@ -10,18 +10,19 @@ interface WorkspaceSettingsFormProps {
}
const SECTION: React.CSSProperties = {
- background: '#FFFFFF',
- border: '1px solid rgba(0,0,0,0.07)',
+ background: 'var(--card-bg)',
+ border: '1px solid var(--card-border)',
borderRadius: 14,
padding: '24px 28px',
marginBottom: 20,
+ transition: 'background 0.2s, border-color 0.2s',
};
const LABEL: React.CSSProperties = {
display: 'block',
fontSize: '0.8125rem',
fontWeight: 600,
- color: '#0A0A0A',
+ color: 'var(--card-text)',
marginBottom: 6,
};
@@ -29,17 +30,17 @@ const INPUT: React.CSSProperties = {
width: '100%',
fontSize: '0.875rem',
padding: '9px 12px',
- border: '1px solid rgba(0,0,0,0.12)',
+ border: '1px solid var(--input-border)',
borderRadius: 9,
fontFamily: "'Inter', -apple-system, sans-serif",
- color: '#0A0A0A',
- background: '#FAFAFA',
+ color: 'var(--input-text)',
+ background: 'var(--input-bg)',
boxSizing: 'border-box',
};
const BTN_PRIMARY: React.CSSProperties = {
display: 'inline-flex', alignItems: 'center', gap: 6,
- background: '#0A0A0A', color: '#FFFFFF',
+ background: 'var(--btn-bg)', color: 'var(--btn-fg)',
fontSize: '0.875rem', fontWeight: 600,
padding: '9px 20px', borderRadius: 9,
border: 'none', cursor: 'pointer', letterSpacing: '-0.01em',
@@ -99,8 +100,8 @@ function TeamInviteForm({ workspaceId }: { workspaceId: string }) {
style={{
fontSize: '0.75rem', fontWeight: 600, padding: '5px 13px', borderRadius: 8,
border: `1px solid ${role === r ? '#0066FF' : 'rgba(0,0,0,0.12)'}`,
- background: role === r ? 'rgba(0,102,255,0.08)' : '#FFFFFF',
- color: role === r ? '#0066FF' : '#52525B',
+ background: role === r ? 'rgba(0,102,255,0.08)' : 'var(--btn-idle-bg)',
+ color: role === r ? '#0066FF' : 'var(--btn-idle-fg)',
cursor: 'pointer',
}}
>
@@ -228,7 +229,7 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
<>
{/* General */}
-
+
General
@@ -257,16 +258,16 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
Rename failed — try again
)}
{!isOwner && (
- Only workspace owners can rename.
+ Only workspace owners can rename.
)}
{/* IDE Integration */}
-
+
IDE Integration
-
+
Issue a signed workspace token and copy the config snippet into your editor. Tokens expire after 30 days.
@@ -278,9 +279,9 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
onClick={() => setAgentType(t)}
style={{
fontSize: '0.75rem', fontWeight: 600, padding: '6px 14px', borderRadius: 8,
- border: `1px solid ${agentType === t ? '#0066FF' : 'rgba(0,0,0,0.12)'}`,
- background: agentType === t ? 'rgba(0,102,255,0.08)' : '#FFFFFF',
- color: agentType === t ? '#0066FF' : '#52525B',
+ border: `1px solid ${agentType === t ? '#0066FF' : 'var(--btn-idle-border)'}`,
+ background: agentType === t ? 'rgba(0,102,255,0.08)' : 'var(--btn-idle-bg)',
+ color: agentType === t ? '#0066FF' : 'var(--btn-idle-fg)',
cursor: 'pointer',
}}
>
@@ -335,7 +336,7 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
}}>
{configText}
-
+
Paste this into your{' '}
{agentType === 'CURSOR' ? (
.cursorrules
@@ -351,10 +352,10 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
{/* Team */}
{isOwner && (
-
+
Team
-
+
Add a team member using their Clerk user ID. You can find this in the Clerk dashboard under Users.
@@ -368,7 +369,7 @@ export function WorkspaceSettingsForm({ workspaceId, workspaceName, memberRole }
Danger zone
-
+
Deleting this workspace is permanent and cannot be undone. All projects and artboards will be lost.