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:
1 parent
2e527fbf5f
commit
8bce19c448
1 file changed
+55
-12
@@ -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,
|
||||||
|
|||||||
Reference in new issue
Block a user