diff --git a/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Color.kt b/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Color.kt index e09b012..908059f 100644 --- a/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Color.kt +++ b/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Color.kt @@ -2,78 +2,225 @@ package cc.snakechat.design import androidx.compose.ui.graphics.Color -internal val primaryLight = Color(0xFF625690) -internal val onPrimaryLight = Color(0xFFFFFFFF) -internal val primaryContainerLight = Color(0xFFE7DEFF) -internal val onPrimaryContainerLight = Color(0xFF1E1048) -internal val secondaryLight = Color(0xFF615B71) -internal val onSecondaryLight = Color(0xFFFFFFFF) -internal val secondaryContainerLight = Color(0xFFE7DFF8) -internal val onSecondaryContainerLight = Color(0xFF1D192B) -internal val tertiaryLight = Color(0xFF7D5262) -internal val onTertiaryLight = Color(0xFFFFFFFF) -internal val tertiaryContainerLight = Color(0xFFFFD9E4) -internal val onTertiaryContainerLight = Color(0xFF31111E) -internal val errorLight = Color(0xFFBA1A1A) -internal val onErrorLight = Color(0xFFFFFFFF) -internal val successLight = Color(0xFF388E3C) -internal val onSuccessLight = Color(0xFFFFFFFF) -internal val errorContainerLight = Color(0xFFFFDAD6) -internal val onErrorContainerLight = Color(0xFF410002) -internal val backgroundLight = Color(0xFFFDF7FF) -internal val onBackgroundLight = Color(0xFF1C1B20) -internal val surfaceLight = Color(0xFFFDF7FF) -internal val onSurfaceLight = Color(0xFF1C1B20) -internal val surfaceVariantLight = Color(0xFFE6E0EC) -internal val onSurfaceVariantLight = Color(0xFF48454E) -internal val outlineLight = Color(0xFF79757F) -internal val outlineVariantLight = Color(0xFFCAC4CF) -internal val scrimLight = Color(0xFF000000) -internal val inverseSurfaceLight = Color(0xFF312F35) -internal val inverseOnSurfaceLight = Color(0xFFF4EFF7) -internal val inversePrimaryLight = Color(0xFFCCBDFF) -internal val surfaceDimLight = Color(0xFFDDD8E0) -internal val surfaceBrightLight = Color(0xFFFDF7FF) -internal val surfaceContainerLowestLight = Color(0xFFFFFFFF) -internal val surfaceContainerLowLight = Color(0xFFF7F2FA) -internal val surfaceContainerLight = Color(0xFFF1ECF4) -internal val surfaceContainerHighLight = Color(0xFFECE6EE) -internal val surfaceContainerHighestLight = Color(0xFFE6E1E9) +val primaryLight = Color(0xFF5C5891) +val onPrimaryLight = Color(0xFFFFFFFF) +val primaryContainerLight = Color(0xFFE4DFFF) +val onPrimaryContainerLight = Color(0xFF18124A) +val secondaryLight = Color(0xFF5E5C71) +val onSecondaryLight = Color(0xFFFFFFFF) +val secondaryContainerLight = Color(0xFFE4DFF9) +val onSecondaryContainerLight = Color(0xFF1B192C) +val tertiaryLight = Color(0xFF8E4D2F) +val onTertiaryLight = Color(0xFFFFFFFF) +val tertiaryContainerLight = Color(0xFFFFDBCD) +val onTertiaryContainerLight = Color(0xFF360F00) +val errorLight = Color(0xFFBA1A1A) +val onErrorLight = Color(0xFFFFFFFF) +val errorContainerLight = Color(0xFFFFDAD6) +val onErrorContainerLight = Color(0xFF410002) +val backgroundLight = Color(0xFFFCF8FF) +val onBackgroundLight = Color(0xFF1C1B20) +val surfaceLight = Color(0xFFFCF8FF) +val onSurfaceLight = Color(0xFF1C1B20) +val surfaceVariantLight = Color(0xFFE5E1EC) +val onSurfaceVariantLight = Color(0xFF47464F) +val outlineLight = Color(0xFF787680) +val outlineVariantLight = Color(0xFFC8C5D0) +val scrimLight = Color(0xFF000000) +val inverseSurfaceLight = Color(0xFF313036) +val inverseOnSurfaceLight = Color(0xFFF3EFF7) +val inversePrimaryLight = Color(0xFFC5C0FF) +val surfaceDimLight = Color(0xFFDCD8E0) +val surfaceBrightLight = Color(0xFFFCF8FF) +val surfaceContainerLowestLight = Color(0xFFFFFFFF) +val surfaceContainerLowLight = Color(0xFFF6F2FA) +val surfaceContainerLight = Color(0xFFF1ECF4) +val surfaceContainerHighLight = Color(0xFFEBE7EF) +val surfaceContainerHighestLight = Color(0xFFE5E1E9) + +val primaryLightMediumContrast = Color(0xFF403C73) +val onPrimaryLightMediumContrast = Color(0xFFFFFFFF) +val primaryContainerLightMediumContrast = Color(0xFF736EA9) +val onPrimaryContainerLightMediumContrast = Color(0xFFFFFFFF) +val secondaryLightMediumContrast = Color(0xFF434155) +val onSecondaryLightMediumContrast = Color(0xFFFFFFFF) +val secondaryContainerLightMediumContrast = Color(0xFF757288) +val onSecondaryContainerLightMediumContrast = Color(0xFFFFFFFF) +val tertiaryLightMediumContrast = Color(0xFF6C3216) +val onTertiaryLightMediumContrast = Color(0xFFFFFFFF) +val tertiaryContainerLightMediumContrast = Color(0xFFA86242) +val onTertiaryContainerLightMediumContrast = Color(0xFFFFFFFF) +val errorLightMediumContrast = Color(0xFF8C0009) +val onErrorLightMediumContrast = Color(0xFFFFFFFF) +val errorContainerLightMediumContrast = Color(0xFFDA342E) +val onErrorContainerLightMediumContrast = Color(0xFFFFFFFF) +val backgroundLightMediumContrast = Color(0xFFFCF8FF) +val onBackgroundLightMediumContrast = Color(0xFF1C1B20) +val surfaceLightMediumContrast = Color(0xFFFCF8FF) +val onSurfaceLightMediumContrast = Color(0xFF1C1B20) +val surfaceVariantLightMediumContrast = Color(0xFFE5E1EC) +val onSurfaceVariantLightMediumContrast = Color(0xFF43424B) +val outlineLightMediumContrast = Color(0xFF605E67) +val outlineVariantLightMediumContrast = Color(0xFF7C7983) +val scrimLightMediumContrast = Color(0xFF000000) +val inverseSurfaceLightMediumContrast = Color(0xFF313036) +val inverseOnSurfaceLightMediumContrast = Color(0xFFF3EFF7) +val inversePrimaryLightMediumContrast = Color(0xFFC5C0FF) +val surfaceDimLightMediumContrast = Color(0xFFDCD8E0) +val surfaceBrightLightMediumContrast = Color(0xFFFCF8FF) +val surfaceContainerLowestLightMediumContrast = Color(0xFFFFFFFF) +val surfaceContainerLowLightMediumContrast = Color(0xFFF6F2FA) +val surfaceContainerLightMediumContrast = Color(0xFFF1ECF4) +val surfaceContainerHighLightMediumContrast = Color(0xFFEBE7EF) +val surfaceContainerHighestLightMediumContrast = Color(0xFFE5E1E9) + +val primaryLightHighContrast = Color(0xFF1F1A50) +val onPrimaryLightHighContrast = Color(0xFFFFFFFF) +val primaryContainerLightHighContrast = Color(0xFF403C73) +val onPrimaryContainerLightHighContrast = Color(0xFFFFFFFF) +val secondaryLightHighContrast = Color(0xFF222033) +val onSecondaryLightHighContrast = Color(0xFFFFFFFF) +val secondaryContainerLightHighContrast = Color(0xFF434155) +val onSecondaryContainerLightHighContrast = Color(0xFFFFFFFF) +val tertiaryLightHighContrast = Color(0xFF411400) +val onTertiaryLightHighContrast = Color(0xFFFFFFFF) +val tertiaryContainerLightHighContrast = Color(0xFF6C3216) +val onTertiaryContainerLightHighContrast = Color(0xFFFFFFFF) +val errorLightHighContrast = Color(0xFF4E0002) +val onErrorLightHighContrast = Color(0xFFFFFFFF) +val errorContainerLightHighContrast = Color(0xFF8C0009) +val onErrorContainerLightHighContrast = Color(0xFFFFFFFF) +val backgroundLightHighContrast = Color(0xFFFCF8FF) +val onBackgroundLightHighContrast = Color(0xFF1C1B20) +val surfaceLightHighContrast = Color(0xFFFCF8FF) +val onSurfaceLightHighContrast = Color(0xFF000000) +val surfaceVariantLightHighContrast = Color(0xFFE5E1EC) +val onSurfaceVariantLightHighContrast = Color(0xFF24232B) +val outlineLightHighContrast = Color(0xFF43424B) +val outlineVariantLightHighContrast = Color(0xFF43424B) +val scrimLightHighContrast = Color(0xFF000000) +val inverseSurfaceLightHighContrast = Color(0xFF313036) +val inverseOnSurfaceLightHighContrast = Color(0xFFFFFFFF) +val inversePrimaryLightHighContrast = Color(0xFFEEE9FF) +val surfaceDimLightHighContrast = Color(0xFFDCD8E0) +val surfaceBrightLightHighContrast = Color(0xFFFCF8FF) +val surfaceContainerLowestLightHighContrast = Color(0xFFFFFFFF) +val surfaceContainerLowLightHighContrast = Color(0xFFF6F2FA) +val surfaceContainerLightHighContrast = Color(0xFFF1ECF4) +val surfaceContainerHighLightHighContrast = Color(0xFFEBE7EF) +val surfaceContainerHighestLightHighContrast = Color(0xFFE5E1E9) + +val primaryDark = Color(0xFFC5C0FF) +val onPrimaryDark = Color(0xFF2E2960) +val primaryContainerDark = Color(0xFF444078) +val onPrimaryContainerDark = Color(0xFFE4DFFF) +val secondaryDark = Color(0xFFC8C4DC) +val onSecondaryDark = Color(0xFF302E41) +val secondaryContainerDark = Color(0xFF474459) +val onSecondaryContainerDark = Color(0xFFE4DFF9) +val tertiaryDark = Color(0xFFFFB596) +val onTertiaryDark = Color(0xFF542106) +val tertiaryContainerDark = Color(0xFF71361A) +val onTertiaryContainerDark = Color(0xFFFFDBCD) +val errorDark = Color(0xFFFFB4AB) +val onErrorDark = Color(0xFF690005) +val errorContainerDark = Color(0xFF93000A) +val onErrorContainerDark = Color(0xFFFFDAD6) +val backgroundDark = Color(0xFF131318) +val onBackgroundDark = Color(0xFFE5E1E9) +val surfaceDark = Color(0xFF131318) +val onSurfaceDark = Color(0xFFE5E1E9) +val surfaceVariantDark = Color(0xFF47464F) +val onSurfaceVariantDark = Color(0xFFC8C5D0) +val outlineDark = Color(0xFF928F99) +val outlineVariantDark = Color(0xFF47464F) +val scrimDark = Color(0xFF000000) +val inverseSurfaceDark = Color(0xFFE5E1E9) +val inverseOnSurfaceDark = Color(0xFF313036) +val inversePrimaryDark = Color(0xFF5C5891) +val surfaceDimDark = Color(0xFF131318) +val surfaceBrightDark = Color(0xFF3A383F) +val surfaceContainerLowestDark = Color(0xFF0E0E13) +val surfaceContainerLowDark = Color(0xFF1C1B20) +val surfaceContainerDark = Color(0xFF201F25) +val surfaceContainerHighDark = Color(0xFF2A292F) +val surfaceContainerHighestDark = Color(0xFF35343A) + +val primaryDarkMediumContrast = Color(0xFFCAC4FF) +val onPrimaryDarkMediumContrast = Color(0xFF130C44) +val primaryContainerDarkMediumContrast = Color(0xFF8F8AC7) +val onPrimaryContainerDarkMediumContrast = Color(0xFF000000) +val secondaryDarkMediumContrast = Color(0xFFCCC8E1) +val onSecondaryDarkMediumContrast = Color(0xFF161426) +val secondaryContainerDarkMediumContrast = Color(0xFF918EA5) +val onSecondaryContainerDarkMediumContrast = Color(0xFF000000) +val tertiaryDarkMediumContrast = Color(0xFFFFBB9E) +val onTertiaryDarkMediumContrast = Color(0xFF2D0C00) +val tertiaryContainerDarkMediumContrast = Color(0xFFCA7E5C) +val onTertiaryContainerDarkMediumContrast = Color(0xFF000000) +val errorDarkMediumContrast = Color(0xFFFFBAB1) +val onErrorDarkMediumContrast = Color(0xFF370001) +val errorContainerDarkMediumContrast = Color(0xFFFF5449) +val onErrorContainerDarkMediumContrast = Color(0xFF000000) +val backgroundDarkMediumContrast = Color(0xFF131318) +val onBackgroundDarkMediumContrast = Color(0xFFE5E1E9) +val surfaceDarkMediumContrast = Color(0xFF131318) +val onSurfaceDarkMediumContrast = Color(0xFFFEF9FF) +val surfaceVariantDarkMediumContrast = Color(0xFF47464F) +val onSurfaceVariantDarkMediumContrast = Color(0xFFCDC9D4) +val outlineDarkMediumContrast = Color(0xFFA4A1AC) +val outlineVariantDarkMediumContrast = Color(0xFF84828C) +val scrimDarkMediumContrast = Color(0xFF000000) +val inverseSurfaceDarkMediumContrast = Color(0xFFE5E1E9) +val inverseOnSurfaceDarkMediumContrast = Color(0xFF2A292F) +val inversePrimaryDarkMediumContrast = Color(0xFF464179) +val surfaceDimDarkMediumContrast = Color(0xFF131318) +val surfaceBrightDarkMediumContrast = Color(0xFF3A383F) +val surfaceContainerLowestDarkMediumContrast = Color(0xFF0E0E13) +val surfaceContainerLowDarkMediumContrast = Color(0xFF1C1B20) +val surfaceContainerDarkMediumContrast = Color(0xFF201F25) +val surfaceContainerHighDarkMediumContrast = Color(0xFF2A292F) +val surfaceContainerHighestDarkMediumContrast = Color(0xFF35343A) + +val primaryDarkHighContrast = Color(0xFFFEF9FF) +val onPrimaryDarkHighContrast = Color(0xFF000000) +val primaryContainerDarkHighContrast = Color(0xFFCAC4FF) +val onPrimaryContainerDarkHighContrast = Color(0xFF000000) +val secondaryDarkHighContrast = Color(0xFFFEF9FF) +val onSecondaryDarkHighContrast = Color(0xFF000000) +val secondaryContainerDarkHighContrast = Color(0xFFCCC8E1) +val onSecondaryContainerDarkHighContrast = Color(0xFF000000) +val tertiaryDarkHighContrast = Color(0xFFFFF9F8) +val onTertiaryDarkHighContrast = Color(0xFF000000) +val tertiaryContainerDarkHighContrast = Color(0xFFFFBB9E) +val onTertiaryContainerDarkHighContrast = Color(0xFF000000) +val errorDarkHighContrast = Color(0xFFFFF9F9) +val onErrorDarkHighContrast = Color(0xFF000000) +val errorContainerDarkHighContrast = Color(0xFFFFBAB1) +val onErrorContainerDarkHighContrast = Color(0xFF000000) +val backgroundDarkHighContrast = Color(0xFF131318) +val onBackgroundDarkHighContrast = Color(0xFFE5E1E9) +val surfaceDarkHighContrast = Color(0xFF131318) +val onSurfaceDarkHighContrast = Color(0xFFFFFFFF) +val surfaceVariantDarkHighContrast = Color(0xFF47464F) +val onSurfaceVariantDarkHighContrast = Color(0xFFFEF9FF) +val outlineDarkHighContrast = Color(0xFFCDC9D4) +val outlineVariantDarkHighContrast = Color(0xFFCDC9D4) +val scrimDarkHighContrast = Color(0xFF000000) +val inverseSurfaceDarkHighContrast = Color(0xFFE5E1E9) +val inverseOnSurfaceDarkHighContrast = Color(0xFF000000) +val inversePrimaryDarkHighContrast = Color(0xFF272259) +val surfaceDimDarkHighContrast = Color(0xFF131318) +val surfaceBrightDarkHighContrast = Color(0xFF3A383F) +val surfaceContainerLowestDarkHighContrast = Color(0xFF0E0E13) +val surfaceContainerLowDarkHighContrast = Color(0xFF1C1B20) +val surfaceContainerDarkHighContrast = Color(0xFF201F25) +val surfaceContainerHighDarkHighContrast = Color(0xFF2A292F) +val surfaceContainerHighestDarkHighContrast = Color(0xFF35343A) + + + + + + -internal val primaryDark = Color(0xFFCCBDFF) -internal val onPrimaryDark = Color(0xFF34275E) -internal val primaryContainerDark = Color(0xFF4A3E76) -internal val onPrimaryContainerDark = Color(0xFFE7DEFF) -internal val secondaryDark = Color(0xFFCAC3DC) -internal val onSecondaryDark = Color(0xFF322E41) -internal val secondaryContainerDark = Color(0xFF494458) -internal val onSecondaryContainerDark = Color(0xFFE7DFF8) -internal val tertiaryDark = Color(0xFFEEB8CA) -internal val onTertiaryDark = Color(0xFF492534) -internal val tertiaryContainerDark = Color(0xFF623B4A) -internal val onTertiaryContainerDark = Color(0xFFFFD9E4) -internal val errorDark = Color(0xFFFFB4AB) -internal val onErrorDark = Color(0xFF690005) -internal val successDark = Color(0xFFAEFCB2) -internal val onSuccessDark = Color(0xFF005E04) -internal val errorContainerDark = Color(0xFF93000A) -internal val onErrorContainerDark = Color(0xFFFFDAD6) -internal val backgroundDark = Color(0xFF141318) -internal val onBackgroundDark = Color(0xFFE6E1E9) -internal val surfaceDark = Color(0xFF141318) -internal val onSurfaceDark = Color(0xFFE6E1E9) -internal val surfaceVariantDark = Color(0xFF48454E) -internal val onSurfaceVariantDark = Color(0xFFCAC4CF) -internal val outlineDark = Color(0xFF938F99) -internal val outlineVariantDark = Color(0xFF48454E) -internal val scrimDark = Color(0xFF000000) -internal val inverseSurfaceDark = Color(0xFFE6E1E9) -internal val inverseOnSurfaceDark = Color(0xFF312F35) -internal val inversePrimaryDark = Color(0xFF625690) -internal val surfaceDimDark = Color(0xFF141318) -internal val surfaceBrightDark = Color(0xFF3A383E) -internal val surfaceContainerLowestDark = Color(0xFF0F0D13) -internal val surfaceContainerLowDark = Color(0xFF1C1B20) -internal val surfaceContainerDark = Color(0xFF201F24) -internal val surfaceContainerHighDark = Color(0xFF2B292F) -internal val surfaceContainerHighestDark = Color(0xFF36343A) diff --git a/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Theme.kt b/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Theme.kt index 973fe1a..e309374 100644 --- a/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Theme.kt +++ b/frontend/compose-app/ui/design/src/main/kotlin/cc/snakechat/design/Theme.kt @@ -2,13 +2,13 @@ package cc.snakechat.design import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material3.ColorScheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.darkColorScheme import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable +import androidx.compose.runtime.Immutable import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext @@ -88,20 +88,176 @@ private val darkScheme = darkColorScheme( surfaceContainerHighest = surfaceContainerHighestDark, ) -val ColorScheme.success: Color - @Composable - get() = if (isSystemInDarkTheme()) successDark else successLight +private val mediumContrastLightColorScheme = lightColorScheme( + primary = primaryLightMediumContrast, + onPrimary = onPrimaryLightMediumContrast, + primaryContainer = primaryContainerLightMediumContrast, + onPrimaryContainer = onPrimaryContainerLightMediumContrast, + secondary = secondaryLightMediumContrast, + onSecondary = onSecondaryLightMediumContrast, + secondaryContainer = secondaryContainerLightMediumContrast, + onSecondaryContainer = onSecondaryContainerLightMediumContrast, + tertiary = tertiaryLightMediumContrast, + onTertiary = onTertiaryLightMediumContrast, + tertiaryContainer = tertiaryContainerLightMediumContrast, + onTertiaryContainer = onTertiaryContainerLightMediumContrast, + error = errorLightMediumContrast, + onError = onErrorLightMediumContrast, + errorContainer = errorContainerLightMediumContrast, + onErrorContainer = onErrorContainerLightMediumContrast, + background = backgroundLightMediumContrast, + onBackground = onBackgroundLightMediumContrast, + surface = surfaceLightMediumContrast, + onSurface = onSurfaceLightMediumContrast, + surfaceVariant = surfaceVariantLightMediumContrast, + onSurfaceVariant = onSurfaceVariantLightMediumContrast, + outline = outlineLightMediumContrast, + outlineVariant = outlineVariantLightMediumContrast, + scrim = scrimLightMediumContrast, + inverseSurface = inverseSurfaceLightMediumContrast, + inverseOnSurface = inverseOnSurfaceLightMediumContrast, + inversePrimary = inversePrimaryLightMediumContrast, + surfaceDim = surfaceDimLightMediumContrast, + surfaceBright = surfaceBrightLightMediumContrast, + surfaceContainerLowest = surfaceContainerLowestLightMediumContrast, + surfaceContainerLow = surfaceContainerLowLightMediumContrast, + surfaceContainer = surfaceContainerLightMediumContrast, + surfaceContainerHigh = surfaceContainerHighLightMediumContrast, + surfaceContainerHighest = surfaceContainerHighestLightMediumContrast, +) + +private val highContrastLightColorScheme = lightColorScheme( + primary = primaryLightHighContrast, + onPrimary = onPrimaryLightHighContrast, + primaryContainer = primaryContainerLightHighContrast, + onPrimaryContainer = onPrimaryContainerLightHighContrast, + secondary = secondaryLightHighContrast, + onSecondary = onSecondaryLightHighContrast, + secondaryContainer = secondaryContainerLightHighContrast, + onSecondaryContainer = onSecondaryContainerLightHighContrast, + tertiary = tertiaryLightHighContrast, + onTertiary = onTertiaryLightHighContrast, + tertiaryContainer = tertiaryContainerLightHighContrast, + onTertiaryContainer = onTertiaryContainerLightHighContrast, + error = errorLightHighContrast, + onError = onErrorLightHighContrast, + errorContainer = errorContainerLightHighContrast, + onErrorContainer = onErrorContainerLightHighContrast, + background = backgroundLightHighContrast, + onBackground = onBackgroundLightHighContrast, + surface = surfaceLightHighContrast, + onSurface = onSurfaceLightHighContrast, + surfaceVariant = surfaceVariantLightHighContrast, + onSurfaceVariant = onSurfaceVariantLightHighContrast, + outline = outlineLightHighContrast, + outlineVariant = outlineVariantLightHighContrast, + scrim = scrimLightHighContrast, + inverseSurface = inverseSurfaceLightHighContrast, + inverseOnSurface = inverseOnSurfaceLightHighContrast, + inversePrimary = inversePrimaryLightHighContrast, + surfaceDim = surfaceDimLightHighContrast, + surfaceBright = surfaceBrightLightHighContrast, + surfaceContainerLowest = surfaceContainerLowestLightHighContrast, + surfaceContainerLow = surfaceContainerLowLightHighContrast, + surfaceContainer = surfaceContainerLightHighContrast, + surfaceContainerHigh = surfaceContainerHighLightHighContrast, + surfaceContainerHighest = surfaceContainerHighestLightHighContrast, +) -val ColorScheme.onSuccess: Color - @Composable - get() = if (isSystemInDarkTheme()) onSuccessDark else onSuccessLight +private val mediumContrastDarkColorScheme = darkColorScheme( + primary = primaryDarkMediumContrast, + onPrimary = onPrimaryDarkMediumContrast, + primaryContainer = primaryContainerDarkMediumContrast, + onPrimaryContainer = onPrimaryContainerDarkMediumContrast, + secondary = secondaryDarkMediumContrast, + onSecondary = onSecondaryDarkMediumContrast, + secondaryContainer = secondaryContainerDarkMediumContrast, + onSecondaryContainer = onSecondaryContainerDarkMediumContrast, + tertiary = tertiaryDarkMediumContrast, + onTertiary = onTertiaryDarkMediumContrast, + tertiaryContainer = tertiaryContainerDarkMediumContrast, + onTertiaryContainer = onTertiaryContainerDarkMediumContrast, + error = errorDarkMediumContrast, + onError = onErrorDarkMediumContrast, + errorContainer = errorContainerDarkMediumContrast, + onErrorContainer = onErrorContainerDarkMediumContrast, + background = backgroundDarkMediumContrast, + onBackground = onBackgroundDarkMediumContrast, + surface = surfaceDarkMediumContrast, + onSurface = onSurfaceDarkMediumContrast, + surfaceVariant = surfaceVariantDarkMediumContrast, + onSurfaceVariant = onSurfaceVariantDarkMediumContrast, + outline = outlineDarkMediumContrast, + outlineVariant = outlineVariantDarkMediumContrast, + scrim = scrimDarkMediumContrast, + inverseSurface = inverseSurfaceDarkMediumContrast, + inverseOnSurface = inverseOnSurfaceDarkMediumContrast, + inversePrimary = inversePrimaryDarkMediumContrast, + surfaceDim = surfaceDimDarkMediumContrast, + surfaceBright = surfaceBrightDarkMediumContrast, + surfaceContainerLowest = surfaceContainerLowestDarkMediumContrast, + surfaceContainerLow = surfaceContainerLowDarkMediumContrast, + surfaceContainer = surfaceContainerDarkMediumContrast, + surfaceContainerHigh = surfaceContainerHighDarkMediumContrast, + surfaceContainerHighest = surfaceContainerHighestDarkMediumContrast, +) + +private val highContrastDarkColorScheme = darkColorScheme( + primary = primaryDarkHighContrast, + onPrimary = onPrimaryDarkHighContrast, + primaryContainer = primaryContainerDarkHighContrast, + onPrimaryContainer = onPrimaryContainerDarkHighContrast, + secondary = secondaryDarkHighContrast, + onSecondary = onSecondaryDarkHighContrast, + secondaryContainer = secondaryContainerDarkHighContrast, + onSecondaryContainer = onSecondaryContainerDarkHighContrast, + tertiary = tertiaryDarkHighContrast, + onTertiary = onTertiaryDarkHighContrast, + tertiaryContainer = tertiaryContainerDarkHighContrast, + onTertiaryContainer = onTertiaryContainerDarkHighContrast, + error = errorDarkHighContrast, + onError = onErrorDarkHighContrast, + errorContainer = errorContainerDarkHighContrast, + onErrorContainer = onErrorContainerDarkHighContrast, + background = backgroundDarkHighContrast, + onBackground = onBackgroundDarkHighContrast, + surface = surfaceDarkHighContrast, + onSurface = onSurfaceDarkHighContrast, + surfaceVariant = surfaceVariantDarkHighContrast, + onSurfaceVariant = onSurfaceVariantDarkHighContrast, + outline = outlineDarkHighContrast, + outlineVariant = outlineVariantDarkHighContrast, + scrim = scrimDarkHighContrast, + inverseSurface = inverseSurfaceDarkHighContrast, + inverseOnSurface = inverseOnSurfaceDarkHighContrast, + inversePrimary = inversePrimaryDarkHighContrast, + surfaceDim = surfaceDimDarkHighContrast, + surfaceBright = surfaceBrightDarkHighContrast, + surfaceContainerLowest = surfaceContainerLowestDarkHighContrast, + surfaceContainerLow = surfaceContainerLowDarkHighContrast, + surfaceContainer = surfaceContainerDarkHighContrast, + surfaceContainerHigh = surfaceContainerHighDarkHighContrast, + surfaceContainerHighest = surfaceContainerHighestDarkHighContrast, +) + +@Immutable +data class ColorFamily( + val color: Color, + val onColor: Color, + val colorContainer: Color, + val onColorContainer: Color +) + +val unspecified_scheme = ColorFamily( + Color.Unspecified, Color.Unspecified, Color.Unspecified, Color.Unspecified +) @Composable fun SnakeChatTheme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ - dynamicColor: Boolean = false, - content: @Composable () -> Unit, + dynamicColor: Boolean = true, + content: @Composable() () -> Unit ) { val colorScheme = when { dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { @@ -116,6 +272,7 @@ fun SnakeChatTheme( MaterialTheme( colorScheme = colorScheme, typography = AppTypography, - content = content, + content = content ) } + diff --git a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/HomeContent.kt b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/HomeContent.kt index 9aeff29..d94379e 100644 --- a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/HomeContent.kt +++ b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/HomeContent.kt @@ -16,6 +16,7 @@ import androidx.compose.material.icons.filled.SmartDisplay import androidx.compose.material3.BottomAppBar import androidx.compose.material3.Icon import androidx.compose.material3.IconButton +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable @@ -25,7 +26,6 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.paging.PagingData import androidx.paging.compose.collectAsLazyPagingItems import cc.snakechat.design.SnakeChatTheme -import cc.snakechat.design.SnakeElevation import cc.snakechat.design.SnakeText import cc.snakechat.resources.strings import cc.snakechat.ui.home.feed.FeedScreen @@ -77,6 +77,7 @@ fun HomeContent( ) } }, + containerColor = MaterialTheme.colorScheme.surfaceContainerLow, ) }, trailingActions = { @@ -93,12 +94,11 @@ fun HomeContent( ) } }, + containerColor = MaterialTheme.colorScheme.surfaceContainer, ) }, bottomBar = { - BottomAppBar( - tonalElevation = SnakeElevation.Level2, - ) { + BottomAppBar(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh) { NavigationBarItem( label = { SnakeText(text = strings.home) diff --git a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/TopBar.kt b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/TopBar.kt index dade224..2f4f88b 100644 --- a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/TopBar.kt +++ b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/TopBar.kt @@ -9,24 +9,26 @@ import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.LocalContentColor +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.TopAppBarDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp -import cc.snakechat.design.SnakeElevation @OptIn(ExperimentalMaterial3Api::class) @Composable fun SnakeTopBar( modifier: Modifier = Modifier, + containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, leadingIcon: @Composable (() -> Unit)? = null, centerContent: @Composable (() -> Unit)? = null, trailingActions: @Composable (RowScope.() -> Unit)? = null, ) { - Surface(tonalElevation = SnakeElevation.Level1, modifier = modifier) { + Surface(color = containerColor, modifier = modifier) { if (centerContent != null) { Row( modifier = modifier @@ -60,10 +62,11 @@ internal fun SnakeSearch( leadingIcon: @Composable (() -> Unit)? = null, placeholder: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, + containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, modifier: Modifier = Modifier, ) { Surface( - tonalElevation = SnakeElevation.Level2, + color = containerColor, shape = RoundedCornerShape(24.dp), modifier = modifier.height(48.dp), ) { diff --git a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/FeedScreen.kt b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/FeedScreen.kt index 5a8504a..f987138 100644 --- a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/FeedScreen.kt +++ b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/FeedScreen.kt @@ -2,6 +2,8 @@ package cc.snakechat.ui.home.feed import androidx.activity.compose.ReportDrawnWhen import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -22,20 +24,25 @@ fun FeedScreen( val trendingFeed = state.feed var isFirstPostLoaded by remember { mutableStateOf(false) } ReportDrawnWhen { isFirstPostLoaded } - LazyColumn(modifier = modifier) { - items( - count = trendingFeed.itemCount, - key = trendingFeed.itemKey { it.id }, - ) { index -> - val post = trendingFeed[index] - if (post != null) { - PostCard( - post = post, - onLoadComplete = { isFirstPostLoaded = true }, - onLikeClick = { state.eventSink(OnLikeClicked(it)) }, - onCommentClick = { state.eventSink(OnCommentClicked(it)) }, - onProfileClick = { state.eventSink(OnProfileClicked(it)) }, - ) + Surface( + modifier = modifier, + color = MaterialTheme.colorScheme.surfaceContainerLow, + ) { + LazyColumn { + items( + count = trendingFeed.itemCount, + key = trendingFeed.itemKey { it.id }, + ) { index -> + val post = trendingFeed[index] + if (post != null) { + PostCard( + post = post, + onLoadComplete = { isFirstPostLoaded = true }, + onLikeClick = { state.eventSink(OnLikeClicked(it)) }, + onCommentClick = { state.eventSink(OnCommentClicked(it)) }, + onProfileClick = { state.eventSink(OnProfileClicked(it)) }, + ) + } } } } diff --git a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostCard.kt b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostCard.kt index 1141837..e8850ec 100644 --- a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostCard.kt +++ b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostCard.kt @@ -23,6 +23,9 @@ import androidx.compose.material3.minimumInteractiveComponentSize import androidx.compose.runtime.Composable 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.Shape import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource @@ -46,94 +49,105 @@ import java.time.LocalDateTime fun PostCard( post: Post, modifier: Modifier = Modifier, + containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, onLoadComplete: (() -> Unit)? = null, onLikeClick: (Post) -> Unit = {}, onCommentClick: (Post) -> Unit = {}, onProfileClick: (Post) -> Unit = {}, ) { - Column(modifier = modifier) { - Row( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 4.dp, vertical = 12.dp), - ) { - SnakeAsyncImage( - url = post.user.profileUrl, - loadingView = { - ProfileLoading() - }, - fallbackView = { - ProfileLoading() - }, - contentDescription = "Profile Picture", - modifier = Modifier.size(24.dp).clickable { onProfileClick(post) }, - ) - SnakeText( - text = post.user.name, - fontWeight = FontWeight.Bold, - modifier = Modifier.padding(start = 4.dp).clickable { onProfileClick(post) }, - ) - } - - val contentModifier = Modifier - .fillMaxWidth() - .heightIn(max = 300.dp) - SnakeAsyncImage( - url = post.mediaUrl, - contentDescription = "Post Content", - contentScale = ContentScale.Crop, - loadingView = { PostContentPlaceholder(contentModifier) }, - fallbackView = { PostContentPlaceholder(contentModifier) }, - onLoadComplete = { onLoadComplete?.invoke() }, - modifier = contentModifier, - ) - Box(modifier = Modifier.fillMaxWidth()) { + Surface( + color = containerColor, + modifier = Modifier.padding(3.dp), + shape = MaterialTheme.shapes.medium, + ) { + Column(modifier = modifier.padding(horizontal = 8.dp, vertical = 4.dp)) { Row( - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(12.dp), - modifier = Modifier, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp, vertical = 12.dp), ) { - Interaction( - count = countString(post.likes), - icon = Icons.Outlined.FavoriteBorder, - onClick = { onLikeClick(post) }, + SnakeAsyncImage( + url = post.user.profileUrl, + loadingView = { + ProfileLoading() + }, + fallbackView = { + ProfileLoading() + }, + contentDescription = "Profile Picture", + modifier = Modifier + .size(24.dp) + .clickable { onProfileClick(post) }, ) - Interaction( - count = countString(post.comments), - icon = Icons.AutoMirrored.Default.Message, - onClick = { onCommentClick(post) }, - ) - Interaction( - icon = Icons.Outlined.Download, + SnakeText( + text = post.user.name, + fontWeight = FontWeight.Light, + modifier = Modifier + .padding(start = 4.dp) + .clickable { onProfileClick(post) }, ) } - Interaction( - icon = Icons.Default.Whatsapp, - modifier = Modifier.align(Alignment.CenterEnd), + + val contentModifier = Modifier + .fillMaxWidth() + .heightIn(max = 300.dp) + SnakeAsyncImage( + url = post.mediaUrl, + contentDescription = "Post Content", + contentScale = ContentScale.Crop, + loadingView = { PostContentPlaceholder(contentModifier) }, + fallbackView = { PostContentPlaceholder(contentModifier) }, + onLoadComplete = { onLoadComplete?.invoke() }, + modifier = contentModifier.clip(MaterialTheme.shapes.small), ) - } - Column(modifier = Modifier.padding(4.dp)) { - post.caption?.let { - val text = buildAnnotatedString { - withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { - append(post.user.name) - } - append(" ") - append(it) + Box(modifier = Modifier.fillMaxWidth()) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(12.dp), + modifier = Modifier, + ) { + Interaction( + count = countString(post.likes), + icon = Icons.Outlined.FavoriteBorder, + onClick = { onLikeClick(post) }, + ) + Interaction( + count = countString(post.comments), + icon = Icons.AutoMirrored.Default.Message, + onClick = { onCommentClick(post) }, + ) + Interaction( + icon = Icons.Outlined.Download, + ) } - SnakeText( - text = text, - style = MaterialTheme.typography.bodyLarge, - color = MaterialTheme.colorScheme.onSurfaceVariant, + Interaction( + icon = Icons.Default.Whatsapp, + modifier = Modifier.align(Alignment.CenterEnd), ) } - post.createdAt?.let { - SnakeText( - text = formatDate(it), - style = MaterialTheme.typography.bodySmall, - color = MaterialTheme.colorScheme.onTertiaryContainer, - modifier = Modifier.padding(top = 4.dp), - ) + Column(modifier = Modifier.padding(4.dp)) { + post.caption?.let { + val text = buildAnnotatedString { + withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { + append(post.user.name) + } + append(" ") + withStyle(SpanStyle(fontWeight = FontWeight.Normal)) { append(it) } + } + SnakeText( + text = text, + style = MaterialTheme.typography.titleMedium, + color = MaterialTheme.colorScheme.onSurfaceVariant, + ) + } + post.createdAt?.let { + SnakeText( + text = formatDate(it), + style = MaterialTheme.typography.bodySmall, + color = MaterialTheme.colorScheme.onTertiaryContainer, + modifier = Modifier.padding(top = 4.dp), + ) + } } } } @@ -150,10 +164,15 @@ fun ProfileLoading(modifier: Modifier = Modifier) { } @Composable -fun PostContentPlaceholder(modifier: Modifier = Modifier) { +fun PostContentPlaceholder( + modifier: Modifier = Modifier, + shape: Shape = MaterialTheme.shapes.small, + color: Color = MaterialTheme.colorScheme.surfaceDim, +) { Box( modifier = modifier - .background(MaterialTheme.colorScheme.surfaceDim) + .padding(4.dp) + .background(color, shape) .height(300.dp), ) } @@ -178,8 +197,8 @@ private fun Interaction( if (count != null) { SnakeText( text = count, - color = MaterialTheme.colorScheme.secondary, - style = MaterialTheme.typography.labelMedium, + style = MaterialTheme.typography.bodyMedium, + fontWeight = FontWeight.SemiBold, modifier = Modifier.padding(start = 4.dp), ) } diff --git a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostSkeleton.kt b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostSkeleton.kt index dd2407d..4a8e9da 100644 --- a/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostSkeleton.kt +++ b/frontend/compose-app/ui/home/src/main/kotlin/cc/snakechat/ui/home/feed/PostSkeleton.kt @@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -20,6 +19,8 @@ import androidx.compose.runtime.Composable 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.Shape import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp @@ -27,16 +28,36 @@ import androidx.compose.ui.unit.dp import cc.snakechat.design.SnakeChatTheme @Composable -fun FeedSkeleton(modifier: Modifier) { - Column(modifier = modifier) { - PostSkeleton() - Spacer(modifier = Modifier.height(20.dp)) - PostSkeleton() +fun FeedSkeleton( + modifier: Modifier = Modifier, + backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLow, + postCardShape: Shape = MaterialTheme.shapes.medium, + mediaShape: Shape = MaterialTheme.shapes.small, + postCardPadding: Dp = 3.dp, +) { + Surface( + modifier = modifier, + color = backgroundColor, + ) { + Column { + PostSkeleton( + shape = postCardShape, + padding = postCardPadding, + mediaShape = mediaShape, + ) + PostSkeleton() + } } } @Composable -fun PostSkeleton(modifier: Modifier = Modifier) { +fun PostSkeleton( + modifier: Modifier = Modifier, + containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, + shape: Shape = MaterialTheme.shapes.medium, + mediaShape: Shape = MaterialTheme.shapes.small, + padding: Dp = 3.dp, +) { val config = LocalConfiguration.current val screenWidth = config.screenWidthDp.dp val tinyTextBlockWidth = remember(config) { screenWidth / 9 } @@ -64,38 +85,44 @@ fun PostSkeleton(modifier: Modifier = Modifier) { ) } - Column(modifier = modifier) { - Row( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 4.dp, vertical = 12.dp), - verticalAlignment = Alignment.CenterVertically, - ) { - SmallCircle() - Spacer(modifier = Modifier.width(4.dp)) - TextBlock() - } + Surface( + color = containerColor, + modifier = Modifier.padding(padding), + shape = shape, + ) { + Column(modifier = modifier.padding(horizontal = 8.dp, vertical = 4.dp)) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 4.dp, vertical = 12.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + SmallCircle() + Spacer(modifier = Modifier.width(4.dp)) + TextBlock() + } - val contentModifier = Modifier - .fillMaxWidth() - .heightIn(max = 300.dp) - PostContentPlaceholder(contentModifier) - Row( - verticalAlignment = Alignment.CenterVertically, - modifier = Modifier - .padding(vertical = 8.dp) - .padding(start = 4.dp), - horizontalArrangement = Arrangement.spacedBy(6.dp), - ) { - SmallCircle() - TextBlock(width = tinyTextBlockWidth) - SmallCircle() - TextBlock(width = tinyTextBlockWidth) - } - Column(modifier = Modifier.padding(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) { - TextBlock(width = largeTextBlockWidth, height = tinyHeight) - TextBlock(width = mediumTextBlockWidth, height = tinyHeight) - TextBlock(height = tinyHeight) + val contentModifier = Modifier + .fillMaxWidth() + .heightIn(max = 300.dp) + PostContentPlaceholder(contentModifier, shape = mediaShape) + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .padding(vertical = 8.dp) + .padding(start = 4.dp), + horizontalArrangement = Arrangement.spacedBy(6.dp), + ) { + SmallCircle() + TextBlock(width = tinyTextBlockWidth) + SmallCircle() + TextBlock(width = tinyTextBlockWidth) + } + Column(modifier = Modifier.padding(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) { + TextBlock(width = largeTextBlockWidth, height = tinyHeight) + TextBlock(width = mediumTextBlockWidth, height = tinyHeight) + TextBlock(height = tinyHeight) + } } } } @@ -105,7 +132,7 @@ fun PostSkeleton(modifier: Modifier = Modifier) { private fun PostSkeletonPreview() { SnakeChatTheme { Surface { - PostSkeleton() + FeedSkeleton() } } } diff --git a/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileContent.kt b/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileContent.kt index 758e462..991a323 100644 --- a/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileContent.kt +++ b/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileContent.kt @@ -78,7 +78,12 @@ fun ProfileContent(state: ProfileState, modifier: Modifier = Modifier) { @Composable fun TopBar(userid: String, onBack: () -> Unit, modifier: Modifier = Modifier) { TopAppBar( - title = { SnakeText(text = userid, style = MaterialTheme.typography.headlineSmall) }, + title = { + SnakeText( + text = userid, + style = MaterialTheme.typography.headlineSmall, + ) + }, navigationIcon = { SnakeBackNavigationIcon(onBack = { onBack() }) }, diff --git a/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileHeader.kt b/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileHeader.kt index c67591d..7b9717c 100644 --- a/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileHeader.kt +++ b/frontend/compose-app/ui/profile/src/main/kotlin/cc/snakechat/profile/ProfileHeader.kt @@ -60,7 +60,7 @@ fun ProfileHeader(state: Data, modifier: Modifier = Modifier) { Spacer(modifier = Modifier.height(8.dp)) SnakeText( text = profile.username, - style = MaterialTheme.typography.titleLarge, + style = MaterialTheme.typography.titleMedium, ) val status = profile.status if (status != null) {