Emojis in custom reaction bottomsheet are too tiny (#2074)

* Emojis in custom reaction bottomsheet are too tiny

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

changelog.d/2066.bugfix

@@ -0,0 +1 @@
+Emojis in custom reaction bottom sheet are too tiny.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiItem.kt

@@ -22,9 +22,10 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -33,12 +34,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.compound.theme.ElementTheme
 import io.element.android.emojibasebindings.Emoji
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.text.toDp
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.compound.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
@@ -47,6 +51,7 @@ fun EmojiItem(
     isSelected: Boolean,
     onEmojiSelected: (Emoji) -> Unit,
     modifier: Modifier = Modifier,
+    emojiSize: TextUnit = 20.sp,
 ) {
     val backgroundColor = if (isSelected) {
         ElementTheme.colors.bgActionPrimaryRest
@@ -60,12 +65,12 @@ fun EmojiItem(
     }
     Box(
         modifier = modifier
-            .size(40.dp)
+            .sizeIn(minWidth = 40.dp, minHeight = 40.dp)
             .background(backgroundColor, CircleShape)
             .clickable(
                 enabled = true,
                 onClick = { onEmojiSelected(item) },
-                indication = rememberRipple(bounded = false, radius = 20.dp),
+                indication = rememberRipple(bounded = false, radius = emojiSize.toDp() / 2 + 10.dp),
                 interactionSource = remember { MutableInteractionSource() }
             )
             .clearAndSetSemantics {
@@ -75,7 +80,7 @@ fun EmojiItem(
     ) {
         Text(
             text = item.unicode,
-            style = ElementTheme.typography.fontHeadingSmRegular,
+            style = LocalTextStyle.current.copy(fontSize = emojiSize),
         )
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/customreaction/EmojiPicker.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
@@ -43,6 +44,7 @@ import io.element.android.emojibasebindings.EmojibaseDatasource
 import io.element.android.emojibasebindings.EmojibaseStore
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.components.Icon
 import kotlinx.collections.immutable.ImmutableSet
 import kotlinx.collections.immutable.persistentSetOf
@@ -65,7 +67,7 @@ fun EmojiPicker(
         ) {
             EmojibaseCategory.entries.forEachIndexed { index, category ->
                 Tab(
-                    text = {
+                    icon = {
                         Icon(
                             imageVector = category.icon,
                             contentDescription = stringResource(id = category.title)
@@ -87,15 +89,18 @@ fun EmojiPicker(
             val emojis = categories[category] ?: listOf()
             LazyVerticalGrid(
                 modifier = Modifier.fillMaxSize(),
-                columns = GridCells.Adaptive(minSize = 40.dp),
+                columns = GridCells.Adaptive(minSize = 48.dp),
                 contentPadding = PaddingValues(vertical = 10.dp, horizontal = 16.dp),
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalArrangement = Arrangement.spacedBy(2.dp)
             ) {
                 items(emojis, key = { it.unicode }) { item ->
                     EmojiItem(
+                        modifier = Modifier.aspectRatio(1f),
                         item = item,
                         isSelected = selectedEmojis.contains(item.unicode),
-                        onEmojiSelected = onEmojiSelected
+                        onEmojiSelected = onEmojiSelected,
+                        emojiSize = 32.dp.toSp(),
                     )
                 }
             }

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Day-30_30_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a97571d655893966be7749c851787ec8173b871a912f8e74f6932e54d524e452
+oid sha256:3891edef642d713ee7ee3f7f8fef57c07b721e35e3b3ad48362bb40a4742f7d3
-size 9263
+size 9276

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiItem_null_EmojiItem-Night-30_31_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:99b040639102d5ed77fe2b5dfcf550395668348d711ec8da45e95584b8be9778
+oid sha256:ff10599bdfffe0857ebecff94a67ff5ca39f84f2fe61e01d27d6168b9a4c8661
-size 9117
+size 9143

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Day-31_31_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1fb074cd58034c90010dc437fc01d6ea77a2a22aa07bc1d4cf0c1730b543b41a
+oid sha256:16f7600c138c86c88e74e3c9c108e47f290f83f98b6a5a654faaf6d8858cdd3a
-size 186707
+size 242662

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.customreaction_EmojiPicker_null_EmojiPicker-Night-31_32_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ea42394330d37a0aa5ba8940e023fc4454d902caf6d265adec0e11c8a34d85f
+oid sha256:f0baf11279836eaa6ff80568048892653d221bed15f41caaf44658d0f3ea3777
-size 187744
+size 244028