Improve composer UI scaling (#1689)

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

@@ -136,7 +136,7 @@ fun TextComposer(
         @Composable {
             ComposerOptionsButton(
                 modifier = Modifier
-                    .size(48.dp),
+                    .size(48.dp.applyScaleUp()),
                 onClick = onAddAttachment
             )
         }
@@ -183,7 +183,7 @@ fun TextComposer(
     }
     val uploadVoiceProgress = @Composable {
         CircularProgressIndicator(
-            modifier = Modifier.size(24.dp),
+            modifier = Modifier.size(24.dp.applyScaleUp()),
         )
     }
 
@@ -429,7 +429,7 @@ private fun TextInput(
                 // This prevents it gaining focus and mutating the state.
                 registerStateUpdates = !subcomposing,
                 modifier = Modifier
-                    .padding(top = 6.dp, bottom = 6.dp)
+                    .padding(top = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
                     .fillMaxWidth(),
                 style = ElementRichTextEditorStyle.create(
                     hasFocus = state.hasFocus

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

@@ -37,7 +37,7 @@ internal fun ComposerOptionsButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp),
+            .size(48.dp.applyScaleUp()),
         onClick = onClick
     ) {
         Icon(

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

@@ -37,7 +37,7 @@ internal fun DismissTextFormattingButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp),
+            .size(48.dp.applyScaleUp()),
         onClick = onClick
     ) {
         Icon(

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

@@ -68,7 +68,7 @@ internal fun FormattingOption(
                 interactionSource = remember { MutableInteractionSource() },
                 indication = rememberRipple(
                     bounded = false,
-                    radius = 20.dp,
+                    radius = 20.dp.applyScaleUp(),
                 ),
             )
             .size(48.dp.applyScaleUp())
@@ -80,7 +80,9 @@ internal fun FormattingOption(
                 .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp()))
         ) {
             Icon(
-                modifier = Modifier.align(Alignment.Center),
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(20.dp.applyScaleUp()),
                 imageVector = imageVector,
                 contentDescription = contentDescription,
                 tint = foregroundColor,

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

@@ -41,6 +41,7 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.media.drawWaveform
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.text.applyScaleUp
 import io.element.android.libraries.theme.ElementTheme
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toPersistentList
@@ -70,7 +71,7 @@ fun LiveWaveformView(
     Box(contentAlignment = Alignment.CenterEnd,
         modifier = modifier
             .fillMaxWidth()
-            .height(waveFormHeight)
+            .height(waveFormHeight.applyScaleUp())
             .onSizeChanged { parentWidth = it.width }
     ) {
         Canvas(

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

@@ -97,7 +97,7 @@ private fun RecordButtonView(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp),
+            .size(48.dp.applyScaleUp()),
         onClick = {},
     ) {
         Icon(

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

@@ -39,7 +39,7 @@ fun VoiceMessageDeleteButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp),
+            .size(48.dp.applyScaleUp()),
         enabled = enabled,
         onClick = onClick,
     ) {

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

@@ -66,7 +66,7 @@ internal fun VoiceMessagePreview(
                 shape = MaterialTheme.shapes.medium,
             )
             .padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp)
-            .heightIn(26.dp),
+            .heightIn(26.dp.applyScaleUp()),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         if (isPlaying) {
@@ -135,12 +135,14 @@ private fun PlayerButton(
 private fun PauseIcon() = Icon(
     resourceId = R.drawable.ic_pause,
     contentDescription = stringResource(id = CommonStrings.a11y_pause),
+    modifier = Modifier.size(20.dp.applyScaleUp()),
 )
 
 @Composable
 private fun PlayIcon() = Icon(
     resourceId = R.drawable.ic_play,
     contentDescription = stringResource(id = CommonStrings.a11y_play),
+    modifier = Modifier.size(20.dp.applyScaleUp()),
 )
 
 @PreviewsDayNight

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

@@ -40,6 +40,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.text.applyScaleUp
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.utils.time.formatShort
@@ -62,7 +63,7 @@ internal fun VoiceMessageRecording(
                 shape = MaterialTheme.shapes.medium,
             )
             .padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp)
-            .heightIn(26.dp),
+            .heightIn(26.dp.applyScaleUp()),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         RedRecordingDot()
@@ -80,7 +81,7 @@ internal fun VoiceMessageRecording(
 
         LiveWaveformView(
             modifier = Modifier
-                .height(26.dp)
+                .height(26.dp.applyScaleUp())
                 .weight(1f),
             levels = levels
         )
@@ -103,7 +104,7 @@ private fun RedRecordingDot(
     )
     Box(
         modifier = modifier
-            .size(8.dp)
+            .size(8.dp.applyScaleUp())
             .alpha(alpha)
             .background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
     )