Merge pull request #923 from VASHvic/redesign_emoji_selector

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 = stringRes(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,15 @@ 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
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProgressIndicatorDefaults
@@ -1323,16 +1330,25 @@ fun ReactionChoicePopup(
         offset = IntOffset(0, iconSizePx),
         onDismissRequest = { onDismiss() },
     ) {
-        FlowRow(horizontalArrangement = Arrangement.Center) {
-            account.reactionChoices.forEach { reactionType ->
-                ActionableReactionButton(
-                    baseNote,
-                    reactionType,
-                    accountViewModel,
-                    onDismiss,
-                    onChangeAmount,
-                    toRemove,
-                )
+        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(
+                            baseNote,
+                            reactionType,
+                            accountViewModel,
+                            onDismiss,
+                            onChangeAmount,
+                            toRemove,
+                        )
+                    }
+                }
             }
         }
     }
@@ -1348,24 +1364,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(
+    val thisModifier =
+        remember(reactionType) {
+            Modifier
+                .padding(horizontal = 3.dp)
+                .combinedClickable(
                     onClick = {
                         accountViewModel.reactToOrDelete(
                             baseNote,
@@ -1375,59 +1378,60 @@ private fun ActionableReactionButton(
                     },
                     onLongClick = { onChangeAmount() },
                 )
+                .padding(5.dp)
+        }
+
+    val removeSymbol =
+        remember(reactionType) {
+            if (reactionType in toRemove) {
+                " ✖"
+            } else {
+                ""
             }
+        }
 
-        val removeSymbol =
-            remember(reactionType) {
-                if (reactionType in toRemove) {
-                    " ✖"
-                } else {
-                    ""
-                }
-            }
+    if (reactionType.startsWith(":")) {
+        val noStartColon = reactionType.removePrefix(":")
+        val url = noStartColon.substringAfter(":")
 
-        if (reactionType.startsWith(":")) {
-            val noStartColon = reactionType.removePrefix(":")
-            val url = noStartColon.substringAfter(":")
-
-            val renderable =
-                persistentListOf(
-                    Nip30CustomEmoji.ImageUrlType(url),
-                    Nip30CustomEmoji.TextType(removeSymbol),
-                )
-
-            InLineIconRenderer(
-                renderable,
-                style = SpanStyle(color = Color.White),
-                maxLines = 1,
+        val renderable =
+            persistentListOf(
+                Nip30CustomEmoji.ImageUrlType(url),
+                Nip30CustomEmoji.TextType(removeSymbol),
             )
-        } else {
-            when (reactionType) {
-                "+" -> {
-                    LikedIcon(modifier = thisModifier.size(16.dp), tint = Color.White)
 
-                    Text(
-                        text = removeSymbol,
-                        color = Color.White,
-                        textAlign = TextAlign.Center,
-                        modifier = thisModifier,
-                    )
-                }
-                "-" ->
-                    Text(
-                        text = "\uD83D\uDC4E$removeSymbol",
-                        color = Color.White,
-                        textAlign = TextAlign.Center,
-                        modifier = thisModifier,
-                    )
-                else ->
-                    Text(
-                        "$reactionType$removeSymbol",
-                        color = Color.White,
-                        textAlign = TextAlign.Center,
-                        modifier = thisModifier,
-                    )
+        InLineIconRenderer(
+            renderable,
+            style = SpanStyle(color = Color.White),
+            maxLines = 1,
+            modifier = thisModifier,
+        )
+    } else {
+        when (reactionType) {
+            "+" -> {
+                LikedIcon(modifier = thisModifier.size(16.dp), tint = Color.White)
+                
+                Text(
+                    text = removeSymbol,
+                    color = Color.White,
+                    textAlign = TextAlign.Center,
+                    modifier = thisModifier,
+                )
             }
+            "-" ->
+                Text(
+                    text = "\uD83D\uDC4E$removeSymbol",
+                    color = Color.White,
+                    textAlign = TextAlign.Center,
+                    modifier = thisModifier,
+                )
+            else ->
+                Text(
+                    "$reactionType$removeSymbol",
+                    color = Color.White,
+                    textAlign = TextAlign.Center,
+                    modifier = thisModifier,
+                )
         }
     }
 }

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
@@ -265,15 +268,17 @@ private fun RenderReactionOption(
     reactionType: String,
     postViewModel: UpdateReactionTypeViewModel,
 ) {
-    Button(
-        modifier = Modifier.padding(horizontal = 3.dp),
-        shape = ButtonBorder,
-        colors =
-            ButtonDefaults.buttonColors(
-                containerColor = MaterialTheme.colorScheme.primary,
-            ),
-        onClick = { postViewModel.removeChoice(reactionType) },
-        contentPadding = PaddingValues(horizontal = 5.dp),
+    Box(
+        modifier =
+            Modifier
+                .padding(3.dp)
+                .clickable { postViewModel.removeChoice(reactionType) }
+                .border(
+                    width = 1.dp,
+                    color = MaterialTheme.colorScheme.surfaceDim,
+                    shape = RoundedCornerShape(8.dp),
+                )
+                .padding(8.dp),
     ) {
         if (reactionType.startsWith(":")) {
             val noStartColon = reactionType.removePrefix(":")
@@ -287,30 +292,30 @@ private fun RenderReactionOption(
 
             InLineIconRenderer(
                 renderable,
-                style = SpanStyle(color = Color.White),
+                style = SpanStyle(color = MaterialTheme.colorScheme.onBackground),
                 maxLines = 1,
             )
         } else {
             when (reactionType) {
                 "+" -> {
-                    LikedIcon(modifier = Modifier.size(16.dp), tint = Color.White)
-
+                    LikedIcon(modifier = Modifier.size(16.dp), 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,
                     )
             }