Improve navigation drawer UI (#118)

Changes: * Redesign navigation drawer. * Improved search bar design. * Improved UI of transaction type selection in edit-transaction sheet. * Enabled edge-to-edge mode and removed deprecated systemui-controller lib. --------- Signed-off-by: starry-shivam <[email protected]>
Pool-Of-Tears · May 7, 2024 · 19b309d · 19b309d
1 parent 7b2b3f4
commit 19b309d
Show file tree

Hide file tree

Showing 30 changed files with 577 additions and 371 deletions.
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
diff --git a/app/build.gradle b/app/build.gradle
@@ -17,7 +17,7 @@ android {
         minSdk 24
         targetSdk 34
         versionCode 350
-        versionName "3.5.0"
+        versionName "3.6.0-dev"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
@@ -94,8 +94,6 @@ dependencies {
     implementation "androidx.compose.animation:animation"
     implementation "androidx.compose.runtime:runtime-livedata"
     implementation "androidx.compose.material3:material3"
-    // Accompanist compose.
-    implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"
     // Material theme for main activity.
     implementation 'com.google.android.material:material:1.11.0'
     // Android 12+ splash API.

diff --git a/app/src/main/java/com/starry/greenstash/MainActivity.kt b/app/src/main/java/com/starry/greenstash/MainActivity.kt
@@ -27,6 +27,7 @@ package com.starry.greenstash
 
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.biometric.BiometricManager
 import androidx.biometric.BiometricPrompt
@@ -43,11 +44,10 @@ import androidx.core.content.ContextCompat
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.lifecycle.ViewModelProvider
 import androidx.navigation.compose.rememberNavController
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.starry.greenstash.ui.navigation.NavGraph
 import com.starry.greenstash.ui.screens.other.AppLockedScreen
 import com.starry.greenstash.ui.screens.settings.SettingsViewModel
-import com.starry.greenstash.ui.screens.settings.ThemeMode
+import com.starry.greenstash.ui.theme.AdjustEdgeToEdge
 import com.starry.greenstash.ui.theme.GreenStashTheme
 import com.starry.greenstash.utils.Utils
 import com.starry.greenstash.utils.toToast
@@ -75,6 +75,8 @@ class MainActivity : AppCompatActivity() {
             mainViewModel.isLoading.value
         }
 
+        enableEdgeToEdge() // enable edge to edge for the activity.
+
         // refresh reminders
         mainViewModel.refreshReminders()
 
@@ -137,15 +139,10 @@ class MainActivity : AppCompatActivity() {
     private fun setAppContents(showAppContents: State<Boolean>) {
         setContent {
             GreenStashTheme(settingsViewModel = settingsViewModel) {
-                val systemUiController = rememberSystemUiController()
-                systemUiController.setNavigationBarColor(
-                    color = MaterialTheme.colorScheme.background,
-                    darkIcons = settingsViewModel.getCurrentTheme() == ThemeMode.Light
-                )
-
-                systemUiController.setStatusBarColor(
-                    color = MaterialTheme.colorScheme.surface,
-                    darkIcons = settingsViewModel.getCurrentTheme() == ThemeMode.Light
+                // fix status bar icon color in dark mode.
+                AdjustEdgeToEdge(
+                    activity = this,
+                    themeState = settingsViewModel.getCurrentTheme()
                 )
 
                 Surface(

diff --git a/app/src/main/java/com/starry/greenstash/ui/screens/home/composables/HomeAppBars.kt b/app/src/main/java/com/starry/greenstash/ui/screens/home/composables/HomeAppBars.kt
@@ -27,9 +27,12 @@ package com.starry.greenstash.ui.screens.home.composables
 
 import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -42,9 +45,9 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -161,7 +164,10 @@ private fun SearchAppBar(
     onSearchClicked: (String) -> Unit,
 ) {
     Surface(
-        modifier = Modifier.fillMaxWidth(), color = MaterialTheme.colorScheme.surface
+        modifier = Modifier
+            .fillMaxWidth()
+            .windowInsetsPadding(insets = WindowInsets.statusBars),
+        color = MaterialTheme.colorScheme.surface
     ) {
         OutlinedTextField(
             modifier = Modifier
@@ -182,7 +188,7 @@ private fun SearchAppBar(
                     Icon(
                         imageVector = Icons.Default.Search,
                         contentDescription = null,
-                        tint = MaterialTheme.colorScheme.onSurface
+                        tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                     )
                 }
             },
@@ -197,7 +203,7 @@ private fun SearchAppBar(
                     Icon(
                         imageVector = Icons.Filled.Close,
                         contentDescription = null,
-                        tint = MaterialTheme.colorScheme.onSurface
+                        tint = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f)
                     )
                 }
             },
@@ -207,11 +213,13 @@ private fun SearchAppBar(
             keyboardActions = KeyboardActions(onSearch = {
                 onSearchClicked(text)
             }),
-            colors = TextFieldDefaults.colors(
-                focusedContainerColor = Color.Transparent,
-                unfocusedContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(0.3f),
-                disabledContainerColor = Color.Transparent,
+            colors = OutlinedTextFieldDefaults.colors(
+                focusedContainerColor = MaterialTheme.colorScheme.surfaceContainer,
+                unfocusedContainerColor = MaterialTheme.colorScheme.surfaceContainer,
                 cursorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.8f),
+                focusedTextColor = MaterialTheme.colorScheme.onSurface,
+                focusedBorderColor = Color.Transparent,
+                unfocusedBorderColor = Color.Transparent
             ),
             shape = RoundedCornerShape(24.dp)
         )