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'
// @ts-ignore no type definition -prf
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 DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
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 (
<>
<Text style={[s.mr10, {color: progressColor}]}>
<Text style={[s.mr10, {color: textColor}]}>
{MAX_TEXT_LENGTH - count}
</Text>
<View>
@ -22,16 +25,16 @@ export function CharProgress({count}: {count: number}) {
<ProgressPie
size={30}
borderWidth={4}
borderColor={progressColor}
color={progressColor}
borderColor={circleColor}
color={circleColor}
progress={Math.min((count - MAX_TEXT_LENGTH) / MAX_TEXT_LENGTH, 1)}
/>
) : (
<ProgressCircle
size={30}
borderWidth={1}
borderColor={colors.gray2}
color={progressColor}
borderColor={pal.colors.border}
color={circleColor}
progress={count / MAX_TEXT_LENGTH}
/>
)}