cleaning up messages theming

design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt

@@ -1,12 +1,15 @@
 package app.dapk.st.design.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.MoreVert
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.MoreVert
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 
@@ -18,7 +21,8 @@ fun OverflowMenu(content: @Composable () -> Unit) {
         DropdownMenu(
             expanded = showMenu,
             onDismissRequest = { showMenu = false },
-            offset = DpOffset(0.dp, (-72).dp)
+            offset = DpOffset(0.dp, (-72).dp),
+            modifier = Modifier.background(MaterialTheme.colorScheme.secondaryContainer)
         ) {
             content()
         }

design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt

@@ -15,18 +15,22 @@ private object Palette {
 private val DARK_COLOURS = darkColorScheme(
     primary = Palette.brandPrimary,
     onPrimary = Color(0xDDFFFFFF),
+    secondaryContainer = Color(0xFF363639),
+    onSecondaryContainer = Color(0xDDFFFFFF),
 )
 
 private val LIGHT_COLOURS = lightColorScheme(
     primary = Palette.brandPrimary,
     onPrimary = Color(0xDDFFFFFF),
+    secondaryContainer = Color(0xFFf1f0f1),
+    onSecondaryContainer = Color(0xFF000000),
 )
 
-private fun createExtended(primary: Color, onPrimary: Color) = ExtendedColors(
-    selfBubble = primary,
-    onSelfBubble = onPrimary,
-    othersBubble = Color(0x20EDEDED),
-    onOthersBubble = onPrimary,
+private fun createExtended(scheme: ColorScheme) = ExtendedColors(
+    selfBubble = scheme.primary,
+    onSelfBubble = scheme.onPrimary,
+    othersBubble = scheme.secondaryContainer,
+    onOthersBubble = scheme.onSecondaryContainer,
     selfBubbleReplyBackground = Color(0x40EAEAEA),
     otherBubbleReplyBackground = Color(0x20EAEAEA),
     missingImageColors = listOf(
@@ -58,23 +62,27 @@ fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) {
     val systemUiController = rememberSystemUiController()
     val systemInDarkTheme = isSystemInDarkTheme()
 
-    val colorScheme = if (themeConfig.useDynamicTheme) {
+    val colorScheme = when {
+        themeConfig.useDynamicTheme -> {
             when (systemInDarkTheme) {
                 true -> dynamicDarkColorScheme(LocalContext.current)
                 false -> dynamicLightColorScheme(LocalContext.current)
             }
-    } else {
+        }
+
+        else -> {
             when (systemInDarkTheme) {
                 true -> DARK_COLOURS
                 false -> LIGHT_COLOURS
             }
         }
+    }
     MaterialTheme(colorScheme = colorScheme) {
         val backgroundColor = MaterialTheme.colorScheme.background
         SideEffect {
             systemUiController.setSystemBarsColor(backgroundColor)
         }
-        CompositionLocalProvider(LocalExtendedColors provides createExtended(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary)) {
+        CompositionLocalProvider(LocalExtendedColors provides createExtended(colorScheme)) {
             content()
         }
     }

features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt

@@ -10,11 +10,11 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material3.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Send
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -64,7 +64,7 @@ internal fun MessengerScreen(roomId: RoomId, attachments: List<MessageAttachment
     Column {
         Toolbar(onNavigate = { navigator.navigate.upToHome() }, roomTitle, actions = {
             OverflowMenu {
-                DropdownMenuItem(text = { Text("Settings") }, onClick = {}) 
+                DropdownMenuItem(text = { Text("Settings", color = MaterialTheme.colorScheme.onSecondaryContainer) }, onClick = {})
             }
         })
         when (state.composerState) {
@@ -565,12 +565,12 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un
                 .align(Alignment.Bottom)
                 .weight(1f)
                 .fillMaxHeight()
-                .background(Color.DarkGray, RoundedCornerShape(24.dp)),
+                .background(SmallTalkTheme.extendedColors.othersBubble, RoundedCornerShape(24.dp)),
             contentAlignment = Alignment.TopStart,
         ) {
             Box(Modifier.padding(14.dp)) {
                 if (state.value.isEmpty()) {
-                    Text("Message", color = SmallTalkTheme.extendedColors.onOthersBubble.copy(alpha = 0.4f))
+                    Text("Message", color = SmallTalkTheme.extendedColors.onOthersBubble.copy(alpha = 0.5f))
                 }
                 BasicTextField(
                     modifier = Modifier.fillMaxWidth(),
@@ -584,11 +584,12 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un
         }
         Spacer(modifier = Modifier.width(6.dp))
         var size by remember { mutableStateOf(IntSize(0, 0)) }
+        val enabled = state.value.isNotEmpty()
         IconButton(
-            enabled = state.value.isNotEmpty(),
+            enabled = enabled,
             modifier = Modifier
                 .clip(CircleShape)
-                .background(if (state.value.isEmpty()) Color.DarkGray else MaterialTheme.colorScheme.primary)
+                .background(if (enabled) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondaryContainer)
                 .run {
                     if (size.height == 0 || size.width == 0) {
                         this
@@ -607,7 +608,7 @@ private fun TextComposer(state: ComposerState.Text, onTextChange: (String) -> Un
             Icon(
                 imageVector = Icons.Filled.Send,
                 contentDescription = "",
-                tint = MaterialTheme.colorScheme.onPrimary,
+                tint = if (enabled) MaterialTheme.colorScheme.onPrimary else MaterialTheme.colorScheme.onSecondaryContainer.copy(alpha = 0.5f),
             )
         }
     }
@@ -633,7 +634,8 @@ private fun AttachmentComposer(state: ComposerState.Attachments, onSend: () -> U
         Box(
             Modifier
                 .align(Alignment.BottomEnd)
-                .padding(12.dp)) {
+                .padding(12.dp)
+        ) {
             IconButton(
                 enabled = true,
                 modifier = Modifier