add scrolling on bottombarscreens except homescreen for small devices[Responsive]

.idea/deploymentTargetDropDown.xml

@@ -12,13 +12,13 @@
               <type value="RUNNING_DEVICE_TARGET" />
               <deviceKey>
                 <Key>
-                  <type value="SERIAL_NUMBER" />
-                  <value value="1C051FDF60048Z" />
+                  <type value="VIRTUAL_DEVICE_PATH" />
+                  <value value="$USER_HOME$/.android/avd/Small_Phone_API_27.avd" />
                 </Key>
               </deviceKey>
             </Target>
           </runningDeviceTargetSelectedWithDropDown>
-          <timeTargetWasSelectedWithDropDown value="2024-04-18T16:13:12.919911072Z" />
+          <timeTargetWasSelectedWithDropDown value="2024-04-18T16:44:43.000576322Z" />
         </State>
       </entry>
     </value>

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

@@ -35,7 +35,7 @@ fun NotificationItem(item: Notification) {
                 style = MaterialTheme.typography.labelMedium,
                 textAlign = TextAlign.Start,
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 5.dp)
+                    .padding(start = 16.dp, bottom = 5.dp, end = 4.dp)
                     .fillMaxWidth(),
                 maxLines = 2
             )
@@ -45,7 +45,7 @@ fun NotificationItem(item: Notification) {
                 style = MaterialTheme.typography.labelMedium,
                 textAlign = TextAlign.Start,
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 0.dp)
+                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
                     .fillMaxWidth(),
                 maxLines = 2
             )

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

@@ -7,7 +7,9 @@ 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
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -22,7 +24,9 @@ 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.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -32,6 +36,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -75,201 +80,204 @@ import kotlinx.coroutines.delay
 
 //var LocalLoggedOut = staticCompositionLocalOf<Boolean> { false }
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun Account(navHostController: NavHostController,
             settingsNavHostController: NavHostController)
 {
-
     var isLoggedOut by remember { mutableStateOf(false) }
     var isDelete by remember { mutableStateOf(false) }
-
     val context = LocalContext.current
     val basePreferenceHelper = BasePreferenceHelper(context)
-
     val accountViewModel: AccountViewModel = viewModel()
 
-    Box(modifier = Modifier
-        .background(MaterialTheme.colorScheme.background)
-        .fillMaxSize()
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
+    ) {
+        Box(modifier = Modifier
+            .background(MaterialTheme.colorScheme.background)
+            .fillMaxSize()
+            .padding(vertical = 10.dp)
+            .verticalScroll(rememberScrollState())
 //        contentAlignment = Alignment.Center
 
-    ) {
-        Column(
-            verticalArrangement = Arrangement.Top,
-            horizontalAlignment = Alignment.Start,
-            modifier = Modifier
-                .padding(start = 16.dp, end = 24.dp)
-                .fillMaxSize()
         ) {
-            Spacer(modifier = Modifier.height(60.dp))
-            AddTextAccount(
-                text = "Account",
-                size = 28.sp,
-                color = MaterialTheme.colorScheme.primary
-            )
-            AddRowAccount("Email:", basePreferenceHelper.getUser()?.userinfo?.email ?: "")
-            AddRowAccount("Product:", basePreferenceHelper.getProduct()?.productName ?: "")
-            AddRowAccount("Account Status:", basePreferenceHelper.getProduct()?.status ?: "")
-
-            Surface(
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
                 modifier = Modifier
-                    .padding(top = 24.dp, bottom = 0.dp)
-                    .height(1.dp)
-                    .fillMaxWidth(),
-                color = colorResource(id = R.color.gray_icon)
-            ) {}
-
-            AddRowAccountIcon(
-                icon = painterResource(id = R.drawable.subscription3x),
-                text = "Upgrade Subscription",
-                onClick = {
-                    navHostController.navigate(
-                        Screen.Subscription.route
-                    )
-                }
-            )
-            AddRowAccountIcon(
-                icon = painterResource(id = R.drawable.fav3x),
-                text = "Favorite Servers",
-                onClick = {
-                    navHostController.navigate(
-                        Screen.FavoriteServers.route
-                    )
-                }
-            )
-            AddRowAccountIcon(
-                icon = painterResource(id = R.drawable.lock3x),
-                text = "Change Password",
-                onClick = {
-                    navHostController.navigate(
-                        Screen.ChangePassword.route
-                    )
-                }
-            )
-            AddRowAccountIcon(
-                icon = painterResource(id = R.drawable.delete3x),
-                text = "Delete Account",
-                onClick = {
-                    isDelete = true
-                    Log.d("islogoutClicked?", "isDelete Yes")
-                }
-            )
-            AddRowAccountIcon(
-                icon = painterResource(id = R.drawable.logout3x),
-                text = "Logout",
-                onClick = {
-                    isLoggedOut = true
-                    Log.d("islogoutClicked?", "Yes")
-                }
-            )
-        }
+                    .padding(start = 16.dp, end = 24.dp)
+                    .fillMaxSize()
+            ) {
+                Spacer(modifier = Modifier.height(60.dp))
+                AddTextAccount(
+                    text = "Account",
+                    size = 28.sp,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                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)
+                        .height(1.dp)
+                        .fillMaxWidth(),
+                    color = colorResource(id = R.color.gray_icon)
+                ) {}
+
+                AddRowAccountIcon(
+                    icon = painterResource(id = R.drawable.subscription3x),
+                    text = "Upgrade Subscription",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.Subscription.route
+                        )
+                    }
+                )
+                AddRowAccountIcon(
+                    icon = painterResource(id = R.drawable.fav3x),
+                    text = "Favorite Servers",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.FavoriteServers.route
+                        )
+                    }
+                )
+                AddRowAccountIcon(
+                    icon = painterResource(id = R.drawable.lock3x),
+                    text = "Change Password",
+                    onClick = {
+                        navHostController.navigate(
+                            Screen.ChangePassword.route
+                        )
+                    }
+                )
+                AddRowAccountIcon(
+                    icon = painterResource(id = R.drawable.delete3x),
+                    text = "Delete Account",
+                    onClick = {
+                        isDelete = true
+                        Log.d("islogoutClicked?", "isDelete Yes")
+                    }
+                )
+                AddRowAccountIcon(
+                    icon = painterResource(id = R.drawable.logout3x),
+                    text = "Logout",
+                    onClick = {
+                        isLoggedOut = true
+                        Log.d("islogoutClicked?", "Yes")
+                    }
+                )
+            }
 
-        if (isLoggedOut) {
-            Log.d("islogoutClicked", "isLoggedOut$isLoggedOut")
+            if (isLoggedOut) {
+                Log.d("islogoutClicked", "isLoggedOut$isLoggedOut")
 
-            AlertDialog(
-                onDismissRequest = { isLoggedOut = false },
-                properties = DialogProperties(),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(228.dp)
+                AlertDialog(
+                    onDismissRequest = { isLoggedOut = false },
+                    properties = DialogProperties(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(228.dp)
                 ) {
-                LogoutDialog("Logout Account",
-                    "Are you sure to logout the account?",
-                    onCancel = {
-                        isLoggedOut = false
-                    },
-                    settingsNavHostController,
-                    isLoggedOut,
-                    isDelete,
-                    basePreferenceHelper,
-                    accountViewModel
+                    LogoutDialog("Logout Account",
+                        "Are you sure to logout the account?",
+                        onCancel = {
+                            isLoggedOut = false
+                        },
+                        settingsNavHostController,
+                        isLoggedOut,
+                        isDelete,
+                        basePreferenceHelper,
+                        accountViewModel
                     )
+                }
             }
-        }
 
-        if (isDelete) {
-            Log.d("islogoutClicked", "isDelete$isDelete")
+            if (isDelete) {
+                Log.d("islogoutClicked", "isDelete$isDelete")
 
-            AlertDialog(
-                onDismissRequest = { isDelete = false },
-                properties = DialogProperties(),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(228.dp)
-            ) {
-                LogoutDialog("Delete Account",
-                    "Are you sure to delete the account?",
-                    onCancel = { isDelete = false },
-                    settingsNavHostController,
-                    isLoggedOut,
-                    isDelete,
-                    basePreferenceHelper,
-                    accountViewModel
+                AlertDialog(
+                    onDismissRequest = { isDelete = false },
+                    properties = DialogProperties(),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(228.dp)
+                ) {
+                    LogoutDialog("Delete Account",
+                        "Are you sure to delete the account?",
+                        onCancel = { isDelete = false },
+                        settingsNavHostController,
+                        isLoggedOut,
+                        isDelete,
+                        basePreferenceHelper,
+                        accountViewModel
                     )
+                }
             }
-        }
 
-        if (accountViewModel.liveDataLogoutStatus.value == true) {
-            var progress by remember { mutableFloatStateOf(0.1F) }
+            if (accountViewModel.liveDataLogoutStatus.value == true) {
+                var progress by remember { mutableFloatStateOf(0.1F) }
 
-            LaunchedEffect(key1 = Unit) {
-                for (i in 1..100) {
-                    progress = i.toFloat()/100F
-                    delay(100)
+                LaunchedEffect(key1 = Unit) {
+                    for (i in 1..100) {
+                        progress = i.toFloat()/100F
+                        delay(100)
+                    }
                 }
-            }
 
-            CircularProgressIndicator(
-                progress = { progress },
-                modifier = Modifier
-                    .align(Alignment.Center)
-                    .size(50.dp),
-                color = colorResource(id = R.color.yellow_text),
-                strokeWidth = 5.dp,
-            )
-        }
-
-        val logoutResponse = accountViewModel.liveDataLogout.observeAsState().value
-        logoutResponse?.let {
-            Log.d("test_button_log", "logout api response")
-            accountViewModel.setLogoutStatus(false)
-            if (it) {
-                Log.d("test_api_response","Logout live: $logoutResponse")
-                basePreferenceHelper.setLoggedInState(false)
-                basePreferenceHelper.clearAllData()
-                settingsNavHostController.popBackStack()
-                settingsNavHostController.navigate(Screen.Started.route)
-
-                val widgetIntent = Intent(context, SimpleAppWidget::class.java)
-                widgetIntent.action = SimpleAppWidget.ACTION_LOGOUT
-                context.sendBroadcast(widgetIntent)
-            }
-            else {
-                Log.d("test_api_response","Logout false: $logoutResponse")
-                accountViewModel.mutableLiveDataLogoutStatus.value = false
-                Toast.makeText(context, logoutResponse.toString(), Toast.LENGTH_SHORT).show()
+                CircularProgressIndicator(
+                    progress = { progress },
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .size(50.dp),
+                    color = colorResource(id = R.color.yellow_text),
+                    strokeWidth = 5.dp,
+                )
             }
-            accountViewModel.mutableLiveDataLogout.value = null
-        }
 
-        val deleteResponse = accountViewModel.liveDataDelete.observeAsState().value
-        deleteResponse?.let {
-            accountViewModel.setLogoutStatus(false)
-            if (it.status) {
-                Log.d("test_api_response","Delete live: ${deleteResponse.status}")
-                basePreferenceHelper.setLoggedInState(false)
-                basePreferenceHelper.clearAllData()
-                settingsNavHostController.popBackStack()
-                settingsNavHostController.navigate(Screen.Started.route)
+            val logoutResponse = accountViewModel.liveDataLogout.observeAsState().value
+            logoutResponse?.let {
+                Log.d("test_button_log", "logout api response")
+                accountViewModel.setLogoutStatus(false)
+                if (it) {
+                    Log.d("test_api_response","Logout live: $logoutResponse")
+                    basePreferenceHelper.setLoggedInState(false)
+                    basePreferenceHelper.clearAllData()
+                    settingsNavHostController.popBackStack()
+                    settingsNavHostController.navigate(Screen.Started.route)
+
+                    val widgetIntent = Intent(context, SimpleAppWidget::class.java)
+                    widgetIntent.action = SimpleAppWidget.ACTION_LOGOUT
+                    context.sendBroadcast(widgetIntent)
+                }
+                else {
+                    Log.d("test_api_response","Logout false: $logoutResponse")
+                    accountViewModel.mutableLiveDataLogoutStatus.value = false
+                    Toast.makeText(context, logoutResponse.toString(), Toast.LENGTH_SHORT).show()
+                }
+                accountViewModel.mutableLiveDataLogout.value = null
             }
-            else {
-                Log.d("test_api_response","Delete false: ${deleteResponse.status}")
-                accountViewModel.mutableLiveDataDeleteStatus.value = false
-                Toast.makeText(context, deleteResponse.status.toString(), Toast.LENGTH_SHORT).show()
+
+            val deleteResponse = accountViewModel.liveDataDelete.observeAsState().value
+            deleteResponse?.let {
+                accountViewModel.setLogoutStatus(false)
+                if (it.status) {
+                    Log.d("test_api_response","Delete live: ${deleteResponse.status}")
+                    basePreferenceHelper.setLoggedInState(false)
+                    basePreferenceHelper.clearAllData()
+                    settingsNavHostController.popBackStack()
+                    settingsNavHostController.navigate(Screen.Started.route)
+                }
+                else {
+                    Log.d("test_api_response","Delete false: ${deleteResponse.status}")
+                    accountViewModel.mutableLiveDataDeleteStatus.value = false
+                    Toast.makeText(context, deleteResponse.status.toString(), Toast.LENGTH_SHORT).show()
+                }
+                accountViewModel.mutableLiveDataDelete.value = null
             }
-            accountViewModel.mutableLiveDataDelete.value = null
         }
     }
 }

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

@@ -2,7 +2,9 @@ package com.vpn.fastestvpnservice.screens.bottomNavBarScreens
 
 import android.util.Log
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.LocalOverscrollConfiguration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -19,6 +21,8 @@ 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.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Help
 import androidx.compose.material.icons.filled.ElectricBolt
@@ -32,6 +36,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -55,58 +60,65 @@ import com.vpn.fastestvpnservice.R
 import com.vpn.fastestvpnservice.navigation.navigationAnimation
 import com.vpn.fastestvpnservice.sealedClass.Screen
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun Help(navHostController: NavHostController) {
 
-    Box(modifier = Modifier
-        .background(MaterialTheme.colorScheme.background)
-        .fillMaxSize(),
-//        contentAlignment = Alignment.Center
-
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
     ) {
-        Column(
-            verticalArrangement = Arrangement.Top,
-            horizontalAlignment = Alignment.Start,
+        Box(
             modifier = Modifier
-                .padding(start = 16.dp, end = 24.dp)
+                .background(MaterialTheme.colorScheme.background)
                 .fillMaxSize()
+                .verticalScroll(rememberScrollState()),
+//        contentAlignment = Alignment.Center
+
         ) {
-            Spacer(modifier = Modifier.height(60.dp))
-            AddTextHelp(
-                text = "Help",
-                size = 28.sp,
-                color = MaterialTheme.colorScheme.primary
-            )
-            AddRow(icon = R.drawable.faq3x,
-                text = "FAQ", navHostController = navHostController)
-            {
-                navHostController.navigate(
-                Screen.FAQ.route
-            )}
-            AddRow(icon = R.drawable.privacy3x,
-                text = "Privacy Policy", navHostController = navHostController) {
-                navHostController.navigate(
-                    Screen.PrivacyPolicy.route
-                )
-            }
-            AddRow(icon = R.drawable.terms3x,
-                text = "Terms and Conditions", navHostController = navHostController) {
-                navHostController.navigate(
-                    Screen.TermsAndConditions.route
-                )
-            }
-            AddRow(icon = R.drawable.about3x,
-                text = "About Fastest VPN", navHostController = navHostController) {
-                navHostController.navigate(
-                    Screen.About.route
-                )
-            }
-            AddRow(icon = R.drawable.customer_support3x,
-                text = "Customer Support",
-                navHostController = navHostController) {
-                navHostController.navigate(
-                    Screen.CustomerSupport.route
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 24.dp)
+                    .fillMaxSize()
+            ) {
+                Spacer(modifier = Modifier.height(60.dp))
+                AddTextHelp(
+                    text = "Help",
+                    size = 28.sp,
+                    color = MaterialTheme.colorScheme.primary
                 )
+                AddRow(icon = R.drawable.faq3x,
+                    text = "FAQ", navHostController = navHostController)
+                {
+                    navHostController.navigate(
+                        Screen.FAQ.route
+                    )}
+                AddRow(icon = R.drawable.privacy3x,
+                    text = "Privacy Policy", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.PrivacyPolicy.route
+                    )
+                }
+                AddRow(icon = R.drawable.terms3x,
+                    text = "Terms and Conditions", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.TermsAndConditions.route
+                    )
+                }
+                AddRow(icon = R.drawable.about3x,
+                    text = "About Fastest VPN", navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.About.route
+                    )
+                }
+                AddRow(icon = R.drawable.customer_support3x,
+                    text = "Customer Support",
+                    navHostController = navHostController) {
+                    navHostController.navigate(
+                        Screen.CustomerSupport.route
+                    )
+                }
             }
         }
     }

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

@@ -34,7 +34,9 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.CallSplit
 import androidx.compose.material.icons.filled.Block
@@ -124,98 +126,106 @@ import com.vpn.fastestvpnservice.viewmodels.SplashViewModel
 import de.blinkt.openvpn.core.App
 import kotlinx.coroutines.launch
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
 @Composable
 fun Settings(navHostController: NavHostController) {
 
-
-    Box(modifier = Modifier
-        .background(MaterialTheme.colorScheme.background)
-        .fillMaxSize(),
-//        contentAlignment = Alignment.Center
+    CompositionLocalProvider(
+        LocalOverscrollConfiguration provides null
     ) {
+        Box(modifier = Modifier
+            .background(MaterialTheme.colorScheme.background)
+            .fillMaxSize()
+            .padding(vertical = 10.dp)
+            ,
+//        contentAlignment = Alignment.Center
+        ) {
 //        val view = LocalView.current
 //        val window = (view.context as Activity).window
 //        window.statusBarColor = colorResource(id = R.color.background_color_gray2).toArgb()
 
-        val context = LocalContext.current
-        val basePreferenceHelper = BasePreferenceHelper(context)
-        Column(
-            verticalArrangement = Arrangement.Top,
-            horizontalAlignment = Alignment.Start,
-            modifier = Modifier
-                .padding(start = 16.dp, end = 24.dp)
-                .fillMaxSize()
-        ) {
-            if (BottomBarScreen.Settings.isTrue) {
-                AddRowSettingsSmart(
-                    icon = R.drawable.smart_connect3x,
-                    text = "Smart Connect",
-                    isRowShown = false,
-                    isSheetShown = true,
-                    navHostController
-                )
-            }
+            val context = LocalContext.current
+            val basePreferenceHelper = BasePreferenceHelper(context)
+            Column(
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.Start,
+                modifier = Modifier
+                    .padding(start = 16.dp, end = 24.dp)
+                    .fillMaxSize()
+                    .verticalScroll(rememberScrollState())
 
-            Spacer(modifier = Modifier.height(60.dp))
-            AddTextSettings(
-                text = "Settings",
-                size = 28.sp,
-                color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.headlineLarge
-            )
-            AddRowSettingsColumn(
-                icon = R.drawable.vpn_protocols3x,
-                text = "VPN Protocols",
-                desc = "WireGuard"
-            )
+            ) {
+                if (BottomBarScreen.Settings.isTrue) {
+                    AddRowSettingsSmart(
+                        icon = R.drawable.smart_connect3x,
+                        text = "Smart Connect",
+                        isRowShown = false,
+                        isSheetShown = true,
+                        navHostController
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(60.dp))
+                AddTextSettings(
+                    text = "Settings",
+                    size = 28.sp,
+                    color = MaterialTheme.colorScheme.primary,
+                    style = MaterialTheme.typography.headlineLarge
+                )
+                AddRowSettingsColumn(
+                    icon = R.drawable.vpn_protocols3x,
+                    text = "VPN Protocols",
+                    desc = "WireGuard"
+                )
 //            AddRowSwitch(
 //                icon = R.drawable.autoconnect3x,
 //                text = "Auto Connect"
 //            )
 
-            /* Commenting so far ...*/
+                /* Commenting so far ...*/
 //            AddRowSettings(
 //                icon = R.drawable.autoconnect3x,
 //                text = "Auto Connect",
 //                onClick = {}
 //            )
-            AddRowSettingsSmart(
-                icon = R.drawable.smart_connect3x,
-                text = "Smart Connect",
-                isRowShown = true,
-                isSheetShown = false,
-                navHostController
-            )
-            AddRowSwitch(
-                icon = R.drawable.adblock3x,
-                text = "AdBlock"
-            )
-            val context = LocalContext.current
-            AddRowSettings(
-                icon = R.drawable.kill_switch3x,
-                text = "Kill Switch",
-                onClick = {
-                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-                        gotoVPNSettings(context)
+                AddRowSettingsSmart(
+                    icon = R.drawable.smart_connect3x,
+                    text = "Smart Connect",
+                    isRowShown = true,
+                    isSheetShown = false,
+                    navHostController
+                )
+                AddRowSwitch(
+                    icon = R.drawable.adblock3x,
+                    text = "AdBlock"
+                )
+                val context = LocalContext.current
+                AddRowSettings(
+                    icon = R.drawable.kill_switch3x,
+                    text = "Kill Switch",
+                    onClick = {
+                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+                            gotoVPNSettings(context)
+                        }
                     }
-                }
-            )
-            AddRowSettings(
-                icon = R.drawable.split_tunneling3x,
-                text = "Split Tunneling",
-                onClick = { navHostController.navigate(Screen.SplitTunneling.route) }
-            )
-            AddRowSettings(
-                icon = R.drawable.notification3x,
-                text = "Notifications",
-                onClick = { navHostController.navigate(Screen.Notifications.route) }
-            )
-            AddRowDarkLightTheme(
-                icon = Icons.Default.DarkMode,
-                text = "Theme")
+                )
+                AddRowSettings(
+                    icon = R.drawable.split_tunneling3x,
+                    text = "Split Tunneling",
+                    onClick = { navHostController.navigate(Screen.SplitTunneling.route) }
+                )
+                AddRowSettings(
+                    icon = R.drawable.notification3x,
+                    text = "Notifications",
+                    onClick = { navHostController.navigate(Screen.Notifications.route) }
+                )
+                AddRowDarkLightTheme(
+                    icon = Icons.Default.DarkMode,
+                    text = "Theme")
+            }
         }
     }
+
 }
 
 private fun gotoVPNSettings(context: Context) {
@@ -525,7 +535,11 @@ fun ColumnScope.AddRowSettingsColumn(
                                         onClick = {
                                             selectedProtocol = protocol
                                             isSheetOpen = false
-                                            SelectProtocolCallback(protocol = protocol, context, serverListViewModel)
+                                            SelectProtocolCallback(
+                                                protocol = protocol,
+                                                context,
+                                                serverListViewModel
+                                            )
                                         },
                                     )
 //                                    .indication(