Skip to content

Commit c1b3c08

Browse files
Paul Mulliganclaude
Paul Mulligan
and
claude
committed
feat: redesign UI as Optia — Signal theme, score-first, light + dark
Complete visual overhaul giving Optia a distinct identity (indigo/sky "Signal" palette) clearly different from the old AI SEO Copilot mint-on-charcoal look. - Token system via CSS variables (light default + dark) in tailwind.config.ts + globals.css; theme toggle persisted to chrome.storage (src/lib/theme.ts, ThemeToggle). - Score-first side panel: refreshed radial ScoreGauge hero with good/needs-work/poor states, category cards, summary pills, animated loading skeleton, and a perfect-score reward moment. - Restyled every UI primitive (Button/Input/Select/Toggle/Badge/Toast/Tooltip) and component (recommendation cards with a visible Copy affordance, options/API-key page, onboarding, footer); migrated all legacy token names (no leftover old styles). - New Optia brand mark + extension icons (16/32/48/128) generated from SVG via a 'pnpm icons' build step (sharp); replaces the robot icon. - New typography scale, spacing, radii, and accessible focus-visible rings. Quality gate green: eslint, tsc --noEmit, build, and 309 tests all pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 3dcb862 commit c1b3c08

43 files changed

Lines changed: 1224 additions & 594 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/dev.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="icon" type="image/svg+xml" href="/icons/icon-32.svg" />
6+
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
77
<title>Optia — Dev Preview</title>
88
<style>
9-
body { margin: 0; display: flex; justify-content: center; background: #111; }
10-
#frame { width: 715px; min-height: 100vh; }
9+
body { margin: 0; display: flex; justify-content: center; background: #e9eef5; }
10+
#frame { width: 440px; min-height: 100vh; }
1111
</style>
1212
</head>
1313
<body>

‎app/eslint.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,19 @@ export default [
127127
"no-unused-vars": "off",
128128
},
129129
},
130+
{
131+
// Build scripts (icon generation, etc.) - Node.js environment
132+
files: ["scripts/**/*.{js,mjs}"],
133+
languageOptions: {
134+
parserOptions: {
135+
ecmaVersion: "latest",
136+
sourceType: "module",
137+
},
138+
globals: {
139+
...globals.node,
140+
},
141+
},
142+
},
130143
{
131144
ignores: [
132145
"node_modules/**",

‎app/icons/icon-128.png‎

-8.79 KB
Loading

‎app/icons/icon-16.png‎

129 Bytes
Loading

‎app/icons/icon-32.png‎

-348 Bytes
Loading

‎app/icons/icon-48.png‎

-1.13 KB
Loading

‎app/icons/icon.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎app/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"dev:ext": "vite",
99
"build": "tsc && vite build",
1010
"preview": "vite preview",
11+
"icons": "node scripts/generate-icons.mjs",
1112
"test": "vitest run",
1213
"test:watch": "vitest",
1314
"lint": "eslint .",
@@ -49,6 +50,7 @@
4950
"globals": "^17.4.0",
5051
"jsdom": "^26.1.0",
5152
"postcss": "^8.5.4",
53+
"sharp": "^0.35.2",
5254
"standard-version": "^9.5.0",
5355
"tailwindcss": "^3.4.17",
5456
"typescript": "^5.8.3",

0 commit comments

Comments
 (0)