diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e8f586c..79bc89eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,7 @@ and this project adheres to - 🐛(frontend) stop the installed app reopening the room it came from - 🐛(backend) serialize lazy title in summary payload - 💄(frontend) show pointer cursor on interactive switches +- 🐛(frontend) fix icon centering in the Switch primitive ## [1.24.0] - 2026-07-21 diff --git a/src/frontend/src/primitives/Switch.tsx b/src/frontend/src/primitives/Switch.tsx index 91d4a567..8713be28 100644 --- a/src/frontend/src/primitives/Switch.tsx +++ b/src/frontend/src/primitives/Switch.tsx @@ -35,30 +35,29 @@ const StyledSwitch = styled(RACSwitch, { transitionDelay: '0ms', }, }, - '& .checkmark': { + '& .checkmark, & .cross': { position: 'absolute', - display: 'block', - top: '50%', - right: '0.1rem', - transform: 'translateY(-50%)', - color: 'primary.800', - fontSize: '0.75rem', - fontWeight: 'bold', + top: 0, + bottom: 0, + width: '1.313rem', // knob width + 2 × knob margin + display: 'grid', + placeItems: 'center', pointerEvents: 'none', zIndex: 1, + '& svg': { + display: 'block', + width: '0.875rem', + height: '0.875rem', + }, + }, + '& .checkmark': { + right: 0, + color: 'primary.800', opacity: 0, }, '& .cross': { - position: 'absolute', - display: 'block', - top: '50%', - left: '0.13rem', - transform: 'translateY(-50%)', + left: 0, color: 'white', - fontSize: '0.70rem', - fontWeight: 'bold', - pointerEvents: 'none', - zIndex: 1, opacity: 1, transition: 'opacity 200ms', transitionDelay: '0ms', @@ -115,10 +114,10 @@ export const Switch = ({ children, ...props }: SwitchProps) => ( <>