Use color from theme and improve preview of EmojiItem

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

@@ -18,6 +18,7 @@ import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.shape.CircleShape
@@ -56,6 +57,7 @@ import io.element.android.features.messages.impl.timeline.components.customreact
 import io.element.android.features.messages.impl.timeline.components.customreaction.picker.SkinTonePicker
 import io.element.android.features.messages.impl.timeline.components.customreaction.picker.SkinToneSlotSize
 import io.element.android.features.messages.impl.timeline.components.customreaction.picker.SkinToneSlotSpacing
+import io.element.android.features.messages.impl.timeline.components.customreaction.picker.aSkinList
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -219,6 +221,7 @@ fun EmojiItem(
             style = LocalTextStyle.current.copy(fontSize = emojiSize),
         )
         if (hasSkinTones) {
+            val pickerIndicatorColor = ElementTheme.colors.borderInteractivePrimary
             Canvas(
                 modifier = Modifier
                     .align(Alignment.BottomEnd)
@@ -230,7 +233,7 @@ fun EmojiItem(
                     lineTo(0f, size.height)
                     close()
                 }
-                drawPath(path, color = Color.Gray.copy(alpha = 0.5f), style = Fill)
+                drawPath(path, color = pickerIndicatorColor, style = Fill)
             }
         }
 
@@ -260,21 +263,28 @@ fun EmojiItem(
 @Composable
 internal fun EmojiItemPreview() = ElementPreview {
     Row(
+        modifier = Modifier.padding(4.dp),
         horizontalArrangement = Arrangement.spacedBy(8.dp),
     ) {
-        for (isSelected in listOf(true, false)) {
+        for (isSelected in listOf(false, true)) {
-            EmojiItem(
+            for (skinList in listOf(persistentListOf(), aSkinList())) {
-                item = Emoji(
+                val hasSelectedSkinValues = if (skinList.isNotEmpty()) listOf(false, true) else listOf(false)
-                    hexcode = "",
+                for (hasSelectedSkin in hasSelectedSkinValues) {
-                    label = "",
+                    EmojiItem(
-                    tags = null,
+                        item = Emoji(
-                    shortcodes = persistentListOf(),
+                            hexcode = "",
-                    unicode = "👍",
+                            label = "",
-                    skins = null
+                            tags = null,
-                ),
+                            shortcodes = persistentListOf(),
-                isSelected = isSelected,
+                            unicode = "👍",
-                onSelectEmoji = {},
+                            skins = skinList,
-            )
+                        ),
+                        isSelected = isSelected,
+                        onSelectEmoji = {},
+                        hasSelectedSkin = hasSelectedSkin,
+                    )
+                }
+            }
         }
     }
 }

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

@@ -120,14 +120,16 @@ internal fun SkinTonePickerPreview() = ElementPreview {
             tags = null,
             shortcodes = persistentListOf("+1", "thumbsup"),
             unicode = "👍",
-            skins = persistentListOf(
+            skins = aSkinList(),
-                EmojiSkin("1F44D-1F3FB", "thumbs up: light skin tone", "👍🏻"),
-                EmojiSkin("1F44D-1F3FC", "thumbs up: medium-light skin tone", "👍🏼"),
-                EmojiSkin("1F44D-1F3FD", "thumbs up: medium skin tone", "👍🏽"),
-                EmojiSkin("1F44D-1F3FE", "thumbs up: medium-dark skin tone", "👍🏾"),
-                EmojiSkin("1F44D-1F3FF", "thumbs up: dark skin tone", "👍🏿"),
-            ),
         ),
         onSelect = {},
     )
 }
+
+internal fun aSkinList() = persistentListOf(
+    EmojiSkin("1F44D-1F3FB", "thumbs up: light skin tone", "👍🏻"),
+    EmojiSkin("1F44D-1F3FC", "thumbs up: medium-light skin tone", "👍🏼"),
+    EmojiSkin("1F44D-1F3FD", "thumbs up: medium skin tone", "👍🏽"),
+    EmojiSkin("1F44D-1F3FE", "thumbs up: medium-dark skin tone", "👍🏾"),
+    EmojiSkin("1F44D-1F3FF", "thumbs up: dark skin tone", "👍🏿"),
+)