Improve UI and UX for App

app/build.gradle.kts

@@ -130,7 +130,9 @@ dependencies {
     implementation(Deps.Lifecycle.runtimeCompose)
     implementation("androidx.navigation:navigation-compose:2.9.0")
 
-    implementation("androidx.compose.material3:material3:1.2.1")
+    implementation("androidx.compose.material3:material3:1.4.0-alpha14")
+    implementation("androidx.compose.material3:material3-android:1.4.0-alpha14")
+
     implementation("com.google.accompanist:accompanist-themeadapter-material3:0.36.0")
 
     implementation("androidx.appcompat:appcompat:1.7.0")

app/src/main/java/com/yogeshpaliyal/keypass/MyApplication.kt

@@ -17,11 +17,11 @@ class MyApplication : CommonMyApplication() {
 
     private var timeToLaunchActivity : Long? = null
 
-    fun activityLaunchTriggered() {
+    fun knownActivityLaunchTriggered() {
         timeToLaunchActivity = SystemClock.uptimeMillis()
     }
 
-    fun isActivityLaunchTriggered() : Boolean {
+    fun isKnownActivityLaunchTriggered() : Boolean {
         val mTimeToLaunchActivity = timeToLaunchActivity ?: return false
         timeToLaunchActivity = null
         return SystemClock.uptimeMillis() - mTimeToLaunchActivity < 1000

app/src/main/java/com/yogeshpaliyal/keypass/ui/about/AboutScreen.kt

@@ -30,11 +30,13 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -47,22 +49,20 @@ import com.yogeshpaliyal.common.utils.openLink
 import com.yogeshpaliyal.keypass.BuildConfig
 import com.yogeshpaliyal.keypass.R
 import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
+import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
 import com.yogeshpaliyal.keypass.ui.commonComponents.PreferenceItem
 import com.yogeshpaliyal.keypass.ui.redux.actions.Action
 import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
 import org.reduxkotlin.compose.rememberTypedDispatcher
 
 @Composable
 fun AboutScreen() {
-    val dispatchAction = rememberTypedDispatcher<Action>()
-
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
     Scaffold(
-        bottomBar = { 
-            // Add back button to bottom bar
-            DefaultBottomAppBar(
-                showBackButton = true
-            ) 
-        }
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            DefaultTopAppBar(title = R.string.app_name, scrollBehavior = scrollBehavior)
+        },
     ) { contentPadding ->
         Surface(
             modifier = Modifier
@@ -98,9 +98,11 @@ private fun MainContent() {
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         // App Info Card
-        ElevatedCard(
+        Card(
             modifier = Modifier.fillMaxWidth(),
-            elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surfaceContainerLow
+            ),
             shape = RoundedCornerShape(16.dp)
         ) {
             Column(
@@ -124,13 +126,13 @@ private fun MainContent() {
 
                 Spacer(modifier = Modifier.height(16.dp))
 
-                // App Name
-                Text(
-                    text = stringResource(id = R.string.app_name),
-                    style = MaterialTheme.typography.headlineMedium,
-                    fontWeight = FontWeight.Bold,
-                    color = MaterialTheme.colorScheme.primary
-                )
+//                // App Name
+//                Text(
+//                    text = stringResource(id = R.string.app_name),
+//                    style = MaterialTheme.typography.headlineMedium,
+//                    fontWeight = FontWeight.Bold,
+//                    color = MaterialTheme.colorScheme.primary
+//                )
 
                 Spacer(modifier = Modifier.height(4.dp))
 
@@ -203,9 +205,11 @@ private fun MainContent() {
             textAlign = TextAlign.Start
         )
 
-        ElevatedCard(
+        Card(
             modifier = Modifier.fillMaxWidth(),
-            elevation = CardDefaults.elevatedCardElevation(defaultElevation = 2.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = MaterialTheme.colorScheme.surfaceContainerLow
+            ),
             shape = RoundedCornerShape(16.dp)
         ) {
             Column(modifier = Modifier.fillMaxWidth()) {

app/src/main/java/com/yogeshpaliyal/keypass/ui/backup/BackupScreen.kt

@@ -40,6 +40,7 @@ import com.yogeshpaliyal.keypass.R
 import com.yogeshpaliyal.keypass.ui.backup.components.BackSettingOptions
 import com.yogeshpaliyal.keypass.ui.backup.components.BackupDialogs
 import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
+import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
 import com.yogeshpaliyal.keypass.ui.nav.LocalUserSettings
 import com.yogeshpaliyal.keypass.ui.redux.actions.Action
 import com.yogeshpaliyal.keypass.ui.redux.actions.GoBackAction
@@ -131,10 +132,8 @@ fun BackupScreen(state: BackupScreenState) {
         )
     })
 
-    Scaffold(bottomBar = {
-        DefaultBottomAppBar(
-            showBackButton = true,
-        )
+    Scaffold(topBar = {
+        DefaultTopAppBar(showBackButton = true, title = R.string.credentials_backups, subtitle = R.string.backup_screen_desc)
     }) { contentPadding ->
         Surface(modifier = Modifier.padding(contentPadding).fillMaxSize()) {
             Column(
@@ -143,25 +142,6 @@ fun BackupScreen(state: BackupScreenState) {
                     .verticalScroll(rememberScrollState())
                     .padding(16.dp),
             ) {
-                // Header Section
-
-                Text(
-                    text = stringResource(id = R.string.credentials_backups),
-                    style = MaterialTheme.typography.headlineMedium,
-                    fontWeight = FontWeight.Bold,
-                    textAlign = TextAlign.Start
-                )
-
-                Spacer(modifier = Modifier.height(8.dp))
-
-                Text(
-                    text = stringResource(id = R.string.backup_screen_desc), // New string for description
-                    style = MaterialTheme.typography.bodyLarge,
-                    textAlign = TextAlign.Start,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-
-                Spacer(modifier = Modifier.height(24.dp))
 
                 // Backup Settings Options
                 BackSettingOptions(state, updatedState = {

app/src/main/java/com/yogeshpaliyal/keypass/ui/backup/KeyPassBackupDirectoryPick.kt

@@ -15,7 +15,7 @@ class KeyPassBackupDirectoryPick : ActivityResultContracts.OpenDocument() {
                 Intent.FLAG_GRANT_WRITE_URI_PERMISSION or
                 Intent.FLAG_GRANT_READ_URI_PERMISSION
         )
-        (context.applicationContext as? MyApplication)?.activityLaunchTriggered()
+        (context.applicationContext as? MyApplication)?.knownActivityLaunchTriggered()
         return intent
     }
 

app/src/main/java/com/yogeshpaliyal/keypass/ui/backupsImport/BackupImporter.kt

@@ -2,7 +2,6 @@ package com.yogeshpaliyal.keypass.ui.backupsImport
 
 import android.net.Uri
 import androidx.activity.compose.rememberLauncherForActivityResult
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -39,7 +38,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
@@ -52,6 +50,7 @@ import com.yogeshpaliyal.keypass.importer.ChromeAccountImporter
 import com.yogeshpaliyal.keypass.importer.KeePassAccountImporter
 import com.yogeshpaliyal.keypass.importer.KeyPassAccountImporter
 import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
+import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultTopAppBar
 import com.yogeshpaliyal.keypass.ui.home.DashboardViewModel
 import com.yogeshpaliyal.keypass.ui.redux.actions.Action
 import com.yogeshpaliyal.keypass.ui.redux.actions.StateUpdateAction
@@ -129,20 +128,24 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
     })
 
     result?.let {
-        state.selectedImported?.readFileGetAction(result)?.let { it1 -> 
+        state.selectedImported?.readFileGetAction(result)?.let { it1 ->
             isLoading = false
-            dispatchAction(it1) 
+            dispatchAction(it1)
         }
     }
 
     Scaffold(
-        bottomBar = {
-            DefaultBottomAppBar(
-                showBackButton = true
+        topBar = {
+            DefaultTopAppBar(
+                showBackButton = true,
+                title = R.string.restore_credentials,
+                subtitle = R.string.restore_credentials_desc
             )
         }
     ) { paddingValues ->
-        Box(modifier = Modifier.padding(paddingValues).fillMaxSize()) {
+        Box(modifier = Modifier
+            .padding(paddingValues)
+            .fillMaxSize()) {
             if (isLoading) {
                 CircularProgressIndicator(
                     modifier = Modifier.align(Alignment.Center)
@@ -157,25 +160,7 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
                         Column(
                             modifier = Modifier.fillMaxWidth(),
                         ) {
-
-                            Text(
-                                text = stringResource(id = R.string.restore_credentials),
-                                style = MaterialTheme.typography.headlineMedium,
-                                fontWeight = FontWeight.Bold,
-                                textAlign = TextAlign.Start
-                            )
-
-                            Spacer(modifier = Modifier.height(8.dp))
-
-                            Text(
-                                text = stringResource(id = R.string.restore_credentials_desc),
-                                style = MaterialTheme.typography.bodyLarge,
-                                textAlign = TextAlign.Start,
-                                color = MaterialTheme.colorScheme.onSurfaceVariant
-                            )
-
-                            Spacer(modifier = Modifier.height(24.dp))
-
+
                             // Info card
                             Card(
                                 modifier = Modifier.fillMaxWidth(),
@@ -190,11 +175,11 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
                                     color = MaterialTheme.colorScheme.onSecondaryContainer
                                 )
                             }
-                            
+
                             Spacer(modifier = Modifier.height(16.dp))
                         }
                     }
-                    
+
                     items(importOptions) { option ->
                         ImportOptionCard(
                             option = option,
@@ -212,11 +197,13 @@ fun BackupImporter(state: BackupImporterState, mViewModel: DashboardViewModel =
 @Composable
 private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
     val desc = option.importer.getImporterDesc()
-    ElevatedCard(
+    Card(
         modifier = Modifier
             .fillMaxWidth()
             .padding(vertical = 8.dp),
-        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 1.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceContainerLow
+        ),
         onClick = onClick,
         shape = RoundedCornerShape(12.dp)
     ) {
@@ -241,7 +228,7 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
                     modifier = Modifier.size(28.dp)
                 )
             }
-            
+
             Column(
                 modifier = Modifier
                     .padding(start = 16.dp)
@@ -252,14 +239,14 @@ private fun ImportOptionCard(option: ImportOption, onClick: () -> Unit) {
                     style = MaterialTheme.typography.titleMedium,
                     fontWeight = FontWeight.SemiBold
                 )
-                
+
                 Text(
                     text = if (desc == null) "" else stringResource(id = desc),
                     style = MaterialTheme.typography.bodyMedium,
                     color = MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
-            
+
             Icon(
                 imageVector = Icons.Filled.FileUpload,
                 contentDescription = "Import",