Move composables to separate file

app/src/main/java/org/tasks/caldav/CaldavCalendarSettingsActivity.kt

@@ -2,32 +2,13 @@ package org.tasks.caldav
 
 import android.os.Bundle
 import androidx.activity.viewModels
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-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.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import androidx.core.view.isVisible
 import androidx.lifecycle.lifecycleScope
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.launch
 import org.tasks.R
+import org.tasks.compose.ListSettingsComposables.PrincipalList
 import org.tasks.data.CaldavAccount
 import org.tasks.data.CaldavAccount.Companion.SERVER_OWNCLOUD
 import org.tasks.data.CaldavAccount.Companion.SERVER_SABREDAV
@@ -74,7 +55,11 @@ class CaldavCalendarSettingsActivity : BaseCaldavCalendarSettingsActivity() {
             principalDao.getPrincipals(it.id).observe(this) {
                 findViewById<ComposeView>(R.id.people)
                     .apply { isVisible = it.isNotEmpty() }
-                    .setContent { PrincipalList(it) }
+                    .setContent {
+                        tasksTheme.TasksTheme {
+                            PrincipalList(it, if (canRemovePrincipals) this::onRemove else null)
+                        }
+                    }
             }
         }
     }
@@ -102,59 +87,6 @@ class CaldavCalendarSettingsActivity : BaseCaldavCalendarSettingsActivity() {
         }
     }
 
-    @Composable
-    private fun PrincipalList(principals: List<Principal>) {
-        tasksTheme.TasksTheme {
-            Column(
-                modifier = Modifier
-                    .padding(16.dp)
-                    .fillMaxWidth()
-            ) {
-                Text(
-                    stringResource(R.string.list_members),
-                    style = MaterialTheme.typography.h6,
-                    color = MaterialTheme.colors.onBackground
-                )
-                Spacer(Modifier.height(8.dp))
-                principals.forEach {
-                    PrincipalRow(it)
-                }
-            }
-        }
-    }
-
-    @Composable
-    fun PrincipalRow(principal: Principal) {
-        Row(modifier = Modifier
-            .padding(PaddingValues(0.dp, 16.dp))
-            .fillMaxWidth()) {
-            Icon(
-                painter = painterResource(R.drawable.ic_outline_perm_identity_24px),
-                contentDescription = null,
-                modifier = Modifier.padding(end = 16.dp),
-                tint = colorResource(R.color.icon_tint_with_alpha)
-            )
-            Text(
-                principal.name!!,
-                style = MaterialTheme.typography.body1,
-                color = MaterialTheme.colors.onBackground,
-            )
-            if (canRemovePrincipals) {
-                Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth()) {
-                    IconButton(
-                        modifier = Modifier.then(Modifier.size(24.dp)),
-                        onClick = { onRemove(principal) }) {
-                        Icon(
-                            painter = painterResource(R.drawable.ic_outline_clear_24px),
-                            contentDescription = null,
-                            tint = colorResource(R.color.icon_tint_with_alpha),
-                        )
-                    }
-                }
-            }
-        }
-    }
-
     override suspend fun createCalendar(caldavAccount: CaldavAccount, name: String, color: Int) =
             createCalendarViewModel.createCalendar(caldavAccount, name, color)
 
@@ -165,15 +97,6 @@ class CaldavCalendarSettingsActivity : BaseCaldavCalendarSettingsActivity() {
     override suspend fun deleteCalendar(caldavAccount: CaldavAccount, caldavCalendar: CaldavCalendar) =
             deleteCalendarViewModel.deleteCalendar(caldavAccount, caldavCalendar)
 
-    @Preview
-    @Composable
-    private fun PreviewList() {
-        PrincipalList(listOf(
-            Principal().apply { displayName = "user1" },
-            Principal().apply { displayName = "user2" },
-        ))
-    }
-
     companion object {
         val CaldavAccount.canRemovePrincipal: Boolean
             get() = when (serverType) {

app/src/main/java/org/tasks/compose/Constants.kt

@@ -0,0 +1,9 @@
+package org.tasks.compose
+
+import androidx.compose.ui.unit.dp
+
+object Constants {
+    const val ICON_ALPHA = 0.54f
+    val KEYLINE_FIRST = 16.dp
+    val HALF_KEYLINE = 8.dp
+}

app/src/main/java/org/tasks/compose/PrincipalList.kt

@@ -0,0 +1,115 @@
+package org.tasks.compose
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.MaterialTheme.colors
+import androidx.compose.material.Text
+import androidx.compose.material.darkColors
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.tasks.R
+import org.tasks.compose.Constants.HALF_KEYLINE
+import org.tasks.compose.Constants.ICON_ALPHA
+import org.tasks.compose.Constants.KEYLINE_FIRST
+import org.tasks.data.Principal
+import org.tasks.data.Principal.Companion.name
+
+private val principals = listOf(
+    Principal().apply { displayName = "user1" },
+    Principal().apply { displayName = "user2" },
+)
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun Owner() = MaterialTheme {
+    ListSettingsComposables.PrincipalList(principals) {}
+}
+
+@Preview(showBackground = true, backgroundColor = 0x202124)
+@Composable
+private fun OwnerDark() = MaterialTheme(darkColors()) {
+    ListSettingsComposables.PrincipalList(principals) {}
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun NotOwner() = MaterialTheme {
+    ListSettingsComposables.PrincipalList(principals, null)
+}
+
+object ListSettingsComposables {
+    @Composable
+    fun PrincipalList(
+        principals: List<Principal>,
+        onRemove: ((Principal) -> Unit)?,
+    ) {
+        Column(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                stringResource(R.string.list_members),
+                style = MaterialTheme.typography.h6,
+                color = colors.onBackground
+            )
+            Spacer(Modifier.height(HALF_KEYLINE))
+            principals.forEach {
+                PrincipalRow(it, onRemove)
+            }
+        }
+    }
+
+    @Composable
+    fun PrincipalRow(
+        principal: Principal,
+        onRemove: ((Principal) -> Unit)?,
+    ) {
+        Row(modifier = Modifier
+            .padding(PaddingValues(0.dp, KEYLINE_FIRST))
+            .fillMaxWidth()) {
+            Icon(
+                painter = painterResource(R.drawable.ic_outline_perm_identity_24px),
+                contentDescription = null,
+                tint = colors.onBackground,
+                modifier = Modifier
+                    .padding(end = KEYLINE_FIRST)
+                    .alpha(ICON_ALPHA),
+            )
+            Text(
+                principal.name!!,
+                style = MaterialTheme.typography.body1,
+                color = colors.onBackground,
+            )
+            onRemove?.let {
+                Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth()) {
+                    IconButton(
+                        modifier = Modifier.then(Modifier.size(24.dp)),
+                        onClick = { it(principal) }) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_outline_clear_24px),
+                            contentDescription = null,
+                            tint = colors.onBackground,
+                            modifier = Modifier.alpha(ICON_ALPHA)
+                        )
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/org/tasks/themes/Theme.kt

@@ -9,6 +9,7 @@ import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.core.content.ContextCompat
 import dagger.hilt.android.qualifiers.ActivityContext
 import org.tasks.R
 import javax.inject.Inject
@@ -34,6 +35,8 @@ class Theme @Inject constructor(
                     primary = primary,
                     onPrimary = onPrimary,
                     secondary = secondary,
+                    background = Color(ContextCompat.getColor(context, R.color.window_background)),
+                    surface = Color(ContextCompat.getColor(context, R.color.content_background)),
                 )
             } else {
                 lightColors(