chore: Elm theme Improvements on Discussion Module (#59)

chore: Elm theme Improvements on Discussion Module - Update Text, icons colors and button according to elm theme fix: LEARNER-10080
edx · Oct 10, 2024 · 0ad28cc · 0ad28cc
1 parent 831e021
commit 0ad28cc
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 82 deletions.
diff --git a/.../src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt b/.../src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt
@@ -24,8 +24,8 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
@@ -190,17 +190,7 @@ private fun DiscussionCommentsScreen(
         mutableStateOf("")
     }
 
-    val sendButtonColor = if (responseValue.isEmpty()) {
-        MaterialTheme.appColors.textFieldBorder
-    } else {
-        MaterialTheme.appColors.primaryButtonBackground
-    }
-
-    val iconButtonColor = if (responseValue.isEmpty()) {
-        MaterialTheme.appColors.textFieldBackgroundVariant
-    } else {
-        Color.White
-    }
+    val sendButtonAlpha = if (responseValue.isEmpty()) 0.3f else 1f
 
     Scaffold(
         scaffoldState = scaffoldState,
@@ -404,7 +394,8 @@ private fun DiscussionCommentsScreen(
                                             modifier = Modifier
                                                 .size(48.dp)
                                                 .clip(CircleShape)
-                                                .background(sendButtonColor)
+                                                .alpha(sendButtonAlpha)
+                                                .background(MaterialTheme.appColors.primaryButtonBackground)
                                                 .clickable {
                                                     keyboardController?.hide()
                                                     focusManager.clearFocus()
@@ -419,7 +410,7 @@ private fun DiscussionCommentsScreen(
                                                 modifier = Modifier.padding(7.dp),
                                                 painter = painterResource(id = R.drawable.discussion_ic_send),
                                                 contentDescription = stringResource(id = R.string.discussion_add_response),
-                                                tint = iconButtonColor
+                                                tint = MaterialTheme.appColors.primaryButtonText
                                             )
                                         }
                                     }

diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt b/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt
@@ -29,6 +29,8 @@ import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.HelpOutline
 import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.material.icons.outlined.ThumbUp
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -77,15 +79,10 @@ fun ThreadMainItem(
         CoreR.drawable.core_ic_default_profile_picture
     }
 
-    val votePainter = if (thread.voted) {
-        painterResource(id = R.drawable.discussion_ic_like_success)
+    val voteIcon = if (thread.voted) {
+        Icons.Filled.ThumbUp
     } else {
-        painterResource(id = R.drawable.discussion_ic_like)
-    }
-    val voteColor = if (thread.voted) {
-        MaterialTheme.appColors.primary
-    } else {
-        MaterialTheme.appColors.textPrimaryVariant
+        Icons.Outlined.ThumbUp
     }
     val reportText = if (thread.abuseFlagged) {
         stringResource(id = R.string.discussion_unreport)
@@ -95,7 +92,7 @@ fun ThreadMainItem(
     val reportColor = if (thread.abuseFlagged) {
         MaterialTheme.appColors.error
     } else {
-        MaterialTheme.appColors.textPrimaryVariant
+        MaterialTheme.appColors.textPrimary
     }
 
     val context = LocalContext.current
@@ -149,7 +146,7 @@ fun ThreadMainItem(
                 text = stringResource(id = R.string.discussion_follow),
                 painter = painterResource(if (thread.following) R.drawable.discussion_star_filled else R.drawable.discussion_star),
                 textStyle = MaterialTheme.appTypography.labelLarge,
-                color = MaterialTheme.appColors.textPrimaryVariant,
+                color = MaterialTheme.appColors.textPrimary,
                 onClick = {
                     onClick(DiscussionCommentsFragment.ACTION_FOLLOW_THREAD, !thread.following)
                 })
@@ -173,8 +170,8 @@ fun ThreadMainItem(
                     thread.voteCount,
                     thread.voteCount
                 ),
-                painter = votePainter,
-                color = voteColor,
+                icon = voteIcon,
+                color = MaterialTheme.appColors.textPrimary,
                 textStyle = MaterialTheme.appTypography.labelLarge,
                 onClick = {
                     onClick(DiscussionCommentsFragment.ACTION_UPVOTE_THREAD, !thread.voted)
@@ -222,17 +219,12 @@ fun CommentItem(
     val reportColor = if (comment.abuseFlagged) {
         MaterialTheme.appColors.error
     } else {
-        MaterialTheme.appColors.textPrimaryVariant
-    }
-    val votePainter = if (comment.voted) {
-        painterResource(id = R.drawable.discussion_ic_like_success)
-    } else {
-        painterResource(id = R.drawable.discussion_ic_like)
+        MaterialTheme.appColors.textPrimary
     }
-    val voteColor = if (comment.voted) {
-        MaterialTheme.appColors.textAccent
+    val voteIcon = if (comment.voted) {
+        Icons.Filled.ThumbUp
     } else {
-        MaterialTheme.appColors.textPrimaryVariant
+        Icons.Outlined.ThumbUp
     }
 
     val context = LocalContext.current
@@ -327,8 +319,8 @@ fun CommentItem(
                         comment.voteCount,
                         comment.voteCount
                     ),
-                    painter = votePainter,
-                    color = voteColor,
+                    icon = voteIcon,
+                    color = MaterialTheme.appColors.textPrimary,
                     textStyle = MaterialTheme.appTypography.labelLarge,
                     onClick = {
                         onClick(
@@ -345,7 +337,7 @@ fun CommentItem(
                         comment.childCount
                     ),
                     painter = painterResource(id = R.drawable.discussion_ic_comment),
-                    color = MaterialTheme.appColors.textPrimaryVariant,
+                    color = MaterialTheme.appColors.textPrimary,
                     textStyle = MaterialTheme.appTypography.labelLarge,
                     onClick = {
                         onAddCommentClick()
@@ -382,18 +374,13 @@ fun CommentMainItem(
     val reportColor = if (comment.abuseFlagged) {
         MaterialTheme.appColors.error
     } else {
-        MaterialTheme.appColors.textPrimaryVariant
+        MaterialTheme.appColors.textPrimary
     }
 
-    val votePainter = if (comment.voted) {
-        painterResource(id = R.drawable.discussion_ic_like_success)
-    } else {
-        painterResource(id = R.drawable.discussion_ic_like)
-    }
-    val voteColor = if (comment.voted) {
-        MaterialTheme.appColors.textAccent
+    val voteIcon = if (comment.voted) {
+        Icons.Filled.ThumbUp
     } else {
-        MaterialTheme.appColors.textPrimaryVariant
+        Icons.Outlined.ThumbUp
     }
 
     val context = LocalContext.current
@@ -467,8 +454,8 @@ fun CommentMainItem(
                         comment.voteCount,
                         comment.voteCount
                     ),
-                    painter = votePainter,
-                    color = voteColor,
+                    icon = voteIcon,
+                    color = MaterialTheme.appColors.textPrimary,
                     textStyle = MaterialTheme.appTypography.labelLarge,
                     onClick = {
                         onClick(
@@ -711,13 +698,13 @@ private fun ThreadMainItemPreview() {
 
 private val mockComment = DiscussionComment(
     "",
+    "ABC",
     "",
     "",
     "",
     "",
     "",
-    "",
-    TextConverter.textToLinkedImageText(""),
+    TextConverter.textToLinkedImageText("mock Comment"),
     false,
     true,
     20,
@@ -737,7 +724,7 @@ private val mockComment = DiscussionComment(
 
 private val mockThread = org.openedx.discussion.domain.model.Thread(
     "",
-    "",
+    "ABC",
     "",
     "",
     "",

diff --git a/discussion/src/main/res/drawable/discussion_ic_like.xml b/discussion/src/main/res/drawable/discussion_ic_like.xml
diff --git a/discussion/src/main/res/drawable/discussion_ic_like_success.xml b/discussion/src/main/res/drawable/discussion_ic_like_success.xml