zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Quick fixes to dark mode character counter colors

zio/stable
Paul Frazee 2023-03-02 13:59:44 -08:00
parent ea4ec26683
commit f539659ac8
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/view/com/composer/char-progress/CharProgress.tsx
View File

@ -5,16 +5,19 @@ import {Text} from '../../util/text/Text'
import ProgressCircle from 'react-native-progress/Circle' import ProgressCircle from 'react-native-progress/Circle'
// @ts-ignore no type definition -prf // @ts-ignore no type definition -prf
import ProgressPie from 'react-native-progress/Pie' import ProgressPie from 'react-native-progress/Pie'
import {s, colors} from 'lib/styles' import {s} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
const MAX_TEXT_LENGTH = 256 const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
export function CharProgress({count}: {count: number}) { export function CharProgress({count}: {count: number}) {
const progressColor = count > DANGER_TEXT_LENGTH ? '#e60000' : undefined const pal = usePalette('default')
const textColor = count > DANGER_TEXT_LENGTH ? '#e60000' : pal.colors.text
const circleColor = count > DANGER_TEXT_LENGTH ? '#e60000' : pal.colors.link
return ( return (
<> <>
<Text style={[s.mr10, {color: progressColor}]}> <Text style={[s.mr10, {color: textColor}]}>
{MAX_TEXT_LENGTH - count} {MAX_TEXT_LENGTH - count}
</Text> </Text>
<View> <View>
@ -22,16 +25,16 @@ export function CharProgress({count}: {count: number}) {
<ProgressPie <ProgressPie
size={30} size={30}
borderWidth={4} borderWidth={4}
borderColor={progressColor} borderColor={circleColor}
color={progressColor} color={circleColor}
progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)} progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)}
/> />
) : ( ) : (
<ProgressCircle <ProgressCircle
size={30} size={30}
borderWidth={1} borderWidth={1}
borderColor={colors.gray2} borderColor={pal.colors.border}
color={progressColor} color={circleColor}
progress={count / MAX_TEXT_LENGTH} progress={count / MAX_TEXT_LENGTH}
/> />
)} )}