Voice message button: Show proper disabled color. (#1682)

Also changes a bit our own IconButton api to allow to mirror material's and allow color customization.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt

@@ -16,10 +16,7 @@
 
 package io.element.android.features.messages.impl.timeline.components.event
 
-import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -28,11 +25,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
@@ -51,6 +47,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -78,7 +75,7 @@ fun TimelineItemVoiceView(
             VoiceMessageState.Button.Pause -> PauseButton(onClick = ::playPause)
             VoiceMessageState.Button.Downloading -> ProgressButton()
             VoiceMessageState.Button.Retry -> RetryButton(onClick = ::playPause)
-            VoiceMessageState.Button.Disabled -> DisabledPlayButton()
+            VoiceMessageState.Button.Disabled -> PlayButton(onClick = {}, enabled = false)
         }
         Spacer(Modifier.width(8.dp))
         Text(
@@ -104,40 +101,54 @@ fun TimelineItemVoiceView(
 
 @Composable
 private fun PlayButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
+    enabled: Boolean = true,
 ) {
-    IconButton(
-        drawableRes = R.drawable.play,
-        contentDescription = stringResource(id = CommonStrings.a11y_play),
-        onClick = onClick
-    )
+    CustomIconButton(
+        onClick = onClick,
+        enabled = enabled,
+    ) {
+        Icon(
+            resourceId = R.drawable.play,
+            contentDescription = stringResource(id = CommonStrings.a11y_play),
+        )
+    }
 }
 
 @Composable
 private fun PauseButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
 ) {
-    IconButton(
-        drawableRes = R.drawable.pause,
-        contentDescription = stringResource(id = CommonStrings.a11y_play),
-        onClick = onClick
-    )
+    CustomIconButton(
+        onClick = onClick,
+    ) {
+        Icon(
+            resourceId = R.drawable.pause,
+            contentDescription = stringResource(id = CommonStrings.a11y_play),
+        )
+    }
 }
 
 @Composable
 private fun RetryButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
 ) {
-    IconButton(
-        drawableRes = R.drawable.retry,
-        contentDescription = stringResource(id = CommonStrings.action_retry),
-        onClick = onClick
-    )
+    CustomIconButton(
+        onClick = onClick,
+    ) {
+        Icon(
+            resourceId = R.drawable.retry,
+            contentDescription = stringResource(id = CommonStrings.action_retry),
+        )
+    }
 }
 
 @Composable
 private fun ProgressButton() {
-    Button {
+    CustomIconButton(
+        onClick = {},
+        enabled = false,
+    ) {
         CircularProgressIndicator(
             modifier = Modifier
                 .padding(2.dp)
@@ -149,49 +160,23 @@ private fun ProgressButton() {
 }
 
 @Composable
-private fun DisabledPlayButton() {
-    IconButton(
-        drawableRes = R.drawable.play,
-        contentDescription = null,
-        onClick = null,
-    )
-}
-
-@Composable
-private fun IconButton(
-    @DrawableRes drawableRes: Int,
-    contentDescription: String?,
-    onClick: (() -> Unit)?,
-) {
-    Button(
-        onClick = onClick,
-    ) {
-        Icon(
-            painter = painterResource(id = drawableRes),
-            contentDescription = contentDescription,
-            tint = ElementTheme.colors.iconSecondary,
-            modifier = Modifier.size(24.dp),
-        )
-    }
-}
-
-@Composable
-private fun Button(
-    onClick: (() -> Unit)? = null,
+private fun CustomIconButton(
+    onClick: () -> Unit,
+    enabled: Boolean = true,
     content: @Composable () -> Unit,
 ) {
-    Box(
+    IconButton(
+        onClick = onClick,
         modifier = Modifier
-            .size(36.dp)
-            .clip(CircleShape)
-            .background(ElementTheme.materialColors.background)
-            .let {
-                if (onClick != null) it.clickable(onClick = onClick) else it
-            },
-        contentAlignment = Alignment.Center,
-    ) {
-        content()
-    }
+            .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
+            .size(36.dp),
+        enabled = enabled,
+        colors = IconButtonDefaults.iconButtonColors(
+            contentColor = ElementTheme.colors.iconSecondary,
+            disabledContentColor = ElementTheme.colors.iconDisabled,
+        ),
+        content = content,
+    )
 }
 
 open class TimelineItemVoiceViewParametersProvider : PreviewParameterProvider<TimelineItemVoiceViewParameters> {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt

@@ -19,6 +19,7 @@ package io.element.android.libraries.designsystem.theme.components
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.IconButtonColors
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
@@ -38,13 +39,13 @@ fun IconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(
+        contentColor = LocalContentColor.current,
+        disabledContentColor = ElementTheme.colors.iconDisabled,
+    ),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable () -> Unit
 ) {
-    val colors = IconButtonDefaults.iconButtonColors(
-        contentColor = LocalContentColor.current,
-        disabledContentColor = ElementTheme.colors.iconDisabled,
-    )
     androidx.compose.material3.IconButton(
         onClick = onClick,
         modifier = modifier,

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt

@@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -114,10 +115,14 @@ private fun PlayerButton(
 ) {
     IconButton(
         onClick = onClick,
-        enabled = enabled,
         modifier = modifier
             .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
-            .size(30.dp.applyScaleUp())
+            .size(30.dp.applyScaleUp()),
+        enabled = enabled,
+        colors = IconButtonDefaults.iconButtonColors(
+            contentColor = ElementTheme.colors.iconSecondary,
+            disabledContentColor = ElementTheme.colors.iconDisabled,
+        ),
     ) {
         when (type) {
             PlayerButtonType.Play -> PlayIcon()
@@ -130,14 +135,12 @@ private fun PlayerButton(
 private fun PauseIcon() = Icon(
     resourceId = R.drawable.ic_pause,
     contentDescription = stringResource(id = CommonStrings.a11y_pause),
-    tint = ElementTheme.colors.iconSecondary,
 )
 
 @Composable
 private fun PlayIcon() = Icon(
     resourceId = R.drawable.ic_play,
     contentDescription = stringResource(id = CommonStrings.a11y_play),
-    tint = ElementTheme.colors.iconSecondary,
 )
 
 @PreviewsDayNight