Merge pull request #180 from aarash709/ui/settings-theme

FIX Settings theme colors
aarash709 · Sep 13, 2024 · f780736 · f780736
2 parents 5816930 + 4e6a51c
commit f780736
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 47 deletions.
diff --git a/feature/playlist/src/main/kotlin/com/recorder/feature/playlist/PlaylistPage.kt b/feature/playlist/src/main/kotlin/com/recorder/feature/playlist/PlaylistPage.kt
@@ -12,10 +12,8 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
@@ -25,6 +23,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Circle
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FabPosition
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -251,6 +250,24 @@ fun PlaylistContent(
                     onBackPressed = { onBackPressed() },
                 )
             },
+            floatingActionButton = {
+                Icon(
+                    imageVector = Icons.Filled.Circle,
+                    modifier = Modifier
+                        .padding(bottom = 40.dp)
+                        .clip(CircleShape)
+                        .border(
+                            width = 1.dp,
+                            color = Color.LightGray,
+                            shape = CircleShape
+                        )
+                        .size(60.dp)
+                        .clickable { if (!isPlaying) onNavigateToRecorder() },
+                    tint = Color.Red.copy(green = 0.2f),
+                    contentDescription = "Recorder icon"
+                )
+            },
+            floatingActionButtonPosition = FabPosition.Center,
             bottomBar = {
                 if (isInSelectionMode)
                     PlaylistBottomBar(
@@ -264,31 +281,6 @@ fun PlaylistContent(
                             selectedVoices = emptySet()
                         }
                     )
-                else
-                    BottomAppBar(
-                        actions = {
-                            Row(
-                                modifier = Modifier.fillMaxWidth(),
-                                horizontalArrangement = Arrangement.Center
-                            ) {
-                                Icon(
-                                    imageVector = Icons.Filled.Circle,
-                                    modifier = Modifier
-                                        .clip(CircleShape)
-                                        .border(
-                                            width = 1.dp,
-                                            color = Color.LightGray,
-                                            shape = CircleShape
-                                        )
-                                        .clickable { if (!isPlaying) onNavigateToRecorder() }
-                                        .size(60.dp),
-                                    tint = Color.Red.copy(green = 0.2f),
-                                    contentDescription = "Recorder icon"
-                                )
-                            }
-                        },
-                        tonalElevation = 0.dp,
-                    )
             }
         ) { paddingValues ->
             Column(

diff --git a/feature/playlist/src/main/kotlin/com/recorder/feature/playlist/TopBar.kt b/feature/playlist/src/main/kotlin/com/recorder/feature/playlist/TopBar.kt
@@ -30,6 +30,7 @@ fun PlaylistTopBar(
     onNavigateToSettings: () -> Unit,
     onBackPressed: () -> Unit,
 ) {
+    val backgroundColor= MaterialTheme.colorScheme.background
     MediumTopAppBar(
         title = {
             AnimatedContent(
@@ -55,7 +56,7 @@ fun PlaylistTopBar(
                 IconButton(onClick = { onSelectedVoiceUpdate() }) {
                     Icon(
                         imageVector = Icons.Outlined.Close,
-                        tint = MaterialTheme.colorScheme.onBackground,
+                        tint = backgroundColor,
                         contentDescription = "Clear selection Button"
                     )
                 }
@@ -82,7 +83,8 @@ fun PlaylistTopBar(
         },
         colors = TopAppBarDefaults
             .mediumTopAppBarColors(
-                containerColor = MaterialTheme.colorScheme.background
+                containerColor = backgroundColor,
+                scrolledContainerColor = backgroundColor
             ),
         scrollBehavior = scrollBehavior
     )

diff --git a/feature/settings/src/main/kotlin/com/recorder/feature/settings/Settings.kt b/feature/settings/src/main/kotlin/com/recorder/feature/settings/Settings.kt
@@ -1,21 +1,26 @@
 package com.recorder.feature.settings
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MediumTopAppBar
-import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewLightDark
@@ -69,10 +74,11 @@ fun SettingsContent(
         }
         mutableStateOf(value)
     }
-    Surface(
-        modifier = Modifier
+    val backgroundColor = MaterialTheme.colorScheme.background
+    Box(
+        modifier = modifier
             .fillMaxSize()
-                then modifier
+            .background(color = backgroundColor),
     ) {
         Column {
             MediumTopAppBar(
@@ -85,11 +91,17 @@ fun SettingsContent(
                         )
                     }
                 },
-                scrollBehavior = scrollBehavior
+                scrollBehavior = scrollBehavior,
+                colors = TopAppBarDefaults.mediumTopAppBarColors(
+                    containerColor = backgroundColor,
+                    scrolledContainerColor = backgroundColor
+                )
             )
             Column(
                 modifier = Modifier
                     .fillMaxSize()
+                    .nestedScroll(scrollBehavior.nestedScrollConnection)
+                    .verticalScroll(rememberScrollState())
             ) {
                 SettingsItemWithSwitch(
                     title = stringResource(id = R.string.earpiece_mode),

diff --git a/feature/settings/src/main/kotlin/com/recorder/feature/settings/SettingsItem.kt b/feature/settings/src/main/kotlin/com/recorder/feature/settings/SettingsItem.kt
@@ -2,6 +2,7 @@ package com.recorder.feature.settings
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -13,10 +14,12 @@ import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.UnfoldMore
 import androidx.compose.material3.BasicAlertDialog
+import androidx.compose.material3.Card
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
@@ -39,11 +42,13 @@ internal fun SettingsItemWithSwitch(
     isChecked: Boolean,
     onCheckChanged: (Boolean) -> Unit,
 ) {
-    Surface(modifier = Modifier
-        .fillMaxWidth()
-        .requiredHeight(80.dp)
-        .clickable { onCheckChanged(!isChecked) }
-            then modifier) {
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .requiredHeight(80.dp)
+            .clickable { onCheckChanged(!isChecked) },
+        color = MaterialTheme.colorScheme.background
+    ) {
         Row(
             Modifier
                 .padding(16.dp),
@@ -78,10 +83,12 @@ internal fun SettingsItemWithOptions(
     var shouldShowOptions by remember {
         mutableStateOf(false)
     }
-    Surface(modifier = Modifier
-        .fillMaxWidth()
-        .clickable { shouldShowOptions = !shouldShowOptions }
-            then modifier) {
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable { shouldShowOptions = !shouldShowOptions },
+        color = MaterialTheme.colorScheme.background
+    ) {
         Row(
             Modifier
                 .padding(16.dp),
@@ -127,10 +134,15 @@ internal fun SettingsItemWithAction(
     var isClicked by remember {
         mutableStateOf(false)
     }
-    Surface(modifier = Modifier
-        .fillMaxWidth()
-        .clickable { isClicked = !isClicked }
-            then modifier) {
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable {
+                isClicked = !isClicked
+                action()
+            },
+        color = MaterialTheme.colorScheme.background
+    ) {
         Row(
             Modifier
                 .padding(16.dp),