feat: add dynamic accent color system and dark mode improvements [WPB-21145] (#4393)

Author: Garzas

app/src/androidTest/kotlin/com/wire/android/ui/WireTestTheme.kt

@@ -22,6 +22,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import com.wire.android.ui.common.snackbar.LocalSnackbarHostState
+import com.wire.android.ui.theme.Accent
 import com.wire.android.ui.theme.DefaultWireFixedColorScheme
 import com.wire.android.ui.theme.WireColorScheme
 import com.wire.android.ui.theme.WireColorSchemeTypes
@@ -47,6 +48,7 @@ fun WireTestTheme(
                 wireFixedColorScheme,
                 wireTypography,
                 wireDimensions,
+                Accent.Unknown,
                 content
             )
         }

app/src/main/kotlin/com/wire/android/di/ObserveSelfUserUseCaseProvider.kt

@@ -0,0 +1,39 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+
+package com.wire.android.di
+
+import com.wire.kalium.logic.CoreLogic
+import com.wire.kalium.logic.data.user.UserId
+import com.wire.kalium.logic.feature.user.ObserveSelfUserUseCase
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedFactory
+import dagger.assisted.AssistedInject
+
+class ObserveSelfUserUseCaseProvider @AssistedInject constructor(
+    @KaliumCoreLogic private val coreLogic: CoreLogic,
+    @Assisted private val userId: UserId
+) {
+    val observeSelfUser: ObserveSelfUserUseCase
+        get() = coreLogic.getSessionScope(userId).users.observeSelfUser
+
+    @AssistedFactory
+    interface Factory {
+        fun create(userId: UserId): ObserveSelfUserUseCaseProvider
+    }
+}

app/src/main/kotlin/com/wire/android/ui/WireActivity.kt

@@ -258,7 +258,7 @@ class WireActivity : AppCompatActivity() {
                 LocalSnackbarHostState provides snackbarHostState,
                 LocalActivity provides this
             ) {
-                WireTheme {
+                WireTheme(accent = viewModel.globalAppState.userAccent) {
                     val navigator = rememberNavigator(
                         finish = this@WireActivity::finish,
                         isAllowedToNavigate = { navigationCommand ->

app/src/main/kotlin/com/wire/android/ui/WireActivityViewModel.kt

@@ -33,6 +33,7 @@ import com.wire.android.di.IsProfileQRCodeEnabledUseCaseProvider
 import com.wire.android.di.KaliumCoreLogic
 import com.wire.android.di.ObserveIfE2EIRequiredDuringLoginUseCaseProvider
 import com.wire.android.di.ObserveScreenshotCensoringConfigUseCaseProvider
+import com.wire.android.di.ObserveSelfUserUseCaseProvider
 import com.wire.android.di.ObserveSyncStateUseCaseProvider
 import com.wire.android.feature.AccountSwitchUseCase
 import com.wire.android.feature.SwitchAccountActions
@@ -45,6 +46,7 @@ import com.wire.android.ui.common.dialogs.CustomServerDetailsDialogState
 import com.wire.android.ui.common.dialogs.CustomServerDialogState
 import com.wire.android.ui.common.dialogs.CustomServerNoNetworkDialogState
 import com.wire.android.ui.joinConversation.JoinConversationViaCodeState
+import com.wire.android.ui.theme.Accent
 import com.wire.android.ui.theme.ThemeOption
 import com.wire.android.util.CurrentScreen
 import com.wire.android.util.CurrentScreenManager
@@ -87,6 +89,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.flatMapLatest
@@ -124,6 +127,7 @@ class WireActivityViewModel @Inject constructor(
     private val observeIfE2EIRequiredDuringLoginUseCaseProviderFactory: ObserveIfE2EIRequiredDuringLoginUseCaseProvider.Factory,
     private val workManager: Lazy<WorkManager>,
     private val isProfileQRCodeEnabledFactory: IsProfileQRCodeEnabledUseCaseProvider.Factory,
+    private val observeSelfUserFactory: ObserveSelfUserUseCaseProvider.Factory,
 ) : ActionsViewModel<WireActivityViewAction>() {
 
     var globalAppState: GlobalAppState by mutableStateOf(GlobalAppState())
@@ -154,6 +158,7 @@ class WireActivityViewModel @Inject constructor(
         observeNewClientState()
         observeScreenshotCensoringConfigState()
         observeAppThemeState()
+        observeSelectedAccent()
         observeLogoutState()
         resetNewRegistrationAnalyticsState()
     }
@@ -173,6 +178,22 @@ class WireActivityViewModel @Inject constructor(
         }
     }
 
+    private fun observeSelectedAccent() {
+        viewModelScope.launch(dispatchers.io()) {
+            observeCurrentValidUserId.flatMapLatest {
+                it?.let {
+                    observeSelfUserFactory.create(it).observeSelfUser().map { user ->
+                        Accent.fromAccentId(user.accentId)
+                    }
+                } ?: flowOf(Accent.Unknown)
+            }
+                .distinctUntilChanged()
+                .collectLatest {
+                    globalAppState = globalAppState.copy(userAccent = it)
+                }
+        }
+    }
+
     private fun observeSyncState() {
         viewModelScope.launch(dispatchers.io()) {
             observeCurrentValidUserId
@@ -606,7 +627,8 @@ data class GlobalAppState(
     val conversationJoinedDialog: JoinConversationViaCodeState? = null,
     val newClientDialog: NewClientsData? = null,
     val screenshotCensoringEnabled: Boolean = true,
-    val themeOption: ThemeOption = ThemeOption.SYSTEM
+    val themeOption: ThemeOption = ThemeOption.SYSTEM,
+    val userAccent: Accent = Accent.Unknown
 )
 
 enum class InitialAppState {

app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationScreen.kt

@@ -917,6 +917,11 @@ private fun ConversationScreen(
     Box(modifier = Modifier) {
         // only here we will use normal Scaffold because of specific behaviour of message composer
         Scaffold(
+            contentColor = if (conversationInfoViewState.isBubbleUiEnabled) {
+                colorsScheme().primary
+            } else {
+                colorsScheme().background
+            },
             topBar = {
                 Column {
                     ConversationScreenTopAppBar(
@@ -1260,7 +1265,13 @@ fun MessageList(
         contentAlignment = Alignment.BottomEnd,
         modifier = modifier
             .fillMaxSize()
-            .background(color = colorsScheme().surfaceContainerLow),
+            .background(
+                color = if (isBubbleUiEnabled) {
+                    colorsScheme().bubblesBackground
+                } else {
+                    colorsScheme().surfaceContainerLow
+                }
+            ),
         content = {
             LazyColumn(
                 state = lazyListState,

app/src/main/kotlin/com/wire/android/ui/home/conversations/ConversationTopAppBar.kt

@@ -37,6 +37,7 @@ 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.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -82,7 +83,8 @@ fun ConversationScreenTopAppBar(
     onJoinCallButtonClick: () -> Unit,
     onAudioPermissionPermanentlyDenied: () -> Unit,
     isInteractionEnabled: Boolean,
-    isDropDownEnabled: Boolean = false
+    isDropDownEnabled: Boolean = false,
+    containerColor: Color? = null
 ) {
     val featureVisibilityFlags = LocalFeatureVisibilityFlags.current
     ConversationScreenTopAppBarContent(
@@ -96,7 +98,8 @@ fun ConversationScreenTopAppBar(
         onJoinCallButtonClick = onJoinCallButtonClick,
         onAudioPermissionPermanentlyDenied = onAudioPermissionPermanentlyDenied,
         isInteractionEnabled = isInteractionEnabled,
-        isSearchEnabled = featureVisibilityFlags.ConversationSearchIcon
+        isSearchEnabled = featureVisibilityFlags.ConversationSearchIcon,
+        containerColor = containerColor
     )
 }
 
@@ -113,7 +116,8 @@ private fun ConversationScreenTopAppBarContent(
     onAudioPermissionPermanentlyDenied: () -> Unit,
     isInteractionEnabled: Boolean,
     isSearchEnabled: Boolean,
-    isDropDownEnabled: Boolean = false
+    isDropDownEnabled: Boolean = false,
+    containerColor: Color? = null
 ) {
     TopAppBar(
         title = {
@@ -191,7 +195,7 @@ private fun ConversationScreenTopAppBarContent(
             }
         },
         colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-            containerColor = MaterialTheme.colorScheme.background,
+            containerColor = containerColor ?: MaterialTheme.colorScheme.background,
             titleContentColor = MaterialTheme.colorScheme.onBackground,
             actionIconContentColor = MaterialTheme.colorScheme.onBackground,
             navigationIconContentColor = MaterialTheme.colorScheme.onBackground