fix: improve ui (#47)

Minor UI improvements. Add credential trimming. Update to latest lib. Add temporary fix for connection errors
nymtech · May 9, 2024 · 3c18109 · 3c18109
1 parent 03b8975
commit 3c18109
Show file tree

Hide file tree

Showing 26 changed files with 372 additions and 301 deletions.
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -82,20 +82,6 @@
                 <action android:name="com.htc.intent.action.QUICKBOOT_POWERON" />
             </intent-filter>
         </receiver>
-		<receiver android:name=".receiver.AlarmPermissionReceiver"
-			android:exported="false" android:enabled="true">
-			<intent-filter>
-				<action android:name="android.app.action.SCHEDULE_EXACT_ALARM_PERMISSION_STATE_CHANGED" />
-			</intent-filter>
-		</receiver>
-		<!--	will make exported false for now, potentially enable later for user automation integration	-->
-		<receiver android:name=".receiver.VpnControlReceiver" android:exported="false" android:enabled="true"
-			android:permission="net.nymtech.nymvpn.VPN_CONTROL">
-			<intent-filter>
-				<action android:name="net.nymtech.nymvpn.START" />
-				<action android:name="net.nymtech.nymvpn.STOP" />
-			</intent-filter>
-		</receiver>
         <service
             android:name=".service.AlwaysOnVpnService"
             android:enabled="true"

diff --git a/app/src/main/java/net/nymtech/nymvpn/receiver/AlarmPermissionReceiver.kt b/app/src/main/java/net/nymtech/nymvpn/receiver/AlarmPermissionReceiver.kt
diff --git a/app/src/main/java/net/nymtech/nymvpn/receiver/VpnControlReceiver.kt b/app/src/main/java/net/nymtech/nymvpn/receiver/VpnControlReceiver.kt
diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/MainActivity.kt b/app/src/main/java/net/nymtech/nymvpn/ui/MainActivity.kt
@@ -103,6 +103,7 @@ class MainActivity : ComponentActivity() {
 					topBar = {
 						NavBar(
 							appViewModel,
+							uiState,
 							navController,
 							Modifier
 								.onGloballyPositioned {
@@ -160,6 +161,7 @@ class MainActivity : ComponentActivity() {
 						composable(NavItem.Settings.Credential.route) {
 							CredentialScreen(
 								navController,
+								appViewModel,
 							)
 						}
 						composable(NavItem.Settings.Account.route) { AccountScreen(appViewModel) }

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/common/buttons/SelectionItemButton.kt b/app/src/main/java/net/nymtech/nymvpn/ui/common/buttons/SelectionItemButton.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Card
@@ -20,10 +19,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import net.nymtech.nymvpn.util.scaledHeight
-import net.nymtech.nymvpn.util.scaledWidth
 
 @Composable
-fun SelectionItemButton(leading: @Composable () -> Unit, buttonText: String, trailingText: String?, onClick: () -> Unit) {
+fun SelectionItemButton(leading: @Composable () -> Unit, buttonText: String, trailing: (@Composable () -> Unit)? = null, onClick: () -> Unit) {
 	Card(
 		modifier =
 		Modifier.clip(RoundedCornerShape(8.dp))
@@ -49,24 +47,8 @@ fun SelectionItemButton(leading: @Composable () -> Unit, buttonText: String, tra
 				style = MaterialTheme.typography.bodyLarge,
 				color = MaterialTheme.colorScheme.onSurface,
 			)
-			trailingText?.let {
-				Row(
-					modifier = Modifier.fillMaxWidth(),
-					horizontalArrangement = Arrangement.End,
-					verticalAlignment = Alignment.CenterVertically,
-				) {
-					Text(
-						it,
-						modifier =
-						Modifier.padding(
-							horizontal = 16.dp.scaledWidth(),
-							vertical = 16.dp.scaledHeight(),
-						),
-						color =
-						MaterialTheme.colorScheme.onSurfaceVariant,
-						style = MaterialTheme.typography.labelSmall,
-					)
-				}
+			trailing?.let {
+				it()
 			}
 		}
 	}

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/common/buttons/surface/SelectionItem.kt b/app/src/main/java/net/nymtech/nymvpn/ui/common/buttons/surface/SelectionItem.kt
@@ -1,25 +1,11 @@
 package net.nymtech.nymvpn.ui.common.buttons.surface
 
-import androidx.compose.foundation.layout.size
-import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.res.vectorResource
-import net.nymtech.nymvpn.R
-import net.nymtech.nymvpn.ui.theme.iconSize
 
 data class SelectionItem(
 	val leadingIcon: ImageVector? = null,
-	val trailing: (@Composable () -> Unit)? = {
-		Icon(
-			ImageVector.vectorResource(R.drawable.link_arrow_right),
-			"arrow",
-			Modifier.size(
-				iconSize,
-			),
-		)
-	},
+	val trailing: (@Composable () -> Unit)? = null,
 	val title: (@Composable () -> Unit),
 	val description: (@Composable () -> Unit)? = null,
 	val onClick: () -> Unit = {},

diff --git a/...src/main/java/net/nymtech/nymvpn/ui/common/buttons/surface/SurfaceSelectionGroupButton.kt b/...src/main/java/net/nymtech/nymvpn/ui/common/buttons/surface/SurfaceSelectionGroupButton.kt
@@ -21,7 +21,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
+import net.nymtech.nymvpn.R
 import net.nymtech.nymvpn.ui.theme.iconSize
 import net.nymtech.nymvpn.util.scaledHeight
 import net.nymtech.nymvpn.util.scaledWidth
@@ -75,14 +78,28 @@ fun SurfaceSelectionGroupButton(items: List<SelectionItem>) {
 							it.description?.let { it() }
 						}
 					}
-					Box(
-						modifier = Modifier
-							.padding(start = 16.dp.scaledWidth(), end = 24.dp.scaledWidth()),
-					) {
-						it.trailing?.let {
+					it.trailing?.let {
+						Box(
+							contentAlignment = Alignment.CenterEnd,
+							modifier = Modifier
+								.padding(start = 16.dp.scaledWidth(), end = 24.dp.scaledWidth()),
+						) {
 							it()
 						}
 					}
+						?: Box(
+							contentAlignment = Alignment.CenterEnd,
+							modifier = Modifier
+								.padding(start = 16.dp.scaledWidth(), end = 12.dp.scaledWidth()),
+						) {
+							Icon(
+								ImageVector.vectorResource(R.drawable.link_arrow_right),
+								"arrow",
+								Modifier.size(
+									iconSize,
+								),
+							)
+						}
 				}
 			}
 			if (index + 1 != items.size) HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/common/navigation/NavBar.kt b/app/src/main/java/net/nymtech/nymvpn/ui/common/navigation/NavBar.kt
@@ -3,6 +3,7 @@ package net.nymtech.nymvpn.ui.common.navigation
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -14,17 +15,23 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.vectorResource
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
+import net.nymtech.nymvpn.R
+import net.nymtech.nymvpn.ui.AppUiState
 import net.nymtech.nymvpn.ui.AppViewModel
 import net.nymtech.nymvpn.ui.NavItem
+import net.nymtech.nymvpn.ui.theme.Theme
 import net.nymtech.nymvpn.ui.theme.iconSize
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun NavBar(appViewModel: AppViewModel, navController: NavController, modifier: Modifier = Modifier) {
+fun NavBar(appViewModel: AppViewModel, appUiState: AppUiState, navController: NavController, modifier: Modifier = Modifier) {
 	val navBackStackEntry by navController.currentBackStackEntryAsState()
 	val navItem = NavItem.from(navBackStackEntry?.destination?.route)
 	val context = LocalContext.current
@@ -39,10 +46,24 @@ fun NavBar(appViewModel: AppViewModel, navController: NavController, modifier: M
 		CenterAlignedTopAppBar(
 			modifier = modifier,
 			title = {
-				Text(
-					navItem.title.asString(context),
-					style = MaterialTheme.typography.titleLarge,
-				)
+				if (navItem.route == NavItem.Main.route) {
+					val darkTheme =
+						when (appUiState.settings.theme) {
+							Theme.AUTOMATIC -> isSystemInDarkTheme()
+							Theme.DARK_MODE -> true
+							Theme.LIGHT_MODE -> false
+						}
+					if (darkTheme) {
+						Icon(ImageVector.vectorResource(R.drawable.app_label_dark), "app_label", tint = Color.Unspecified)
+					} else {
+						Icon(ImageVector.vectorResource(R.drawable.app_label_light), "app_label", tint = Color.Unspecified)
+					}
+				} else {
+					Text(
+						navItem.title.asString(context),
+						style = MaterialTheme.typography.titleLarge,
+					)
+				}
 			},
 			actions = {
 				navItem.trailing?.let {

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/common/textbox/CustomTextField.kt b/app/src/main/java/net/nymtech/nymvpn/ui/common/textbox/CustomTextField.kt
@@ -86,9 +86,10 @@ fun CustomTextField(
 					isError = isError,
 					interactionSource,
 					colors = TextFieldDefaults.colors().copy(
+						errorContainerColor = MaterialTheme.colorScheme.background,
 						disabledLabelColor = MaterialTheme.colorScheme.onSurface,
 						disabledContainerColor = MaterialTheme.colorScheme.background,
-						focusedIndicatorColor = CustomColors.outlineVariant,
+						focusedIndicatorColor = MaterialTheme.colorScheme.onSurface,
 						disabledIndicatorColor = CustomColors.outlineVariant,
 						unfocusedIndicatorColor = CustomColors.outlineVariant,
 						focusedLabelColor = MaterialTheme.colorScheme.onSurface,

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/screens/hop/HopScreen.kt b/app/src/main/java/net/nymtech/nymvpn/ui/screens/hop/HopScreen.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.background
 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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -85,7 +86,6 @@ fun HopScreen(navController: NavController, hopType: HopType, viewModel: HopView
 						.fillMaxWidth()
 						.padding(
 							horizontal = 16.dp.scaledWidth(),
-							vertical = 16.dp.scaledHeight(),
 						),
 				)
 				var query: String by rememberSaveable { mutableStateOf("") }
@@ -200,8 +200,27 @@ fun HopScreen(navController: NavController, hopType: HopType, viewModel: HopView
 					viewModel.onSelected(it)
 					navController.navigate(NavItem.Main.route)
 				},
-				trailingText =
-				if (it == uiState.selected) stringResource(id = R.string.is_selected) else null,
+				trailing = {
+					if (it == uiState.selected) {
+						Row(
+							modifier = Modifier.fillMaxWidth(),
+							horizontalArrangement = Arrangement.End,
+							verticalAlignment = Alignment.CenterVertically,
+						) {
+							Text(
+								stringResource(id = R.string.is_selected),
+								modifier =
+								Modifier.padding(
+									horizontal = 24.dp.scaledWidth(),
+									vertical = 16.dp.scaledHeight(),
+								),
+								color =
+								MaterialTheme.colorScheme.onSurfaceVariant,
+								style = MaterialTheme.typography.labelSmall,
+							)
+						}
+					}
+				},
 			)
 		}
 	}

diff --git a/app/src/main/java/net/nymtech/nymvpn/ui/screens/hop/HopViewModel.kt b/app/src/main/java/net/nymtech/nymvpn/ui/screens/hop/HopViewModel.kt
@@ -86,7 +86,7 @@ constructor(
 			when (_uiState.value.hopType) {
 				HopType.FIRST -> settingsRepository.getFirstHopCountry()
 				HopType.LAST -> settingsRepository.getLastHopCountry()
-			}
+			}.copy(isDefault = false)
 		_uiState.update {
 			it.copy(
 				selected = selectedCountry,