Merge pull request #986 from vector-im/feature/bma/bigFontSizeImprovement

Big font size improvements

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

@@ -75,6 +75,7 @@ import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.modifiers.applyIf
 import io.element.android.libraries.designsystem.preview.DayNightPreviews
 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.components.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -111,12 +112,15 @@ fun TextComposer(
     ) {
         AttachmentButton(onClick = onAddAttachment, modifier = Modifier.padding(vertical = 6.dp))
         Spacer(modifier = Modifier.width(12.dp))
+        val roundCornerSmall = 20.dp.applyScaleUp()
+        val roundCornerLarge = 28.dp.applyScaleUp()
+
         var lineCount by remember { mutableStateOf(0) }
         val roundedCornerSize = remember(lineCount, composerMode) {
             if (lineCount > 1 || composerMode is MessageComposerMode.Special) {
-                20.dp
+                roundCornerSmall
             } else {
-                28.dp
+                roundCornerLarge
             }
         }
         val roundedCornerSizeState = animateDpAsState(
@@ -126,7 +130,7 @@ fun TextComposer(
             )
         )
         val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value)
-        val minHeight = 42.dp
+        val minHeight = 42.dp.applyScaleUp()
         val bgColor = ElementTheme.colors.bgSubtleSecondary
         // Change border color depending on focus
         var hasFocus by remember { mutableStateOf(false) }
@@ -170,7 +174,12 @@ fun TextComposer(
                             singleLine = false,
                             visualTransformation = VisualTransformation.None,
                             shape = roundedCorners,
-                            contentPadding = PaddingValues(top = 10.dp, bottom = 10.dp, start = 12.dp, end = 42.dp),
+                            contentPadding = PaddingValues(
+                                top = 10.dp.applyScaleUp(),
+                                bottom = 10.dp.applyScaleUp(),
+                                start = 12.dp.applyScaleUp(),
+                                end = 42.dp.applyScaleUp(),
+                            ),
                             interactionSource = remember { MutableInteractionSource() },
                             placeholder = {
                                 Text(stringResource(CommonStrings.common_message), style = defaultTypography)
@@ -198,7 +207,7 @@ fun TextComposer(
                     canSendMessage = composerCanSendMessage,
                     onSendMessage = onSendMessage,
                     composerMode = composerMode,
-                    modifier = Modifier.padding(end = 6.dp, bottom = 6.dp)
+                    modifier = Modifier.padding(end = 6.dp.applyScaleUp(), bottom = 6.dp.applyScaleUp())
                 )
             }
         }
@@ -258,7 +267,7 @@ private fun EditingModeView(
             tint = ElementTheme.materialColors.secondary,
             modifier = Modifier
                 .padding(vertical = 8.dp)
-                .size(16.dp),
+                .size(16.dp.applyScaleUp()),
         )
         Text(
             stringResource(CommonStrings.common_editing),
@@ -275,7 +284,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)
+                .size(16.dp.applyScaleUp())
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,
@@ -338,7 +347,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)
+                .size(16.dp.applyScaleUp())
                 .clickable(
                     enabled = true,
                     onClick = onResetComposerMode,
@@ -356,13 +365,13 @@ private fun AttachmentButton(
 ) {
     Surface(
         modifier
-            .size(30.dp)
+            .size(30.dp.applyScaleUp())
             .clickable(onClick = onClick),
         shape = CircleShape,
         color = ElementTheme.colors.iconPrimary
     ) {
         Image(
-            modifier = Modifier.size(12.5f.dp),
+            modifier = Modifier.size(12.5f.dp.applyScaleUp()),
             painter = painterResource(R.drawable.ic_add_attachment),
             contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment),
             contentScale = ContentScale.Inside,
@@ -386,10 +395,10 @@ private fun BoxScope.SendButton(
         modifier = modifier
             .clip(CircleShape)
             .background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent)
-            .size(30.dp)
+            .size(30.dp.applyScaleUp())
             .align(Alignment.BottomEnd)
             .applyIf(composerMode !is MessageComposerMode.Edit, ifTrue = {
-                padding(start = 1.dp) // Center the arrow in the circle
+                padding(start = 1.dp.applyScaleUp()) // Center the arrow in the circle
             })
             .clickable(
                 enabled = canSendMessage,
@@ -409,7 +418,7 @@ private fun BoxScope.SendButton(
             else -> stringResource(CommonStrings.action_send)
         }
         Icon(
-            modifier = Modifier.size(16.dp),
+            modifier = Modifier.size(16.dp.applyScaleUp()),
             resourceId = iconId,
             contentDescription = contentDescription,
             // Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary