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(),
                     )
                 }
             }