Use divider to separate custom and hardcoded server options. Introduce new padding value.

app/src/main/java/com/vitorpamplona/amethyst/ui/actions/mediaServers/MediaServersLIstView.kt

@@ -20,8 +20,8 @@
  */
 package com.vitorpamplona.amethyst.ui.actions.mediaServers
 
+import androidx.compose.foundation.ExperimentalFoundationApi
 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.Spacer
@@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Scaffold
@@ -53,11 +54,13 @@ import com.vitorpamplona.amethyst.ui.actions.CloseButton
 import com.vitorpamplona.amethyst.ui.actions.SaveButton
 import com.vitorpamplona.amethyst.ui.actions.relays.SettingsCategoryWithButton
 import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel
-import com.vitorpamplona.amethyst.ui.theme.FeedPadding
+import com.vitorpamplona.amethyst.ui.theme.DividerThickness
+import com.vitorpamplona.amethyst.ui.theme.DoubleVertPadding
 import com.vitorpamplona.amethyst.ui.theme.StdVertSpacer
 import com.vitorpamplona.amethyst.ui.theme.grayText
 
 // TODO: Implement UI for Media servers view.
+@ExperimentalFoundationApi
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MediaServersListView(
@@ -115,40 +118,45 @@ fun MediaServersListView(
                 )
             },
         ) { padding ->
-            LazyColumn(
+            Column(
                 modifier =
                     Modifier
                         .fillMaxSize()
                         .padding(
-                            16.dp,
+                            start = 16.dp,
-                            padding.calculateTopPadding(),
+                            top = padding.calculateTopPadding(),
-                            16.dp,
+                            end = 16.dp,
-                            padding.calculateBottomPadding(),
+                            bottom = padding.calculateBottomPadding(),
                         ),
-                verticalArrangement = Arrangement.SpaceAround,
+                verticalArrangement = Arrangement.spacedBy(5.dp, alignment = Alignment.Top),
                 horizontalAlignment = Alignment.CenterHorizontally,
-                contentPadding = FeedPadding,
             ) {
-                item {
                 Text(
                     "Set your preferred media upload servers.",
                     textAlign = TextAlign.Center,
-                        style = MaterialTheme.typography.bodyMedium,
+                    style = MaterialTheme.typography.bodyLarge,
                     color = MaterialTheme.colorScheme.grayText,
                 )
-                }
 
+                HorizontalDivider(
+                    thickness = DividerThickness,
+                    color = MaterialTheme.colorScheme.onSurface,
+                )
+
+                LazyColumn(
+//                    modifier =
+//                        Modifier
+//                            .padding(top = 10.dp),
+                    verticalArrangement = Arrangement.SpaceAround,
+                    horizontalAlignment = Alignment.CenterHorizontally,
+//                    contentPadding = FeedPadding,
+                ) {
                     if (mediaServersState.isEmpty()) {
                         item {
-                        Box(
+                            Text(
-                            modifier =
+                                text = "You have no custom media servers set.",
-                                Modifier
+                                modifier = DoubleVertPadding,
-                                    .fillMaxWidth()
+                            )
-                                    .fillMaxWidth(0.2f),
-                            contentAlignment = Alignment.Center,
-                        ) {
-                            Text(text = "You have no custom media servers set.")
-                        }
                         }
                     } else {
                         itemsIndexed(
@@ -164,8 +172,14 @@ fun MediaServersListView(
                     }
 
                     item {
+                        HorizontalDivider(
+                            thickness = DividerThickness,
+                            color = MaterialTheme.colorScheme.onSurface,
+                        )
+
                         SettingsCategoryWithButton(
                             title = "Built-in Media Servers",
+                            description = "These servers come by default with Amethyst.",
                             action = {
                                 OutlinedButton(
                                     onClick = { },
@@ -190,6 +204,7 @@ fun MediaServersListView(
                 }
             }
         }
+    }
 }
 
 @Composable
@@ -209,7 +224,7 @@ fun MediaServerEntry(
             serverEntry.let {
                 Text(
                     text = it.name,
-                    style = MaterialTheme.typography.headlineMedium,
+                    style = MaterialTheme.typography.bodyLarge,
                 )
                 Spacer(modifier = StdVertSpacer)
                 Text(
@@ -219,7 +234,6 @@ fun MediaServerEntry(
                 )
             }
         }
-        Column {
         OutlinedButton(
             onClick = {
                 onDelete(serverEntry.baseUrl)
@@ -232,6 +246,8 @@ fun MediaServerEntry(
         ) {
             Text(text = "Set Default")
         }
-        }
+//        Column {
+//
+//        }
     }
 }

app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Shape.kt

@@ -121,6 +121,9 @@ val HalfVertPadding = Modifier.padding(vertical = 5.dp)
 val HorzPadding = Modifier.padding(horizontal = 10.dp)
 val VertPadding = Modifier.padding(vertical = 10.dp)
 
+val DoubleHorzPadding = Modifier.padding(horizontal = 20.dp)
+val DoubleVertPadding = Modifier.padding(vertical = 20.dp)
+
 val MaxWidthWithHorzPadding = Modifier.fillMaxWidth().padding(horizontal = 10.dp)
 
 val Size5Modifier = Modifier.size(5.dp)