Improve compose theming

app/src/main/java/org/thoughtcrime/securesms/conversation/v2/MessageDetailActivity.kt

@@ -2,47 +2,40 @@ package org.thoughtcrime.securesms.conversation.v2
 
 import android.os.Bundle
 import android.view.View
-import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Card
 import androidx.compose.material.Divider
-import androidx.compose.material.Icon
 import androidx.compose.material.Text
-import androidx.compose.material.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
 import dagger.hilt.android.AndroidEntryPoint
 import network.loki.messenger.R
 import org.thoughtcrime.securesms.PassphraseRequiredActionBarActivity
 import org.thoughtcrime.securesms.database.Storage
 import org.thoughtcrime.securesms.database.model.MessageRecord
+import org.thoughtcrime.securesms.ui.AppTheme
+import org.thoughtcrime.securesms.ui.Cell
+import org.thoughtcrime.securesms.ui.CellWithPadding
+import org.thoughtcrime.securesms.ui.ItemButton
+import org.thoughtcrime.securesms.ui.LocalExtraColors
+import org.thoughtcrime.securesms.ui.destructiveButtonColors
 import java.util.*
 import javax.inject.Inject
 
+
 @AndroidEntryPoint
 class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
     var messageRecord: MessageRecord? = null
@@ -92,11 +85,11 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
         val received = TitledText("Received:", "6:12 AM Tue, 09/08/2022 ")
         val user = TitledText("Connor", "d4f1g54sdf5g1d5f4g65ds4564df65f4g65d54gdfsg")
 
-        AppCompatTheme {
+        AppTheme {
             Column(
                 modifier = Modifier.verticalScroll(rememberScrollState()),
                 verticalArrangement = Arrangement.spacedBy(16.dp)) {
-                CardWithPadding {
+                CellWithPadding {
                     FlowRow(
                         verticalArrangement = Arrangement.spacedBy(16.dp),
                         maxItemsInEachRow = 2
@@ -106,13 +99,15 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
                         }
                     }
                 }
-                CardWithPadding {
+                CellWithPadding {
                     Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                         titledText(sent)
                         titledText(received)
                         titledView("From:") {
                             Row {
-                                Box(modifier = Modifier.width(60.dp).height(60.dp))
+                                Box(modifier = Modifier
+                                    .width(60.dp)
+                                    .height(60.dp))
                                 Column {
                                     titledText(user)
                                 }
@@ -120,13 +115,13 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
                         }
                     }
                 }
-                Card {
+                Cell {
                     Column {
                         ItemButton("Reply", R.drawable.ic_reply)
                         Divider()
                         ItemButton("Resend", R.drawable.ic_reply)
                         Divider()
-                        ItemButton("Delete", R.drawable.ic_delete_24, color = Color.Red)
+                        ItemButton("Delete", R.drawable.ic_delete_24 , colors = destructiveButtonColors())
                     }
                 }
             }
@@ -135,47 +130,7 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
 
     @Composable
     fun Divider() {
-        Divider(modifier = Modifier.padding(horizontal = 16.dp), thickness = 1.dp, color = Color(0xff414141))
-    }
-
-    @Composable
-    fun ItemButton(text: String, @DrawableRes icon: Int, color: Color = Color.White) {
-        TextButton(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(60.dp),
-            onClick = {},
-            shape = RectangleShape,
-        ) {
-            Box(modifier = Modifier.width(80.dp).fillMaxHeight()) {
-                Icon(
-                    painter = painterResource(id = icon),
-                    contentDescription = "",
-                    tint = color,
-                    modifier = Modifier.align(Alignment.Center)
-                )
-            }
-            Text(text, color = color, modifier = Modifier.fillMaxWidth())
-        }
-    }
-
-    @Composable
-    fun Card(content: @Composable () -> Unit) {
-        CardWithPadding(0.dp) { content() }
-    }
-
-    @Composable
-    fun CardWithPadding(padding: Dp = 24.dp, content: @Composable () -> Unit) {
-        Card(
-            shape = RoundedCornerShape(16.dp),
-            elevation = 0.dp,
-            modifier = Modifier
-                .wrapContentHeight()
-                .fillMaxWidth()
-                .padding(horizontal = 32.dp),
-            backgroundColor = Color(0xff1b1b1b),
-            contentColor = Color.White
-        ) { Box(Modifier.padding(padding)) { content() } }
+        Divider(modifier = Modifier.padding(horizontal = 16.dp), thickness = 1.dp, color = LocalExtraColors.current.divider)
     }
 
     @Composable
@@ -185,6 +140,7 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
             Text(titledText.value)
         }
     }
+
     @Composable
     fun titledView(title: String, modifier: Modifier = Modifier, content: @Composable () -> Unit) {
         Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(4.dp)) {
@@ -197,4 +153,4 @@ class MessageDetailActivity: PassphraseRequiredActionBarActivity() {
     fun Title(text: String) {
         Text(text, fontWeight = FontWeight.Bold)
     }
-}
+}

app/src/main/java/org/thoughtcrime/securesms/ui/Colors.kt

@@ -0,0 +1,13 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+val colorDestructive = Color(0xffFF453A)
+
+@Composable
+fun transparentButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
+
+@Composable
+fun destructiveButtonColors() = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent, contentColor = colorDestructive)

app/src/main/java/org/thoughtcrime/securesms/ui/Components.kt

@@ -0,0 +1,67 @@
+package org.thoughtcrime.securesms.ui
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ButtonColors
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ItemButton(
+    text: String,
+    @DrawableRes icon: Int,
+    colors: ButtonColors = transparentButtonColors(),
+) {
+    TextButton(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(60.dp),
+        colors = colors,
+        onClick = {},
+        shape = RectangleShape,
+    ) {
+        Box(modifier = Modifier
+            .width(80.dp)
+            .fillMaxHeight()) {
+            Icon(
+                painter = painterResource(id = icon),
+                contentDescription = "",
+                modifier = Modifier.align(Alignment.Center)
+            )
+        }
+        Text(text, modifier = Modifier.fillMaxWidth())
+    }
+}
+
+@Composable
+fun Cell(content: @Composable () -> Unit) {
+    CellWithPadding(0.dp) { content() }
+}
+
+@Composable
+fun CellWithPadding(padding: Dp = 24.dp, content: @Composable () -> Unit) {
+    androidx.compose.material.Card(
+        shape = RoundedCornerShape(16.dp),
+        elevation = 0.dp,
+        modifier = Modifier
+            .wrapContentHeight()
+            .fillMaxWidth()
+            .padding(horizontal = 32.dp),
+        backgroundColor = LocalExtraColors.current.settingsBackground
+    ) { Box(Modifier.padding(padding)) { content() } }
+}

app/src/main/java/org/thoughtcrime/securesms/ui/Themes.kt

@@ -0,0 +1,42 @@
+package org.thoughtcrime.securesms.ui
+
+import android.content.Context
+import androidx.annotation.AttrRes
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
+import com.google.android.material.color.MaterialColors
+import network.loki.messenger.R
+
+val LocalExtraColors = staticCompositionLocalOf<ExtraColors> { error("No Custom Attribute value provided") }
+
+data class ExtraColors(
+    val cell: Color,
+    val divider: Color,
+    val settingsBackground: Color,
+)
+
+fun Context.getColorFromTheme(@AttrRes attr: Int): Color =
+    MaterialColors.getColor(this, attr, 0).let(::Color)
+
+@Composable
+fun AppTheme(
+    content: @Composable () -> Unit
+) {
+    val extraColors = LocalContext.current.run {
+        ExtraColors(
+            cell = getColorFromTheme(R.attr.colorCellBackground),
+            divider = getColorFromTheme(R.attr.dividerColor),
+            settingsBackground = getColorFromTheme(R.attr.colorSettingsBackground)
+        )
+    }
+
+    CompositionLocalProvider(LocalExtraColors provides extraColors) {
+        AppCompatTheme {
+            content()
+        }
+    }
+}

app/src/main/res/values/themes.xml

@@ -342,6 +342,8 @@
         <item name="prominentButtonColor">?colorAccent</item>
         <item name="elementBorderColor">@color/classic_dark_3</item>
 
+        <item name="isLightTheme">false</item>
+
         <!-- Home screen -->
         <item name="searchBackgroundColor">#1B1B1B</item>
         <item name="searchIconColor">#E5E5E8</item>
@@ -424,6 +426,7 @@
         <item name="android:colorBackgroundFloating">?colorPrimary</item>
         <item name="android:windowLightStatusBar">true</item>
         <item name="android:windowLightNavigationBar" tools:targetApi="O_MR1">true</item>
+        <item name="isLightTheme">true</item>
         <item name="android:isLightTheme" tools:targetApi="Q">true</item>
         <item name="android:statusBarColor">?colorPrimary</item>
 
@@ -507,6 +510,8 @@
         <item name="prominentButtonColor">?colorAccent</item>
         <item name="elementBorderColor">@color/ocean_dark_4</item>
 
+        <item name="isLightTheme">false</item>
+
         <!-- Home screen -->
         <item name="searchBackgroundColor">@color/ocean_dark_3</item>
         <item name="searchIconColor">@color/ocean_dark_7</item>
@@ -594,6 +599,7 @@
         <item name="android:colorBackgroundFloating">?colorPrimary</item>
         <item name="android:windowLightStatusBar">true</item>
         <item name="android:windowLightNavigationBar" tools:targetApi="O_MR1">true</item>
+        <item name="isLightTheme">true</item>
         <item name="android:isLightTheme" tools:targetApi="Q">true</item>
         <item name="android:statusBarColor">?colorPrimary</item>