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.

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