acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Lighten blue (link) text for dim and dark themes (#11164)

Browse Source
This commit is contained in:
DS Boyce
2026-07-20 09:29:58 -07:00
committed by GitHub
parent 0fb7251c64
commit 1803de03a4
13 changed files with 49 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Composer/index.tsx
+1 -1
View File
@@ -286,7 +286,7 @@ export function Composer({
ref={IS_WEB ? sift.refs.setAnchor : undefined}
style={
node.type === 'facet' && {
color: t.palette.primary_500,
color: t.atoms.text_link.color,
}
}>
{node.raw}
src/components/FeedInterstitials.tsx
+2 -2
View File
@@ -481,11 +481,11 @@ export function ProfileGrid({
<Text
style={[
a.text_sm,
{color: t.palette.primary_500},
t.atoms.text_link,
hovered &&
web({
textDecorationLine: 'underline',
textDecorationColor: t.palette.primary_500,
textDecorationColor: t.atoms.text_link.color,
}),
]}>
<Trans>See more</Trans>
src/components/Link.tsx
+5 -5
View File
@@ -415,7 +415,7 @@ function LinkPeek({
// dialog can show.
useInAppBrowser: useInAppBrowserPref === true,
browserToolbarColor: t.atoms.bg.backgroundColor,
browserControlsColor: t.palette.primary_500,
browserControlsColor: t.atoms.text_link.color,
}}
borderRadius={borderRadius}
// Fires only when not morphing natively (in-app browser off/unset).
@@ -487,14 +487,14 @@ export function InlineLinkText({
accessibilityLabel={label}
{...rest}
style={[
{color: t.palette.primary_500},
t.atoms.text_link,
interacted &&
!disableUnderline && {
...web({
outline: 0,
textDecorationLine: 'underline',
textDecorationColor:
flattenedStyle.color ?? t.palette.primary_500,
flattenedStyle.color ?? t.atoms.text_link.color,
}),
},
flattenedStyle,
@@ -591,14 +591,14 @@ export function SimpleInlineLinkText({
accessibilityLabel={label}
{...rest}
style={[
{color: t.palette.primary_500},
t.atoms.text_link,
interacted &&
!disableUnderline && {
...web({
outline: 0,
textDecorationLine: 'underline',
textDecorationColor:
flattenedStyle.color ?? t.palette.primary_500,
flattenedStyle.color ?? t.atoms.text_link.color,
}),
},
flattenedStyle,
src/components/Post/ShowMoreTextButton.tsx
+5 -7
View File
@@ -1,8 +1,6 @@
import {useCallback, useMemo} from 'react'
import {LayoutAnimation, type TextStyle} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {HITSLOP_10} from '#/lib/constants'
import {atoms as a, flatten, type TextStyleProp, useTheme} from '#/alf'
@@ -14,7 +12,7 @@ export function ShowMoreTextButton({
style,
}: TextStyleProp & {onPress: () => void}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const onPress = useCallback(() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
@@ -30,7 +28,7 @@ export function ShowMoreTextButton({
return (
<Button
label={_(msg`Expand post text`)}
label={l`Expand post text`}
onPress={onPress}
style={[
a.self_start,
@@ -43,13 +41,13 @@ export function ShowMoreTextButton({
<Text
style={[
textStyle,
t.atoms.text_link,
{
color: t.palette.primary_500,
opacity: pressed ? 0.6 : 1,
textDecorationLine: hovered ? 'underline' : undefined,
},
]}>
<Trans>Show More</Trans>
<Trans>Show more</Trans>
</Text>
)}
</Button>
src/components/Post/Translated/index.tsx
+4 -4
View File
@@ -150,10 +150,10 @@ function TranslationLink({
label={l`Translate`}
hoverStyle={[
native({opacity: 0.5}),
web([a.underline, {textDecorationColor: t.palette.primary_500}]),
web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
]}
hitSlop={HITSLOP_30}>
<Text style={[a.text_sm, {color: t.palette.primary_500}]}>
<Text style={[a.text_sm, t.atoms.text_link]}>
<Trans>Translate</Trans>
</Text>
</Link>
@@ -229,7 +229,7 @@ function TranslationError({
label={l`Try Google Translate`}
hoverStyle={[
native({opacity: 0.5}),
web([a.underline, {textDecorationColor: t.palette.primary_500}]),
web([a.underline, {textDecorationColor: t.atoms.text_link.color}]),
]}
hitSlop={HITSLOP_30}>
<Text
@@ -237,7 +237,7 @@ function TranslationError({
a.text_xs,
a.font_medium,
a.leading_snug,
{color: t.palette.primary_500},
t.atoms.text_link,
]}>
<Trans>Try Google Translate</Trans>
</Text>
src/components/moderation/ContentHider.tsx
+10 -17
View File
@@ -6,9 +6,7 @@ import {
type ViewStyle,
} from 'react-native'
import {type ModerationUI} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {
ADULT_CONTENT_LABELS,
@@ -78,7 +76,7 @@ function ContentHiderActive({
children?: React.ReactNode
}) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const {gtMobile} = useBreakpoints()
const [override, setOverride] = useState(false)
const control = useModerationDetailsDialogControl()
@@ -97,7 +95,7 @@ function ContentHiderActive({
(blur.type === 'label' && blur.source.type !== 'user')
) {
if (desc.isSubjectAccount) {
return _(msg`${desc.name} (Account)`)
return l`${desc.name} (Account)`
} else {
return desc.name
}
@@ -128,7 +126,7 @@ function ContentHiderActive({
const def = cause.labelDef || getDefinition(labelDefs, cause.label)
if (def.identifier === 'porn' || def.identifier === 'sexual') {
return _(msg`Adult Content`)
return l`Adult Content`
}
return getLabelStrings(i18n.locale, globalLabelStrings, def).name
})
@@ -138,7 +136,7 @@ function ContentHiderActive({
}
return [...new Set(selfBlurNames)].join(', ')
}, [
_,
l,
modui.blurs,
blur,
desc.name,
@@ -151,7 +149,6 @@ function ContentHiderActive({
return (
<View testID={testID} style={[a.overflow_hidden, style]}>
<ModerationDetailsDialog control={control} modcause={blur} />
<Button
onPress={e => {
e.preventDefault()
@@ -166,10 +163,10 @@ function ContentHiderActive({
label={desc.name}
accessibilityHint={
modui.noOverride
? _(msg`Learn more about the moderation applied to this content`)
? l`Learn more about the moderation applied to this content`
: override
? _(msg`Hides the content`)
: _(msg`Shows the content`)
? l`Hides the content`
: l`Shows the content`
}>
{state => (
<View
@@ -223,7 +220,6 @@ function ContentHiderActive({
</View>
)}
</Button>
{desc.source && blur.type === 'label' && !override && (
<Button
onPress={e => {
@@ -231,9 +227,7 @@ function ContentHiderActive({
e.stopPropagation()
control.open()
}}
label={_(
msg`Learn more about the moderation applied to this content`,
)}
label={l`Learn more about the moderation applied to this content`}
style={[a.pt_sm]}>
{state => (
<Text
@@ -252,7 +246,7 @@ function ContentHiderActive({
)}{' '}
<Text
style={[
{color: t.palette.primary_500},
t.atoms.text_link,
a.text_sm,
state.hovered && [web({textDecoration: 'underline'})],
]}>
@@ -262,7 +256,6 @@ function ContentHiderActive({
)}
</Button>
)}
{override && <View style={childContainerStyle}>{children}</View>}
</View>
)
src/components/moderation/ScreenHider.tsx
+6 -10
View File
@@ -6,9 +6,7 @@ import {
type ViewStyle,
} from 'react-native'
import {type ModerationUI} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useNavigation} from '@react-navigation/native'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -38,7 +36,7 @@ export function ScreenHider({
containerStyle?: StyleProp<ViewStyle>
}>) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const [override, setOverride] = useState(false)
const navigation = useNavigation<NavigationProp>()
const {isMobile} = useWebMediaQueries()
@@ -131,15 +129,13 @@ export function ScreenHider({
control.open()
}}
accessibilityRole="button"
accessibilityLabel={_(msg`Learn more about this warning`)}
accessibilityLabel={l`Learn more about this warning`}
accessibilityHint="">
<Text
style={[
a.text_lg,
a.leading_snug,
{
color: t.palette.primary_500,
},
t.atoms.text_link,
web({
cursor: 'pointer',
}),
@@ -158,7 +154,7 @@ export function ScreenHider({
color="primary"
size="large"
style={[a.rounded_full]}
label={_(msg`Go back`)}
label={l`Go back`}
onPress={() => {
if (navigation.canGoBack()) {
navigation.goBack()
@@ -176,7 +172,7 @@ export function ScreenHider({
color="secondary"
size="large"
style={[a.rounded_full]}
label={_(msg`Show anyway`)}
label={l`Show anyway`}
onPress={() => setOverride(v => !v)}>
<ButtonText>
<Trans>Show anyway</Trans>