Update files

packages/app/src/components/voice-compact-indicator.tsx

@@ -14,7 +14,7 @@ export function VoiceCompactIndicator() {
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isMuted && styles.containerMuted]}>
       <View style={styles.meterContainer}>
         <VolumeMeter
           volume={volume}
@@ -30,10 +30,11 @@ export function VoiceCompactIndicator() {
         onPress={toggleMute}
         accessibilityRole="button"
         accessibilityLabel={isMuted ? "Unmute voice" : "Mute voice"}
-        style={[styles.muteButton, isMuted && styles.muteButtonMuted]}
+        style={styles.muteButton}
+        hitSlop={8}
       >
         {isMuted ? (
-          <MicOff size={14} color={theme.colors.surface0} />
+          <MicOff size={14} color={theme.colors.palette.white} />
         ) : (
           <Mic size={14} color={theme.colors.foreground} />
         )}
@@ -55,6 +56,10 @@ const styles = StyleSheet.create((theme) => ({
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.border,
   },
+  containerMuted: {
+    backgroundColor: theme.colors.palette.red[600],
+    borderWidth: 0,
+  },
   meterContainer: {
     justifyContent: "center",
   },
@@ -64,12 +69,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.full,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.colors.surface0,
+    backgroundColor: "transparent",
-    borderWidth: theme.borderWidth[1],
+    borderWidth: 0,
-    borderColor: theme.colors.border,
-  },
-  muteButtonMuted: {
-    backgroundColor: theme.colors.palette.red[600],
-    borderColor: theme.colors.palette.red[800],
   },
 }));

packages/app/src/components/voice-panel.tsx

@@ -48,7 +48,7 @@ export function VoicePanel() {
           >
             <MicOff
               size={18}
-              color={isMuted ? theme.colors.surface0 : theme.colors.foreground}
+              color={isMuted ? theme.colors.palette.white : theme.colors.foreground}
             />
           </Pressable>
 
@@ -86,6 +86,7 @@ const styles = StyleSheet.create((theme) => ({
   meterContainer: {
     flex: 1,
     justifyContent: "center",
+    alignItems: "flex-start",
   },
   actionsRow: {
     flexDirection: "row",
@@ -105,7 +106,7 @@ const styles = StyleSheet.create((theme) => ({
   },
   iconButtonMuted: {
     backgroundColor: theme.colors.palette.red[500],
-    borderColor: theme.colors.palette.red[600],
+    borderWidth: 0,
   },
   iconButtonStop: {
     backgroundColor: theme.colors.palette.red[600],