ANDROAPP-5747-radio-buttons-and-text-are-not-vertically-aligned (#163)

* Center vertical align radio button and text * Apply text style to radio button text * Fix input checkbox text alignment Same issue as the radio button, so fixing it in the same PR
dhis2 · Dec 7, 2023 · dd4346e · dd4346e
1 parent 87f7b79
commit dd4346e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/...gnsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/CheckBox.kt b/...gnsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/CheckBox.kt
@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -49,7 +50,7 @@ fun CheckBox(
 
     Row(
         horizontalArrangement = Arrangement.spacedBy(Spacing.Spacing0, Alignment.Start),
-        verticalAlignment = Alignment.Top,
+        verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
             .clickable(
                 interactionSource = interactionSource,
@@ -91,6 +92,7 @@ fun CheckBox(
                     .hoverPointerIcon(checkBoxData.enabled),
                 text = it,
                 color = textColor,
+                style = MaterialTheme.typography.bodyLarge,
             )
         }
     }

diff --git a/...ystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/RadioButton.kt b/...ystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/RadioButton.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RadioButton
 import androidx.compose.material3.RadioButtonDefaults
 import androidx.compose.material3.Text
@@ -42,7 +43,7 @@ fun RadioButton(
     val interactionSource = if (radioButtonData.enabled) remember { MutableInteractionSource() } else MutableInteractionSource()
     Row(
         horizontalArrangement = Arrangement.spacedBy(Spacing.Spacing0, Alignment.Start),
-        verticalAlignment = Alignment.Top,
+        verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
             .clickable(
                 interactionSource = interactionSource,
@@ -88,6 +89,7 @@ fun RadioButton(
                 } else {
                     TextColor.OnDisabledSurface
                 },
+                style = MaterialTheme.typography.bodyLarge,
             )
         }
     }