From 9515435102040a11111711ca3c34294fc336b359 Mon Sep 17 00:00:00 2001
From: Chris Smith <csmith@lunarian.uk>
Date: Thu, 1 Jun 2023 10:15:56 +0100
Subject: [PATCH] Selected user: scale and align cross properly

IconButton makes assumptions about the size of icons, which
we're not abiding by here. That makes it semeingly impossible
to properly center our icon. Instead, rewrite it as a surface
to ensure it's laid out properly
---
 .../matrix/ui/components/SelectedUser.kt      | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
index 6d31666822..a5d8b9a465 100644
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
@@ -16,16 +16,20 @@
 
 package io.element.android.libraries.matrix.ui.components
 
-import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -38,7 +42,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 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.Surface
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.user.MatrixUser
 import io.element.android.libraries.matrix.ui.model.getAvatarData
@@ -51,7 +55,9 @@ fun SelectedUser(
     modifier: Modifier = Modifier,
     onUserRemoved: (MatrixUser) -> Unit = {},
 ) {
-    Box(modifier = modifier.width(56.dp)) {
+    Box(modifier = modifier
+        .width(56.dp)
+    ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
@@ -63,18 +69,23 @@ fun SelectedUser(
                 style = MaterialTheme.typography.bodyLarge,
             )
         }
-        IconButton(
+        Surface(
+            color = MaterialTheme.colorScheme.primary,
             modifier = Modifier
                 .clip(CircleShape)
-                .background(MaterialTheme.colorScheme.primary)
                 .size(20.dp)
-                .align(Alignment.TopEnd),
-            onClick = { onUserRemoved(matrixUser) }
+                .align(Alignment.TopEnd)
+                .clickable(
+                    indication = rememberRipple(),
+                    interactionSource = remember { MutableInteractionSource() },
+                    onClick = { onUserRemoved(matrixUser) }
+                ),
         ) {
             Icon(
                 imageVector = Icons.Default.Close,
                 contentDescription = stringResource(id = StringR.string.action_remove),
                 tint = MaterialTheme.colorScheme.onPrimary,
+                modifier = Modifier.padding(2.dp)
             )
         }
     }