Performance: Reuse of modifiers in ReactionRow and Column

app/src/main/java/com/vitorpamplona/amethyst/ui/components/CashuRedeem.kt

@@ -60,7 +60,6 @@ import com.vitorpamplona.amethyst.ui.theme.DoubleHorzSpacer
 import com.vitorpamplona.amethyst.ui.theme.QuoteBorder
 import com.vitorpamplona.amethyst.ui.theme.Size18Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
-import com.vitorpamplona.amethyst.ui.theme.Size20dp
 import com.vitorpamplona.amethyst.ui.theme.SmallishBorder
 import com.vitorpamplona.amethyst.ui.theme.StdHorzSpacer
 import com.vitorpamplona.amethyst.ui.theme.subtleBorder
@@ -158,7 +157,7 @@ fun CashuPreview(
                 Icon(
                     painter = painterResource(R.drawable.cashu),
                     null,
-                    modifier = Modifier.size(20.dp),
+                    modifier = Size20Modifier,
                     tint = Color.Unspecified
                 )
 
@@ -206,7 +205,7 @@ fun CashuPreview(
                     if (isRedeeming) {
                         LoadingAnimation()
                     } else {
-                        ZapIcon(Size20dp, tint = Color.White)
+                        ZapIcon(Size20Modifier, tint = Color.White)
                     }
                     Spacer(DoubleHorzSpacer)
 
@@ -320,7 +319,7 @@ fun CashuPreviewNew(
                     if (isRedeeming) {
                         LoadingAnimation()
                     } else {
-                        ZapIcon(Size20dp, tint = MaterialTheme.colorScheme.onBackground)
+                        ZapIcon(Size20Modifier, tint = MaterialTheme.colorScheme.onBackground)
                     }
                     Spacer(StdHorzSpacer)
 

app/src/main/java/com/vitorpamplona/amethyst/ui/components/InvoicePreview.kt

@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Divider
@@ -36,6 +35,7 @@ import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.note.ErrorMessageDialog
 import com.vitorpamplona.amethyst.ui.note.payViaIntent
 import com.vitorpamplona.amethyst.ui.theme.QuoteBorder
+import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.subtleBorder
 import com.vitorpamplona.quartz.encoders.LnInvoiceUtil
 import kotlinx.coroutines.Dispatchers
@@ -119,7 +119,7 @@ fun InvoicePreview(lnInvoice: String, amount: String?) {
                 Icon(
                     painter = painterResource(R.drawable.lightning),
                     null,
-                    modifier = Modifier.size(20.dp),
+                    modifier = Size20Modifier,
                     tint = Color.Unspecified
                 )
 

app/src/main/java/com/vitorpamplona/amethyst/ui/components/InvoiceRequest.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -37,6 +36,7 @@ import com.vitorpamplona.amethyst.model.Account
 import com.vitorpamplona.amethyst.model.LocalCache
 import com.vitorpamplona.amethyst.service.lnurl.LightningAddressResolver
 import com.vitorpamplona.amethyst.ui.theme.QuoteBorder
+import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import com.vitorpamplona.amethyst.ui.theme.subtleBorder
 import com.vitorpamplona.quartz.events.LnZapEvent
@@ -94,7 +94,7 @@ fun InvoiceRequest(
         Icon(
             painter = painterResource(R.drawable.lightning),
             null,
-            modifier = Modifier.size(20.dp),
+            modifier = Size20Modifier,
             tint = Color.Unspecified
         )
 

app/src/main/java/com/vitorpamplona/amethyst/ui/navigation/AppTopBar.kt

@@ -112,6 +112,7 @@ import com.vitorpamplona.amethyst.ui.theme.DividerThickness
 import com.vitorpamplona.amethyst.ui.theme.DoubleHorzSpacer
 import com.vitorpamplona.amethyst.ui.theme.HalfVertSpacer
 import com.vitorpamplona.amethyst.ui.theme.HeaderPictureModifier
+import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size22Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size34dp
 import com.vitorpamplona.amethyst.ui.theme.Size40dp
@@ -725,12 +726,12 @@ fun SimpleTextSpinner(
         contentAlignment = Alignment.Center
     ) {
         Row(verticalAlignment = Alignment.CenterVertically) {
-            Spacer(modifier = Modifier.size(20.dp))
+            Spacer(modifier = Size20Modifier)
             Text(currentText)
             Icon(
                 imageVector = Icons.Default.ExpandMore,
                 null,
-                modifier = Modifier.size(20.dp),
+                modifier = Size20Modifier,
                 tint = MaterialTheme.colorScheme.placeholderText
             )
         }

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

@@ -59,7 +59,7 @@ import com.vitorpamplona.amethyst.ui.theme.DoubleHorzSpacer
 import com.vitorpamplona.amethyst.ui.theme.Font12SP
 import com.vitorpamplona.amethyst.ui.theme.ReactionRowHeightChat
 import com.vitorpamplona.amethyst.ui.theme.Size10dp
-import com.vitorpamplona.amethyst.ui.theme.Size15dp
+import com.vitorpamplona.amethyst.ui.theme.Size15Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20dp
 import com.vitorpamplona.amethyst.ui.theme.Size25dp
 import com.vitorpamplona.amethyst.ui.theme.Size5dp
@@ -450,7 +450,7 @@ private fun MessageBubbleLines(
                 grayTint = MaterialTheme.colorScheme.placeholderText,
                 accountViewModel = accountViewModel,
                 showCounter = false,
-                iconSize = Size15dp
+                iconSizeModifier = Size15Modifier
             ) {
                 onWantsToReply(baseNote)
             }

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

@@ -123,11 +123,11 @@ fun LikedIcon(modifier: Modifier) {
 }
 
 @Composable
-fun LikeIcon(iconSize: Dp, grayTint: Color) {
+fun LikeIcon(iconSizeModifier: Modifier, grayTint: Color) {
     Icon(
         painter = painterResource(R.drawable.ic_like),
         null,
-        modifier = remember(iconSize) { Modifier.size(iconSize) },
+        modifier = iconSizeModifier,
         tint = grayTint
     )
 }
@@ -162,11 +162,6 @@ fun ZappedIcon(modifier: Modifier) {
     ZapIcon(modifier = modifier, BitcoinOrange)
 }
 
-@Composable
-fun ZapIcon(iconSize: Dp, tint: Color = Color.Unspecified) {
-    ZapIcon(modifier = remember(iconSize) { Modifier.size(iconSize) }, tint)
-}
-
 @Composable
 fun ZapIcon(modifier: Modifier, tint: Color = Color.Unspecified) {
     Icon(
@@ -228,11 +223,11 @@ fun ExpandMoreIcon(modifier: Modifier) {
 }
 
 @Composable
-fun CommentIcon(iconSize: Dp, tint: Color) {
+fun CommentIcon(iconSizeModifier: Modifier, tint: Color) {
     Icon(
         painter = painterResource(R.drawable.ic_comment),
         contentDescription = null,
-        modifier = remember { Modifier.size(iconSize) },
+        modifier = iconSizeModifier,
         tint = tint
     )
 }

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

@@ -89,14 +89,16 @@ 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.Size0dp
-import com.vitorpamplona.amethyst.ui.theme.Size17dp
+import com.vitorpamplona.amethyst.ui.theme.Size16Modifier
-import com.vitorpamplona.amethyst.ui.theme.Size19dp
+import com.vitorpamplona.amethyst.ui.theme.Size17Modifier
+import com.vitorpamplona.amethyst.ui.theme.Size19Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20dp
 import com.vitorpamplona.amethyst.ui.theme.Size22Modifier
@@ -532,13 +534,11 @@ fun ReplyReaction(
     grayTint: Color,
     accountViewModel: AccountViewModel,
     showCounter: Boolean = true,
-    iconSize: Dp = Size17dp,
+    iconSizeModifier: Modifier = Size17Modifier,
     onPress: () -> Unit
 ) {
     IconButton(
-        modifier = remember {
+        modifier = iconSizeModifier,
-            Modifier.size(iconSize)
-        },
         onClick = {
             if (accountViewModel.isWriteable()) {
                 onPress()
@@ -550,7 +550,7 @@ fun ReplyReaction(
             }
         }
     ) {
-        CommentIcon(iconSize, grayTint)
+        CommentIcon(iconSizeModifier, grayTint)
     }
 
     if (showCounter) {
@@ -596,7 +596,7 @@ val slideAnimation: ContentTransform =
 @Composable
 private fun TextCount(count: Int, textColor: Color) {
     Text(
-        text = remember(count) { showCount(count) },
+        text = showCount(count),
         fontSize = Font14SP,
         color = textColor,
         modifier = HalfStartPadding,
@@ -625,17 +625,14 @@ fun BoostReaction(
     baseNote: Note,
     grayTint: Color,
     accountViewModel: AccountViewModel,
-    iconSize: Dp = 20.dp,
+    iconSizeModifier: Modifier = Size20Modifier,
+    iconSize: Dp = Size20dp,
     onQuotePress: () -> Unit
 ) {
     var wantsToBoost by remember { mutableStateOf(false) }
 
-    val iconButtonModifier = remember {
-        Modifier.size(iconSize)
-    }
-
     IconButton(
-        modifier = iconButtonModifier,
+        modifier = iconSizeModifier,
         onClick = {
             accountViewModel.tryBoost(baseNote) {
                 wantsToBoost = true
@@ -643,7 +640,7 @@ fun BoostReaction(
         }
     ) {
         ObserveBoostIcon(baseNote, accountViewModel) { hasBoosted ->
-            RepostedIcon(iconButtonModifier, if (hasBoosted) Color.Unspecified else grayTint)
+            RepostedIcon(iconSizeModifier, if (hasBoosted) Color.Unspecified else grayTint)
         }
 
         if (wantsToBoost) {
@@ -695,20 +692,16 @@ fun LikeReaction(
     grayTint: Color,
     accountViewModel: AccountViewModel,
     nav: (String) -> Unit,
-    iconSize: Dp = 20.dp,
+    iconSize: Dp = Size20dp,
-    heartSize: Dp = 16.dp,
+    heartSizeModifier: Modifier = Size16Modifier,
     iconFontSize: TextUnit = Font14SP
 ) {
-    val iconButtonModifier = remember {
-        Modifier.size(iconSize)
-    }
-
     var wantsToChangeReactionSymbol by remember { mutableStateOf(false) }
     var wantsToReact by remember { mutableStateOf(false) }
 
     Box(
         contentAlignment = Center,
-        modifier = iconButtonModifier.combinedClickable(
+        modifier = Modifier.size(iconSize).combinedClickable(
             role = Role.Button,
             interactionSource = remember { MutableInteractionSource() },
             indication = rememberRipple(bounded = false, radius = Size24dp),
@@ -731,40 +724,40 @@ fun LikeReaction(
         ObserveLikeIcon(baseNote, accountViewModel) { reactionType ->
             Crossfade(targetState = reactionType.value, label = "LikeIcon") {
                 if (it != null) {
-                    RenderReactionType(it, heartSize, iconFontSize)
+                    RenderReactionType(it, heartSizeModifier, iconFontSize)
                 } else {
-                    LikeIcon(heartSize, grayTint)
+                    LikeIcon(heartSizeModifier, grayTint)
                 }
             }
         }
+
+        if (wantsToChangeReactionSymbol) {
+            UpdateReactionTypeDialog(
+                { wantsToChangeReactionSymbol = false },
+                accountViewModel = accountViewModel,
+                nav
+            )
+        }
+
+        if (wantsToReact) {
+            ReactionChoicePopup(
+                baseNote,
+                iconSize,
+                accountViewModel,
+                onDismiss = {
+                    wantsToReact = false
+                },
+                onChangeAmount = {
+                    wantsToReact = false
+                    wantsToChangeReactionSymbol = true
+                }
+            )
+        }
     }
 
     ObserveLikeText(baseNote) { reactionCount ->
         SlidingAnimationCount(reactionCount, grayTint)
     }
-
-    if (wantsToChangeReactionSymbol) {
-        UpdateReactionTypeDialog(
-            { wantsToChangeReactionSymbol = false },
-            accountViewModel = accountViewModel,
-            nav
-        )
-    }
-
-    if (wantsToReact) {
-        ReactionChoicePopup(
-            baseNote,
-            iconSize,
-            accountViewModel,
-            onDismiss = {
-                wantsToReact = false
-            },
-            onChangeAmount = {
-                wantsToReact = false
-                wantsToChangeReactionSymbol = true
-            }
-        )
-    }
 }
 
 @Composable
@@ -793,14 +786,10 @@ fun ObserveLikeIcon(
 @Composable
 private fun RenderReactionType(
     reactionType: String,
-    iconSize: Dp = Size20dp,
+    iconSizeModifier: Modifier = Size20Modifier,
     iconFontSize: TextUnit
 ) {
-    val isCustom = remember(reactionType) {
+    if (reactionType.isNotEmpty() && reactionType[0] == ':') {
-        reactionType.startsWith(":")
-    }
-
-    if (isCustom) {
         val renderable = remember(reactionType) {
             listOf(
                 ImageUrlType(reactionType.removePrefix(":").substringAfter(":"))
@@ -815,7 +804,7 @@ private fun RenderReactionType(
         )
     } else {
         when (reactionType) {
-            "+" -> LikedIcon(iconSize)
+            "+" -> LikedIcon(iconSizeModifier)
             "-" -> Text(text = "\uD83D\uDC4E", fontSize = iconFontSize)
             else -> Text(text = reactionType, fontSize = iconFontSize)
         }
@@ -857,14 +846,11 @@ fun ZapReaction(
     baseNote: Note,
     grayTint: Color,
     accountViewModel: AccountViewModel,
-    iconSize: Dp = 20.dp,
+    iconSize: Dp = Size20dp,
+    iconSizeModifier: Modifier = Size20Modifier,
     animationSize: Dp = 14.dp,
     nav: (String) -> Unit
 ) {
-    val iconButtonModifier = remember {
-        Modifier.size(iconSize)
-    }
-
     var wantsToZap by remember { mutableStateOf(false) }
     var wantsToChangeZapAmount by remember { mutableStateOf(false) }
     var wantsToSetCustomZap by remember { mutableStateOf(false) }
@@ -882,7 +868,7 @@ fun ZapReaction(
 
     Row(
         verticalAlignment = CenterVertically,
-        modifier = iconButtonModifier.combinedClickable(
+        modifier = iconSizeModifier.combinedClickable(
             role = Role.Button,
             interactionSource = remember { MutableInteractionSource() },
             indication = rememberRipple(bounded = false, radius = Size24dp),
@@ -920,8 +906,9 @@ fun ZapReaction(
     ) {
         if (wantsToZap) {
             ZapAmountChoicePopup(
-                baseNote,
+                baseNote = baseNote,
-                accountViewModel,
+                iconSize = iconSize,
+                accountViewModel = accountViewModel,
                 onDismiss = {
                     wantsToZap = false
                     zappingProgress = 0f
@@ -1028,9 +1015,9 @@ fun ZapReaction(
             ) { wasZappedByLoggedInUser ->
                 Crossfade(targetState = wasZappedByLoggedInUser.value, label = "ZapIcon") {
                     if (it) {
-                        ZappedIcon(iconSize)
+                        ZappedIcon(iconSizeModifier)
                     } else {
-                        ZapIcon(iconSize, grayTint)
+                        ZapIcon(iconSizeModifier, grayTint)
                     }
                 }
             }
@@ -1129,8 +1116,8 @@ private fun ObserveZapAmountText(
 fun ViewCountReaction(
     note: Note,
     grayTint: Color,
-    barChartModifier: Modifier = Modifier.size(Size19dp),
+    barChartModifier: Modifier = Size19Modifier,
-    numberSizeModifier: Modifier = Modifier.height(Size24dp),
+    numberSizeModifier: Modifier = Height24dpModifier,
     viewCountColorFilter: ColorFilter
 ) {
     ViewCountIcon(barChartModifier, grayTint)
@@ -1348,6 +1335,7 @@ private fun ActionableReactionButton(
 fun ZapAmountChoicePopup(
     baseNote: Note,
     accountViewModel: AccountViewModel,
+    iconSize: Dp,
     onDismiss: () -> Unit,
     onChangeAmount: () -> Unit,
     onError: (title: String, text: String) -> Unit,
@@ -1357,9 +1345,13 @@ fun ZapAmountChoicePopup(
     val context = LocalContext.current
     val zapMessage = ""
 
+    val iconSizePx = with(LocalDensity.current) {
+        -iconSize.toPx().toInt()
+    }
+
     Popup(
         alignment = Alignment.BottomCenter,
-        offset = IntOffset(0, -50),
+        offset = IntOffset(0, iconSizePx),
         onDismissRequest = { onDismiss() }
     ) {
         FlowRow(horizontalArrangement = Arrangement.Center) {

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

@@ -69,7 +69,11 @@ import com.vitorpamplona.amethyst.ui.screen.NostrVideoFeedViewModel
 import com.vitorpamplona.amethyst.ui.screen.RefresheableView
 import com.vitorpamplona.amethyst.ui.screen.ScrollStateKeys
 import com.vitorpamplona.amethyst.ui.screen.rememberForeverPagerState
+import com.vitorpamplona.amethyst.ui.theme.Size35Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size35dp
+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.onBackgroundColorFilter
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import com.vitorpamplona.quartz.events.FileHeaderEvent
@@ -270,7 +274,7 @@ fun RenderReportState(
 
     Crossfade(targetState = (!state.isAcceptable || state.isHiddenAuthor) && !showReportedNote) { showHiddenNote ->
         if (showHiddenNote) {
-            Column(remember { Modifier.fillMaxSize() }, verticalArrangement = Arrangement.Center) {
+            Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center) {
                 HiddenNote(
                     state.relevantReports,
                     state.isHiddenAuthor,
@@ -432,17 +436,49 @@ fun ReactionsColumn(baseNote: Note, accountViewModel: AccountViewModel, nav: (St
     Spacer(modifier = Modifier.height(8.dp))
 
     Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(bottom = 75.dp, end = 20.dp)) {
-        ReplyReaction(baseNote, grayTint = MaterialTheme.colorScheme.onBackground, accountViewModel, iconSize = 40.dp) {
+        ReplyReaction(
+            baseNote = baseNote,
+            grayTint = MaterialTheme.colorScheme.onBackground,
+            accountViewModel = accountViewModel,
+            iconSizeModifier = Size40Modifier
+        ) {
             routeFor(
                 baseNote,
                 accountViewModel.userProfile()
             )?.let { nav(it) }
         }
-        BoostReaction(baseNote, grayTint = MaterialTheme.colorScheme.onBackground, accountViewModel, iconSize = 40.dp) {
+        BoostReaction(
+            baseNote = baseNote,
+            grayTint = MaterialTheme.colorScheme.onBackground,
+            accountViewModel = accountViewModel,
+            iconSizeModifier = Size40Modifier,
+            iconSize = Size40dp
+        ) {
             wantsToQuote = baseNote
         }
-        LikeReaction(baseNote, grayTint = MaterialTheme.colorScheme.onBackground, accountViewModel, nav, iconSize = 40.dp, heartSize = Size35dp, 28.sp)
+        LikeReaction(
-        ZapReaction(baseNote, grayTint = MaterialTheme.colorScheme.onBackground, accountViewModel, iconSize = 40.dp, animationSize = Size35dp, nav = nav)
+            baseNote = baseNote,
-        ViewCountReaction(baseNote, grayTint = MaterialTheme.colorScheme.onBackground, barChartModifier = Modifier.size(39.dp), viewCountColorFilter = MaterialTheme.colorScheme.onBackgroundColorFilter)
+            grayTint = MaterialTheme.colorScheme.onBackground,
+            accountViewModel = accountViewModel,
+            nav = nav,
+            iconSize = Size40dp,
+            heartSizeModifier = Size35Modifier,
+            28.sp
+        )
+        ZapReaction(
+            baseNote = baseNote,
+            grayTint = MaterialTheme.colorScheme.onBackground,
+            accountViewModel = accountViewModel,
+            iconSize = Size40dp,
+            iconSizeModifier = Size40Modifier,
+            animationSize = Size35dp,
+            nav = nav
+        )
+        ViewCountReaction(
+            note = baseNote,
+            grayTint = MaterialTheme.colorScheme.onBackground,
+            barChartModifier = Size39Modifier,
+            viewCountColorFilter = MaterialTheme.colorScheme.onBackgroundColorFilter
+        )
     }
 }

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

@@ -89,13 +89,17 @@ val Size6Modifier = Modifier.size(6.dp)
 val Size10Modifier = Modifier.size(10.dp)
 val Size15Modifier = Modifier.size(15.dp)
 val Size16Modifier = Modifier.size(16.dp)
+val Size17Modifier = Modifier.size(17.dp)
 val Size18Modifier = Modifier.size(18.dp)
+val Size19Modifier = Modifier.size(19.dp)
 val Size20Modifier = Modifier.size(20.dp)
 val Size22Modifier = Modifier.size(22.dp)
 val Size24Modifier = Modifier.size(24.dp)
 val Size26Modifier = Modifier.size(26.dp)
 val Size30Modifier = Modifier.size(30.dp)
 val Size35Modifier = Modifier.size(35.dp)
+val Size39Modifier = Modifier.size(39.dp)
+val Size40Modifier = Modifier.size(40.dp)
 val Size50Modifier = Modifier.size(50.dp)
 val Size55Modifier = Modifier.size(55.dp)
 
@@ -114,6 +118,7 @@ val ReactionRowHeightChat = Modifier.height(25.dp)
 val UserNameRowHeight = Modifier.fillMaxWidth()
 val UserNameMaxRowHeight = Modifier.fillMaxWidth()
 
+val Height24dpModifier = Modifier.height(24.dp)
 val Height4dpModifier = Modifier.height(4.dp)
 
 val AccountPictureModifier = Modifier.size(55.dp).clip(shape = CircleShape)