TIQR-458: Apply custom fonts everywhere (#160)

* TIQR-458: Apply custom fonts everywhere * Small cleanup from review --------- Co-authored-by: Iulia STANA <[email protected]>
Tiqr · Aug 23, 2024 · d340bbc · d340bbc
1 parent 79f1d70
commit d340bbc
Show file tree

Hide file tree

Showing 24 changed files with 82 additions and 26 deletions.
diff --git a/...in/kotlin/nl/eduid/screens/deleteaccountsecondconfirm/DeleteAccountSecondConfirmScreen.kt b/...in/kotlin/nl/eduid/screens/deleteaccountsecondconfirm/DeleteAccountSecondConfirmScreen.kt
@@ -56,6 +56,7 @@ import nl.eduid.ui.theme.ColorMain_Green_400
 import nl.eduid.ui.theme.ColorScale_Gray_Black
 import nl.eduid.ui.theme.ColorSupport_Blue_100
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun DeleteAccountSecondConfirmScreen(
@@ -193,6 +194,7 @@ private fun DeleteAccountSecondConfirmScreenContent(
             modifier = Modifier.padding(vertical = 8.dp)
         )
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = fullNameInput,
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
             keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),

diff --git a/app/src/main/kotlin/nl/eduid/screens/editemail/EditEmailScreen.kt b/app/src/main/kotlin/nl/eduid/screens/editemail/EditEmailScreen.kt
@@ -52,6 +52,7 @@ import nl.eduid.ui.PrimaryButton
 import nl.eduid.ui.SecondaryButton
 import nl.eduid.ui.TwoColorTitle
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun EditEmailScreen(
@@ -147,6 +148,7 @@ fun EditEmailScreenContent(
         )
 
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = uiState.email,
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
             keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),

diff --git a/app/src/main/kotlin/nl/eduid/screens/editname/EditNameFormScreen.kt b/app/src/main/kotlin/nl/eduid/screens/editname/EditNameFormScreen.kt
@@ -52,6 +52,7 @@ import nl.eduid.ui.PrimaryButton
 import nl.eduid.ui.SecondaryButton
 import nl.eduid.ui.TwoColorTitle
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun EditNameFormScreen(
@@ -155,6 +156,7 @@ fun EditNameFormContent(
             modifier = Modifier.padding(vertical = 8.dp)
         )
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = givenName,
             isError = !isGivenNameValid,
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),

diff --git a/app/src/main/kotlin/nl/eduid/screens/firsttimedialog/FirstTimeDialogScreen.kt b/app/src/main/kotlin/nl/eduid/screens/firsttimedialog/FirstTimeDialogScreen.kt
@@ -110,9 +110,10 @@ fun FirstTimeDialogScreen(goToAccountLinked: () -> Unit, skipThis: () -> Unit) {
                     .fillMaxWidth()
                     .padding(horizontal = 24.dp),
             )
+            Spacer(Modifier.height(8.dp))
             Text(
                 text = stringResource(R.string.CreateEduID_FirstTimeDialog_MainTextTitle_SecondPart_COPY),
-                style = MaterialTheme.typography.titleMedium.copy(
+                style = MaterialTheme.typography.titleLarge.copy(
                     color = MaterialTheme.colorScheme.onSecondary,
                     textAlign = TextAlign.Center,
                 ),

diff --git a/app/src/main/kotlin/nl/eduid/screens/homepage/HomePageNoAccount.kt b/app/src/main/kotlin/nl/eduid/screens/homepage/HomePageNoAccount.kt
@@ -53,6 +53,7 @@ import nl.eduid.screens.info.AboutInfo
 import nl.eduid.ui.AlertDialogWithSingleButton
 import nl.eduid.ui.AlertDialogWithTwoButton
 import nl.eduid.ui.PrimaryButton
+import nl.eduid.ui.theme.BlueText
 import nl.eduid.ui.theme.ColorMain_Green_400
 import nl.eduid.ui.theme.SmallActionGray
 import org.tiqr.data.model.EnrollmentChallenge
@@ -235,6 +236,7 @@ fun HomePageNoAccountContent(
 
             Text(
                 text = stringResource(R.string.CreateEduID_LandingPage_MainText_COPY),
+                color = BlueText,
                 style = MaterialTheme.typography.titleLarge.copy(textAlign = TextAlign.Center),
                 modifier = Modifier
                     .fillMaxWidth()

diff --git a/app/src/main/kotlin/nl/eduid/screens/personalinfo/PersonalInfoScreen.kt b/app/src/main/kotlin/nl/eduid/screens/personalinfo/PersonalInfoScreen.kt
@@ -353,7 +353,10 @@ private fun ColumnScope.VerifiedIdentity(
                 tint = MaterialTheme.colorScheme.onPrimary
             )
             Text(
-                style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onPrimary),
+                style = MaterialTheme.typography.bodyLarge.copy(
+                    color = MaterialTheme.colorScheme.onPrimary,
+                    fontWeight = FontWeight.SemiBold
+                ),
                 text = stringResource(R.string.Profile_Verified_COPY),
                 modifier = Modifier.padding(horizontal = 8.dp)
             )

diff --git a/app/src/main/kotlin/nl/eduid/screens/recovery/confirmsms/ConfirmCodeScreen.kt b/app/src/main/kotlin/nl/eduid/screens/recovery/confirmsms/ConfirmCodeScreen.kt
@@ -50,6 +50,7 @@ import nl.eduid.ui.AlertDialogWithSingleButton
 import nl.eduid.ui.EduIdTopAppBar
 import nl.eduid.ui.PrimaryButton
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun ConfirmCodeScreen(
@@ -136,6 +137,7 @@ private fun ConfirmCodeContent(
         Spacer(modifier = Modifier.height(16.dp))
         val clipboardManager = LocalClipboardManager.current
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = uiState.input,
             keyboardOptions = KeyboardOptions(
                 imeAction = ImeAction.Done, keyboardType = KeyboardType.Number

diff --git a/app/src/main/kotlin/nl/eduid/screens/recovery/requestsms/PhoneRequestCodeScreen.kt b/app/src/main/kotlin/nl/eduid/screens/recovery/requestsms/PhoneRequestCodeScreen.kt
@@ -49,6 +49,7 @@ import nl.eduid.ui.AlertDialogWithSingleButton
 import nl.eduid.ui.EduIdTopAppBar
 import nl.eduid.ui.PrimaryButton
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun PhoneRequestCodeScreen(
@@ -157,6 +158,7 @@ private fun PhoneRequestCodeContent(
         )
 
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = uiState.input,
             keyboardOptions = KeyboardOptions(
                 imeAction = ImeAction.Done, keyboardType = KeyboardType.Number

diff --git a/app/src/main/kotlin/nl/eduid/screens/requestiddetails/RequestEduIdFormScreen.kt b/app/src/main/kotlin/nl/eduid/screens/requestiddetails/RequestEduIdFormScreen.kt
@@ -23,6 +23,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -53,7 +54,9 @@ import nl.eduid.ui.AlertDialogWithSingleButton
 import nl.eduid.ui.CheckToSAndPrivacyPolicy
 import nl.eduid.ui.EduIdTopAppBar
 import nl.eduid.ui.PrimaryButton
+import nl.eduid.ui.theme.ColorScale_Gray_Black
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun RequestEduIdFormScreen(
@@ -94,8 +97,7 @@ fun RequestEduIdFormScreen(
 
 @Composable
 @OptIn(
-    ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class,
-    ExperimentalFoundationApi::class, ExperimentalLayoutApi::class
+    ExperimentalLayoutApi::class
 )
 private fun RequestEduIdFormContent(
     inputFormData: InputForm,
@@ -125,7 +127,7 @@ private fun RequestEduIdFormContent(
             !isKeyboardOpen,
             Modifier.fillMaxWidth()
         ) {
-            Column() {
+            Column {
                 Text(
                     text = stringResource(R.string.CreateEduID_Create_MainTitleLabel_COPY),
                     style = MaterialTheme.typography.titleLarge.copy(
@@ -152,6 +154,7 @@ private fun RequestEduIdFormContent(
             modifier = Modifier.padding(vertical = 8.dp)
         )
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = inputFormData.email,
             keyboardOptions = KeyboardOptions(
                 imeAction = ImeAction.Next, keyboardType = KeyboardType.Email
@@ -180,6 +183,7 @@ private fun RequestEduIdFormContent(
             modifier = Modifier.padding(vertical = 8.dp)
         )
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = inputFormData.firstName,
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
             keyboardActions = KeyboardActions(onNext = {
@@ -203,6 +207,7 @@ private fun RequestEduIdFormContent(
             modifier = Modifier.padding(vertical = 8.dp)
         )
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = inputFormData.lastName,
             keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
             keyboardActions = KeyboardActions(onDone = {

diff --git a/app/src/main/kotlin/nl/eduid/screens/requestidstart/RequestEduIdStartScreen.kt b/app/src/main/kotlin/nl/eduid/screens/requestidstart/RequestEduIdStartScreen.kt
@@ -48,8 +48,7 @@ fun RequestEduIdStartScreen(
             Text(
                 text = stringResource(R.string.CreateEduID_Explanation_MainTitleLabel_COPY),
                 style = MaterialTheme.typography.titleLarge.copy(
-                    textAlign = TextAlign.Start,
-                    color = ColorScale_Gray_Black
+                    textAlign = TextAlign.Start
                 ),
                 modifier = Modifier
                     .fillMaxWidth()

diff --git a/app/src/main/kotlin/nl/eduid/screens/resetpasswordconfirm/ResetPasswordConfirmScreen.kt b/app/src/main/kotlin/nl/eduid/screens/resetpasswordconfirm/ResetPasswordConfirmScreen.kt
@@ -63,6 +63,7 @@ import nl.eduid.ui.PrimaryButton
 import nl.eduid.ui.theme.ColorMain_Green_400
 import nl.eduid.ui.theme.ColorScale_Gray_Black
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 @Composable
 fun ResetPasswordConfirmScreen(
@@ -194,6 +195,7 @@ fun ResetPasswordConfirmScreenContent(
                 modifier = Modifier.padding(vertical = 8.dp)
             )
             OutlinedTextField(
+                colors = outlinedTextColors(),
                 value = newPasswordInput,
                 visualTransformation = PasswordVisualTransformation(),
                 keyboardOptions = KeyboardOptions(

diff --git a/app/src/main/kotlin/nl/eduid/screens/security/SecurityScreen.kt b/app/src/main/kotlin/nl/eduid/screens/security/SecurityScreen.kt
@@ -86,11 +86,11 @@ fun SecurityScreenContent(
         text = stringResource(R.string.Security_SubTitle_COPY),
     )
     if (securityInfo.isLoading) {
-        Spacer(Modifier.height(24.dp))
         LinearProgressIndicator(
             modifier = Modifier.fillMaxWidth(),
         )
     }
+    Spacer(Modifier.height(8.dp))
     securityInfo.twoFAProvider?.let {
         EditableSecurityField(
             title = stringResource(R.string.Security_TwoFAKey_COPY),

diff --git a/app/src/main/kotlin/nl/eduid/ui/Buttons.kt b/app/src/main/kotlin/nl/eduid/ui/Buttons.kt
@@ -93,7 +93,10 @@ fun PrimaryButtonWithIcon(
         maxLines = 2,
         softWrap = true,
         overflow = TextOverflow.Ellipsis,
-        style = MaterialTheme.typography.bodyMedium.copy(color = MaterialTheme.colorScheme.onPrimary),
+        style = MaterialTheme.typography.bodyMedium.copy(
+            color = MaterialTheme.colorScheme.onPrimary,
+            fontWeight = FontWeight.SemiBold
+        ),
     )
 }
 

diff --git a/app/src/main/kotlin/nl/eduid/ui/PinInputField.kt b/app/src/main/kotlin/nl/eduid/ui/PinInputField.kt
@@ -39,6 +39,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.android.awaitFrame
 import nl.eduid.R
 import nl.eduid.ui.theme.EduidAppAndroidTheme
+import nl.eduid.ui.theme.outlinedTextColors
 
 
 @Composable
@@ -108,6 +109,7 @@ fun PinInputField(
             )
         }
         OutlinedTextField(
+            colors = outlinedTextColors(),
             value = pinCode,
             enabled = isInputEnabled,
             onValueChange = {

diff --git a/app/src/main/kotlin/nl/eduid/ui/TermsAndConditions.kt b/app/src/main/kotlin/nl/eduid/ui/TermsAndConditions.kt
@@ -31,6 +31,7 @@ fun CheckToSAndPrivacyPolicy(
                 .width(16.dp)
         )
         HtmlText(
+            color = MaterialTheme.colorScheme.onPrimaryContainer,
             text = stringResource(id = R.string.LinkFromInstitution_AgreeWithTerms_COPY),
             modifier = Modifier
                 .wrapContentWidth()

diff --git a/app/src/main/kotlin/nl/eduid/ui/theme/Theme.kt b/app/src/main/kotlin/nl/eduid/ui/theme/Theme.kt
@@ -5,6 +5,7 @@ import android.content.Context
 import android.content.ContextWrapper
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
@@ -13,7 +14,7 @@ private val LightColors = lightColorScheme(
     surface = Color.White,
     onSurface = ColorSupport_Blue_400,
     background = Color.White,
-    onBackground = ColorScale_Gray_500,
+    onBackground = ColorScale_Gray_Black,
     onSurfaceVariant = ColorScale_Gray_500,
     primary = ColorSupport_Blue_400,
     onPrimaryContainer = ColorScale_Gray_Black,
@@ -24,6 +25,13 @@ private val LightColors = lightColorScheme(
     onTertiaryContainer = ColorScale_Gray_300,
 )
 
+@Composable
+fun outlinedTextColors() = OutlinedTextFieldDefaults.colors().copy(
+    focusedTextColor = MaterialTheme.colorScheme.onPrimaryContainer,
+    unfocusedTextColor = MaterialTheme.colorScheme.onPrimaryContainer,
+    errorTextColor = MaterialTheme.colorScheme.onPrimaryContainer
+)
+
 @Composable
 fun EduidAppAndroidTheme(
     colorScheme: ColorScheme = LightColors,

diff --git a/app/src/main/kotlin/nl/eduid/ui/theme/Type.kt b/app/src/main/kotlin/nl/eduid/ui/theme/Type.kt
@@ -1,54 +1,74 @@
 package nl.eduid.ui.theme
 
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Typography
 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.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import nl.eduid.R
+
+val proximaNovaSoftFamily = FontFamily(
+    Font(R.font.proxima_nova_soft_semibold, FontWeight.SemiBold),
+)
+val sourceSansProFamily = FontFamily(
+    Font(R.font.source_sans_pro_regular, FontWeight.Normal),
+    Font(R.font.source_sans_pro_italic, FontWeight.Normal, FontStyle.Italic),
+    Font(R.font.source_sans_pro_semibold, FontWeight.SemiBold),
+    Font(R.font.source_sans_pro_semibold_italic, FontWeight.SemiBold, FontStyle.Italic),
+    Font(R.font.source_sans_pro_bold, FontWeight.Bold),
+    Font(R.font.source_sans_pro_bold_italic, FontWeight.Bold, FontStyle.Italic),
+)
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-    bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp,
-    ),
     labelSmall = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = sourceSansProFamily,
         fontWeight = FontWeight.SemiBold,
         fontSize = 12.sp,
     ),
     labelLarge = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = sourceSansProFamily,
         fontWeight = FontWeight.SemiBold,
         fontSize = 18.sp,
     ),
     // Other default text styles to override
     titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = proximaNovaSoftFamily,
         fontWeight = FontWeight.SemiBold,
         fontSize = 24.sp,
         lineHeight = 34.sp,
         letterSpacing = (-0.18).sp,
     ),
+    titleMedium = TextStyle(
+        fontFamily = proximaNovaSoftFamily,
+        fontWeight = FontWeight.SemiBold,
+        fontSize = 20.sp,
+    ),
     headlineLarge = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = proximaNovaSoftFamily,
         fontWeight = FontWeight.SemiBold,
         fontSize = 32.sp,
         lineHeight = 48.sp,
         letterSpacing = (-0.18).sp,
     ),
+    bodySmall = TextStyle(
+        fontFamily = sourceSansProFamily,
+        fontSize = 12.sp,
+        lineHeight = 15.sp,
+        fontWeight = FontWeight.Normal,
+    ),
     bodyMedium = TextStyle(
-        fontFamily = FontFamily.Default,
+        fontFamily = sourceSansProFamily,
         fontSize = 14.sp,
         lineHeight = 16.sp,
     ),
-    bodySmall = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontSize = 12.sp,
-        lineHeight = 15.sp,
+    bodyLarge = TextStyle(
+        fontFamily = sourceSansProFamily,
         fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp
     ),
 )
diff --git a/app/src/main/res/font/proxima_nova_soft_semibold.otf b/app/src/main/res/font/proxima_nova_soft_semibold.otf
diff --git a/app/src/main/res/font/source_sans_pro_bold.ttf b/app/src/main/res/font/source_sans_pro_bold.ttf
diff --git a/app/src/main/res/font/source_sans_pro_bold_italic.ttf b/app/src/main/res/font/source_sans_pro_bold_italic.ttf
diff --git a/app/src/main/res/font/source_sans_pro_italic.ttf b/app/src/main/res/font/source_sans_pro_italic.ttf
diff --git a/...c/main/res/font/sourcesanspro_regular.ttf → ...main/res/font/source_sans_pro_regular.ttf b/...c/main/res/font/sourcesanspro_regular.ttf → ...main/res/font/source_sans_pro_regular.ttf
diff --git a/app/src/main/res/font/source_sans_pro_semibold.ttf b/app/src/main/res/font/source_sans_pro_semibold.ttf
diff --git a/app/src/main/res/font/source_sans_pro_semibold_italic.ttf b/app/src/main/res/font/source_sans_pro_semibold_italic.ttf