From c6431add42ef878371dd36bad7faa6d26debf00c Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 12 Sep 2022 19:45:00 +0100 Subject: [PATCH 1/3] adding back a light theme or make use of the dynamic colour scheme --- .../app/dapk/st/design/components/Theme.kt | 26 +++++++++++++------ 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt index 45259ba..3d8fd4d 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt +++ b/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt @@ -1,8 +1,7 @@ package app.dapk.st.design.components -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.darkColorScheme -import androidx.compose.material3.dynamicDarkColorScheme +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext @@ -18,13 +17,16 @@ private val DARK_COLOURS = darkColorScheme( onPrimary = Color(0xDDFFFFFF), ) -private val DARK_EXTENDED = createExtended(DARK_COLOURS.primary, DARK_COLOURS.onPrimary) +private val LIGHT_COLOURS = lightColorScheme( + primary = Palette.brandPrimary, + onPrimary = Color(0xDDFFFFFF), +) private fun createExtended(primary: Color, onPrimary: Color) = ExtendedColors( selfBubble = primary, onSelfBubble = onPrimary, othersBubble = Color(0x20EDEDED), - onOthersBubble = DARK_COLOURS.onPrimary, + onOthersBubble = onPrimary, selfBubbleReplyBackground = Color(0x40EAEAEA), otherBubbleReplyBackground = Color(0x20EAEAEA), missingImageColors = listOf( @@ -49,15 +51,23 @@ data class ExtendedColors( } } -private val LocalExtendedColors = staticCompositionLocalOf { DARK_EXTENDED } +private val LocalExtendedColors = staticCompositionLocalOf { throw IllegalAccessError() } @Composable fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) { val systemUiController = rememberSystemUiController() + val systemInDarkTheme = isSystemInDarkTheme() + val colorScheme = if (themeConfig.useDynamicTheme) { - dynamicDarkColorScheme(LocalContext.current) + when (systemInDarkTheme) { + true -> dynamicDarkColorScheme(LocalContext.current) + false -> dynamicLightColorScheme(LocalContext.current) + } } else { - DARK_COLOURS + when (systemInDarkTheme) { + true -> DARK_COLOURS + false -> LIGHT_COLOURS + } } MaterialTheme(colorScheme = colorScheme) { val backgroundColor = MaterialTheme.colorScheme.background From 62c0945be6b5da35a7ba94eb8ee2bd732bb03548 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 12 Sep 2022 20:06:16 +0100 Subject: [PATCH 2/3] cleaning up messages theming --- .../dapk/st/design/components/OverflowMenu.kt | 10 ++++-- .../app/dapk/st/design/components/Theme.kt | 36 +++++++++++-------- .../app/dapk/st/messenger/MessengerScreen.kt | 18 +++++----- 3 files changed, 39 insertions(+), 25 deletions(-) diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt index 6fe0965..31674e0 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/OverflowMenu.kt +++ b/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() } diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt index 3d8fd4d..c1e37c2 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/Theme.kt +++ b/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,15 +62,19 @@ fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) { val systemUiController = rememberSystemUiController() val systemInDarkTheme = isSystemInDarkTheme() - val colorScheme = if (themeConfig.useDynamicTheme) { - when (systemInDarkTheme) { - true -> dynamicDarkColorScheme(LocalContext.current) - false -> dynamicLightColorScheme(LocalContext.current) + val colorScheme = when { + themeConfig.useDynamicTheme -> { + when (systemInDarkTheme) { + true -> dynamicDarkColorScheme(LocalContext.current) + false -> dynamicLightColorScheme(LocalContext.current) + } } - } else { - when (systemInDarkTheme) { - true -> DARK_COLOURS - false -> LIGHT_COLOURS + + else -> { + when (systemInDarkTheme) { + true -> DARK_COLOURS + false -> LIGHT_COLOURS + } } } MaterialTheme(colorScheme = colorScheme) { @@ -74,7 +82,7 @@ fun SmallTalkTheme(themeConfig: ThemeConfig, content: @Composable () -> Unit) { SideEffect { systemUiController.setSystemBarsColor(backgroundColor) } - CompositionLocalProvider(LocalExtendedColors provides createExtended(MaterialTheme.colorScheme.primary, MaterialTheme.colorScheme.onPrimary)) { + CompositionLocalProvider(LocalExtendedColors provides createExtended(colorScheme)) { content() } } diff --git a/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt b/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt index 184d3d0..93e0a62 100644 --- a/features/messenger/src/main/kotlin/app/dapk/st/messenger/MessengerScreen.kt +++ b/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 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 From e854e9b02c36d6129a6d56a304713d8391180761 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Mon, 12 Sep 2022 20:57:33 +0100 Subject: [PATCH 3/3] removing top bar under status bar --- .../src/main/kotlin/app/dapk/st/design/components/Toolbar.kt | 4 ---- 1 file changed, 4 deletions(-) diff --git a/design-library/src/main/kotlin/app/dapk/st/design/components/Toolbar.kt b/design-library/src/main/kotlin/app/dapk/st/design/components/Toolbar.kt index 0698301..dbcb390 100644 --- a/design-library/src/main/kotlin/app/dapk/st/design/components/Toolbar.kt +++ b/design-library/src/main/kotlin/app/dapk/st/design/components/Toolbar.kt @@ -1,17 +1,14 @@ package app.dapk.st.design.components import androidx.compose.foundation.layout.RowScope -import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.offset import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.IntOffset -import androidx.compose.ui.unit.dp @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -31,7 +28,6 @@ fun Toolbar( title = title?.let { { Text(it, maxLines = 2) } } ?: {}, actions = actions, ) - Divider(modifier = Modifier.fillMaxWidth(), color = Color.Black.copy(alpha = 0.2f), thickness = 0.5.dp) } private fun foo(onNavigate: (() -> Unit)?): (@Composable () -> Unit) {