Update vocab practice buttons ui

syt0r · Jul 25, 2024 · 6c71d28 · 6c71d28
1 parent 2746744
commit 6c71d28
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/...in/ua/syt0r/kanji/presentation/screen/main/screen/practice_vocab/VocabPracticeScreenUI.kt b/...in/ua/syt0r/kanji/presentation/screen/main/screen/practice_vocab/VocabPracticeScreenUI.kt
@@ -443,42 +443,64 @@ fun VocabPracticeAnswersRow(
         Modifier
     }
 
+    val theme = LocalThemeManager.current
+    val rowThemeModifier = when {
+        theme.isDarkTheme -> Modifier.clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surface)
+            .padding(4.dp)
+
+        else -> Modifier.shadow(2.dp, MaterialTheme.shapes.medium)
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surface)
+    }
+
+    val buttonThemeModifier = when {
+        theme.isDarkTheme -> Modifier.clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceVariant)
+
+        else -> Modifier
+    }
+
     Row(
         modifier = modifier.horizontalScroll(rememberScrollState())
             .then(contentModifier)
-            .clip(MaterialTheme.shapes.medium)
+            .then(rowThemeModifier)
             .then(keyboardControlsModifier)
             .width(IntrinsicSize.Max)
             .height(IntrinsicSize.Max),
-        horizontalArrangement = Arrangement.spacedBy(2.dp)
+        horizontalArrangement = Arrangement.spacedBy(
+            space = if (theme.isDarkTheme) 4.dp else 2.dp
+        )
     ) {
         AnswerButton(
             srsCard = answers.again,
             label = resolveString { vocabPractice.againButton },
             onClick = onClick,
             color = MaterialTheme.colorScheme.error,
-            modifier = Modifier.padding(start = 2.dp)
+            outerModifier = buttonThemeModifier,
+            innerModifier = Modifier.padding(start = 2.dp)
         )
         AnswerButton(
             srsCard = answers.hard,
             label = resolveString { vocabPractice.hardButton },
             onClick = onClick,
             color = MaterialTheme.extraColorScheme.due,
-            modifier = Modifier
+            outerModifier = buttonThemeModifier
         )
         AnswerButton(
             srsCard = answers.good,
             label = resolveString { vocabPractice.goodButton },
             onClick = onClick,
             color = MaterialTheme.extraColorScheme.success,
-            modifier = Modifier
+            outerModifier = buttonThemeModifier
         )
         AnswerButton(
             srsCard = answers.easy,
             label = resolveString { vocabPractice.easyButton },
             onClick = onClick,
             color = MaterialTheme.extraColorScheme.new,
-            modifier = Modifier.padding(end = 2.dp)
+            outerModifier = buttonThemeModifier,
+            innerModifier = Modifier.padding(end = 2.dp)
         )
     }
 
@@ -505,20 +527,13 @@ fun ExpandableVocabPracticeAnswersRow(
 
         val offset = animateFloatAsState(if (data.showButton) 0f else 1f)
 
-        val themeModifier = when (LocalThemeManager.current.isDarkTheme) {
-            true -> Modifier
-            false -> Modifier.shadow(10.dp, MaterialTheme.shapes.medium)
-        }
-
         VocabPracticeAnswersRow(
             answers = data.answers,
             onClick = onClick,
             enableKeyboardControls = data.showButton,
             modifier = Modifier.fillMaxSize()
                 .graphicsLayer { translationY = size.height * offset.value },
             contentModifier = Modifier.padding(20.dp)
-                .then(themeModifier)
-                .background(MaterialTheme.colorScheme.surface)
         )
 
     }
@@ -531,15 +546,17 @@ private fun RowScope.AnswerButton(
     label: String,
     color: Color,
     onClick: (SrsCard) -> Unit,
-    modifier: Modifier = Modifier
+    outerModifier: Modifier,
+    innerModifier: Modifier = Modifier
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(0.dp),
         modifier = Modifier.weight(1f)
             .fillMaxHeight()
+            .then(outerModifier)
             .clickable(onClick = { onClick(srsCard) })
-            .then(modifier)
+            .then(innerModifier)
             .padding(horizontal = 16.dp, vertical = 8.dp)
     ) {
         Text(

diff --git a/...syt0r/kanji/presentation/screen/main/screen/practice_vocab/ui/VocabPracticeFlashcardUI.kt b/...syt0r/kanji/presentation/screen/main/screen/practice_vocab/ui/VocabPracticeFlashcardUI.kt
@@ -63,11 +63,6 @@ fun VocabPracticeFlashcardUI(
         modifier = Modifier.fillMaxSize(),
         bottomOverlayContent = {
 
-            val themeModifier = when (LocalThemeManager.current.isDarkTheme) {
-                true -> Modifier
-                false -> Modifier.shadow(10.dp, MaterialTheme.shapes.medium)
-            }
-
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -80,14 +75,24 @@ fun VocabPracticeFlashcardUI(
                 val hiddenButton = @Composable { isVisible: Boolean ->
                     val focusRequester = remember { FocusRequester() }
                     LaunchedEffect(Unit) { focusRequester.requestFocus() }
+
+                    val themeModifier = when (LocalThemeManager.current.isDarkTheme) {
+                        true -> Modifier.padding(4.dp)
+                            .clip(MaterialTheme.shapes.medium)
+                            .background(MaterialTheme.colorScheme.surfaceVariant)
+
+                        false -> Modifier.shadow(2.dp, MaterialTheme.shapes.medium)
+                            .clip(MaterialTheme.shapes.medium)
+                            .background(MaterialTheme.colorScheme.surface)
+
+                    }
+
                     Text(
                         text = resolveString { vocabPractice.flashcardRevealButton },
                         modifier = Modifier.fillMaxSize()
                             .graphicsLayer { if (!isVisible) alpha = 0f }
                             .padding(horizontal = 20.dp)
                             .then(themeModifier)
-                            .clip(MaterialTheme.shapes.medium)
-                            .background(MaterialTheme.colorScheme.surface)
                             .focusable()
                             .focusRequester(focusRequester)
                             .onKeyEvent {
@@ -105,11 +110,8 @@ fun VocabPracticeFlashcardUI(
                     VocabPracticeAnswersRow(
                         answers = answers,
                         onClick = { if (isVisible) onNextClick(it) },
-                        contentModifier = Modifier
-                            .graphicsLayer { if (!isVisible) alpha = 0f }
-                            .padding(horizontal = 20.dp)
-                            .then(themeModifier)
-                            .background(MaterialTheme.colorScheme.surface)
+                        modifier = Modifier.graphicsLayer { if (!isVisible) alpha = 0f },
+                        contentModifier = Modifier.padding(horizontal = 20.dp)
                     )
                 }