fix(RC): menu options UI bugs with dark mode [AR-3386] (#1783)

* fix: several ui issues with dark mode * fix detekt issues
wireapp · May 11, 2023 · cc44de7 · cc44de7
1 parent a43fea7
commit cc44de7
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 183 deletions.
diff --git a/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/MenuBottomSheetItem.kt b/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/MenuBottomSheetItem.kt
@@ -29,12 +29,15 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -57,24 +60,27 @@ fun MenuBottomSheetItem(
     icon: @Composable () -> Unit,
     action: (@Composable () -> Unit)? = null,
     clickBlockParams: ClickBlockParams = ClickBlockParams(),
+    itemProvidedColor: Color = MaterialTheme.colorScheme.secondary,
     onItemClick: () -> Unit = {}
 ) {
-    val clickable = remember(onItemClick, clickBlockParams) { Clickable(clickBlockParams = clickBlockParams, onClick = onItemClick) }
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-        modifier = Modifier
-            .defaultMinSize(minHeight = MaterialTheme.wireDimensions.conversationBottomSheetItemHeight)
-            .fillMaxWidth()
-            .clickable(clickable)
-            .padding(MaterialTheme.wireDimensions.conversationBottomSheetItemPadding)
-    ) {
-        icon()
-        Spacer(modifier = Modifier.width(12.dp))
-        MenuItemTitle(title = title)
-        if (action != null) {
-            Spacer(modifier = Modifier.width(MaterialTheme.wireDimensions.spacing12x))
-            Spacer(modifier = Modifier.weight(1f)) // combining both in one modifier doesn't work
-            action()
+    CompositionLocalProvider(LocalContentColor provides itemProvidedColor) {
+        val clickable = remember(onItemClick, clickBlockParams) { Clickable(clickBlockParams = clickBlockParams, onClick = onItemClick) }
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .defaultMinSize(minHeight = MaterialTheme.wireDimensions.conversationBottomSheetItemHeight)
+                .fillMaxWidth()
+                .clickable(clickable)
+                .padding(MaterialTheme.wireDimensions.conversationBottomSheetItemPadding)
+        ) {
+            icon()
+            Spacer(modifier = Modifier.width(12.dp))
+            MenuItemTitle(title = title)
+            if (action != null) {
+                Spacer(modifier = Modifier.width(MaterialTheme.wireDimensions.spacing12x))
+                Spacer(modifier = Modifier.weight(1f)) // combining both in one modifier doesn't work
+                action()
+            }
         }
     }
 }

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/ModalSheetHeaderItem.kt b/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/ModalSheetHeaderItem.kt
@@ -25,9 +25,11 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
@@ -40,30 +42,33 @@ fun ModalSheetHeaderItem(header: MenuModalSheetHeader = MenuModalSheetHeader.Gon
         MenuModalSheetHeader.Gone -> {
             Spacer(modifier = Modifier.height(dimensions().modalBottomSheetNoHeaderVerticalPadding))
         }
+
         is MenuModalSheetHeader.Visible -> {
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.padding(
-                    start = dimensions().modalBottomSheetHeaderHorizontalPadding,
-                    end = dimensions().modalBottomSheetHeaderHorizontalPadding,
-                    top = dimensions().modalBottomSheetHeaderVerticalPadding,
-                    bottom = header.customBottomPadding ?: dimensions().modalBottomSheetHeaderVerticalPadding
-                )
-            ) {
-                header.leadingIcon()
-                Spacer(modifier = Modifier.width(dimensions().spacing8x))
-                Text(
-                    text = header.title,
-                    style = MaterialTheme.wireTypography.title02
-                )
+            CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.secondary) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.padding(
+                        start = dimensions().modalBottomSheetHeaderHorizontalPadding,
+                        end = dimensions().modalBottomSheetHeaderHorizontalPadding,
+                        top = dimensions().modalBottomSheetHeaderVerticalPadding,
+                        bottom = header.customBottomPadding ?: dimensions().modalBottomSheetHeaderVerticalPadding
+                    )
+                ) {
+                    header.leadingIcon()
+                    Spacer(modifier = Modifier.width(dimensions().spacing8x))
+                    Text(
+                        text = header.title,
+                        style = MaterialTheme.wireTypography.title02
+                    )
+                }
             }
         }
     }
 }
 
 sealed class MenuModalSheetHeader {
 
-    data class Visible (
+    data class Visible(
         val title: String,
         val leadingIcon: @Composable () -> Unit = {},
         val customBottomPadding: Dp? = null

diff --git a/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/conversation/HomeSheetContent.kt b/app/src/main/kotlin/com/wire/android/ui/common/bottomsheet/conversation/HomeSheetContent.kt
@@ -24,10 +24,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Text
-import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -164,102 +162,98 @@ internal fun ConversationMainSheetContent(
                                 conversationSheetContent.conversationId,
                                 conversationSheetContent.title,
                                 conversationSheetContent.conversationTypeDetail
-                        )
+                            )
                         )
                     }
                 )
             }
             if (conversationSheetContent.canBlockUser()) {
                 add {
-                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
-                        MenuBottomSheetItem(
-                            icon = {
-                                MenuItemIcon(
-                                    id = R.drawable.ic_block,
-                                    contentDescription = stringResource(R.string.content_description_block_the_user),
-                                )
-                            },
-                            title = stringResource(R.string.label_block),
-                            clickBlockParams = ClickBlockParams(blockWhenSyncing = true, blockWhenConnecting = true),
-                            onItemClick = {
-                                blockUserClick(
-                                    BlockUserDialogState(
-                                        userName = conversationSheetContent.title,
-                                        userId = (conversationSheetContent.conversationTypeDetail as ConversationTypeDetail.Private).userId
-                                    )
+                    MenuBottomSheetItem(
+                        icon = {
+                            MenuItemIcon(
+                                id = R.drawable.ic_block,
+                                contentDescription = stringResource(R.string.content_description_block_the_user),
+                            )
+                        },
+                        itemProvidedColor = MaterialTheme.colorScheme.error,
+                        title = stringResource(R.string.label_block),
+                        clickBlockParams = ClickBlockParams(blockWhenSyncing = true, blockWhenConnecting = true),
+                        onItemClick = {
+                            blockUserClick(
+                                BlockUserDialogState(
+                                    userName = conversationSheetContent.title,
+                                    userId = (conversationSheetContent.conversationTypeDetail as ConversationTypeDetail.Private).userId
                                 )
-                            }
-                        )
-                    }
+                            )
+                        }
+                    )
                 }
             }
             if (conversationSheetContent.canUnblockUser()) {
                 add {
-                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onBackground) {
-                        MenuBottomSheetItem(
-                            icon = {
-                                MenuItemIcon(
-                                    id = R.drawable.ic_block,
-                                    contentDescription = stringResource(R.string.content_description_unblock_the_user)
-                                )
-                            },
-                            title = stringResource(R.string.label_unblock),
-                            onItemClick = {
-                                unblockUserClick(
-                                    UnblockUserDialogState(
-                                        userName = conversationSheetContent.title,
-                                        userId = (conversationSheetContent.conversationTypeDetail as ConversationTypeDetail.Private).userId
-                                    )
+                    MenuBottomSheetItem(
+                        icon = {
+                            MenuItemIcon(
+                                id = R.drawable.ic_block,
+                                contentDescription = stringResource(R.string.content_description_unblock_the_user)
+                            )
+                        },
+                        itemProvidedColor = MaterialTheme.colorScheme.onBackground,
+                        title = stringResource(R.string.label_unblock),
+                        onItemClick = {
+                            unblockUserClick(
+                                UnblockUserDialogState(
+                                    userName = conversationSheetContent.title,
+                                    userId = (conversationSheetContent.conversationTypeDetail as ConversationTypeDetail.Private).userId
                                 )
-                            }
-                        )
-                    }
+                            )
+                        }
+                    )
                 }
             }
             if (conversationSheetContent.canLeaveTheGroup()) {
                 add {
-                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
-                        MenuBottomSheetItem(
-                            icon = {
-                                MenuItemIcon(
-                                    id = R.drawable.ic_leave,
-                                    contentDescription = stringResource(R.string.content_description_leave_the_group),
-                                )
-                            },
-                            title = stringResource(R.string.label_leave_group),
-                            onItemClick = {
-                                leaveGroup(
-                                    GroupDialogState(
-                                        conversationSheetContent.conversationId,
-                                        conversationSheetContent.title
-                                    )
+                    MenuBottomSheetItem(
+                        icon = {
+                            MenuItemIcon(
+                                id = R.drawable.ic_leave,
+                                contentDescription = stringResource(R.string.content_description_leave_the_group),
+                            )
+                        },
+                        itemProvidedColor = MaterialTheme.colorScheme.error,
+                        title = stringResource(R.string.label_leave_group),
+                        onItemClick = {
+                            leaveGroup(
+                                GroupDialogState(
+                                    conversationSheetContent.conversationId,
+                                    conversationSheetContent.title
                                 )
-                            }
-                        )
-                    }
+                            )
+                        }
+                    )
                 }
             }
             if (conversationSheetContent.canDeleteGroup()) {
                 add {
-                    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.error) {
-                        MenuBottomSheetItem(
-                            icon = {
-                                MenuItemIcon(
-                                    id = R.drawable.ic_remove,
-                                    contentDescription = stringResource(R.string.content_description_delete_the_group),
-                                )
-                            },
-                            title = stringResource(R.string.label_delete_group),
-                            onItemClick = {
-                                deleteGroup(
-                                    GroupDialogState(
-                                        conversationSheetContent.conversationId,
-                                        conversationSheetContent.title
-                                    )
+                    MenuBottomSheetItem(
+                        icon = {
+                            MenuItemIcon(
+                                id = R.drawable.ic_remove,
+                                contentDescription = stringResource(R.string.content_description_delete_the_group),
+                            )
+                        },
+                        title = stringResource(R.string.label_delete_group),
+                        itemProvidedColor = MaterialTheme.colorScheme.error,
+                        onItemClick = {
+                            deleteGroup(
+                                GroupDialogState(
+                                    conversationSheetContent.conversationId,
+                                    conversationSheetContent.title
                                 )
-                            }
-                        )
-                    }
+                            )
+                        }
+                    )
                 }
             }
         }

diff --git a/app/src/main/kotlin/com/wire/android/ui/edit/DownloadAssetExternallyOption.kt b/app/src/main/kotlin/com/wire/android/ui/edit/DownloadAssetExternallyOption.kt
@@ -0,0 +1,38 @@
+/*
+ * Wire
+ * Copyright (C) 2023 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.ui.edit
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import com.wire.android.R
+import com.wire.android.ui.common.bottomsheet.MenuBottomSheetItem
+import com.wire.android.ui.common.bottomsheet.MenuItemIcon
+
+@Composable
+fun DownloadAssetExternallyOption(onDownloadClick: () -> Unit) =
+    MenuBottomSheetItem(
+        icon = {
+            MenuItemIcon(
+                id = R.drawable.ic_download,
+                contentDescription = stringResource(R.string.content_description_download_icon),
+            )
+        },
+        title = stringResource(R.string.label_download),
+        onItemClick = onDownloadClick
+    )