From ce86f4ec2fcecf7067ca850a42dd585f6eeded71 Mon Sep 17 00:00:00 2001 From: Clare Kinery <39098724+kinerycl@users.noreply.github.com> Date: Wed, 25 Mar 2026 08:42:24 -0500 Subject: [PATCH] update input button styling (#682) --- .../com/bitchat/android/ui/InputComponents.kt | 1 - .../android/ui/VoiceInputComponents.kt | 20 ++++++++++--- .../android/ui/media/ImagePickerButton.kt | 28 +++++++++++++++---- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/app/src/main/java/com/bitchat/android/ui/InputComponents.kt b/app/src/main/java/com/bitchat/android/ui/InputComponents.kt index 91555b38..3319d8dd 100644 --- a/app/src/main/java/com/bitchat/android/ui/InputComponents.kt +++ b/app/src/main/java/com/bitchat/android/ui/InputComponents.kt @@ -284,7 +284,6 @@ fun MessageInput( Spacer(Modifier.width(1.dp)) VoiceRecordButton( - backgroundColor = bg, onStart = { isRecording = true elapsedMs = 0L diff --git a/app/src/main/java/com/bitchat/android/ui/VoiceInputComponents.kt b/app/src/main/java/com/bitchat/android/ui/VoiceInputComponents.kt index c61f2f9a..5069eb83 100644 --- a/app/src/main/java/com/bitchat/android/ui/VoiceInputComponents.kt +++ b/app/src/main/java/com/bitchat/android/ui/VoiceInputComponents.kt @@ -1,6 +1,7 @@ package com.bitchat.android.ui import android.Manifest +import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.background import androidx.compose.foundation.gestures.detectTapGestures import androidx.compose.foundation.layout.Box @@ -9,10 +10,11 @@ import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Mic import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.* +import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource @@ -32,7 +34,6 @@ import kotlinx.coroutines.launch @Composable fun VoiceRecordButton( modifier: Modifier = Modifier, - backgroundColor: Color, onStart: () -> Unit, onAmplitude: (amplitude: Int, elapsedMs: Long) -> Unit, onFinish: (filePath: String) -> Unit @@ -54,10 +55,21 @@ fun VoiceRecordButton( val latestOnAmplitude = rememberUpdatedState(onAmplitude) val latestOnFinish = rememberUpdatedState(onFinish) + val backgroundColor by animateColorAsState( + targetValue = if (isRecording) { + MaterialTheme.colorScheme.error.copy(alpha = 0.4f) + } else { + MaterialTheme.colorScheme.error + } + ) + Box( modifier = modifier .size(32.dp) - .background(backgroundColor, CircleShape) + .background( + color = backgroundColor, + shape = CircleShape, + ) .pointerInput(Unit) { detectTapGestures( onPress = { @@ -131,7 +143,7 @@ fun VoiceRecordButton( Icon( imageVector = Icons.Filled.Mic, contentDescription = stringResource(com.bitchat.android.R.string.cd_record_voice), - tint = Color.Black, + tint = MaterialTheme.colorScheme.onError, modifier = Modifier.size(20.dp) ) } diff --git a/app/src/main/java/com/bitchat/android/ui/media/ImagePickerButton.kt b/app/src/main/java/com/bitchat/android/ui/media/ImagePickerButton.kt index eb1f5d86..36c67eea 100644 --- a/app/src/main/java/com/bitchat/android/ui/media/ImagePickerButton.kt +++ b/app/src/main/java/com/bitchat/android/ui/media/ImagePickerButton.kt @@ -2,22 +2,24 @@ package com.bitchat.android.ui.media import android.Manifest import android.content.pm.PackageManager -import android.net.Uri import androidx.activity.compose.rememberLauncherForActivityResult import androidx.activity.result.contract.ActivityResultContracts +import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.ExperimentalFoundationApi +import androidx.compose.foundation.background import androidx.compose.foundation.combinedClickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Camera -import androidx.compose.material.icons.filled.Photo import androidx.compose.material.icons.filled.PhotoCamera import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp @@ -34,6 +36,16 @@ fun ImagePickerButton( ) { val context = LocalContext.current var capturedImagePath by remember { mutableStateOf(null) } + val interactionSource = remember { MutableInteractionSource() } + val isPressed by interactionSource.collectIsPressedAsState() + + val backgroundColor by animateColorAsState( + targetValue = if(isPressed) { + MaterialTheme.colorScheme.primary.copy(alpha = 0.4f) + } else { + MaterialTheme.colorScheme.primary + } + ) val imagePicker = rememberLauncherForActivityResult( contract = ActivityResultContracts.GetContent() @@ -89,7 +101,13 @@ fun ImagePickerButton( Box( modifier = modifier .size(32.dp) + .background( + color = backgroundColor, + shape = CircleShape + ) .combinedClickable( + interactionSource = interactionSource, + indication = null, onClick = { imagePicker.launch("image/*") }, onLongClick = { if (ContextCompat.checkSelfPermission(context, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) { @@ -104,7 +122,7 @@ fun ImagePickerButton( Icon( imageVector = Icons.Filled.PhotoCamera, contentDescription = stringResource(com.bitchat.android.R.string.pick_image), - tint = Color.Gray, + tint = MaterialTheme.colorScheme.onPrimary, modifier = Modifier.size(20.dp) ) }