Repository navigation
feat(agents): issue-3-change-the-storybook-overview-brand-icon - #8
Conversation
The previous sidebar logos and favicon used a nested-square mark (outer rounded rect stroke + centred filled rect) that no longer matches the current MCTL visual identity. Replace all three SVG assets in apps/storybook/public/ with a stylised "M" letterform on a cyan square background, removing the old geometry entirely. - mctl-logo-light.svg: cyan square mark + white M stroke + light wordmark (for dark chrome) - mctl-logo-dark.svg: teal square mark + white M stroke + dark wordmark (for light chrome) - favicon.svg: 32x32 standalone mark with prefers-color-scheme media query for dual-mode OS theming No configuration, theme colour values, or story files are changed. pnpm build:storybook completes cleanly and storybook-static/ contains the updated SVG artefacts. Proposal: platform-gitops/agents-state/mctl-design/proposals/issue-3-change-the-storybook-overview-brand-icon/
|
Claude finished @mashkovd's task in 2m 21s —— View job PR Review
SummaryThree SVG files updated to replace the old nested-rect icon with a solid-filled square + stylised-M polyline. No design tokens, build config, or component logic involved. No P1/P2 findings. 3 P3 nits posted as inline comments:
Approved — no blocking issues. |
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
| @media (prefers-color-scheme: dark) { | ||
| .bg { fill: #00e5ff; } | ||
| .stroke { stroke: #0a0b0d; } | ||
| } |
There was a problem hiding this comment.
P3 — The @media (prefers-color-scheme: dark) block is a no-op: every declaration inside it is identical to the defaults above. Either differentiate the dark-mode colours or remove the block entirely to avoid misleading future editors into thinking dark-mode adaptation is already wired up.
| </style> | ||
| <!-- Icon mark: stylised M in a square --> | ||
| <rect class="bg" x="1" y="1" width="30" height="30" rx="5"/> | ||
| <polyline class="stroke" points="7,22 7,10 16,19 25,10 25,22" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> |
There was a problem hiding this comment.
P3 — The <polyline> uses class="stroke" (CSS) for the stroke colour but inline attributes for stroke-width, stroke-linecap, and stroke-linejoin. The two logo SVGs use all-inline presentation attributes consistently. For uniformity, either move everything into the CSS class or drop the class and use an inline stroke attribute (matching the logo files).
| <!-- Icon mark: stylised M in a square --> | ||
| <rect x="1" y="1" width="30" height="30" rx="5" fill="#00b8cc"/> | ||
| <polyline points="7,22 7,10 16,19 25,10 25,22" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> | ||
| <!-- Wordmark --> |
There was a problem hiding this comment.
P3 — The text anchor moved from x="32" to x="40" (8 px right) to clear the wider icon, but width="98" and viewBox="0 0 98 32" were not updated. Bold 18 px "MCTL" with letter-spacing="1.5" is roughly 56–60 px wide, placing the right edge at ~x 96–100 — right at or past the viewBox boundary. Consider widening to width="106" and viewBox="0 0 106 32" to give the wordmark comfortable breathing room. Same applies to mctl-logo-light.svg.
mctl-claude-remote
Bot
added
steward:merged
Implements accepted proposal
mctl-design/issue-3-change-the-storybook-overview-brand-icon.Spec: https://github.com/mctlhq/mctl-gitops/tree/main/platform-gitops/agents-state/mctl-design/proposals/issue-3-change-the-storybook-overview-brand-icon/
Generated by mctl-agents Tier 2 implementer. Review carefully — this PR was opened automatically and the spec may have gaps.
Closes #3