fix(ui): use folds Text priority instead of raw opacity (native-cinny nit)
Replaced raw style={{ opacity: N }} de-emphasis on folds <Text> with the
`priority` prop across search, schedule, profile, and tray UI. Left the cases
that aren't Text-priority candidates (an Icon opacity, a Box-row opacity, and a
Text with an explicit color token).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -133,7 +133,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
|
|||||||
<Text size="T300" truncate>
|
<Text size="T300" truncate>
|
||||||
{room.name}
|
{room.name}
|
||||||
</Text>
|
</Text>
|
||||||
<Text size="T200" style={{ opacity: 0.55 }}>
|
<Text size="T200" priority="300">
|
||||||
{msgEvents.length > 0
|
{msgEvents.length > 0
|
||||||
? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
|
? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
|
||||||
: 'No messages cached yet'}
|
: 'No messages cached yet'}
|
||||||
@@ -153,7 +153,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{!canLoadMore && events.length > 0 && (
|
{!canLoadMore && events.length > 0 && (
|
||||||
<Text size="T200" style={{ opacity: 0.5, flexShrink: 0 }}>
|
<Text size="T200" priority="300" style={{ flexShrink: 0 }}>
|
||||||
Fully cached
|
Fully cached
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
@@ -656,7 +656,7 @@ export function MessageSearch({
|
|||||||
<Icon size="200" src={senderOnlyMode ? Icons.User : Icons.Lock} />
|
<Icon size="200" src={senderOnlyMode ? Icons.User : Icons.Lock} />
|
||||||
<Text size="H5">{senderOnlyMode ? 'Messages from user' : 'Encrypted Rooms'}</Text>
|
<Text size="H5">{senderOnlyMode ? 'Messages from user' : 'Encrypted Rooms'}</Text>
|
||||||
{!senderOnlyMode && (
|
{!senderOnlyMode && (
|
||||||
<Text size="T200" style={{ opacity: 0.55 }}>
|
<Text size="T200" priority="300">
|
||||||
{`${localResult.searchedRoomsCount} / ${localResult.encryptedRoomsCount} cached`}
|
{`${localResult.searchedRoomsCount} / ${localResult.encryptedRoomsCount} cached`}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -280,7 +280,8 @@ export function SearchInput({
|
|||||||
<Text
|
<Text
|
||||||
size="T200"
|
size="T200"
|
||||||
truncate
|
truncate
|
||||||
style={{ opacity: 0.6, fontFamily: 'monospace', fontSize: '0.75em' }}
|
priority="300"
|
||||||
|
style={{ fontFamily: 'monospace', fontSize: '0.75em' }}
|
||||||
>
|
>
|
||||||
{user.userId}
|
{user.userId}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
@@ -241,7 +241,7 @@ export function ScheduleMessageModal({
|
|||||||
<Text size="L400">Send at</Text>
|
<Text size="L400">Send at</Text>
|
||||||
<Box gap="200">
|
<Box gap="200">
|
||||||
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
||||||
<Text as="label" htmlFor="schedule-date" size="T200" style={{ opacity: 0.7 }}>
|
<Text as="label" htmlFor="schedule-date" size="T200" priority="400">
|
||||||
Date
|
Date
|
||||||
</Text>
|
</Text>
|
||||||
<input
|
<input
|
||||||
@@ -253,7 +253,7 @@ export function ScheduleMessageModal({
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
<Box direction="Column" gap="100" style={{ flex: 1 }}>
|
||||||
<Text as="label" htmlFor="schedule-time" size="T200" style={{ opacity: 0.7 }}>
|
<Text as="label" htmlFor="schedule-time" size="T200" priority="400">
|
||||||
Time
|
Time
|
||||||
</Text>
|
</Text>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -140,17 +140,17 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
|
|||||||
>
|
>
|
||||||
<Text
|
<Text
|
||||||
size="T200"
|
size="T200"
|
||||||
|
priority="400"
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
opacity: 0.8,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
|
{typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
|
||||||
</Text>
|
</Text>
|
||||||
<Text size="T200" style={{ opacity: 0.6, whiteSpace: 'nowrap', flexShrink: 0 }}>
|
<Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
|
||||||
{formatSendAt(msg.sendAt)}
|
{formatSendAt(msg.sendAt)}
|
||||||
</Text>
|
</Text>
|
||||||
<IconButton
|
<IconButton
|
||||||
|
|||||||
@@ -542,7 +542,7 @@ function ProfileStatus() {
|
|||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
<Box alignItems="Center" gap="200">
|
<Box alignItems="Center" gap="200">
|
||||||
<Text size="T200" style={{ opacity: 0.6, whiteSpace: 'nowrap', flexShrink: 0 }}>
|
<Text size="T200" priority="300" style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
|
||||||
Auto-clear after:
|
Auto-clear after:
|
||||||
</Text>
|
</Text>
|
||||||
<SettingsSelect
|
<SettingsSelect
|
||||||
|
|||||||
@@ -218,7 +218,7 @@ export function ProfileDecoration() {
|
|||||||
>
|
>
|
||||||
{DECORATION_CATEGORIES.map((category) => (
|
{DECORATION_CATEGORIES.map((category) => (
|
||||||
<div key={category.id} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
<div key={category.id} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||||
<Text size="L400" style={{ opacity: 0.7 }}>
|
<Text size="L400" priority="400">
|
||||||
{category.label}
|
{category.label}
|
||||||
</Text>
|
</Text>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user