fix: Verification icons dark mode (#2580)

wireapp · Jan 16, 2024 · 196381e · 196381e
1 parent b15453f
commit 196381e
Show file tree

Hide file tree

Showing 20 changed files with 289 additions and 21 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/di/accountScoped/UserModule.kt b/app/src/main/kotlin/com/wire/android/di/accountScoped/UserModule.kt
@@ -29,6 +29,7 @@ import com.wire.kalium.logic.feature.e2ei.usecase.EnrollE2EIUseCase
 import com.wire.kalium.logic.feature.e2ei.usecase.GetE2eiCertificateUseCase
 import com.wire.kalium.logic.feature.e2ei.usecase.GetMembersE2EICertificateStatusesUseCase
 import com.wire.kalium.logic.feature.e2ei.usecase.GetUserE2eiCertificateStatusUseCase
+import com.wire.kalium.logic.feature.e2ei.usecase.GetUserE2eiCertificatesUseCase
 import com.wire.kalium.logic.feature.publicuser.GetAllContactsUseCase
 import com.wire.kalium.logic.feature.publicuser.GetKnownUserUseCase
 import com.wire.kalium.logic.feature.publicuser.RefreshUsersWithoutMetadataUseCase
@@ -236,4 +237,9 @@ class UserModule {
     @Provides
     fun provideGetMembersE2EICertificateStatusesUseCase(userScope: UserScope): GetMembersE2EICertificateStatusesUseCase =
         userScope.getMembersE2EICertificateStatuses
+
+    @ViewModelScoped
+    @Provides
+    fun provideGetUserE2eiCertificates(userScope: UserScope): GetUserE2eiCertificatesUseCase =
+        userScope.getUserE2eiCertificates
 }
diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/devices/DeviceItem.kt
@@ -52,6 +52,7 @@ import com.wire.android.BuildConfig
 import com.wire.android.R
 import com.wire.android.ui.authentication.devices.model.Device
 import com.wire.android.ui.authentication.devices.model.lastActiveDescription
+import com.wire.android.ui.common.MLSVerificationIcon
 import com.wire.android.ui.common.ProteusVerifiedIcon
 import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.button.getMinTouchMargins
@@ -179,6 +180,7 @@ private fun DeviceItemTexts(
                 .wrapContentWidth()
                 .shimmerPlaceholder(visible = placeholder)
         )
+        MLSVerificationIcon(device.e2eiCertificateStatus)
         if (shouldShowVerifyLabel) {
             Spacer(modifier = Modifier.width(MaterialTheme.wireDimensions.spacing8x))
             if (device.isVerifiedProteus) ProteusVerifiedIcon(Modifier.wrapContentWidth().align(Alignment.CenterVertically))

diff --git a/app/src/main/kotlin/com/wire/android/ui/authentication/devices/model/Device.kt b/app/src/main/kotlin/com/wire/android/ui/authentication/devices/model/Device.kt
@@ -26,6 +26,7 @@ import com.wire.android.R
 import com.wire.android.util.ui.UIText
 import com.wire.kalium.logic.data.client.Client
 import com.wire.kalium.logic.data.conversation.ClientId
+import com.wire.kalium.logic.feature.e2ei.CertificateStatus
 import com.wire.kalium.logic.util.inWholeWeeks
 import com.wire.kalium.util.DateTimeUtil.toIsoDateTimeString
 import kotlinx.datetime.Clock
@@ -37,16 +38,18 @@ data class Device(
     val lastActiveInWholeWeeks: Int? = null,
     val isValid: Boolean = true,
     val isVerifiedProteus: Boolean = false,
-    val mlsPublicKeys: Map<String, String>? = null
+    val mlsPublicKeys: Map<String, String>? = null,
+    val e2eiCertificateStatus: CertificateStatus? = null
 ) {
-    constructor(client: Client) : this(
+    constructor(client: Client, e2eiCertificateStatus: CertificateStatus? = null) : this(
         name = client.displayName(),
         clientId = client.id,
         registrationTime = client.registrationTime?.toIsoDateTimeString(),
         lastActiveInWholeWeeks = client.lastActiveInWholeWeeks(),
         isValid = client.isValid,
         isVerifiedProteus = client.isVerified,
-        mlsPublicKeys = client.mlsPublicKeys
+        mlsPublicKeys = client.mlsPublicKeys,
+        e2eiCertificateStatus = e2eiCertificateStatus
     )
 }
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/VerifiedIcons.kt b/app/src/main/kotlin/com/wire/android/ui/common/VerifiedIcons.kt
@@ -29,6 +29,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.wire.android.R
 import com.wire.kalium.logic.data.conversation.Conversation
+import com.wire.kalium.logic.feature.e2ei.CertificateStatus
 
 @Composable
 fun RowScope.ConversationVerificationIcons(
@@ -66,6 +67,29 @@ fun RowScope.ConversationVerificationIcons(
     }
 }
 
+@Composable
+fun RowScope.MLSVerificationIcon(mlsVerificationStatus: CertificateStatus?) {
+    val mlsIconModifier = Modifier
+        .wrapContentWidth()
+        .align(Alignment.CenterVertically)
+
+    when (mlsVerificationStatus) {
+        CertificateStatus.VALID -> MLSVerifiedIcon(
+            contentDescriptionId = R.string.e2ei_certificat_status_valid,
+            modifier = mlsIconModifier
+        )
+
+        CertificateStatus.REVOKED -> MLSRevokedIcon(modifier = mlsIconModifier)
+
+        CertificateStatus.EXPIRED -> MLSNotVerifiedIcon(
+            contentDescriptionId = R.string.e2ei_certificat_status_expired,
+            modifier = mlsIconModifier
+        )
+
+        null -> MLSNotVerifiedIcon(modifier = mlsIconModifier)
+    }
+}
+
 @Composable
 fun ProteusVerifiedIcon(
     modifier: Modifier = Modifier,
@@ -89,3 +113,27 @@ fun MLSVerifiedIcon(
         contentDescription = stringResource(contentDescriptionId)
     )
 }
+
+@Composable
+fun MLSRevokedIcon(
+    modifier: Modifier = Modifier,
+    @StringRes contentDescriptionId: Int = R.string.e2ei_certificat_status_revoked
+) {
+    Image(
+        modifier = modifier.padding(start = dimensions().spacing4x),
+        painter = painterResource(id = R.drawable.ic_certificate_revoked_mls),
+        contentDescription = stringResource(contentDescriptionId)
+    )
+}
+
+@Composable
+fun MLSNotVerifiedIcon(
+    modifier: Modifier = Modifier,
+    @StringRes contentDescriptionId: Int = R.string.e2ei_certificat_status_not_activated
+) {
+    Image(
+        modifier = modifier.padding(start = dimensions().spacing4x),
+        painter = painterResource(id = R.drawable.ic_certificate_not_activated_mls),
+        contentDescription = stringResource(contentDescriptionId)
+    )
+}
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/WireDialog.kt b/app/src/main/kotlin/com/wire/android/ui/common/WireDialog.kt
@@ -192,16 +192,17 @@ private fun WireDialogContent(
                 Text(
                     text = title,
                     style = MaterialTheme.wireTypography.title02,
-                    modifier = Modifier.weight(1f)
                 )
                 if (titleLoading) {
                     WireCircularProgressIndicator(progressColor = MaterialTheme.wireColorScheme.onBackground)
                 }
             }
             text?.let {
-                LazyColumn(modifier = Modifier
-                    .weight(1f, fill = false)
-                    .fillMaxWidth()) {
+                LazyColumn(
+                    modifier = Modifier
+                        .weight(1f, fill = false)
+                        .fillMaxWidth()
+                ) {
                     item {
                         ClickableText(
                             text = text,
@@ -371,6 +372,50 @@ fun PreviewWireDialogWith2OptionButtons() {
     }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
+@Preview(showBackground = true)
+@Composable
+fun PreviewWireDialogCentered() {
+    var password by remember { mutableStateOf(TextFieldValue("")) }
+    WireTheme {
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            WireDialogContent(
+                optionButton1Properties = WireDialogButtonProperties(
+                    text = "OK",
+                    onClick = { },
+                    type = WireDialogButtonType.Primary,
+                    state = if (password.text.isEmpty()) WireButtonState.Disabled else WireButtonState.Error,
+                ),
+                dismissButtonProperties = WireDialogButtonProperties(
+                    text = "Cancel",
+                    onClick = { }
+                ),
+                centerContent = true,
+                title = "title",
+                text = buildAnnotatedString {
+                    val style = SpanStyle(
+                        color = colorsScheme().onBackground,
+                        fontWeight = MaterialTheme.wireTypography.body01.fontWeight,
+                        fontSize = MaterialTheme.wireTypography.body01.fontSize,
+                        fontFamily = MaterialTheme.wireTypography.body01.fontFamily,
+                        fontStyle = MaterialTheme.wireTypography.body01.fontStyle
+                    )
+                    withStyle(style) { append("text\nsecond line\nthirdLine\nfourth line\nfifth line\nsixth line\nseventh line") }
+                },
+            ) {
+                WirePasswordTextField(
+                    value = password,
+                    onValueChange = { password = it },
+                    autofill = false
+                )
+            }
+        }
+    }
+}
+
 enum class WireDialogButtonType { Primary, Secondary, Tertiary }
 
 data class WireDialogButtonProperties(

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/E2EIDialogs.kt b/app/src/main/kotlin/com/wire/android/ui/home/E2EIDialogs.kt
@@ -170,6 +170,8 @@ fun E2EISuccessDialog(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
+                Spacer(modifier = Modifier.height(MaterialTheme.wireDimensions.spacing16x))
+
                 Image(
                     modifier = Modifier
                         .width(MaterialTheme.wireDimensions.spacing64x)

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/SystemMessageItem.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/SystemMessageItem.kt
@@ -79,6 +79,7 @@ import com.wire.android.util.ui.UIText
 import com.wire.android.util.ui.markdownBold
 import com.wire.android.util.ui.markdownText
 import com.wire.android.util.ui.toUIText
+import com.wire.kalium.logic.data.conversation.Conversation
 import kotlin.math.roundToInt
 
 @Suppress("ComplexMethod")
@@ -540,6 +541,54 @@ fun PreviewSystemMessageLegalHoldEnabledConversation() {
     }
 }
 
+@PreviewMultipleThemes
+@Composable
+fun PreviewSystemMessageConversationVerifiedProteus() {
+    WireTheme {
+        SystemMessageItem(
+            message = mockMessageWithKnock.copy(
+                messageContent = SystemMessage.ConversationVerified(Conversation.Protocol.PROTEUS)
+            )
+        )
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewSystemMessageConversationVerifiedMLS() {
+    WireTheme {
+        SystemMessageItem(
+            message = mockMessageWithKnock.copy(
+                messageContent = SystemMessage.ConversationVerified(Conversation.Protocol.MLS)
+            )
+        )
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewSystemMessageConversationDegradedProteus() {
+    WireTheme {
+        SystemMessageItem(
+            message = mockMessageWithKnock.copy(
+                messageContent = SystemMessage.ConversationDegraded(Conversation.Protocol.PROTEUS)
+            )
+        )
+    }
+}
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewSystemMessageConversationDegradedMLS() {
+    WireTheme {
+        SystemMessageItem(
+            message = mockMessageWithKnock.copy(
+                messageContent = SystemMessage.ConversationDegraded(Conversation.Protocol.MLS)
+            )
+        )
+    }
+}
+
 private val SystemMessage.expandable
     get() = when (this) {
         is SystemMessage.MemberAdded -> this.memberNames.size > EXPANDABLE_THRESHOLD

diff --git a/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/UIMessage.kt b/app/src/main/kotlin/com/wire/android/ui/home/conversations/model/UIMessage.kt
@@ -474,6 +474,7 @@ sealed class UIMessageContent {
                 Conversation.Protocol.MLS -> R.string.label_system_message_learn_more_about_mls_link
             }
         )
+
         data object ConversationProtocolChangedWithCallOngoing : SystemMessage(
             R.drawable.ic_info,
             R.string.label_system_message_conversation_protocol_changed_during_a_call
@@ -523,16 +524,16 @@ sealed class UIMessageContent {
         }
 
         data class ConversationDegraded(val protocol: Conversation.Protocol) : SystemMessage(
-            if (protocol == Conversation.Protocol.MLS) R.drawable.ic_conversation_degraded_mls
+            iconResId = if (protocol == Conversation.Protocol.MLS) R.drawable.ic_conversation_degraded_mls
             else R.drawable.ic_shield_holo,
-            if (protocol == Conversation.Protocol.MLS) R.string.label_system_message_conversation_degraded_mls
+            stringResId = if (protocol == Conversation.Protocol.MLS) R.string.label_system_message_conversation_degraded_mls
             else R.string.label_system_message_conversation_degraded_proteus
         )
 
         data class ConversationVerified(val protocol: Conversation.Protocol) : SystemMessage(
-            if (protocol == Conversation.Protocol.MLS) R.drawable.ic_certificate_valid_mls
+            iconResId = if (protocol == Conversation.Protocol.MLS) R.drawable.ic_certificate_valid_mls
             else R.drawable.ic_certificate_valid_proteus,
-            if (protocol == Conversation.Protocol.MLS) R.string.label_system_message_conversation_verified_mls
+            stringResId = if (protocol == Conversation.Protocol.MLS) R.string.label_system_message_conversation_verified_mls
             else R.string.label_system_message_conversation_verified_proteus
         )
 

diff --git a/app/src/main/kotlin/com/wire/android/ui/settings/devices/DeviceDetailsScreen.kt b/app/src/main/kotlin/com/wire/android/ui/settings/devices/DeviceDetailsScreen.kt
@@ -60,6 +60,7 @@ import com.wire.android.ui.authentication.devices.remove.RemoveDeviceDialog
 import com.wire.android.ui.authentication.devices.remove.RemoveDeviceDialogState
 import com.wire.android.ui.authentication.devices.remove.RemoveDeviceError
 import com.wire.android.ui.common.CopyButton
+import com.wire.android.ui.common.MLSVerificationIcon
 import com.wire.android.ui.common.ProteusVerifiedIcon
 import com.wire.android.ui.common.WireDialog
 import com.wire.android.ui.common.WireDialogButtonProperties
@@ -304,6 +305,9 @@ private fun DeviceDetailsTopBar(
                     style = MaterialTheme.wireTypography.title01,
                     maxLines = 2
                 )
+
+                MLSVerificationIcon(device.e2eiCertificateStatus)
+
                 if (!isCurrentDevice && device.isVerifiedProteus) {
                     ProteusVerifiedIcon(Modifier.align(Alignment.CenterVertically))
                 }

diff --git a/app/src/main/kotlin/com/wire/android/ui/settings/devices/EndToEndIdentityCertificateItem.kt b/app/src/main/kotlin/com/wire/android/ui/settings/devices/EndToEndIdentityCertificateItem.kt
@@ -27,6 +27,7 @@ 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.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import com.wire.android.R
@@ -186,6 +187,7 @@ private fun E2EIStatusRow(
             modifier = Modifier.align(Alignment.CenterVertically),
             painter = painterResource(id = icon),
             contentDescription = iconContentDescription,
+            colorFilter = ColorFilter.tint(labelColor)
         )
     }
 }

diff --git a/app/src/main/kotlin/com/wire/android/ui/settings/devices/SelfDevicesViewModel.kt b/app/src/main/kotlin/com/wire/android/ui/settings/devices/SelfDevicesViewModel.kt
@@ -30,6 +30,7 @@ import com.wire.kalium.logic.data.user.UserId
 import com.wire.kalium.logic.feature.client.FetchSelfClientsFromRemoteUseCase
 import com.wire.kalium.logic.feature.client.ObserveClientsByUserIdUseCase
 import com.wire.kalium.logic.feature.client.ObserveCurrentClientIdUseCase
+import com.wire.kalium.logic.feature.e2ei.usecase.GetUserE2eiCertificatesUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.firstOrNull
 import kotlinx.coroutines.launch
@@ -40,7 +41,8 @@ class SelfDevicesViewModel @Inject constructor(
     @CurrentAccount val currentAccountId: UserId,
     private val fetchSelfClientsFromRemote: FetchSelfClientsFromRemoteUseCase,
     private val observeClientList: ObserveClientsByUserIdUseCase,
-    private val currentClientIdUseCase: ObserveCurrentClientIdUseCase
+    private val currentClientIdUseCase: ObserveCurrentClientIdUseCase,
+    private val getUserE2eiCertificates: GetUserE2eiCertificatesUseCase,
 ) : ViewModel() {
 
     var state: SelfDevicesState by mutableStateOf(
@@ -61,13 +63,14 @@ class SelfDevicesViewModel @Inject constructor(
                     is ObserveClientsByUserIdUseCase.Result.Failure -> state.copy(isLoadingClientsList = false)
                     is ObserveClientsByUserIdUseCase.Result.Success -> {
                         val currentClientId = currentClientIdUseCase().firstOrNull()
+                        val e2eiCertificates = getUserE2eiCertificates(currentAccountId)
                         state.copy(
                             isLoadingClientsList = false,
                             currentDevice = result.clients
-                                .firstOrNull { it.id == currentClientId }?.let { Device(it) },
+                                .firstOrNull { it.id == currentClientId }?.let { Device(it, e2eiCertificates[it.id.value]?.status) },
                             deviceList = result.clients
                                 .filter { it.id != currentClientId }
-                                .map { Device(it) }
+                                .map { Device(it, e2eiCertificates[it.id.value]?.status) }
                         )
                     }
                 }

diff --git a/app/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt b/app/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt
@@ -344,7 +344,7 @@ private val DarkWireColorScheme = WireColorScheme(
     recordAudioStopColor = WireColorPalette.LightRed500,
     scrollToBottomButtonColor = WireColorPalette.Gray60,
     onScrollToBottomButtonColor = Color.Black,
-    validE2eiStatusColor = WireColorPalette.DarkGreen550,
+    validE2eiStatusColor = WireColorPalette.DarkGreen500,
     mlsVerificationTextColor = WireColorPalette.DarkGreen700,
     selectedMessageHighlightColor = WireColorPalette.DarkBlue50
 )