Realigning the reaction icons and texts between main feed and video feed.

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

@@ -22,6 +22,7 @@ package com.vitorpamplona.amethyst.ui.note
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -206,6 +207,18 @@ fun ZappedIcon(modifier: Modifier) {
     ZapIcon(modifier = modifier, BitcoinOrange)
 }
 
+@Preview
+@Composable
+fun ReactionRowIconPreview() {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        CommentIcon(Size20Modifier, Color.Unspecified)
+        RepostedIcon(Size20Modifier)
+        LikeIcon(Size20Modifier, Color.Unspecified)
+        ZapIcon(Size20Modifier)
+        ZappedIcon(Size20Modifier)
+    }
+}
+
 @Composable
 fun ZapIcon(
     modifier: Modifier,

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

@@ -99,7 +99,6 @@ import coil.request.CachePolicy
 import coil.request.ImageRequest
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.model.Note
-import com.vitorpamplona.amethyst.model.zap
 import com.vitorpamplona.amethyst.service.ZapPaymentHandler
 import com.vitorpamplona.amethyst.ui.actions.NewPostView
 import com.vitorpamplona.amethyst.ui.components.GenericLoadable
@@ -111,13 +110,13 @@ import com.vitorpamplona.amethyst.ui.theme.ButtonBorder
 import com.vitorpamplona.amethyst.ui.theme.DarkerGreen
 import com.vitorpamplona.amethyst.ui.theme.Font14SP
 import com.vitorpamplona.amethyst.ui.theme.HalfDoubleVertSpacer
-import com.vitorpamplona.amethyst.ui.theme.HalfStartPadding
 import com.vitorpamplona.amethyst.ui.theme.Height24dpModifier
 import com.vitorpamplona.amethyst.ui.theme.ModifierWidth3dp
 import com.vitorpamplona.amethyst.ui.theme.NoSoTinyBorders
 import com.vitorpamplona.amethyst.ui.theme.ReactionRowExpandButton
 import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeight
 import com.vitorpamplona.amethyst.ui.theme.ReactionRowZapraiserSize
+import com.vitorpamplona.amethyst.ui.theme.RowColSpacing
 import com.vitorpamplona.amethyst.ui.theme.Size0dp
 import com.vitorpamplona.amethyst.ui.theme.Size16Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size17Modifier
@@ -229,7 +228,11 @@ private fun GenericInnerReactionRow(
     five: @Composable () -> Unit,
     six: @Composable () -> Unit,
 ) {
-    Row(verticalAlignment = CenterVertically, modifier = ReactionRowHeight) {
+    Row(
+        verticalAlignment = CenterVertically,
+        horizontalArrangement = RowColSpacing,
+        modifier = ReactionRowHeight,
+    ) {
         val fullWeight = remember { Modifier.weight(1f) }
 
         if (showReactionDetail) {
@@ -241,11 +244,11 @@ private fun GenericInnerReactionRow(
             }
         }
 
-        Row(verticalAlignment = CenterVertically, modifier = fullWeight) { two() }
+        Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { two() }
 
-        Row(verticalAlignment = CenterVertically, modifier = fullWeight) { three() }
+        Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { three() }
 
-        Row(verticalAlignment = CenterVertically, modifier = fullWeight) { four() }
+        Row(verticalAlignment = CenterVertically, horizontalArrangement = RowColSpacing, modifier = fullWeight) { four() }
 
         Row(verticalAlignment = CenterVertically, modifier = fullWeight) { five() }
 
@@ -658,7 +661,6 @@ fun TextCount(
         text = showCount(count),
         fontSize = Font14SP,
         color = textColor,
-        modifier = HalfStartPadding,
         maxLines = 1,
     )
 }

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/VideoScreen.kt

@@ -99,6 +99,7 @@ import com.vitorpamplona.amethyst.ui.theme.Size39Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size40Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size40dp
 import com.vitorpamplona.amethyst.ui.theme.Size55dp
+import com.vitorpamplona.amethyst.ui.theme.VideoReactionColumnPadding
 import com.vitorpamplona.amethyst.ui.theme.onBackgroundColorFilter
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import com.vitorpamplona.quartz.events.FileHeaderEvent
@@ -462,7 +463,7 @@ fun ReactionsColumn(
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = Modifier.padding(bottom = 75.dp, end = 10.dp),
+        modifier = VideoReactionColumnPadding,
     ) {
         ReplyReaction(
             baseNote = baseNote,
@@ -495,7 +496,7 @@ fun ReactionsColumn(
             nav = nav,
             iconSize = Size40dp,
             heartSizeModifier = Size35Modifier,
-            28.sp,
+            iconFontSize = 28.sp,
         )
         ZapReaction(
             baseNote = baseNote,

app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt

@@ -21,6 +21,7 @@
 package com.vitorpamplona.amethyst.ui.theme
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -101,6 +102,8 @@ val HalfPadding = Modifier.padding(5.dp)
 val StdPadding = Modifier.padding(10.dp)
 val BigPadding = Modifier.padding(15.dp)
 
+val RowColSpacing = Arrangement.spacedBy(3.dp)
+
 val HalfHorzPadding = Modifier.padding(horizontal = 5.dp)
 val HalfVertPadding = Modifier.padding(vertical = 5.dp)
 
@@ -136,6 +139,8 @@ val ReactionRowExpandButton = Modifier.width(65.dp).padding(start = 31.dp)
 val WidthAuthorPictureModifier = Modifier.width(55.dp)
 val WidthAuthorPictureModifierWithPadding = Modifier.width(65.dp)
 
+val VideoReactionColumnPadding = Modifier.padding(bottom = 75.dp)
+
 val DividerThickness = 0.25.dp
 
 val ReactionRowHeight = Modifier.height(24.dp).padding(start = 10.dp)
@@ -223,4 +228,4 @@ val liveStreamTag =
         .padding(horizontal = Size5dp)
 
 val chatAuthorImage = Modifier.size(20.dp).clip(shape = CircleShape)
-val AuthorInfoVideoFeed = Modifier.width(75.dp)
+val AuthorInfoVideoFeed = Modifier.width(75.dp).padding(end = 15.dp)