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:
2026-06-29 15:44:57 -04:00
parent c7a04dcc70
commit 2c3dba55e6
6 changed files with 11 additions and 10 deletions
@@ -133,7 +133,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
<Text size="T300" truncate>
{room.name}
</Text>
<Text size="T200" style={{ opacity: 0.55 }}>
<Text size="T200" priority="300">
{msgEvents.length > 0
? `${msgEvents.length} messages cached · oldest: ${new Date(oldest!.getTs()).toLocaleDateString()}`
: 'No messages cached yet'}
@@ -153,7 +153,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
</Button>
)}
{!canLoadMore && events.length > 0 && (
<Text size="T200" style={{ opacity: 0.5, flexShrink: 0 }}>
<Text size="T200" priority="300" style={{ flexShrink: 0 }}>
Fully cached
</Text>
)}
@@ -656,7 +656,7 @@ export function MessageSearch({
<Icon size="200" src={senderOnlyMode ? Icons.User : Icons.Lock} />
<Text size="H5">{senderOnlyMode ? 'Messages from user' : 'Encrypted Rooms'}</Text>
{!senderOnlyMode && (
<Text size="T200" style={{ opacity: 0.55 }}>
<Text size="T200" priority="300">
{`${localResult.searchedRoomsCount} / ${localResult.encryptedRoomsCount} cached`}
</Text>
)}
@@ -280,7 +280,8 @@ export function SearchInput({
<Text
size="T200"
truncate
style={{ opacity: 0.6, fontFamily: 'monospace', fontSize: '0.75em' }}
priority="300"
style={{ fontFamily: 'monospace', fontSize: '0.75em' }}
>
{user.userId}
</Text>
@@ -241,7 +241,7 @@ export function ScheduleMessageModal({
<Text size="L400">Send at</Text>
<Box gap="200">
<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
</Text>
<input
@@ -253,7 +253,7 @@ export function ScheduleMessageModal({
/>
</Box>
<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
</Text>
<input
@@ -140,17 +140,17 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
>
<Text
size="T200"
priority="400"
style={{
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
opacity: 0.8,
}}
>
{typeof msg.content.body === 'string' ? (msg.content.body as string) : '(message)'}
</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)}
</Text>
<IconButton
@@ -542,7 +542,7 @@ function ProfileStatus() {
</Text>
)}
<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:
</Text>
<SettingsSelect
@@ -218,7 +218,7 @@ export function ProfileDecoration() {
>
{DECORATION_CATEGORIES.map((category) => (
<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}
</Text>
<div