Add typography to compose theme (#3581)

andreia-ferreira · web-flow · commit 83b8d5faeecb · 2026-02-25T10:25:28.000+01:00
* add typography to theme

* apply theme where valid

* fix checkcode issues
diff --git a/app/src/main/java/org/groundplatform/android/ui/datacollection/DataSubmissionConfirmationScreen.kt b/app/src/main/java/org/groundplatform/android/ui/datacollection/DataSubmissionConfirmationScreen.kt
@@ -35,13 +35,9 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.groundplatform.android.R
 import org.groundplatform.android.ui.common.ExcludeFromJacocoGeneratedReport
 import org.groundplatform.android.ui.theme.AppTheme
@@ -83,29 +79,21 @@ private fun BodyContent(onDismiss: () -> Unit) {
   Column(horizontalAlignment = Alignment.CenterHorizontally) {
     Text(
       text = stringResource(R.string.data_collection_complete),
-      fontFamily = FontFamily(Font(R.font.text_500)),
-      lineHeight = 28.sp,
-      fontSize = 22.sp,
-      fontWeight = FontWeight(400),
+      style = MaterialTheme.typography.titleLarge,
     )
     Spacer(modifier = Modifier.height(8.dp))
     Text(
       modifier = Modifier.padding(horizontal = 28.dp),
       text = stringResource(R.string.data_collection_complete_details),
-      fontSize = 14.sp,
-      lineHeight = 20.sp,
-      fontWeight = FontWeight(400),
-      fontFamily = FontFamily(Font(R.font.text_500)),
+      style = MaterialTheme.typography.bodyMedium,
       textAlign = TextAlign.Center,
     )
     Spacer(modifier = Modifier.height(30.dp))
     OutlinedButton(onClick = { onDismiss() }) {
       Text(
         modifier = Modifier.padding(horizontal = 24.dp, vertical = 10.dp),
         text = stringResource(id = R.string.close),
-        fontSize = 14.sp,
-        lineHeight = 20.sp,
-        fontFamily = FontFamily(Font(R.font.text_500)),
+        style = MaterialTheme.typography.bodyMedium,
       )
     }
   }
diff --git a/app/src/main/java/org/groundplatform/android/ui/datacollection/tasks/instruction/InstructionTaskFragment.kt b/app/src/main/java/org/groundplatform/android/ui/datacollection/tasks/instruction/InstructionTaskFragment.kt
@@ -30,7 +30,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import dagger.hilt.android.AndroidEntryPoint
 import org.groundplatform.android.ui.common.ExcludeFromJacocoGeneratedReport
 import org.groundplatform.android.ui.datacollection.components.TaskView
@@ -57,7 +56,7 @@ class InstructionTaskFragment : AbstractTaskFragment<InstructionTaskViewModel>()
           .border(2.dp, MaterialTheme.colorScheme.primary, RoundedCornerShape(2.dp))
           .padding(16.dp)
     ) {
-      Text(text = text, fontSize = 24.sp)
+      Text(text = text, style = MaterialTheme.typography.headlineSmall)
     }
   }
 
diff --git a/app/src/main/java/org/groundplatform/android/ui/datacollection/tasks/location/LocationAccuracyCard.kt b/app/src/main/java/org/groundplatform/android/ui/datacollection/tasks/location/LocationAccuracyCard.kt
@@ -36,7 +36,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import org.groundplatform.android.R
 
@@ -62,7 +61,6 @@ fun LocationAccuracyCard(onDismiss: () -> Unit, modifier: Modifier = Modifier) {
         Text(
           text = stringResource(R.string.location_not_accurate_heading),
           style = MaterialTheme.typography.titleMedium,
-          fontWeight = FontWeight.Bold,
           color = MaterialTheme.colorScheme.onSurface,
         )
         Spacer(Modifier.height(4.dp))
diff --git a/app/src/main/java/org/groundplatform/android/ui/home/mapcontainer/jobs/LoiJobSheet.kt b/app/src/main/java/org/groundplatform/android/ui/home/mapcontainer/jobs/LoiJobSheet.kt
@@ -150,7 +150,7 @@ private fun LoiHeader(loiHelper: LocationOfInterestHelper, loi: LocationOfIntere
     Text(
       loiHelper.getDisplayLoiName(loi),
       color = MaterialTheme.colorScheme.onSurface,
-      fontSize = 28.sp,
+      style = MaterialTheme.typography.headlineMedium,
     )
   }
 }
diff --git a/app/src/main/java/org/groundplatform/android/ui/offlineareas/OfflineAreaListItem.kt b/app/src/main/java/org/groundplatform/android/ui/offlineareas/OfflineAreaListItem.kt
@@ -31,12 +31,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.groundplatform.android.R
 import org.groundplatform.android.ui.common.ExcludeFromJacocoGeneratedReport
 import org.groundplatform.android.ui.theme.AppTheme
@@ -69,30 +65,15 @@ fun OfflineAreaListItem(
         verticalArrangement = Arrangement.spacedBy(0.dp, Alignment.CenterVertically),
         horizontalAlignment = Alignment.Start,
       ) {
-        Text(
-          text = offlineAreaDetails.name,
-          style =
-            TextStyle(
-              fontSize = 16.sp,
-              lineHeight = 24.sp,
-              fontFamily = FontFamily(Font(R.font.text_500)),
-              color = MaterialTheme.colorScheme.onSurface,
-            ),
-        )
+        Text(text = offlineAreaDetails.name, color = MaterialTheme.colorScheme.onSurface)
 
         Text(
           text =
             stringResource(
               id = R.string.offline_area_list_item_size_on_disk_mb,
               offlineAreaDetails.sizeOnDisk,
             ),
-          style =
-            TextStyle(
-              fontSize = 16.sp,
-              lineHeight = 24.sp,
-              fontFamily = FontFamily(Font(R.font.text_500)),
-              color = MaterialTheme.colorScheme.onSurfaceVariant,
-            ),
+          color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
       }
     }
diff --git a/app/src/main/java/org/groundplatform/android/ui/offlineareas/selector/DownloadProgressDialog.kt b/app/src/main/java/org/groundplatform/android/ui/offlineareas/selector/DownloadProgressDialog.kt
@@ -34,8 +34,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.unit.dp
 import org.groundplatform.android.R
 
@@ -51,7 +49,6 @@ fun DownloadProgressDialog(progress: Float, onDismiss: () -> Unit) {
           (progress * 100).toInt(),
         ),
         color = MaterialTheme.colorScheme.onSurface,
-        fontFamily = FontFamily(Font(R.font.text_500)),
       )
     },
     text = {
@@ -69,14 +66,11 @@ fun DownloadProgressDialog(progress: Float, onDismiss: () -> Unit) {
         Text(
           stringResource(R.string.offline_map_imagery_download_progress_dialog_message),
           color = MaterialTheme.colorScheme.onSurfaceVariant,
-          fontFamily = FontFamily(Font(R.font.text_500)),
         )
       }
     },
     dismissButton = {
-      TextButton(onClick = { onDismiss() }) {
-        Text(text = stringResource(R.string.cancel), fontFamily = FontFamily(Font(R.font.text_500)))
-      }
+      TextButton(onClick = { onDismiss() }) { Text(text = stringResource(R.string.cancel)) }
     },
     confirmButton = {},
   )
diff --git a/app/src/main/java/org/groundplatform/android/ui/signin/SignInScreen.kt b/app/src/main/java/org/groundplatform/android/ui/signin/SignInScreen.kt
@@ -30,6 +30,7 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -45,8 +46,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -59,6 +58,7 @@ import com.google.firebase.firestore.FirebaseFirestoreException
 import com.google.firebase.firestore.FirebaseFirestoreException.Code
 import org.groundplatform.android.BuildConfig
 import org.groundplatform.android.R
+import org.groundplatform.android.proto.style
 import org.groundplatform.android.system.auth.SignInState
 import org.groundplatform.android.ui.common.ExcludeFromJacocoGeneratedReport
 import org.groundplatform.android.ui.components.LoadingDialog
@@ -198,9 +198,7 @@ private fun LogoAndTitle(modifier: Modifier = Modifier) {
     Text(
       text = stringResource(id = R.string.app_name),
       color = Color.White,
-      fontSize = 60.sp,
-      fontFamily = FontFamily(Font(R.font.display_500)),
-      letterSpacing = 0.6.sp,
+      style = MaterialTheme.typography.displayLarge,
     )
   }
 }
diff --git a/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/HeaderRow.kt b/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/HeaderRow.kt
@@ -31,11 +31,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import org.groundplatform.android.R
 import org.groundplatform.android.model.SurveyListItem
 import org.groundplatform.android.proto.Survey
@@ -55,9 +51,7 @@ fun HeaderRow(item: SurveyListItem, menuClick: (String) -> Unit) {
 
     Text(
       text = stringResource(labelRes),
-      fontFamily = FontFamily(Font(R.font.text_500)),
-      fontSize = 12.sp,
-      fontWeight = FontWeight.Medium,
+      style = MaterialTheme.typography.bodySmall,
       color = MaterialTheme.colorScheme.onSurfaceVariant,
       modifier = Modifier.padding(start = 4.dp),
     )
diff --git a/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/SectionHeader.kt b/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/SectionHeader.kt
@@ -32,12 +32,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import org.groundplatform.android.R
 
 @Composable
 fun SectionHeader(title: String, expanded: Boolean, isClickable: Boolean, onClick: () -> Unit) {
@@ -61,13 +56,6 @@ fun SectionHeader(title: String, expanded: Boolean, isClickable: Boolean, onClic
       tint = MaterialTheme.colorScheme.onSurfaceVariant,
     )
     Spacer(Modifier.width(8.dp))
-    Text(
-      text = title,
-      fontFamily = FontFamily(Font(R.font.text_500)),
-      lineHeight = 16.sp,
-      fontSize = 16.sp,
-      fontWeight = FontWeight(500),
-      color = MaterialTheme.colorScheme.onSurfaceVariant,
-    )
+    Text(text = title, color = MaterialTheme.colorScheme.onSurfaceVariant)
   }
 }
diff --git a/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/SurveyCardItem.kt b/app/src/main/java/org/groundplatform/android/ui/surveyselector/components/SurveyCardItem.kt
@@ -27,13 +27,9 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import org.groundplatform.android.R
 import org.groundplatform.android.model.SurveyListItem
 
 @Composable
@@ -54,10 +50,7 @@ fun SurveyCardItem(
       Spacer(modifier = Modifier.height(8.dp))
       Text(
         text = item.title,
-        fontFamily = FontFamily(Font(R.font.text_500)),
-        fontSize = 18.sp,
-        fontWeight = FontWeight.Medium,
-        lineHeight = 28.sp,
+        style = MaterialTheme.typography.titleLarge,
         color = MaterialTheme.colorScheme.onSurface,
       )
       item.description
@@ -66,10 +59,8 @@ fun SurveyCardItem(
           Spacer(modifier = Modifier.height(4.dp))
           Text(
             text = it,
-            fontSize = 14.sp,
+            style = MaterialTheme.typography.bodyMedium,
             fontWeight = FontWeight.Normal,
-            fontFamily = FontFamily(Font(R.font.text_500)),
-            lineHeight = 20.sp,
             color = MaterialTheme.colorScheme.outline,
             maxLines = 1,
             overflow = TextOverflow.Ellipsis,
diff --git a/app/src/main/java/org/groundplatform/android/ui/syncstatus/SyncListItem.kt b/app/src/main/java/org/groundplatform/android/ui/syncstatus/SyncListItem.kt
@@ -35,13 +35,8 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.Font
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import java.text.SimpleDateFormat
 import java.util.Date
 import org.groundplatform.android.R
@@ -58,32 +53,23 @@ fun SyncListItem(modifier: Modifier, detail: SyncStatusDetail) {
         Text(
           text = "${date.toFormattedDate()} • ${date.toFormattedTime()}",
           color = MaterialTheme.colorScheme.onSurfaceVariant,
-          fontSize = 12.sp,
-          lineHeight = 16.sp,
-          fontWeight = FontWeight(500),
-          letterSpacing = 0.1.sp,
+          style = MaterialTheme.typography.bodySmall,
         )
         Spacer(Modifier.height(4.dp))
         Text(
           text = "${detail.label} • ${detail.subtitle}",
-          style =
-            TextStyle(
-              fontSize = 16.sp,
-              lineHeight = 24.sp,
-              fontFamily = FontFamily(Font(R.font.text_500)),
-              color = MaterialTheme.colorScheme.onSurface,
-            ),
+          color = MaterialTheme.colorScheme.onSurface,
+        )
+        Text(
+          text = detail.description,
+          style = MaterialTheme.typography.bodyMedium,
+          color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
-        val textStyle =
-          TextStyle(
-            fontSize = 14.sp,
-            lineHeight = 20.sp,
-            fontWeight = FontWeight(400),
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
-          )
-        Text(text = detail.description, style = textStyle)
         Spacer(Modifier.height(4.dp))
-        Text(text = stringResource(id = detail.status.toLabel()), fontSize = 11.sp)
+        Text(
+          text = stringResource(id = detail.status.toLabel()),
+          style = MaterialTheme.typography.bodySmall,
+        )
       }
       Column(modifier = modifier.padding(start = 16.dp).align(alignment = CenterVertically)) {
         StatusIcon(status = detail.status, modifier = Modifier)
diff --git a/app/src/main/java/org/groundplatform/android/ui/theme/Theme.kt b/app/src/main/java/org/groundplatform/android/ui/theme/Theme.kt
@@ -93,6 +93,6 @@ private val DarkColors =
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
   CompositionLocalProvider(LocalSizes provides Size()) {
-    MaterialTheme(colorScheme = LightColors, content = content)
+    MaterialTheme(colorScheme = LightColors, content = content, typography = AppTypography)
   }
 }
diff --git a/app/src/main/java/org/groundplatform/android/ui/theme/Typography.kt b/app/src/main/java/org/groundplatform/android/ui/theme/Typography.kt
diff --git a/app/src/main/res/font/display_500.xml b/app/src/main/res/font/display_500.xml

Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,7 @@ private fun LoiHeader(loiHelper: LocationOfInterestHelper, loi: LocationOfIntere`
`150`	`150`	`Text(`
`151`	`151`	`loiHelper.getDisplayLoiName(loi),`
`152`	`152`	`color = MaterialTheme.colorScheme.onSurface,`
`153`		`- fontSize = 28.sp,`
	`153`	`+ style = MaterialTheme.typography.headlineMedium,`
`154`	`154`	`)`
`155`	`155`	`}`
`156`	`156`	`}`