fix: unverified device warning — rounded corners, left accent border

Replaced full-width sharp-cornered flat block with a compact rounded
notice: R300 border-radius, 3px amber left border accent, slight side
margins (S300) and bottom gap (S100) so it sits naturally above the
composer without looking jarring.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-04 12:48:19 -04:00
parent 696e958a00
commit c80f8c6427
+6 -3
View File
@@ -854,16 +854,19 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
alignItems="Center" alignItems="Center"
gap="200" gap="200"
style={{ style={{
padding: `${config.space.S100} ${config.space.S300}`, margin: `0 ${config.space.S300} ${config.space.S100}`,
padding: `${config.space.S100} ${config.space.S200}`,
borderRadius: config.radii.R300,
background: color.Warning.Container, background: color.Warning.Container,
borderLeft: `3px solid ${color.Warning.Main}`,
}} }}
> >
<Icon <Icon
size="100" size="100"
src={Icons.Shield} src={Icons.Shield}
style={{ color: color.Warning.OnContainer, flexShrink: 0 }} style={{ color: color.Warning.OnContainer, opacity: 0.8, flexShrink: 0 }}
/> />
<Text size="T200" style={{ color: color.Warning.OnContainer }}> <Text size="T200" style={{ color: color.Warning.OnContainer, opacity: 0.9 }}>
{roomUnverifiedDeviceCount}{' '} {roomUnverifiedDeviceCount}{' '}
{roomUnverifiedDeviceCount === 1 ? 'unverified device' : 'unverified devices'} in this {roomUnverifiedDeviceCount === 1 ? 'unverified device' : 'unverified devices'} in this
room room