Merge pull request #167 from uncrack-vault/ui_ux_fixes

UI/UX Improvments

app/build.gradle.kts

@@ -53,6 +53,7 @@ android {
 
 dependencies {
 
+    implementation("androidx.compose.animation:animation-graphics-android:1.7.5")
     val roomVersion = "2.6.1"
     val viewModelVersion = "2.5.1"
     val navVersion = "2.7.2"
@@ -65,7 +66,8 @@ dependencies {
     implementation("androidx.compose.foundation:foundation")
     implementation("androidx.compose.foundation:foundation-layout")
     implementation("androidx.compose.material:material")
-    implementation("androidx.compose.material3:material3:1.3.0")
+    implementation("androidx.compose.material3:material3:1.3.1")
+    implementation("androidx.compose.material:material-icons-extended:1.7.5")
     implementation("androidx.compose.runtime:runtime-livedata")
     implementation("androidx.compose.ui:ui-tooling")
     implementation("androidx.compose.ui:ui-graphics")
@@ -74,6 +76,7 @@ dependencies {
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
     implementation("androidx.activity:activity-compose:1.9.0-alpha03")
     implementation("androidx.navigation:navigation-compose:2.8.0")
+    implementation("androidx.compose.animation:animation:1.7.5")
 
 
     // Compose Test

app/src/main/java/com/aritradas/uncrack/MainActivity.kt

@@ -4,12 +4,16 @@ import android.os.Build
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.result.ActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.annotation.RequiresApi
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.core.view.WindowCompat
 import com.aritradas.uncrack.navigation.Navigation
 import com.aritradas.uncrack.presentation.settings.SettingsViewModel
 import com.aritradas.uncrack.ui.theme.UnCrackTheme
@@ -40,8 +44,19 @@ class MainActivity : ComponentActivity() {
 
     @RequiresApi(Build.VERSION_CODES.O)
     override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            ),
+            navigationBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            )
+        )
+
         super.onCreate(savedInstanceState)
 
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
         settingsViewModel.isScreenshotEnabled.observe(this) { isEnabled ->
             if (isEnabled) {
                 window.clearFlags(android.view.WindowManager.LayoutParams.FLAG_SECURE)
@@ -51,8 +66,6 @@ class MainActivity : ComponentActivity() {
             }
         }
 
-        enableEdgeToEdge()
-
         checkForAppUpdate()
 
         setContent {

app/src/main/java/com/aritradas/uncrack/components/UCButton.kt

@@ -2,9 +2,11 @@ package com.aritradas.uncrack.components
 
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -25,6 +27,8 @@ fun UCButton(
     enabled: Boolean = true,
     trailingIcon: Painter? = null,
     leadingIcon: Painter? = null,
+    isLoading: Boolean = false,
+    loadingText: String? = null,
     onClick: () -> Unit
 ) {
     Button(
@@ -39,19 +43,44 @@ fun UCButton(
         colors = ButtonDefaults.buttonColors(
             containerColor = PrimaryLight
         ),
-        enabled = enabled
+        enabled = enabled && !isLoading
     ) {
-        leadingIcon?.let {
-            Icon(modifier = Modifier.padding(end = 4.dp), painter = it, contentDescription = null)
-        }
-        Text(
-            text = text,
-            color = if (enabled) Color.White else SurfaceTintLight,
-            fontFamily = DMSansFontFamily,
-            fontSize = 14.sp
-        )
-        trailingIcon?.let {
-            Icon(modifier = Modifier.padding(start = 4.dp), painter = it, contentDescription = null)
+        if (isLoading) {
+            CircularProgressIndicator(
+                modifier = Modifier.size(24.dp),
+                color = Color.White,
+                strokeWidth = 2.dp
+            )
+            loadingText?.let {
+                Text(
+                    modifier = Modifier.padding(start = 8.dp),
+                    text = it,
+                    color = Color.White,
+                    fontFamily = DMSansFontFamily,
+                    fontSize = 14.sp
+                )
+            }
+        } else {
+            leadingIcon?.let {
+                Icon(
+                    modifier = Modifier.padding(end = 4.dp),
+                    painter = it,
+                    contentDescription = null
+                )
+            }
+            Text(
+                text = text,
+                color = if (enabled) Color.White else SurfaceTintLight,
+                fontFamily = DMSansFontFamily,
+                fontSize = 14.sp
+            )
+            trailingIcon?.let {
+                Icon(
+                    modifier = Modifier.padding(start = 4.dp),
+                    painter = it,
+                    contentDescription = null
+                )
+            }
         }
     }
 }

app/src/main/java/com/aritradas/uncrack/domain/model/AccountType.kt

@@ -12,6 +12,18 @@ enum class AccountType(val text: String) {
     SLACK("Slack"),
     TELEGRAM("Telegram"),
     DISCORD("Discord"),
+    SIGNAL("Signal"),
+    LINE("Line"),
+    WECHAT("WeChat"),
+    SKYPE("Skype"),
+    ZOOM("Zoom"),
+    STACKOVERFLOW("Stack Overflow"),
+    MEDIUM("Medium"),
+    GITHUB("GitHub"),
+    GITLAB("GitLab"),
+    MICROSOFTONEDRIVE("Microsoft OneDrive"),
+    DROPBOX("DropBox"),
+    GOOGLEDRIVE("Google Drive"),
     DRIBBLE("Dribble"),
     BEHANCE("Behance"),
     REDDIT("Reddit"),

app/src/main/java/com/aritradas/uncrack/navigation/Navigation.kt

@@ -4,6 +4,7 @@ import android.annotation.SuppressLint
 import android.app.Activity
 import android.os.Build
 import androidx.annotation.RequiresApi
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
@@ -13,7 +14,9 @@ import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.font.FontWeight
@@ -279,13 +282,20 @@ fun ShowBottomNavigation(
             )
 
             bottomNavItems.forEach { item ->
+                val isSelected = backStackEntry.value?.destination?.route == item.route
+                val animateIconSize by animateFloatAsState(
+                    if (isSelected) 1f else 0.9f,
+                    label = "iconScale"
+                )
+
                 NavigationBarItem(
                     alwaysShowLabel = true,
                     icon = {
                         Icon(
+                            modifier = Modifier.scale(animateIconSize),
                             imageVector = item.icon,
                             contentDescription = item.name,
-                            tint = if (backStackEntry.value?.destination?.route == item.route)
+                            tint = if (isSelected)
                                 OnPrimaryContainerLight
                             else
                                 OnSurfaceVariantLight
@@ -295,17 +305,17 @@ fun ShowBottomNavigation(
                         Text(
                             text = item.name,
                             fontFamily = DMSansFontFamily,
-                            color = if (backStackEntry.value?.destination?.route == item.route)
+                            color = if (isSelected)
                                 OnPrimaryContainerLight
                             else
                                 OnSurfaceVariantLight,
-                            fontWeight = if (backStackEntry.value?.destination?.route == item.route)
+                            fontWeight = if (isSelected)
                                 FontWeight.SemiBold
                             else
                                 FontWeight.Normal,
                         )
                     },
-                    selected = backStackEntry.value?.destination?.route == item.route,
+                    selected = isSelected,
                     onClick = {
                         val currentDestination =
                             navController.currentBackStackEntry?.destination?.route

app/src/main/java/com/aritradas/uncrack/presentation/auth/AuthViewModel.kt

@@ -10,6 +10,7 @@ import com.google.firebase.auth.FirebaseUser
 import com.google.firebase.auth.ktx.auth
 import com.google.firebase.firestore.FirebaseFirestore
 import com.google.firebase.ktx.Firebase
+import kotlinx.coroutines.delay
 import timber.log.Timber
 
 class AuthViewModel : ViewModel() {
@@ -30,6 +31,7 @@ class AuthViewModel : ViewModel() {
     }
 
     fun logIn(email: String, password: String) = runIO {
+        delay(2000L)
         auth.signInWithEmailAndPassword(email, password)
             .addOnCompleteListener { task ->
                 if (task.isSuccessful) {
@@ -73,6 +75,7 @@ class AuthViewModel : ViewModel() {
         password: String,
         onSignedUp: (FirebaseUser) -> Unit,
     ) = runIO {
+        delay(2000L)
         auth.createUserWithEmailAndPassword(email, password)
             .addOnCompleteListener { task ->
                 if (task.isSuccessful) {

app/src/main/java/com/aritradas/uncrack/presentation/auth/login/LoginScreens.kt

@@ -5,6 +5,7 @@ import android.content.Intent
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.clickable
@@ -35,6 +36,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -45,6 +47,7 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.aritradas.uncrack.R
 import com.aritradas.uncrack.components.NoInternetScreen
@@ -76,8 +79,16 @@ class LoginScreens : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
 
-        enableEdgeToEdge()
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            ),
+            navigationBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            )
+        )
         super.onCreate(savedInstanceState)
+        WindowCompat.setDecorFitsSystemWindows(window, false)
 
         connectivityObserver = NetworkConnectivityObserver(applicationContext)
         setContent {
@@ -220,6 +231,8 @@ fun LoginContent(
             UCButton(
                 modifier = Modifier.fillMaxWidth(),
                 text = stringResource(R.string.login),
+                isLoading = isLoading,
+                loadingText = "Logging you in..",
                 onClick = {
                     isLoading = true
                     viewModel.logIn(email, password)

app/src/main/java/com/aritradas/uncrack/presentation/auth/signup/SignupScreen.kt

@@ -5,6 +5,7 @@ import android.content.Intent
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.clickable
@@ -33,6 +34,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -43,6 +45,7 @@ import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.aritradas.uncrack.R
 import com.aritradas.uncrack.components.NoInternetScreen
@@ -79,8 +82,17 @@ class SignupScreen : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
 
-        enableEdgeToEdge()
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            ),
+            navigationBarStyle = SystemBarStyle.light(
+                Color.Transparent.toArgb(), Color.Transparent.toArgb()
+            )
+        )
         super.onCreate(savedInstanceState)
+
+        WindowCompat.setDecorFitsSystemWindows(window, false)
         connectivityObserver = NetworkConnectivityObserver(applicationContext)
 
         setContent {
@@ -244,6 +256,8 @@ fun SignupContent(
                 modifier = Modifier
                     .fillMaxWidth(),
                 text = stringResource(id = R.string.register),
+                isLoading = isLoading,
+                loadingText = "Creating your account",
                 onClick = {
                     isLoading = true
                     authViewModel.signUp(

app/src/main/java/com/aritradas/uncrack/presentation/masterKey/KeyViewModel.kt

@@ -10,6 +10,7 @@ import com.aritradas.uncrack.domain.model.Key
 import com.aritradas.uncrack.domain.repository.KeyRepository
 import com.aritradas.uncrack.util.runIO
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.delay
 import javax.inject.Inject
 
 @HiltViewModel
@@ -34,6 +35,10 @@ class KeyViewModel @Inject constructor(
     private val _hasSymbol = MutableLiveData(false)
     val hasSymbol: LiveData<Boolean> = _hasSymbol
 
+    private val _isLoading = MutableLiveData<Boolean>()
+    val isLoading: LiveData<Boolean> = _isLoading
+
+
     fun setMasterKey(masterKey: String) {
         _masterKeyLiveData.value = masterKey
         validatePassword(masterKey)
@@ -60,7 +65,10 @@ class KeyViewModel @Inject constructor(
     }
 
     fun saveMasterKey(key: Key) = runIO {
+        delay(2000L)
+        _isLoading.postValue(true)
         repository.setMasterKey(key)
+        _isLoading.postValue(false)
     }
 
     fun getMasterKey() = runIO {