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