Merge pull request #1691 from vector-im/jonny/fix-composer-scaling

Fix scaling of composer UI

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

@@ -51,7 +51,6 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.components.media.createFakeWaveform
 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.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -135,7 +134,7 @@ fun TextComposer(
         @Composable {
             ComposerOptionsButton(
                 modifier = Modifier
-                    .size(48.dp.applyScaleUp()),
+                    .size(48.dp),
                 onClick = onAddAttachment
             )
         }
@@ -182,7 +181,7 @@ fun TextComposer(
     }
     val uploadVoiceProgress = @Composable {
         CircularProgressIndicator(
-            modifier = Modifier.size(24.dp.applyScaleUp()),
+            modifier = Modifier.size(24.dp),
         )
     }
 
@@ -289,7 +288,7 @@ private fun StandardLayout(
                 Box(
                     modifier = Modifier
                         .padding(bottom = 5.dp, top = 5.dp, end = 3.dp, start = 3.dp)
-                        .size(48.dp.applyScaleUp()),
+                        .size(48.dp),
                     contentAlignment = Alignment.Center,
                 ) {
                     voiceDeleteButton()
@@ -322,7 +321,7 @@ private fun StandardLayout(
         Box(
             Modifier
                 .padding(bottom = 5.dp, top = 5.dp, end = 6.dp, start = 6.dp)
-                .size(48.dp.applyScaleUp()),
+                .size(48.dp),
             contentAlignment = Alignment.Center,
         ) {
             endButton()
@@ -393,7 +392,7 @@ private fun TextInput(
             .clip(roundedCorners)
             .border(0.5.dp, borderColor, roundedCorners)
             .background(color = bgColor)
-            .requiredHeightIn(min = 42.dp.applyScaleUp())
+            .requiredHeightIn(min = 42.dp)
             .fillMaxSize(),
     ) {
         if (composerMode is MessageComposerMode.Special) {
@@ -402,12 +401,7 @@ private fun TextInput(
         val defaultTypography = ElementTheme.typography.fontBodyLgRegular
         Box(
             modifier = Modifier
-                .padding(
-                    top = 4.dp.applyScaleUp(),
-                    bottom = 4.dp.applyScaleUp(),
-                    start = 12.dp.applyScaleUp(),
-                    end = 42.dp.applyScaleUp()
-                )
+                .padding(top = 4.dp, bottom = 4.dp, start = 12.dp, end = 42.dp)
                 .testTag(TestTags.richTextEditor),
             contentAlignment = Alignment.CenterStart,
         ) {
@@ -429,7 +423,7 @@ private fun TextInput(
                 // This prevents it gaining focus and mutating the state.
                 registerStateUpdates = !subcomposing,
                 modifier = Modifier
-                    .padding(top = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
+                    .padding(top = 6.dp, bottom = 6.dp)
                     .fillMaxWidth(),
                 style = ElementRichTextEditorStyle.create(
                     hasFocus = state.hasFocus
@@ -481,7 +475,7 @@ private fun EditingModeView(
             tint = ElementTheme.materialColors.secondary,
             modifier = Modifier
                 .padding(vertical = 8.dp)
-                .size(16.dp.applyScaleUp()),
+                .size(16.dp),
         )
         Text(
             stringResource(CommonStrings.common_editing),
@@ -498,7 +492,7 @@ private fun EditingModeView(
             tint = ElementTheme.materialColors.secondary,
             modifier = Modifier
                 .padding(top = 8.dp, bottom = 8.dp, start = 16.dp, end = 12.dp)
-                .size(16.dp.applyScaleUp())
+                .size(16.dp)
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,
@@ -561,7 +555,7 @@ private fun ReplyToModeView(
             tint = MaterialTheme.colorScheme.secondary,
             modifier = Modifier
                 .padding(end = 4.dp, top = 4.dp, start = 16.dp, bottom = 16.dp)
-                .size(16.dp.applyScaleUp())
+                .size(16.dp)
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,

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

@@ -23,7 +23,6 @@ import androidx.compose.ui.res.stringResource
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -37,11 +36,11 @@ internal fun ComposerOptionsButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp.applyScaleUp()),
+            .size(48.dp),
         onClick = onClick
     ) {
         Icon(
-            modifier = Modifier.size(30.dp.applyScaleUp()),
+            modifier = Modifier.size(30.dp),
             resourceId = CommonDrawables.ic_plus,
             contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment),
             tint = ElementTheme.colors.iconPrimary,

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

@@ -23,7 +23,6 @@ import androidx.compose.ui.res.stringResource
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -37,11 +36,11 @@ internal fun DismissTextFormattingButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp.applyScaleUp()),
+            .size(48.dp),
         onClick = onClick
     ) {
         Icon(
-            modifier = Modifier.size(30.dp.applyScaleUp()),
+            modifier = Modifier.size(30.dp),
             resourceId = CommonDrawables.ic_cancel,
             contentDescription = stringResource(CommonStrings.action_close),
             tint = ElementTheme.colors.iconPrimary,

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

@@ -34,7 +34,6 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.text.applyScaleUp
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.iconSuccessPrimaryBackground
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -68,21 +67,21 @@ internal fun FormattingOption(
                 interactionSource = remember { MutableInteractionSource() },
                 indication = rememberRipple(
                     bounded = false,
-                    radius = 20.dp.applyScaleUp(),
+                    radius = 20.dp,
                 ),
             )
-            .size(48.dp.applyScaleUp())
+            .size(48.dp)
     ) {
         Box(
             modifier = Modifier
-                .size(36.dp.applyScaleUp())
+                .size(36.dp)
                 .align(Alignment.Center)
-                .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp()))
+                .background(backgroundColor, shape = RoundedCornerShape(8.dp))
         ) {
             Icon(
                 modifier = Modifier
                     .align(Alignment.Center)
-                    .size(20.dp.applyScaleUp()),
+                    .size(20.dp),
                 imageVector = imageVector,
                 contentDescription = contentDescription,
                 tint = foregroundColor,

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

@@ -41,7 +41,6 @@ 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
@@ -71,7 +70,7 @@ fun LiveWaveformView(
     Box(contentAlignment = Alignment.CenterEnd,
         modifier = modifier
             .fillMaxWidth()
-            .height(waveFormHeight.applyScaleUp())
+            .height(waveFormHeight)
             .onSizeChanged { parentWidth = it.width }
     ) {
         Canvas(

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

@@ -29,7 +29,6 @@ import androidx.compose.ui.res.stringResource
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -97,11 +96,11 @@ private fun RecordButtonView(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp.applyScaleUp()),
+            .size(48.dp),
         onClick = {},
     ) {
         Icon(
-            modifier = Modifier.size(24.dp.applyScaleUp()),
+            modifier = Modifier.size(24.dp),
             resourceId = if (isPressed) {
                 CommonDrawables.ic_compound_mic_on_solid
             } else {

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

@@ -32,7 +32,6 @@ import androidx.compose.ui.res.stringResource
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -49,7 +48,7 @@ internal fun SendButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp.applyScaleUp()),
+            .size(48.dp),
         onClick = onClick,
         enabled = canSendMessage,
     ) {
@@ -73,12 +72,12 @@ internal fun SendButton(
         Box(
             modifier = Modifier
                 .clip(CircleShape)
-                .size(36.dp.applyScaleUp())
+                .size(36.dp)
                 .background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent)
         ) {
             Icon(
                 modifier = Modifier
-                    .height(iconSize.applyScaleUp())
+                    .height(iconSize)
                     .padding(start = iconStartPadding)
                     .align(Alignment.Center),
                 resourceId = iconId,

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

@@ -21,15 +21,14 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.text.applyScaleUp
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 
 @Composable
 internal fun textInputRoundedCornerShape(
     composerMode: MessageComposerMode,
 ): RoundedCornerShape {
-    val roundCornerSmall = 20.dp.applyScaleUp()
-    val roundCornerLarge = 21.dp.applyScaleUp()
+    val roundCornerSmall = 20.dp
+    val roundCornerLarge = 21.dp
 
     val roundedCornerSize = if (composerMode is MessageComposerMode.Special) {
         roundCornerSmall

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

@@ -24,7 +24,6 @@ import androidx.compose.ui.res.stringResource
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -39,12 +38,12 @@ fun VoiceMessageDeleteButton(
 ) {
     IconButton(
         modifier = modifier
-            .size(48.dp.applyScaleUp()),
+            .size(48.dp),
         enabled = enabled,
         onClick = onClick,
     ) {
         Icon(
-            modifier = Modifier.size(24.dp.applyScaleUp()),
+            modifier = Modifier.size(24.dp),
             resourceId = CommonDrawables.ic_compound_delete,
             contentDescription = stringResource(CommonStrings.a11y_delete),
             tint = if (enabled) {

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

@@ -40,7 +40,6 @@ import io.element.android.libraries.designsystem.components.media.WaveformPlayba
 import io.element.android.libraries.designsystem.components.media.createFakeWaveform
 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.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -72,7 +71,7 @@ internal fun VoiceMessagePreview(
                 shape = MaterialTheme.shapes.medium,
             )
             .padding(start = 8.dp, end = 20.dp, top = 6.dp, bottom = 6.dp)
-            .heightIn(26.dp.applyScaleUp()),
+            .heightIn(26.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         if (isPlaying) {
@@ -104,7 +103,7 @@ internal fun VoiceMessagePreview(
         WaveformPlaybackView(
             modifier = Modifier
                 .weight(1f)
-                .height(26.dp.applyScaleUp()),
+                .height(26.dp),
             playbackProgress = playbackProgress,
             showCursor = isInteractive,
             waveform = waveform,
@@ -129,7 +128,7 @@ private fun PlayerButton(
         onClick = onClick,
         modifier = modifier
             .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
-            .size(30.dp.applyScaleUp()),
+            .size(30.dp),
         enabled = enabled,
         colors = IconButtonDefaults.iconButtonColors(
             contentColor = ElementTheme.colors.iconSecondary,
@@ -147,14 +146,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()),
+    modifier = Modifier.size(20.dp),
 )
 
 @Composable
 private fun PlayIcon() = Icon(
     resourceId = R.drawable.ic_play,
     contentDescription = stringResource(id = CommonStrings.a11y_play),
-    modifier = Modifier.size(20.dp.applyScaleUp()),
+    modifier = Modifier.size(20.dp),
 )
 
 @PreviewsDayNight

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

@@ -40,7 +40,6 @@ 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
@@ -63,7 +62,7 @@ internal fun VoiceMessageRecording(
                 shape = MaterialTheme.shapes.medium,
             )
             .padding(start = 12.dp, end = 20.dp, top = 8.dp, bottom = 8.dp)
-            .heightIn(26.dp.applyScaleUp()),
+            .heightIn(26.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         RedRecordingDot()
@@ -81,7 +80,7 @@ internal fun VoiceMessageRecording(
 
         LiveWaveformView(
             modifier = Modifier
-                .height(26.dp.applyScaleUp())
+                .height(26.dp)
                 .weight(1f),
             levels = levels
         )
@@ -104,7 +103,7 @@ private fun RedRecordingDot(
     )
     Box(
         modifier = modifier
-            .size(8.dp.applyScaleUp())
+            .size(8.dp)
             .alpha(alpha)
             .background(color = ElementTheme.colors.textCriticalPrimary, shape = CircleShape)
     )