Improve social buttons

app/src/main/java/xyz/wingio/dimett/ui/theme/AdditionalTheme.kt

@@ -0,0 +1,47 @@
+package xyz.wingio.dimett.ui.theme
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.structuralEqualityPolicy
+import androidx.compose.ui.graphics.Color
+
+/**
+ * Provides themed colors not available in [MaterialTheme]
+ */
+@Stable
+class AdditionalColorScheme(
+    favorite: Color,
+    boost: Color
+) {
+
+    var favorite by mutableStateOf(favorite, structuralEqualityPolicy())
+        private set
+
+    var boost by mutableStateOf(boost, structuralEqualityPolicy())
+        private set
+
+}
+
+val LocalAdditionalColorScheme = compositionLocalOf<AdditionalColorScheme> { error("No AdditionalColorScheme specified") }
+
+val MaterialTheme.additionalColors: AdditionalColorScheme
+    @Composable
+    get() = LocalAdditionalColorScheme.current
+
+
+// Default color schemes
+
+val DarkAdditionalColorScheme = AdditionalColorScheme(
+    favorite = HotPink,
+    boost = Green
+)
+
+val LightAdditionalColorScheme = AdditionalColorScheme(
+    favorite = HotPink100,
+    boost = Green200
+)

app/src/main/java/xyz/wingio/dimett/ui/theme/Colors.kt

@@ -0,0 +1,25 @@
+package xyz.wingio.dimett.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val HotPink = Color(0xFFFF0066)
+val HotPink100 = Color(0xFFE6005C)
+val HotPink200 = Color(0xFFCF0053)
+val HotPink300 = Color(0xFFCF0053)
+val HotPink400 = Color(0xFFBA004B)
+val HotPink500 = Color(0xFFA70044)
+val HotPink600 = Color(0xFF96003D)
+val HotPink700 = Color(0xFF870037)
+val HotPink800 = Color(0xFF7A0032)
+val HotPink900 = Color(0xFF6E002D)
+
+val Green = Color(0xFF71C87F)
+val Green100 = Color(0xFF66B472)
+val Green200 = Color(0xFF5CA267)
+val Green300 = Color(0xFF53925D)
+val Green400 = Color(0xFF4B8354)
+val Green500 = Color(0xFF44764C)
+val Green600 = Color(0xFF3D6A44)
+val Green700 = Color(0xFF375F3D)
+val Green800 = Color(0xFF325637)
+val Green900 = Color(0xFF2D4D32)

app/src/main/java/xyz/wingio/dimett/ui/theme/Theme.kt

@@ -8,6 +8,7 @@ import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
@@ -25,15 +26,18 @@ fun DimettTheme(
     dynamicColor: Boolean = true,
     content: @Composable () -> Unit
 ) {
-    val colorScheme = when {
+    val (colorScheme, additionalColorScheme) = when {
         // Make sure that even if the dynamicColor option is true it'll still require Android 12+
         dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
             val context = LocalContext.current
-            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+            if (darkTheme)
+                dynamicDarkColorScheme(context) to DarkAdditionalColorScheme
+            else
+                dynamicLightColorScheme(context) to LightAdditionalColorScheme
         }
 
-        darkTheme -> darkColorScheme()
-        else -> lightColorScheme()
+        darkTheme -> darkColorScheme() to DarkAdditionalColorScheme
+        else -> lightColorScheme() to LightAdditionalColorScheme
     }
 
     val sysUiController = rememberSystemUiController()
@@ -47,8 +51,12 @@ fun DimettTheme(
         }
     }
 
-    MaterialTheme(
-        colorScheme = colorScheme,
-        content = content
-    )
+    CompositionLocalProvider(
+        LocalAdditionalColorScheme provides additionalColorScheme
+    ) {
+        MaterialTheme(
+            colorScheme = colorScheme,
+            content = content
+        )
+    }
 }

app/src/main/java/xyz/wingio/dimett/ui/widgets/posts/PostButtons.kt

@@ -2,6 +2,7 @@ package xyz.wingio.dimett.ui.widgets.posts
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
@@ -12,25 +13,30 @@ 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.RepeatOn
-import androidx.compose.material.icons.filled.Star
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Share
 import androidx.compose.material.icons.outlined.ChatBubbleOutline
+import androidx.compose.material.icons.outlined.FavoriteBorder
 import androidx.compose.material.icons.outlined.Repeat
-import androidx.compose.material.icons.outlined.Share
-import androidx.compose.material.icons.outlined.StarBorder
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
 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
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import xyz.wingio.dimett.R
 import xyz.wingio.dimett.ui.components.Text
+import xyz.wingio.dimett.ui.theme.additionalColors
 import xyz.wingio.dimett.utils.formatNumber
 
 /**
@@ -64,62 +70,93 @@ fun PostButtons(
         verticalArrangement = Arrangement.aligned(Alignment.CenterVertically)
     ) {
         PostButton(
-            icon = Icons.Outlined.ChatBubbleOutline,
-            contentDescription = R.string.cd_reply,
             text = { Text(formatNumber(replies)) },
-            onClick = onReplyClick
+            inactiveIcon = Icons.Outlined.ChatBubbleOutline,
+            contentDescription = R.string.cd_reply,
+            onClick = onReplyClick,
         )
+
         PostButton(
-            icon = if (boosted) Icons.Filled.RepeatOn else Icons.Outlined.Repeat,
-            contentDescription = R.string.cd_boost,
+            active = boosted,
             text = { Text(formatNumber(boosts)) },
+            inactiveIcon = Icons.Outlined.Repeat,
+            contentDescription = R.string.cd_boost,
+            activeColor = MaterialTheme.additionalColors.boost,
             onClick = onBoostClick
         )
+
         PostButton(
-            icon = if (favorited) Icons.Filled.Star else Icons.Outlined.StarBorder,
-            contentDescription = R.string.cd_favorite,
+            active = favorited,
             text = { Text(formatNumber(favorites)) },
+            activeIcon = Icons.Filled.Favorite,
+            inactiveIcon = Icons.Outlined.FavoriteBorder,
+            contentDescription = R.string.cd_favorite,
+            activeColor = MaterialTheme.additionalColors.favorite,
             onClick = onFavoriteClick
         )
+
         Spacer(Modifier.weight(1f))
+
         PostButton(
-            icon = Icons.Outlined.Share,
-            contentDescription = R.string.action_share,
             text = { Text(stringResource(R.string.action_share)) },
+            inactiveIcon = Icons.Filled.Share,
+            contentDescription = R.string.action_share,
             onClick = onShareClick
         )
     }
 }
 
 /**
- * Version of [TextButton][androidx.compose.material3.TextButton] with an icon
+ * Version of [TextButton][androidx.compose.material3.TextButton] with an icon and an active state, used for social actions such as sharing or favoriting
  *
- * @param icon Icon displayed next to the label
- * @param contentDescription Describes the button for screen readers
- * @param text Label to be displayed in the button
  * @param onClick Called when the button is clicked
+ * @param text Label to be displayed in the button
+ * @param active Whether or not this button is in the active state (Ex. Post already favorited)
+ * @param inactiveIcon The icon to use when this button is in the default inactive state ([active] is `false`)
+ * @param activeIcon Icon displayed next to the label when [active] is `true`
+ * @param contentDescription Describes the button for screen readers
+ * @param inactiveColor Content color used when [active] is `false`
+ * @param activeColor Content color used when [active] is `true`
  */
 @Composable
 fun PostButton(
-    icon: ImageVector,
-    @StringRes contentDescription: Int,
+    onClick: () -> Unit,
     text: @Composable () -> Unit,
-    onClick: () -> Unit
+    active: Boolean = false,
+    inactiveIcon: ImageVector,
+    activeIcon: ImageVector = inactiveIcon,
+    @StringRes contentDescription: Int,
+    inactiveColor: Color = LocalContentColor.current.copy(alpha = 0.6f),
+    activeColor: Color = inactiveColor,
 ) {
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = Modifier
             .clip(CircleShape)
-            .clickable(onClick = onClick)
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = rememberRipple(color = activeColor),
+                onClick = onClick
+            )
             .padding(vertical = 6.dp, horizontal = 10.dp)
     ) {
         Icon(
-            imageVector = icon,
+            imageVector = if (active) activeIcon else inactiveIcon,
             contentDescription = stringResource(contentDescription),
-            modifier = Modifier.size(18.dp)
+            tint = if (active) activeColor else inactiveColor,
+            modifier = Modifier.size(16.dp)
         )
-        Spacer(modifier = Modifier.width(ButtonDefaults.IconSpacing))
-        ProvideTextStyle(MaterialTheme.typography.labelLarge) {
+
+        Spacer(
+            modifier = Modifier.width(ButtonDefaults.IconSpacing)
+        )
+
+        ProvideTextStyle(
+            MaterialTheme.typography.labelLarge.copy(
+                color = if (active) activeColor else inactiveColor,
+                fontWeight = if(active) FontWeight.Bold else FontWeight.Medium
+            )
+        ) {
             text()
         }
     }

app/src/main/java/xyz/wingio/dimett/utils/ModifierUtils.kt

@@ -0,0 +1,11 @@
+package xyz.wingio.dimett.utils
+
+import androidx.compose.ui.Modifier
+
+/**
+ * Applies additional modifiers when the [predicate] is met
+ *
+ * @param predicate Condition for applying additional modifiers
+ */
+fun Modifier.thenIf(predicate: Boolean, block: Modifier.() -> Modifier) =
+    if(predicate) then(block()) else this