🔨 Refactor GeneralIconButton to use IconButtonColors instead of iconColor (#3736)

Author: guiyanakuang

app/src/commonMain/kotlin/com/crosspaste/ui/base/Buttons.kt

@@ -2,10 +2,8 @@ package com.crosspaste.ui.base
 
 import androidx.compose.material3.IconButtonColors
 import androidx.compose.material3.IconButtonDefaults
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -20,7 +18,6 @@ expect fun GeneralIconButton(
     colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
     modifier: Modifier = Modifier,
     iconModifier: Modifier = Modifier,
-    iconColor: Color = LocalContentColor.current,
     buttonSize: Dp = xxLarge,
     iconSize: Dp = large,
     shape: Shape = IconButtonDefaults.standardShape,
@@ -34,7 +31,6 @@ expect fun GeneralIconButton(
     colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
     modifier: Modifier = Modifier,
     iconModifier: Modifier = Modifier,
-    iconColor: Color = LocalContentColor.current,
     buttonSize: Dp = xxLarge,
     iconSize: Dp = large,
     shape: Shape = IconButtonDefaults.standardShape,

app/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceActionButton.kt

@@ -65,8 +65,8 @@ fun DeviceScope.DeviceActionButton(
                 desc = "refresh",
                 colors =
                     IconButtonDefaults.iconButtonColors(
-                        containerColor = MaterialTheme.colorScheme.primaryContainer,
-                        contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+                        containerColor = MaterialTheme.colorScheme.errorContainer,
+                        contentColor = MaterialTheme.colorScheme.onErrorContainer,
                     ),
                 iconModifier =
                     Modifier.graphicsLayer {

app/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceDetailHeaderView.kt

@@ -11,11 +11,8 @@ fun DeviceScope.DeviceDetailHeaderView() {
     var refreshing by remember { mutableStateOf(false) }
     DeviceRowContent(
         style = myDeviceDetailStyle,
-        tagContent = { SyncStateTag(refreshing) },
         trailingContent = {
-            DeviceActionButton(refreshing) {
-                refreshing = it
-            }
+            SyncStateTag(refreshing)
         },
     )
 }

app/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceRowContent.kt

@@ -12,13 +12,14 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.sp
 import com.crosspaste.ui.base.PlatformIcon
 import com.crosspaste.ui.theme.AppUISize
 import com.crosspaste.ui.theme.AppUISize.small2XRoundedCornerShape
@@ -30,7 +31,6 @@ import com.crosspaste.ui.theme.AppUISize.xxxxLarge
 fun PlatformScope.DeviceRowContent(
     style: DeviceStyle,
     onClick: (() -> Unit)? = null,
-    tagContent: @Composable (() -> Unit)? = null,
     trailingContent: @Composable (() -> Unit)? = null,
 ) {
     val interactionSource = remember { MutableInteractionSource() }
@@ -78,7 +78,7 @@ fun PlatformScope.DeviceRowContent(
                     painter = PlatformIcon(platform),
                     contentDescription = null,
                     modifier = Modifier.size(xLarge),
-                    tint = style.iconContentColor,
+                    tint = SyncStateColor(),
                 )
             }
 
@@ -94,20 +94,20 @@ fun PlatformScope.DeviceRowContent(
                     Text(
                         modifier = Modifier.weight(1f, fill = false),
                         text = getDeviceDisplayName(),
+                        fontSize = 15.sp,
+                        fontWeight = FontWeight.SemiBold,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis,
-                        style = MaterialTheme.typography.titleMedium,
-                        color = style.contentColor,
+                        color = style.titleColor,
                     )
-                    tagContent?.invoke()
                 }
 
                 Text(
                     text = "${platform.name} ${platform.version}",
+                    fontSize = 12.sp,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
-                    style = MaterialTheme.typography.bodyMedium,
-                    color = style.contentColor.copy(alpha = 0.7f),
+                    color = style.subtitleColor,
                 )
             }
 

app/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceStateView.kt

@@ -13,6 +13,7 @@ import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.graphics.Color
 import com.crosspaste.db.sync.SyncState
 import com.crosspaste.ui.LocalThemeExtState
 import com.crosspaste.ui.base.StateTagStyle
@@ -108,6 +109,35 @@ val refreshingStateStyle
             icon = Icons.Default.Refresh,
         )
 
+@Composable
+fun PlatformScope.SyncStateColor(): Color =
+    if (this is DeviceScope) {
+        val state = syncRuntimeInfo.connectState
+        if (state == SyncState.CONNECTED) {
+            if (syncRuntimeInfo.allowSend && syncRuntimeInfo.allowReceive) {
+                LocalThemeExtState.current.success.color
+            } else if (syncRuntimeInfo.allowSend) {
+                LocalThemeExtState.current.info.color
+            } else if (syncRuntimeInfo.allowReceive) {
+                LocalThemeExtState.current.info.color
+            } else {
+                LocalThemeExtState.current.neutral.color
+            }
+        } else if (state == SyncState.DISCONNECTED) {
+            MaterialTheme.colorScheme.error
+        } else if (state == SyncState.UNMATCHED) {
+            LocalThemeExtState.current.warning.color
+        } else if (state == SyncState.UNVERIFIED) {
+            LocalThemeExtState.current.info.color
+        } else if (state == SyncState.INCOMPATIBLE) {
+            MaterialTheme.colorScheme.error
+        } else {
+            LocalThemeExtState.current.warning.color
+        }
+    } else {
+        LocalThemeExtState.current.info.color
+    }
+
 @Composable
 fun DeviceScope.SyncStateTag(refreshing: Boolean) {
     val state = syncRuntimeInfo.connectState

app/src/commonMain/kotlin/com/crosspaste/ui/devices/NotFoundNearByDevices.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.LineBreak
 import androidx.compose.ui.text.style.TextAlign
 import com.crosspaste.i18n.GlobalCopywriter
+import com.crosspaste.ui.LocalThemeExtState
 import com.crosspaste.ui.theme.AppUISize.enormous
 import com.crosspaste.ui.theme.AppUISize.medium
 import com.crosspaste.ui.theme.AppUISize.tiny
@@ -45,7 +46,7 @@ fun NotFoundNearByDevices() {
                 imageVector = Icons.Outlined.WifiFind,
                 contentDescription = null,
                 modifier = Modifier.size(enormous),
-                tint = MaterialTheme.colorScheme.primary.copy(alpha = 0.4f),
+                tint = LocalThemeExtState.current.info.container,
             )
             Spacer(modifier = Modifier.height(medium))
             Text(

app/src/commonMain/kotlin/com/crosspaste/ui/devices/PlatformScope.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import com.crosspaste.platform.Platform
+import com.crosspaste.ui.LocalThemeExtState
 import com.crosspaste.ui.theme.AppUISize.medium
 import com.crosspaste.ui.theme.AppUISize.mediumRoundedCornerShape
 
@@ -22,7 +23,8 @@ data class DeviceStyle(
     val containerColor: Color,
     val contentColor: Color,
     val iconContainerColor: Color,
-    val iconContentColor: Color,
+    val titleColor: Color,
+    val subtitleColor: Color,
     val paddingValues: PaddingValues = PaddingValues(medium),
     val shape: Shape = mediumRoundedCornerShape,
     val isClickable: Boolean = true,
@@ -32,20 +34,22 @@ val myDeviceStyle: DeviceStyle
     @Composable @ReadOnlyComposable
     get() =
         DeviceStyle(
-            containerColor = MaterialTheme.colorScheme.primaryContainer,
-            contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
-            iconContainerColor = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.1f),
-            iconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+            contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            iconContainerColor = MaterialTheme.colorScheme.background,
+            titleColor = MaterialTheme.colorScheme.onBackground,
+            subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
         )
 
 val myDeviceDetailStyle: DeviceStyle
     @Composable @ReadOnlyComposable
     get() =
         DeviceStyle(
-            containerColor = MaterialTheme.colorScheme.primaryContainer,
-            contentColor = MaterialTheme.colorScheme.onPrimaryContainer,
-            iconContainerColor = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.1f),
-            iconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
+            containerColor = MaterialTheme.colorScheme.surfaceVariant,
+            contentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+            iconContainerColor = MaterialTheme.colorScheme.background,
+            titleColor = MaterialTheme.colorScheme.onBackground,
+            subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
             isClickable = false,
         )
 
@@ -55,8 +59,9 @@ val tokenDeviceStyle: DeviceStyle
         DeviceStyle(
             containerColor = MaterialTheme.colorScheme.surfaceContainerHigh,
             contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
-            iconContainerColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.1f),
-            iconContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+            iconContainerColor = MaterialTheme.colorScheme.background,
+            titleColor = MaterialTheme.colorScheme.onBackground,
+            subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
             paddingValues = PaddingValues(),
             shape = RectangleShape,
             isClickable = false,
@@ -67,7 +72,8 @@ val nearbyDeviceStyle: DeviceStyle
     get() =
         DeviceStyle(
             containerColor = MaterialTheme.colorScheme.surfaceContainer,
-            contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
-            iconContainerColor = MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.1f),
-            iconContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+            contentColor = LocalThemeExtState.current.info.color,
+            iconContainerColor = MaterialTheme.colorScheme.background,
+            titleColor = MaterialTheme.colorScheme.onBackground,
+            subtitleColor = MaterialTheme.colorScheme.onSurfaceVariant,
         )

app/src/desktopMain/kotlin/com/crosspaste/ui/MainWindow.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.window.WindowDraggableArea
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PushPin
 import androidx.compose.material.icons.outlined.PushPin
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -19,6 +20,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import com.crosspaste.app.DesktopAppLaunchState
 import com.crosspaste.app.DesktopAppSize
@@ -102,7 +104,11 @@ fun MainWindow(windowIcon: Painter?) {
                                 Icons.Outlined.PushPin
                             },
                         desc = "always_on_top",
-                        iconColor = MaterialTheme.colorScheme.onSurface,
+                        colors =
+                            IconButtonDefaults.iconButtonColors(
+                                containerColor = Color.Transparent,
+                                contentColor = MaterialTheme.colorScheme.onSurface,
+                            ),
                         buttonSize = xxLarge,
                         iconSize = large2X,
                         shape = tiny2XRoundedCornerShape,

app/src/desktopMain/kotlin/com/crosspaste/ui/base/Buttons.desktop.kt

@@ -13,7 +13,6 @@ import androidx.compose.material3.TooltipDefaults.rememberTooltipPositionProvide
 import androidx.compose.material3.rememberTooltipState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -28,7 +27,6 @@ actual fun GeneralIconButton(
     colors: IconButtonColors,
     modifier: Modifier,
     iconModifier: Modifier,
-    iconColor: Color,
     buttonSize: Dp,
     iconSize: Dp,
     shape: Shape,
@@ -46,7 +44,6 @@ actual fun GeneralIconButton(
             imageVector = imageVector,
             contentDescription = desc,
             modifier = iconModifier.size(iconSize),
-            tint = iconColor,
         )
     }
 }
@@ -58,7 +55,6 @@ actual fun GeneralIconButton(
     colors: IconButtonColors,
     modifier: Modifier,
     iconModifier: Modifier,
-    iconColor: Color,
     buttonSize: Dp,
     iconSize: Dp,
     shape: Shape,
@@ -76,7 +72,6 @@ actual fun GeneralIconButton(
             painter = painter,
             contentDescription = desc,
             modifier = iconModifier.size(iconSize),
-            tint = iconColor,
         )
     }
 }

app/src/desktopMain/kotlin/com/crosspaste/ui/devices/DesktopDeviceScope.kt

@@ -29,14 +29,12 @@ class DesktopDeviceScope(
                 navigationManager.navigate(DeviceDetail(syncRuntimeInfo.appInstanceId))
             },
             style = myDeviceStyle,
-            tagContent = {
-                SyncStateTag(refreshing)
-            },
             trailingContent = {
                 Row(
                     horizontalArrangement = Arrangement.spacedBy(tiny),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
+                    SyncStateTag(refreshing)
                     DeviceActionButton(refreshing) {
                         refreshing = it
                     }