Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: enhance app theme capability for prod edX theme/branding #259

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
Expand Down Expand Up @@ -143,7 +144,6 @@ private fun LogistrationScreen(
LogistrationLogoView()
Text(
text = stringResource(id = R.string.pre_auth_title),
color = MaterialTheme.appColors.textPrimary,
style = MaterialTheme.appTypography.headlineSmall,
modifier = Modifier
.testTag("txt_screen_title")
Expand Down Expand Up @@ -189,7 +189,8 @@ private fun LogistrationScreen(
},
text = stringResource(id = R.string.pre_auth_explore_all_courses),
color = MaterialTheme.appColors.primary,
style = MaterialTheme.appTypography.labelLarge
style = MaterialTheme.appTypography.labelLarge,
textDecoration = TextDecoration.Underline
)

Spacer(modifier = Modifier.weight(1f))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ import org.openedx.core.extension.TextConverter
import org.openedx.core.ui.BackBtn
import org.openedx.core.ui.HandleUIMessage
import org.openedx.core.ui.HyperlinkText
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXSecondaryButton
import org.openedx.core.ui.WindowSize
import org.openedx.core.ui.WindowType
import org.openedx.core.ui.displayCutoutForLandscape
Expand Down Expand Up @@ -272,8 +272,8 @@ private fun AuthForm(
if (state.showProgress) {
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
} else {
OpenEdXButton(
width = buttonWidth.testTag("btn_sign_in"),
OpenEdXSecondaryButton(
modifier = buttonWidth.testTag("btn_sign_in"),
text = stringResource(id = coreR.string.core_sign_in),
onClick = {
onEvent(AuthEvent.SignIn(login = login, password = password))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ import org.openedx.core.domain.model.RegistrationField
import org.openedx.core.domain.model.RegistrationFieldType
import org.openedx.core.ui.BackBtn
import org.openedx.core.ui.HandleUIMessage
import org.openedx.core.ui.OpenEdXButton
import org.openedx.core.ui.OpenEdXSecondaryButton
import org.openedx.core.ui.SheetContent
import org.openedx.core.ui.WindowSize
import org.openedx.core.ui.WindowType
Expand Down Expand Up @@ -434,8 +434,8 @@ internal fun SignUpView(
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
}
} else {
OpenEdXButton(
width = buttonWidth.testTag("btn_create_account"),
OpenEdXSecondaryButton(
modifier = buttonWidth.testTag("btn_create_account"),
text = stringResource(id = R.string.auth_create_account),
onClick = {
showErrorMap.clear()
Expand Down
10 changes: 6 additions & 4 deletions auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.openedx.auth.R
Expand Down Expand Up @@ -171,6 +172,7 @@ fun OptionalFields(
fullText = linkedText.text,
hyperLinks = linkedText.links,
linkTextColor = MaterialTheme.appColors.primary,
linkTextDecoration = TextDecoration.Underline,
action = {
hyperLinkAction?.invoke(linkedText.links, it)
},
Expand Down Expand Up @@ -298,11 +300,11 @@ fun InputRegistrationField(
}
val isSingleLine = registrationField.type != RegistrationFieldType.TEXTAREA
val helperTextColor = if (registrationField.errorInstructions.isEmpty()) {
MaterialTheme.appColors.textSecondary
MaterialTheme.appColors.textFieldHint
} else if (isErrorShown) {
MaterialTheme.appColors.error
} else {
MaterialTheme.appColors.textSecondary
MaterialTheme.appColors.textFieldHint
}
val helperText = if (registrationField.errorInstructions.isEmpty()) {
registrationField.instructions
Expand Down Expand Up @@ -374,11 +376,11 @@ fun SelectableRegisterField(
onClick: (String, List<RegistrationField.Option>) -> Unit
) {
val helperTextColor = if (registrationField.errorInstructions.isEmpty()) {
MaterialTheme.appColors.textSecondary
MaterialTheme.appColors.textFieldHint
} else if (isErrorShown) {
MaterialTheme.appColors.error
} else {
MaterialTheme.appColors.textSecondary
MaterialTheme.appColors.textFieldHint
}
val helperText = if (registrationField.errorInstructions.isEmpty()) {
registrationField.instructions
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ internal fun SocialAuthView(
.padding(top = 24.dp)
.fillMaxWidth(),
backgroundColor = MaterialTheme.appColors.background,
borderColor = MaterialTheme.appColors.primary,
borderColor = MaterialTheme.appColors.textFieldBorder,
textColor = Color.Unspecified,
onClick = {
onEvent(AuthType.GOOGLE)
Expand Down Expand Up @@ -87,13 +87,13 @@ internal fun SocialAuthView(
Icon(
painter = painterResource(id = R.drawable.ic_auth_facebook),
contentDescription = null,
tint = MaterialTheme.appColors.buttonText,
tint = MaterialTheme.appColors.onSecondary,
)
Text(
modifier = Modifier
.testTag("txt_facebook_auth")
.padding(start = 10.dp),
color = MaterialTheme.appColors.buttonText,
color = MaterialTheme.appColors.onSecondary,
text = stringResource(id = stringRes)
)
}
Expand Down Expand Up @@ -125,7 +125,7 @@ internal fun SocialAuthView(
modifier = Modifier
.testTag("txt_microsoft_auth")
.padding(start = 10.dp),
color = MaterialTheme.appColors.buttonText,
color = MaterialTheme.appColors.onSecondary,
text = stringResource(id = stringRes)
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ data class ProgramConfig(
}

data class ProgramWebViewConfig(
@SerializedName("PROGRAM_URL")
@SerializedName("BASE_URL")
val programUrl: String = "",
@SerializedName("PROGRAM_DETAIL_URL_TEMPLATE")
val programDetailUrlTemplate: String = "",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ fun TransparentTextButton(
) {
Text(
modifier = Modifier.testTag("txt_secondary"),
color = MaterialTheme.appColors.textAccent,
color = MaterialTheme.appColors.textPrimary,
style = MaterialTheme.appTypography.labelLarge,
text = text
)
Expand All @@ -292,7 +292,7 @@ fun DefaultTextButton(
.testTag("btn_primary")
.height(42.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.appColors.buttonBackground
backgroundColor = MaterialTheme.appColors.textPrimary
),
elevation = null,
shape = MaterialTheme.appShapes.navigationButtonShape,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ private fun QualityOption(
Text(
modifier = Modifier.testTag("txt_video_quality_description_${title.tagId()}"),
text = description,
color = MaterialTheme.appColors.textSecondary,
color = MaterialTheme.appColors.textPrimary,
style = MaterialTheme.appTypography.labelMedium
)
}
Expand Down
62 changes: 51 additions & 11 deletions core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ fun SearchBar(
.testTag("txt_search_placeholder")
.fillMaxWidth(),
text = label,
color = MaterialTheme.appColors.textSecondary,
color = MaterialTheme.appColors.textFieldHint,
style = MaterialTheme.appTypography.bodyMedium
)
},
Expand Down Expand Up @@ -325,7 +325,7 @@ fun SearchBarStateless(
Text(
modifier = Modifier.fillMaxWidth(),
text = label,
color = MaterialTheme.appColors.textSecondary,
color = MaterialTheme.appColors.textFieldText,
style = MaterialTheme.appTypography.bodyMedium
)
},
Expand Down Expand Up @@ -1076,12 +1076,32 @@ fun OfflineModeDialog(
}
}

@Composable
fun OpenEdXSecondaryButton(
modifier: Modifier = Modifier.fillMaxWidth(),
text: String = "",
onClick: () -> Unit,
enabled: Boolean = true,
content: (@Composable RowScope.() -> Unit)? = null
) {
OpenEdXButton(
width = modifier,
text = text,
onClick = onClick,
enabled = enabled,
textColor = MaterialTheme.appColors.onSecondary,
backgroundColor = MaterialTheme.appColors.secondary,
content = content
)
}

@Composable
fun OpenEdXButton(
width: Modifier = Modifier.fillMaxWidth(),
text: String = "",
onClick: () -> Unit,
enabled: Boolean = true,
textColor: Color = MaterialTheme.appColors.buttonText,
backgroundColor: Color = MaterialTheme.appColors.buttonBackground,
content: (@Composable RowScope.() -> Unit)? = null
) {
Expand All @@ -1101,7 +1121,7 @@ fun OpenEdXButton(
Text(
modifier = Modifier.testTag("txt_${text.tagId()}"),
text = text,
color = MaterialTheme.appColors.buttonText,
color = textColor,
style = MaterialTheme.appTypography.labelLarge
)
} else {
Expand All @@ -1110,6 +1130,26 @@ fun OpenEdXButton(
}
}

@Composable
fun OpenEdXSecondaryOutlinedButton(
modifier: Modifier = Modifier.fillMaxWidth(),
text: String = "",
onClick: () -> Unit,
enabled: Boolean = true,
content: (@Composable RowScope.() -> Unit)? = null
) {
OpenEdXOutlinedButton(
modifier = modifier,
text = text,
onClick = onClick,
enabled = enabled,
textColor = MaterialTheme.appColors.secondary,
backgroundColor = MaterialTheme.appColors.onSecondary,
borderColor = MaterialTheme.appColors.buttonBorder,
content = content
)
}

@Composable
fun OpenEdXOutlinedButton(
modifier: Modifier = Modifier.fillMaxWidth(),
Expand All @@ -1118,6 +1158,7 @@ fun OpenEdXOutlinedButton(
textColor: Color,
text: String = "",
onClick: () -> Unit,
enabled: Boolean = true,
content: (@Composable RowScope.() -> Unit)? = null
) {
OutlinedButton(
Expand All @@ -1126,6 +1167,7 @@ fun OpenEdXOutlinedButton(
.then(modifier)
.height(42.dp),
onClick = onClick,
enabled = enabled,
border = BorderStroke(1.dp, borderColor),
shape = MaterialTheme.appShapes.buttonShape,
colors = ButtonDefaults.outlinedButtonColors(backgroundColor = backgroundColor)
Expand Down Expand Up @@ -1186,8 +1228,8 @@ fun ConnectionErrorView(
textAlign = TextAlign.Center
)
Spacer(Modifier.height(16.dp))
OpenEdXButton(
width = Modifier
OpenEdXSecondaryButton(
modifier = Modifier
.widthIn(Dp.Unspecified, 162.dp),
text = stringResource(id = R.string.core_reload),
onClick = onReloadClick
Expand All @@ -1201,24 +1243,22 @@ fun AuthButtonsPanel(
onSignInClick: () -> Unit
) {
Row {
OpenEdXButton(
width = Modifier
OpenEdXSecondaryButton(
modifier = Modifier
.testTag("btn_register")
.width(0.dp)
.weight(1f),
text = stringResource(id = R.string.core_register),
onClick = { onRegisterClick() }
)

OpenEdXOutlinedButton(
OpenEdXSecondaryOutlinedButton(
modifier = Modifier
.testTag("btn_sign_in")
.width(100.dp)
.padding(start = 16.dp),
text = stringResource(id = R.string.core_sign_in),
onClick = { onSignInClick() },
borderColor = MaterialTheme.appColors.textFieldBorder,
textColor = MaterialTheme.appColors.primary
onClick = { onSignInClick() }
)
}
}
Expand Down
3 changes: 3 additions & 0 deletions core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ data class AppColors(
val bottomSheetToggle: Color,
val warning: Color,
val info: Color,
val onWarning: Color,
val onInfo: Color,
val buttonBorder: Color,

val rateStars: Color,
val inactiveButtonBackground: Color,
Expand Down
6 changes: 6 additions & 0 deletions core/src/main/java/org/openedx/core/ui/theme/Theme.kt
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ private val DarkColorPalette = AppColors(

warning = dark_warning,
info = dark_info,
onWarning = dark_onWarning,
onInfo = dark_onInfo,
buttonBorder = dark_button_border,

rateStars = dark_rate_stars,
inactiveButtonBackground = dark_inactive_button_background,
Expand Down Expand Up @@ -112,6 +115,9 @@ private val LightColorPalette = AppColors(

warning = light_warning,
info = light_info,
onWarning = light_onWarning,
onInfo = light_onInfo,
buttonBorder = light_button_border,

rateStars = light_rate_stars,
inactiveButtonBackground = light_inactive_button_background,
Expand Down
2 changes: 0 additions & 2 deletions core/src/main/java/org/openedx/core/ui/theme/Type.kt
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ data class AppTypography(
val fontFamily = FontFamily(
Font(R.font.regular, FontWeight.Black, FontStyle.Normal),
Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
Font(R.font.extra_light, FontWeight.Light, FontStyle.Normal),
Font(R.font.light, FontWeight.Light, FontStyle.Normal),
Font(R.font.medium, FontWeight.Medium, FontStyle.Normal),
Expand All @@ -43,7 +42,6 @@ val fontFamily = FontFamily(
Font(R.font.thin, FontWeight.Thin, FontStyle.Normal),
)


internal val LocalTypography = staticCompositionLocalOf {
AppTypography(
displayLarge = TextStyle(
Expand Down
Loading
Loading