diff --git a/apps/rebreak-native/app/lyra.tsx b/apps/rebreak-native/app/lyra.tsx index f9d4671..56d3e57 100644 --- a/apps/rebreak-native/app/lyra.tsx +++ b/apps/rebreak-native/app/lyra.tsx @@ -652,15 +652,36 @@ export default function CoachScreen() { {/* Input bar */} 0 ? 8 : Math.max(12, insets.bottom), backgroundColor: colors.bg, borderTopColor: colors.border }]}> {isRecording ? ( - - - + /* ── Instagram-style Recording Bar ─────────────────────── */ + + {/* Trash - links */} + + - - {formatDuration(recordingDuration)} - - + + {/* Waveform + Timer - mitte */} + + + + + + + {formatDuration(recordingDuration)} + + + {/* Send - rechts */} + + + ) : isTranscribing ? ( @@ -681,19 +702,15 @@ export default function CoachScreen() { /> )} - {!isTranscribing && ( + {!isRecording && !isTranscribing && ( - + )} @@ -960,37 +977,39 @@ const styles = StyleSheet.create({ sendBtnDisabled: { opacity: 0.4, }, - recordingContainer: { + recordingBar: { flex: 1, - height: 38, + height: 44, flexDirection: 'row', alignItems: 'center', gap: 8, - backgroundColor: 'rgba(220,38,38,0.08)', - borderWidth: 1, - borderColor: 'rgba(220,38,38,0.2)', + borderWidth: StyleSheet.hairlineWidth, borderRadius: 22, - paddingHorizontal: 12, + paddingHorizontal: 6, }, - cancelBtn: { + recSideBtn: { width: 32, height: 32, borderRadius: 16, - backgroundColor: 'rgba(220,38,38,0.15)', alignItems: 'center', justifyContent: 'center', }, - pulseDot: { - width: 8, - height: 8, - borderRadius: 4, - backgroundColor: '#dc2626', + recCenter: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + gap: 6, }, - recordingTimer: { - fontSize: 13, + recLiveDot: { + width: 7, + height: 7, + borderRadius: 3.5, + }, + recTimer: { + fontSize: 12, fontFamily: 'Nunito_600SemiBold', - color: '#f87171', fontVariant: ['tabular-nums'], + minWidth: 32, }, transcribingRow: { flex: 1,