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> <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