Title and Description style for SettingsScreen items

app/src/main/java/pl/lambada/songsync/ui/components/SettingsHeadLabel.kt

@@ -0,0 +1,25 @@
+package pl.lambada.songsync.ui.components
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SettingsHeadLabel(
+    label: String,
+) {
+    Text(
+        text = label,
+        style = MaterialTheme.typography.labelMedium,
+        modifier = Modifier.padding(
+            start = 22.dp,
+            top = 22.dp,
+            end = 22.dp,
+            bottom = 0.dp
+        ),
+        color = MaterialTheme.colorScheme.primary
+    )
+}

app/src/main/java/pl/lambada/songsync/ui/components/SwitchItem.kt

@@ -1,18 +1,22 @@
 package pl.lambada.songsync.ui.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.CombinedModifier
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 @Composable
 fun SwitchItem(
@@ -23,6 +27,7 @@ fun SwitchItem(
         horizontal = 22.dp,
         vertical = 16.dp
     ),
+    description: String = "",
     onClick: () -> Unit,
 ) {
     Row(
@@ -34,10 +39,21 @@ fun SwitchItem(
         ),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Text(
-            text = label,
+        Column(
             modifier = Modifier.weight(1f),
-        )
+        ) {
+            Text(
+                text = label,
+            )
+            if (description.isNotEmpty() == true) {
+                Text(
+                    text = description,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    fontSize = 12.sp,
+                    lineHeight = 16.sp,
+                )
+            }
+        }
         Spacer(modifier = Modifier.width(12.dp))
         Switch(
             checked = selected,

app/src/main/java/pl/lambada/songsync/ui/screens/settings/SettingsScreen.kt

@@ -19,6 +19,7 @@ import androidx.navigation.NavController
 import pl.lambada.songsync.R
 import pl.lambada.songsync.data.remote.UpdateState
 import pl.lambada.songsync.data.UserSettingsController
+import pl.lambada.songsync.ui.components.SettingsHeadLabel
 import pl.lambada.songsync.ui.screens.settings.components.OffsetModeSwitch
 import pl.lambada.songsync.ui.screens.settings.components.SettingsScreenTopBar
 import pl.lambada.songsync.ui.screens.settings.components.AppInfoSection
@@ -65,48 +66,45 @@ fun SettingsScreen(
             modifier = Modifier.fillMaxWidth(),
             contentPadding = paddingValues
         ) {
+            item { SettingsHeadLabel(label = stringResource(id = R.string.theme)) }
             item {
                 if (isSystemInDarkTheme()) PureBlackThemeSwitch(
                     selected = userSettingsController.pureBlack,
                     onToggle = { userSettingsController.updatePureBlack(it) }
                 )
             }
-
             item {
                 MarqueeSwitch(
                     selected = userSettingsController.disableMarquee,
                     onToggle = { userSettingsController.updateDisableMarquee(it) }
                 )
             }
-
             item {
                 ShowPathSwitch(
                     selected = userSettingsController.showPath,
                     onToggle = { userSettingsController.updateShowPath(it) }
                 )
             }
 
+            item { SettingsHeadLabel(label = stringResource(id = R.string.provider)) }
             item {
                 TranslationSwitch(
                     selected = userSettingsController.includeTranslation,
                     onToggle = { userSettingsController.updateIncludeTranslation(it) }
                 )
             }
-
             item {
                 MultiPersonSwitch(
                     selected = userSettingsController.multiPersonWordByWord,
                     onToggle = { userSettingsController.updateMultiPersonWordByWord(it) }
                 )
             }
-
             item {
                 SyncedLyricsSwitch(
                     selected = userSettingsController.unsyncedFallbackMusixmatch,
                     onToggle = { userSettingsController.updateUnsyncedFallbackMusixmatch(it) }
                 )
             }
-
             item {
                 OffsetModeSwitch(
                     selected = userSettingsController.directlyModifyTimestamps,
@@ -115,6 +113,7 @@ fun SettingsScreen(
             }
 
             if (Build.VERSION.SDK_INT < Build.VERSION_CODES.R) {
+                item { SettingsHeadLabel(label = stringResource(R.string.sd_card)) }
                 item {
                     SdCardPathSetting(
                         sdPath = userSettingsController.sdCardPath,
@@ -128,28 +127,32 @@ fun SettingsScreen(
                 }
             }
 
+            item { SettingsHeadLabel(label = stringResource(R.string.about_songsync)) }
             item {
                 AppInfoSection(
                     version = version,
                     onCheckForUpdates = { viewModel.checkForUpdates(context) }
                 )
             }
 
+            item { SettingsHeadLabel(label = stringResource(R.string.source_code)) }
             item {
                 ExternalLinkSection(
-                    label = stringResource(R.string.source_code),
-                    description = stringResource(R.string.view_on_github),
                     url = "https://github.com/Lambada10/SongSync",
                     uriHandler = uriHandler
                 )
             }
 
+            item { SettingsHeadLabel(stringResource(R.string.support)) }
             item { SupportSection(uriHandler = uriHandler) }
 
+            item { SettingsHeadLabel(label = stringResource(id = R.string.translation)) }
             item { TranslationSection(uriHandler = uriHandler) }
 
+            item { SettingsHeadLabel(stringResource(R.string.contributors)) }
             item { ContributorsSection(uriHandler = uriHandler) }
 
+            item { SettingsHeadLabel(label = stringResource(id = R.string.thanks_to)) }
             item { CreditsSection(uriHandler = uriHandler) }
         }
     }
@@ -164,4 +167,4 @@ fun SettingsScreen(
             changelog = updateState.release.changelog ?: ""
         )
     }
-}
+}

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/AppInfoSection.kt

@@ -1,5 +1,6 @@
 package pl.lambada.songsync.ui.screens.settings.components
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
@@ -10,13 +11,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
 
 @Composable
 fun AppInfoSection(version: String, onCheckForUpdates: () -> Unit) {
-    SettingsItem(
-        label = stringResource(R.string.about_songsync),
-        modifier = Modifier.padding(horizontal = 22.dp, vertical = 16.dp)
+    Column(
+        modifier = Modifier
+            .padding(horizontal = 22.dp, vertical = 16.dp),
     ) {
         Text(stringResource(R.string.what_is_songsync))
         Text(stringResource(R.string.extra_what_is_songsync))

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/ContributorsSection.kt

@@ -12,12 +12,10 @@ import androidx.compose.ui.platform.UriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
 
 @Composable
 fun ContributorsSection(uriHandler: UriHandler) {
-    SettingsItem(stringResource(R.string.contributors)) {
+    Column{
         Contributor.entries.forEach {
             val additionalInfo = stringResource(id = it.contributionLevel.stringResource)
             Column(
@@ -35,4 +33,4 @@ fun ContributorsSection(uriHandler: UriHandler) {
             }
         }
     }
-}
+}

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/CreditsSection.kt

@@ -1,6 +1,7 @@
 package pl.lambada.songsync.ui.screens.settings.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -18,12 +19,12 @@ import androidx.compose.ui.platform.UriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
+import pl.lambada.songsync.ui.components.SettingsHeadLabel
 
 
 @Composable
 fun CreditsSection(uriHandler: UriHandler) {
-    SettingsItem(label = stringResource(id = R.string.thanks_to)) {
+    Column{
         val credits = mapOf(
             stringResource(R.string.spotify_api) to "https://developer.spotify.com/documentation/web-api",
             stringResource(R.string.spotifylyrics_api) to "https://github.com/akashrchandran/spotify-lyrics-api",

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/ExternalLinkSection.kt

@@ -1,6 +1,7 @@
 package pl.lambada.songsync.ui.screens.settings.components
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -11,22 +12,22 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
+import pl.lambada.songsync.ui.components.SettingsHeadLabel
 
 
 @Composable
-fun ExternalLinkSection(label: String, description: String, url: String, uriHandler: UriHandler) {
-    SettingsItem(
-        label,
+fun ExternalLinkSection(url: String, uriHandler: UriHandler) {
+    Column(
         modifier = Modifier
             .clickable { uriHandler.openUri(url) }
             .padding(horizontal = 22.dp, vertical = 16.dp)
     ) {
         Text(stringResource(R.string.we_are_open_source))
         Text(
-            text = description,
-            color = MaterialTheme.colorScheme.outline,
-            fontSize = 12.sp
+            text = stringResource(R.string.view_on_github),
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+            fontSize = 12.sp,
+            lineHeight = 16.sp,
         )
     }
 }

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/MarqueeSwitch.kt

@@ -3,17 +3,15 @@ package pl.lambada.songsync.ui.screens.settings.components
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
 import pl.lambada.songsync.ui.components.SwitchItem
 
 
 @Composable
 fun MarqueeSwitch(selected: Boolean, onToggle: (Boolean) -> Unit) {
-    SettingsItem(label = stringResource(R.string.disable_marquee)) {
-        SwitchItem(
-            label = stringResource(R.string.disable_marquee_summary),
-            selected = selected,
-            onClick = { onToggle(!selected) }
-        )
-    }
+    SwitchItem(
+        label = stringResource(R.string.disable_marquee),
+        description = stringResource(R.string.disable_marquee_summary),
+        selected = selected,
+        onClick = { onToggle(!selected) }
+    )
 }

app/src/main/java/pl/lambada/songsync/ui/screens/settings/components/MultiPersonSwitch.kt

@@ -3,16 +3,14 @@ package pl.lambada.songsync.ui.screens.settings.components
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import pl.lambada.songsync.R
-import pl.lambada.songsync.ui.components.SettingsItem
 import pl.lambada.songsync.ui.components.SwitchItem
 
 @Composable
 fun MultiPersonSwitch(selected: Boolean, onToggle: (Boolean) -> Unit) {
-    SettingsItem(label = stringResource(id = R.string.multi_person_word_by_word)) {
-        SwitchItem(
-            label = stringResource(id = R.string.multi_person_word_by_word_summary),
-            selected = selected,
-            onClick = { onToggle(!selected) }
-        )
-    }
+    SwitchItem(
+        label = stringResource(id = R.string.multi_person_word_by_word),
+        description = stringResource(id = R.string.multi_person_word_by_word_summary),
+        selected = selected,
+        onClick = { onToggle(!selected) }
+    )
 }