redesign emoji selector

app/src/main/java/com/vitorpamplona/amethyst/ui/actions/relays/AllRelayListView.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -112,6 +113,7 @@ fun AllRelayListView(
                             Text(
                                 text = stringResource(R.string.relay_settings),
                                 style = MaterialTheme.typography.titleLarge,
+                                modifier = Modifier.widthIn(max = 200.dp),
                             )
 
                             SaveButton(

app/src/main/java/com/vitorpamplona/amethyst/ui/note/ReactionsRow.kt

@@ -34,6 +34,8 @@ import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -47,10 +49,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LinearProgressIndicator
@@ -1305,6 +1310,13 @@ fun ReactionChoicePopup(
         offset = IntOffset(0, iconSizePx),
         onDismissRequest = { onDismiss() },
     ) {
+        ElevatedCard(
+            Modifier
+                .border(width = 1.dp, color = MaterialTheme.colorScheme.outline, shape = RoundedCornerShape(5.dp)),
+            elevation = CardDefaults.elevatedCardElevation(defaultElevation = 8.dp),
+            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceVariant),
+        ) {
+            Box(modifier = Modifier.padding(5.dp)) {
                 FlowRow(horizontalArrangement = Arrangement.Center) {
                     account.reactionChoices.forEach { reactionType ->
                         ActionableReactionButton(
@@ -1318,6 +1330,8 @@ fun ReactionChoicePopup(
                     }
                 }
             }
+        }
+    }
 }
 
 @Composable
@@ -1330,24 +1344,11 @@ private fun ActionableReactionButton(
     onChangeAmount: () -> Unit,
     toRemove: ImmutableSet<String>,
 ) {
-    Button(
-        modifier = Modifier.padding(horizontal = 3.dp),
-        onClick = {
-            accountViewModel.reactToOrDelete(
-                baseNote,
-                reactionType,
-            )
-            onDismiss()
-        },
-        shape = ButtonBorder,
-        colors =
-            ButtonDefaults.buttonColors(
-                containerColor = MaterialTheme.colorScheme.primary,
-            ),
-    ) {
     val thisModifier =
         remember(reactionType) {
-                Modifier.combinedClickable(
+            Modifier
+                .padding(horizontal = 3.dp)
+                .combinedClickable(
                     onClick = {
                         accountViewModel.reactToOrDelete(
                             baseNote,
@@ -1357,6 +1358,7 @@ private fun ActionableReactionButton(
                     },
                     onLongClick = { onChangeAmount() },
                 )
+                .padding(5.dp)
         }
 
     val removeSymbol =
@@ -1382,6 +1384,7 @@ private fun ActionableReactionButton(
             renderable,
             style = SpanStyle(color = Color.White),
             maxLines = 1,
+            modifier = thisModifier,
         )
     } else {
         when (reactionType) {
@@ -1415,7 +1418,6 @@ private fun ActionableReactionButton(
                 )
         }
     }
-    }
 }
 
 @OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)

app/src/main/java/com/vitorpamplona/amethyst/ui/note/UpdateReactionTypeDialog.kt

@@ -21,12 +21,14 @@
 package com.vitorpamplona.amethyst.ui.note
 
 import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -38,6 +40,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
@@ -269,15 +272,17 @@ private fun RenderReactionOption(
     reactionType: String,
     postViewModel: UpdateReactionTypeViewModel,
 ) {
-    Button(
+    Box(
-        modifier = Modifier.padding(horizontal = 3.dp),
+        modifier =
-        shape = ButtonBorder,
+            Modifier
-        colors =
+                .padding(3.dp)
-            ButtonDefaults.buttonColors(
+                .clickable { postViewModel.removeChoice(reactionType) }
-                containerColor = MaterialTheme.colorScheme.primary,
+                .border(
-            ),
+                    width = 1.dp,
-        onClick = { postViewModel.removeChoice(reactionType) },
+                    color = MaterialTheme.colorScheme.surfaceDim,
-        contentPadding = PaddingValues(horizontal = 5.dp),
+                    shape = RoundedCornerShape(8.dp),
+                )
+                .padding(8.dp),
     ) {
         if (reactionType.startsWith(":")) {
             val noStartColon = reactionType.removePrefix(":")
@@ -291,7 +296,7 @@ private fun RenderReactionOption(
 
             InLineIconRenderer(
                 renderable,
-                style = SpanStyle(color = Color.White),
+                style = SpanStyle(color = MaterialTheme.colorScheme.onBackground),
                 maxLines = 1,
             )
         } else {
@@ -301,24 +306,24 @@ private fun RenderReactionOption(
                         painter = painterResource(R.drawable.ic_liked),
                         null,
                         modifier = remember { Modifier.size(16.dp) },
-                        tint = Color.White,
+                        tint = MaterialTheme.colorScheme.onBackground,
                     )
                     Text(
                         text = " ✖",
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onBackground,
                         textAlign = TextAlign.Center,
                     )
                 }
                 "-" ->
                     Text(
                         text = "\uD83D\uDC4E ✖",
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onBackground,
                         textAlign = TextAlign.Center,
                     )
                 else ->
                     Text(
                         text = "$reactionType ✖",
-                        color = Color.White,
+                        color = MaterialTheme.colorScheme.onBackground,
                         textAlign = TextAlign.Center,
                     )
             }