worked on account screen UI

.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-06-07T09:28:22.011908881Z">
+        <DropdownSelection timestamp="2024-06-07T09:37:15.274201056Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Small_Phone_API_27.avd" />
+              <DeviceId pluginId="PhysicalDevice" identifier="serial=1C051FDF60048Z" />
             </handle>
           </Target>
         </DropdownSelection>

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/AccountScreen.kt

@@ -7,7 +7,6 @@ import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import android.widget.Toast
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.LocalOverscrollConfiguration
@@ -59,10 +58,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
@@ -73,9 +68,9 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import com.vpn.fastestvpnservice.R
 import com.vpn.fastestvpnservice.helpers.BasePreferenceHelper
-import com.vpn.fastestvpnservice.navigation.navigationAnimation
 import com.vpn.fastestvpnservice.sealedClass.Screen
 import com.vpn.fastestvpnservice.utils.VPNConnectionsUtil
+import com.vpn.fastestvpnservice.utils.isTablet
 import com.vpn.fastestvpnservice.viewmodels.AccountViewModel
 import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
 import com.vpn.fastestvpnservice.widgets.SimpleAppWidget
@@ -124,19 +119,22 @@ fun Account(navHostController: NavHostController,
                     size = 28.sp,
                     color = MaterialTheme.colorScheme.primary
                 )
-                AddRowAccount("Email:", basePreferenceHelper.getUser()?.userinfo?.email ?: "")
-                AddRowAccount("Product:", basePreferenceHelper.getProduct()?.productName ?: "")
-                AddRowAccount("Account Status:", basePreferenceHelper.getProduct()?.status ?: "")
+                Spacer(modifier = Modifier.height(15.dp))
+                AddRowAccount("Email: ", basePreferenceHelper.getUser()?.userinfo?.email ?: "")
+                AddRowAccount("Product: ", basePreferenceHelper.getProduct()?.productName ?: "")
+                AddRowAccount("Account Status: ", basePreferenceHelper.getProduct()?.status ?: "")
 
                 Surface(
                     modifier = Modifier
-                        .padding(top = 24.dp, bottom = 0.dp)
+                        .padding(top = 23.5.dp, bottom = 0.dp)
                         .height(1.dp)
                         .fillMaxWidth(),
                     color = colorResource(id = R.color.gray_icon)
                 ) {}
 
-                AddRowAccountIcon(
+                Spacer(modifier = Modifier.height(23.5.dp))
+
+                AddRowAccountIconFirst(
                     icon = painterResource(id = R.drawable.subscription3x),
                     text = "Upgrade Subscription",
                     onClick = {
@@ -302,26 +300,27 @@ fun ColumnScope.AddTextAccount(text: String, size: TextUnit, color: Color) {
 
 @Composable
 fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
-    val configuration = LocalConfiguration.current
-    val isTablet = configuration.screenWidthDp > 840
+//    val configuration = LocalConfiguration.current
+//    val isTablet = configuration.screenWidthDp > 840
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .padding(top = 16.dp)
             .background(Color.Transparent)
-            .height(if (isTablet) 20.dp else 18.dp),
+            .height(if (isTablet()) 20.dp else 18.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
         Surface(
-            modifier = Modifier.padding(start = 0.dp)
+            modifier = Modifier
+                .padding(start = 0.dp)
                 .align(Alignment.CenterVertically),
             color = Color.Transparent
         ) {
             Text(text = title,
                 color = MaterialTheme.colorScheme.primary,
                 style = MaterialTheme.typography.bodyLarge.copy(
-                    fontSize = if (isTablet) 15.sp else 14.sp
+                    fontSize = if (isTablet()) 15.sp else 14.sp
                 ),
                 maxLines = 1,
                 modifier = Modifier
@@ -340,7 +339,7 @@ fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
             Text(text = subTitle,
                 color = MaterialTheme.colorScheme.primary,
                 style = MaterialTheme.typography.bodySmall.copy(
-                    fontSize = if (isTablet) 16.sp else 14.sp
+                    fontSize = if (isTablet()) 16.sp else 14.sp
                 ),
                 maxLines = 1,
                 modifier = Modifier
@@ -353,7 +352,78 @@ fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ColumnScope.AddRowAccountIconFirst(
+    icon: Painter,
+    text: String,
+    onClick : () -> Unit
+) {
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 0.dp)
+            .background(Color.Transparent)
+            .height(24.dp)
+            .pointerInput(Unit) {
+                detectTapGestures {
+                    onClick()
+                }
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = icon,
+                contentDescription = "World",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+        }
+        Surface(
+            modifier = Modifier.padding(start = 0.dp),
+            color = Color.Transparent
+        ) {
+            Text(text = text,
+                color = MaterialTheme.colorScheme.primary,
+                style = MaterialTheme.typography.titleSmall,
+                maxLines = 2,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 0.dp)
+                    .weight(1f)
+            )
+        }
+        Spacer(modifier = Modifier.weight(1f))
+        Surface(
+            modifier = Modifier
+                .padding(start = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.frontarrow3x),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 3.dp)
+                    .size(10.dp, 18.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)
+            )
+        }
+
+
+    }
+
+
+}
+
 @Composable
 fun ColumnScope.AddRowAccountIcon(
     icon: Painter,
@@ -364,9 +434,9 @@ fun ColumnScope.AddRowAccountIcon(
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(top = 33.dp)
+            .padding(top = 44.dp)
             .background(Color.Transparent)
-            .height(30.dp)
+            .height(24.dp)
             .pointerInput(Unit) {
                 detectTapGestures {
                     onClick()
@@ -413,7 +483,7 @@ fun ColumnScope.AddRowAccountIcon(
                 painter = painterResource(id = R.drawable.frontarrow3x),
                 contentDescription = "Front_Arrow",
                 modifier = Modifier
-                    .padding(start = 0.dp, end = 5.dp)
+                    .padding(start = 0.dp, end = 3.dp)
                     .size(10.dp, 18.dp)
                     .weight(1f),
                 colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary)