fix(capture): redesign battery warning with icon, eyebrow, title, hint, chevron

- Replace truncated label title with: AVISO DE SISTEMA + Tela bloqueada + hint
- Add Lock icon (left), ChevronRight (right) for affordance
- Add 4px warning side rail (like DialTile) for instrument feel
- Subtle warning tint background (8% opacity)
- Pressable state with opacity 0.72
- Fix encoding issue where 'bloq' was truncated by malformed UTF-8 bytes
This commit is contained in:
fightrate-bot committed 2026-06-16 17:33:59 -03:00
1 parent 2e527fbf5f
commit 8bce19c448
1 file changed
+55 -12
+55 -12
View File
@@ -3,6 +3,8 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
import { import {
Activity, Activity,
Battery, Battery,
ChevronRight,
Lock,
RadioTower, RadioTower,
ShieldCheck, ShieldCheck,
Timer, Timer,
@@ -133,18 +135,29 @@ export function CaptureScreen({
{!monitor.batteryOptimizationIgnored ? ( {!monitor.batteryOptimizationIgnored ? (
<Pressable <Pressable
accessibilityRole="button"
accessibilityLabel="Tela bloqueada. Toque para liberar a captura contínua em background."
onPress={() => { onPress={() => {
monitor.openBatterySettings().catch(() => undefined); monitor.openBatterySettings().catch(() => undefined);
}} }}
style={styles.batteryPrompt} style={({ pressed }) => [
styles.batteryPrompt,
pressed ? styles.batteryPressed : null,
]}
> >
<Text style={styles.batteryPromptTitle}> <View style={styles.batteryIconWrap}>
Manter com tela bloq <Lock color={colors.warning} size={20} strokeWidth={2.4} />
</Text> </View>
<Text style={styles.batteryPromptText}> <View style={styles.batteryCopy}>
Toque para abrir a configura\ç\ão de bateria e remover restri\ç\ões do <Text style={styles.batteryEyebrow}>AVISO DE SISTEMA</Text>
FightRate. <Text style={styles.batteryTitle}>Tela bloqueada</Text>
</Text> <Text style={styles.batteryHint}>
Toque para liberar a captura contínua em background.
</Text>
</View>
<View style={styles.batteryChevron}>
<ChevronRight color={colors.warning} size={18} strokeWidth={2.6} />
</View>
</Pressable> </Pressable>
) : null} ) : null}
@@ -402,20 +415,50 @@ const styles = StyleSheet.create({
borderColor: colors.line, borderColor: colors.line,
}, },
batteryPrompt: { batteryPrompt: {
flexDirection: 'row',
alignItems: 'center',
gap: spacing.md,
borderWidth: 1, borderWidth: 1,
borderLeftWidth: 4,
borderColor: colors.warning, borderColor: colors.warning,
borderRadius: radius.md, borderRadius: radius.md,
backgroundColor: colors.surfaceHot, backgroundColor: 'rgba(255, 180, 61, 0.08)',
padding: spacing.md, padding: spacing.md,
}, },
batteryPromptTitle: { batteryPressed: {
opacity: 0.72,
},
batteryIconWrap: {
width: 32,
alignItems: 'center',
paddingTop: 2,
},
batteryCopy: {
flex: 1,
gap: 2,
},
batteryEyebrow: {
...typography.label, ...typography.label,
color: colors.warning, color: colors.warning,
fontSize: 9,
}, },
batteryPromptText: { batteryTitle: {
color: colors.text,
fontSize: 20,
lineHeight: 24,
fontWeight: '900',
letterSpacing: -0.6,
},
batteryHint: {
...typography.body, ...typography.body,
color: colors.textMuted, color: colors.textMuted,
marginTop: spacing.xs, fontSize: 13,
lineHeight: 17,
},
batteryChevron: {
width: 18,
alignItems: 'center',
justifyContent: 'center',
}, },
actionGrid: { actionGrid: {
gap: spacing.sm, gap: spacing.sm,