Resolved Server item UI issue & country item UI issue

app/src/main/java/com/vpn/fastestvpnservice/customItems/CountryItem.kt

@@ -122,6 +122,9 @@ fun CountryItem(
 
 //        countrySize.let { size -> }
 
+        val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
+        else Utils.getDrawableGray(context, server.iso)
+
         Column {
             /* Country Location's Row */
             Row(
@@ -132,6 +135,7 @@ fun CountryItem(
                     .padding(
                         start = 16.dp, end = 12.dp, top = 12.dp
                     )
+                    .background(Color.Transparent)
                     .clickable(
                         indication = null,
                         interactionSource = remember { MutableInteractionSource() }
@@ -153,8 +157,10 @@ fun CountryItem(
 
                     }
             ) {
-                val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
-                else Utils.getDrawableGray(context, server.iso)
+//                val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
+//                else Utils.getDrawableGray(context, server.iso)
+
+                Log.d("test_server_flag", "${server.country} $icon")
 
                 if (icon != 0) {
                     Icon(
@@ -171,41 +177,46 @@ fun CountryItem(
                                 contentScale = ContentScale.FillBounds
                             )
                     )
-                }
-                Text(text = server.country!!,
-                    style = MaterialTheme.typography.labelMedium,
-                    color = MaterialTheme.colorScheme.primary,
-                    modifier = Modifier
-                        .padding(start = 16.dp, bottom = 18.dp)
-                        .align(Alignment.CenterVertically)
-                )
-                Spacer(modifier = Modifier.weight(1F))
-                Text(text = "$countryTotalServers ${context.getString(R.string.locations)}",
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.primary,
-                    modifier = Modifier
-                        .padding(end = 30.dp, bottom = 18.dp)
-                        .align(Alignment.CenterVertically)
-                        .alpha(0.4F)
-                )
+
+                    Text(
+                        text = server.country!!,
+                        style = MaterialTheme.typography.labelMedium,
+                        color = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 18.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                    Spacer(modifier = Modifier.weight(1F))
+                    Text(
+                        text = "$countryTotalServers ${context.getString(R.string.locations)}",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(end = 30.dp, bottom = 18.dp)
+                            .align(Alignment.CenterVertically)
+                            .alpha(0.4F)
+                    )
 //            Spacer(modifier = Modifier.weight(1F))
-                Icon(
-                    modifier = Modifier
-                        .padding(bottom = 18.dp, end = 0.dp)
-                        .size(12.dp, 7.dp)
-                        .align(Alignment.CenterVertically)
-                        .clickable(
-                            indication = null,
-                            interactionSource = remember { MutableInteractionSource() }
-                        ) { isServerExpanded = !isServerExpanded },
+                    Icon(
+                        modifier = Modifier
+                            .padding(bottom = 18.dp, end = 0.dp)
+                            .size(12.dp, 7.dp)
+                            .align(Alignment.CenterVertically)
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            ) { isServerExpanded = !isServerExpanded },
 
-                    painter = if (isServerExpanded) painterResource(
-                        id = R.drawable.dragarrow3x) else painterResource(
-                        id = R.drawable.downarrow3x),
+                        painter = if (isServerExpanded) painterResource(
+                            id = R.drawable.dragarrow3x
+                        ) else painterResource(
+                            id = R.drawable.downarrow3x
+                        ),
 
-                    contentDescription = "Server Logo",
-                    tint = MaterialTheme.colorScheme.primary,
-                )
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                    )
+                }
             }
 
             /* Country Expandable's Row */
@@ -219,15 +230,17 @@ fun CountryItem(
                 }
         }
 
-        Surface(
-            modifier = Modifier
-                .padding(start = 0.dp, end = 0.dp)
-                .height(1.dp)
-                .fillMaxWidth()
-                .alpha(0.6F)
-                .align(Alignment.BottomCenter),
-            color = colorResource(id = R.color.gray_icon)
-        ) {}
+        if (icon != 0) {
+            Surface(
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .height(1.dp)
+                    .fillMaxWidth()
+                    .alpha(0.6F)
+                    .align(Alignment.BottomCenter),
+                color = colorResource(id = R.color.gray_icon)
+            ) {}
+        }
     }
 }
 

app/src/main/java/com/vpn/fastestvpnservice/customItems/ServerItem.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -36,8 +37,10 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
@@ -92,12 +95,13 @@ fun ServerItem(server: Server, navHostController: NavHostController, serverPing:
             navHostController.popBackStack()
         }
 
-        Row(
-            verticalAlignment = Alignment.Top,
-            horizontalArrangement = Arrangement.Start,
+        Box(
+//            verticalAlignment = Alignment.Top,
+//            horizontalArrangement = Arrangement.Start,
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(start = 12.dp, end = 7.dp, top = 12.dp)
+                .background(Color.Transparent)
                 .clickable(
                     indication = null,
                     interactionSource = remember { MutableInteractionSource() }
@@ -118,7 +122,8 @@ fun ServerItem(server: Server, navHostController: NavHostController, serverPing:
                             Screen.Subscription.route
                         )
                     }
-                }
+                },
+            contentAlignment = Alignment.CenterStart
         ) {
 //            var ping by rememberSaveable { mutableIntStateOf(0) }
 //
@@ -148,13 +153,14 @@ fun ServerItem(server: Server, navHostController: NavHostController, serverPing:
             val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
             else Utils.getDrawableGray(context, server.iso)
 
+
             if (icon != 0) {
                 Icon(
                     painter = painterResource(id = icon),
                     contentDescription = "Server Logo",
                     tint = Color.Unspecified,
                     modifier = Modifier
-                        .padding(bottom = 16.dp)
+                        .padding(top = 0.dp, bottom = 15.dp)
                         .size(24.dp)
                         .clip(CircleShape)
                         .border(1.dp, colorResource(id = R.color.gray_opac_04), CircleShape)
@@ -162,29 +168,40 @@ fun ServerItem(server: Server, navHostController: NavHostController, serverPing:
                             painter = painterResource(id = icon),
                             contentScale = ContentScale.FillBounds
                         )
+                        .align(Alignment.CenterStart)
                 )
             }
-            Text(text = "${server.server_name}",
-                style = MaterialTheme.typography.labelMedium,
-                color = MaterialTheme.colorScheme.primary,
+            Surface(
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 18.dp)
-                    .align(Alignment.CenterVertically)
+                    .padding(start = 40.dp, bottom = 15.dp, end = 110.dp)
+                    .align(Alignment.CenterStart)
+                    .background(Color.Transparent),
+                color = Color.Transparent
+            ) {
+                Text(text = "${server.server_name}",
+                    style = MaterialTheme.typography.labelMedium,
+                    color = MaterialTheme.colorScheme.primary,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier
+                        .align(Alignment.CenterStart)
                 )
-            Spacer(modifier = Modifier.weight(1F))
+            }
+//            Spacer(modifier = Modifier.weight(1F))
             Text(text = "$serverPing ms",
                 style = MaterialTheme.typography.displayMedium,
                 color = colorResource(id = R.color.blue_text),
                 modifier = Modifier
-                    .padding(end = 30.dp, bottom = 18.dp)
-                    .align(Alignment.CenterVertically)
+                    .padding(end = 50.dp, bottom = 15.dp)
+                    .align(Alignment.CenterEnd)
             )
 //            Spacer(modifier = Modifier.weight(1F))
 
             IconButton(
                 modifier = Modifier
-                    .padding(bottom = 18.dp, end = 8.dp)
-                    .size(25.dp),
+                    .padding(bottom = 15.dp, end = 4.dp)
+                    .size(25.dp)
+                    .align(Alignment.CenterEnd),
                 onClick = {
                     isFavorite = !isFavorite!!
                     serverListViewModelSplash.favAndUnFav(server)