[APP-782] Support invalid handles correctly (#1049)
* Update profile link construction to support handle.invalid * Update list links to support using handles * Use did for isMe check to ensure invalid handles dont distort the check * Shift the red (error) colors away from the pink spectrum * Add ThemedText helper component * Add sanitizedHandle() helper to render invalid handles well * Fix regression: only show avatar in PostMeta when needed * Restore the color of likes * Remove users with invalid handles from default autosuggests
This commit is contained in:
parent
5a0899b989
commit
49356700c3
33 changed files with 291 additions and 117 deletions
80
src/view/com/util/text/ThemedText.tsx
Normal file
80
src/view/com/util/text/ThemedText.tsx
Normal file
|
@ -0,0 +1,80 @@
|
|||
import React from 'react'
|
||||
import {CustomTextProps, Text} from './Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {addStyle} from 'lib/styles'
|
||||
|
||||
export type ThemedTextProps = CustomTextProps & {
|
||||
fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
|
||||
bg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
|
||||
border?: 'default' | 'dark' | 'error' | 'inverted' | 'inverted-dark'
|
||||
lineHeight?: number
|
||||
}
|
||||
|
||||
export function ThemedText({
|
||||
fg,
|
||||
bg,
|
||||
border,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}: React.PropsWithChildren<ThemedTextProps>) {
|
||||
const pal = usePalette('default')
|
||||
const palInverted = usePalette('inverted')
|
||||
const palError = usePalette('error')
|
||||
switch (fg) {
|
||||
case 'default':
|
||||
style = addStyle(style, pal.text)
|
||||
break
|
||||
case 'light':
|
||||
style = addStyle(style, pal.textLight)
|
||||
break
|
||||
case 'error':
|
||||
style = addStyle(style, {color: palError.colors.background})
|
||||
break
|
||||
case 'inverted':
|
||||
style = addStyle(style, palInverted.text)
|
||||
break
|
||||
case 'inverted-light':
|
||||
style = addStyle(style, palInverted.textLight)
|
||||
break
|
||||
}
|
||||
switch (bg) {
|
||||
case 'default':
|
||||
style = addStyle(style, pal.view)
|
||||
break
|
||||
case 'light':
|
||||
style = addStyle(style, pal.viewLight)
|
||||
break
|
||||
case 'error':
|
||||
style = addStyle(style, palError.view)
|
||||
break
|
||||
case 'inverted':
|
||||
style = addStyle(style, palInverted.view)
|
||||
break
|
||||
case 'inverted-light':
|
||||
style = addStyle(style, palInverted.viewLight)
|
||||
break
|
||||
}
|
||||
switch (border) {
|
||||
case 'default':
|
||||
style = addStyle(style, pal.border)
|
||||
break
|
||||
case 'dark':
|
||||
style = addStyle(style, pal.borderDark)
|
||||
break
|
||||
case 'error':
|
||||
style = addStyle(style, palError.border)
|
||||
break
|
||||
case 'inverted':
|
||||
style = addStyle(style, palInverted.border)
|
||||
break
|
||||
case 'inverted-dark':
|
||||
style = addStyle(style, palInverted.borderDark)
|
||||
break
|
||||
}
|
||||
return (
|
||||
<Text style={style} {...props}>
|
||||
{children}
|
||||
</Text>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue