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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user