Fix currencies screen padding and section header styling

shared/src/androidMain/kotlin/xyz/tyiu/satsprice/ui/Dimensions.android.kt

@@ -3,4 +3,4 @@ package xyz.tyiu.satsprice.ui
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-actual val screenHorizontalPadding: Dp = 4.dp
+actual val screenHorizontalPadding: Dp = 16.dp

shared/src/commonMain/kotlin/xyz/tyiu/satsprice/ui/PriceScreen.kt

@@ -48,6 +48,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import dev.icerock.moko.resources.compose.stringResource
@@ -57,6 +58,12 @@ import xyz.tyiu.satsprice.shared.MR
 private val SectionColors
     @Composable get() = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
 
+private val SectionHeaderStyle
+    @Composable get() = MaterialTheme.typography.labelLarge.copy(
+        color = MaterialTheme.colorScheme.primary,
+        letterSpacing = 1.2.sp,
+    )
+
 @Composable
 fun PriceScreen(
     viewModel: PriceViewModel = viewModel { PriceViewModel() },
@@ -364,8 +371,9 @@ private fun CurrencyPickerScreen(
 
                 Column {
                     Text(
-                        stringResource(MR.strings.current_currency_section_title),
+                        stringResource(MR.strings.current_currency_section_title).uppercase(),
-                        style = MaterialTheme.typography.titleMedium,
+                        style = SectionHeaderStyle,
+                        modifier = Modifier.padding(bottom = 4.dp),
                     )
                     CurrencyRow(
                         info = state.currentCurrency(),
@@ -378,8 +386,9 @@ private fun CurrencyPickerScreen(
                 if (selectedOthers.isNotEmpty()) {
                     Column {
                         Text(
-                            stringResource(MR.strings.selected_currencies_section_title),
+                            stringResource(MR.strings.selected_currencies_section_title).uppercase(),
-                            style = MaterialTheme.typography.titleMedium,
+                            style = SectionHeaderStyle,
+                            modifier = Modifier.padding(bottom = 4.dp),
                         )
                         selectedOthers.forEach { info ->
                             key(info.code) {
@@ -395,7 +404,11 @@ private fun CurrencyPickerScreen(
                 }
 
                 Column {
-                    Text(stringResource(MR.strings.currencies_section_title), style = MaterialTheme.typography.titleMedium)
+                    Text(
+                        stringResource(MR.strings.currencies_section_title).uppercase(),
+                        style = SectionHeaderStyle,
+                        modifier = Modifier.padding(bottom = 4.dp),
+                    )
                     state.unselectedCurrencies().forEach { info ->
                         key(info.code) {
                             CurrencyRow(

shared/src/commonMain/moko-resources/base/strings.xml

@@ -10,7 +10,7 @@
     <string name="exceeds_max_supply">Exceeds the 21,000,000 BTC maximum supply</string>
     <string name="currencies_section_title">Currencies</string>
     <string name="current_currency_section_title">Current Currency</string>
-    <string name="selected_currencies_section_title">Selected currencies</string>
+    <string name="selected_currencies_section_title">Selected Currencies</string>
     <string name="add_currency">Add currency</string>
     <string name="currencies_selected_count">%1$d selected</string>
     <string name="remove_currency_content_description">Remove %1$s</string>