diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt index ee23307e..42b03b88 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/appbar/ReedTopAppBar.kt @@ -39,8 +39,8 @@ fun ReedTopAppBar( .fillMaxWidth() .height(56.dp) .background(color = White), - verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Start, + verticalAlignment = Alignment.CenterVertically, ) { if (startIconRes != null) { IconButton( @@ -60,9 +60,9 @@ fun ReedTopAppBar( Text( text = title, - style = ReedTheme.typography.heading2SemiBold, modifier = Modifier.weight(1f), textAlign = TextAlign.Center, + style = ReedTheme.typography.heading2SemiBold, ) if (endIconRes != null) { diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt index 75ceee6e..f3d5b641 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/bottomsheet/ReedBottomSheet.kt @@ -32,8 +32,8 @@ fun ReedBottomSheet( sheetState = sheetState, sheetGesturesEnabled = false, shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp), - dragHandle = null, containerColor = White, + dragHandle = null, ) { content() } @@ -51,14 +51,14 @@ private fun ReedBottomSheetPreview() { ) ReedTheme { ReedBottomSheet( - sheetState = sheetState, onDismissRequest = {}, + sheetState = sheetState, ) { ReedButton( onClick = {}, modifier = Modifier.padding(10.dp).fillMaxWidth(), - colorStyle = ReedButtonColorStyle.PRIMARY, sizeStyle = largeButtonStyle, + colorStyle = ReedButtonColorStyle.PRIMARY, text = "확인", ) } diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt index cc3b11ea..2bce40a1 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ButtonSizeStyle.kt @@ -12,6 +12,7 @@ data class ButtonSizeStyle( val radius: Dp = 0.dp, val textStyle: TextStyle, val iconSpacing: Dp = 0.dp, + val iconSize: Dp = 24.dp, ) val largeButtonStyle: ButtonSizeStyle @@ -23,6 +24,7 @@ val largeButtonStyle: ButtonSizeStyle radius = ReedTheme.radius.sm, textStyle = ReedTheme.typography.body1Medium, iconSpacing = ReedTheme.spacing.spacing2, + iconSize = 24.dp, ) val mediumButtonStyle: ButtonSizeStyle @@ -34,6 +36,7 @@ val mediumButtonStyle: ButtonSizeStyle radius = ReedTheme.radius.sm, textStyle = ReedTheme.typography.label1Medium, iconSpacing = ReedTheme.spacing.spacing1, + iconSize = 24.dp, ) val smallButtonStyle: ButtonSizeStyle @@ -45,4 +48,41 @@ val smallButtonStyle: ButtonSizeStyle radius = ReedTheme.radius.xs, textStyle = ReedTheme.typography.label1Medium, iconSpacing = ReedTheme.spacing.spacing1, + iconSize = 22.dp, + ) + +val largeRoundedButtonStyle: ButtonSizeStyle + @Composable get() = ButtonSizeStyle( + paddingValues = PaddingValues( + horizontal = ReedTheme.spacing.spacing5, + vertical = ReedTheme.spacing.spacing3, + ), + radius = ReedTheme.radius.full, + textStyle = ReedTheme.typography.body1Medium, + iconSpacing = ReedTheme.spacing.spacing2, + iconSize = 24.dp, + ) + +val mediumRoundedButtonStyle: ButtonSizeStyle + @Composable get() = ButtonSizeStyle( + paddingValues = PaddingValues( + horizontal = ReedTheme.spacing.spacing4, + vertical = ReedTheme.spacing.spacing3, + ), + radius = ReedTheme.radius.full, + textStyle = ReedTheme.typography.label1Medium, + iconSpacing = ReedTheme.spacing.spacing1, + iconSize = 24.dp, + ) + +val smallRoundedButtonStyle: ButtonSizeStyle + @Composable get() = ButtonSizeStyle( + paddingValues = PaddingValues( + horizontal = ReedTheme.spacing.spacing3, + vertical = ReedTheme.spacing.spacing2, + ), + radius = ReedTheme.radius.full, + textStyle = ReedTheme.typography.label1Medium, + iconSpacing = ReedTheme.spacing.spacing1, + iconSize = 22.dp, ) diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt index b28dc3ce..990bf9fa 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/button/ReedButton.kt @@ -9,7 +9,8 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.sizeIn +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons @@ -31,10 +32,10 @@ import com.ninecraft.booket.core.common.utils.get @Composable fun ReedButton( onClick: () -> Unit, + sizeStyle: ButtonSizeStyle, + colorStyle: ReedButtonColorStyle, modifier: Modifier = Modifier, enabled: Boolean = true, - colorStyle: ReedButtonColorStyle, - sizeStyle: ButtonSizeStyle, text: String = "", leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, @@ -47,7 +48,7 @@ fun ReedButton( val scale by animateFloatAsState( targetValue = if (isPressed) 0.96f else 1f, animationSpec = tween(durationMillis = 100), - label = "ScaleAnimation", + label = "Scale Animation", ) Button( @@ -57,18 +58,18 @@ fun ReedButton( scaleY = scale }, enabled = enabled, - interactionSource = interactionSource, shape = RoundedCornerShape(sizeStyle.radius), - contentPadding = sizeStyle.paddingValues, colors = ButtonDefaults.buttonColors( containerColor = colorStyle.containerColor(isPressed), contentColor = colorStyle.contentColor(), disabledContentColor = colorStyle.disabledContentColor(), disabledContainerColor = colorStyle.disabledContainerColor(), ), + contentPadding = sizeStyle.paddingValues, + interactionSource = interactionSource, ) { if (leadingIcon != null) { - Box(Modifier.sizeIn(maxHeight = 24.dp)) { + Box(Modifier.size(sizeStyle.iconSize)) { leadingIcon() } } @@ -89,7 +90,7 @@ fun ReedButton( } if (trailingIcon != null) { - Box(Modifier.sizeIn(maxHeight = 24.dp)) { + Box(Modifier.size(sizeStyle.iconSize)) { trailingIcon() } } @@ -100,6 +101,7 @@ fun ReedButton( @Composable private fun ReedLargeButtonPreview() { Column( + modifier = Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp), ) { Row( @@ -124,60 +126,148 @@ private fun ReedLargeButtonPreview() { text = "button", ) } - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.PRIMARY, - sizeStyle = largeButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = largeButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.SECONDARY, - sizeStyle = largeButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = largeButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + } + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.TERTIARY, - sizeStyle = largeButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = largeRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) + } + } } } @@ -185,6 +275,7 @@ private fun ReedLargeButtonPreview() { @Composable private fun ReedMediumButtonPreview() { Column( + modifier = Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp), ) { Row( @@ -209,60 +300,148 @@ private fun ReedMediumButtonPreview() { text = "button", ) } - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.PRIMARY, - sizeStyle = mediumButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = mediumButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = mediumButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.SECONDARY, - sizeStyle = mediumButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = mediumButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + } + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.TERTIARY, - sizeStyle = mediumButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = mediumRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) + } + } } } @@ -270,6 +449,7 @@ private fun ReedMediumButtonPreview() { @Composable private fun ReedSmallButtonPreview() { Column( + modifier = Modifier.padding(20.dp), verticalArrangement = Arrangement.spacedBy(20.dp), ) { Row( @@ -294,59 +474,217 @@ private fun ReedSmallButtonPreview() { text = "button", ) } - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.PRIMARY, - sizeStyle = smallButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = smallButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = smallButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.SECONDARY, - sizeStyle = smallButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = smallButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + } + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) - ReedButton( - onClick = {}, - colorStyle = ReedButtonColorStyle.TERTIARY, - sizeStyle = smallButtonStyle, - text = "button", - leadingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.SECONDARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - trailingIcon = { - Icon( - imageVector = Icons.Default.Check, - contentDescription = "Check icon", + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.TERTIARY, + sizeStyle = smallRoundedButtonStyle, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, ) - }, - ) + } + } + } +} + +@Preview(showBackground = true) +@Composable +private fun ReedButtonDisabledPreview() { + Column( + modifier = Modifier.padding(20.dp), + verticalArrangement = Arrangement.spacedBy(20.dp), + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + enabled = false, + text = "button", + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeRoundedButtonStyle, + enabled = false, + text = "button", + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + ) { + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeButtonStyle, + text = "button", + enabled = false, + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + ) + ReedButton( + onClick = {}, + colorStyle = ReedButtonColorStyle.PRIMARY, + sizeStyle = largeRoundedButtonStyle, + enabled = false, + text = "button", + leadingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + trailingIcon = { + Icon( + imageVector = Icons.Default.Check, + contentDescription = "Check icon", + ) + }, + ) + } } } diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt index c9a5e9f6..f8fd595a 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/CircleCheckBox.kt @@ -15,7 +15,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.common.extensions.noRippleClickable @@ -45,7 +46,7 @@ fun CircleCheckBox( contentAlignment = Alignment.Center, ) { Icon( - painter = painterResource(id = R.drawable.ic_check), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_check), contentDescription = "Circle Checkbox", tint = iconTint, ) diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt index 461cbb17..ab493d1d 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/SquareCheckBox.kt @@ -15,7 +15,8 @@ import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.res.painterResource +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.common.extensions.noRippleClickable @@ -45,7 +46,7 @@ fun SquareCheckBox( contentAlignment = Alignment.Center, ) { Icon( - painter = painterResource(id = R.drawable.ic_check), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_check), contentDescription = "Square Checkbox", tint = iconTint, ) diff --git a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt index 783ce26b..d3563512 100644 --- a/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt +++ b/core/designsystem/src/main/kotlin/com/ninecraft/booket/core/designsystem/component/checkbox/TickOnlyCheckBox.kt @@ -9,7 +9,8 @@ import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.ninecraft.booket.core.common.extensions.noRippleClickable @@ -23,11 +24,11 @@ fun TickOnlyCheckBox( modifier: Modifier = Modifier, ) { Icon( + imageVector = ImageVector.vectorResource(id = R.drawable.ic_check), + contentDescription = "TickOnly Checkbox", modifier = modifier .size(24.dp) .noRippleClickable { onCheckedChange(!checked) }, - painter = painterResource(id = R.drawable.ic_check), - contentDescription = "TickOnly Checkbox", tint = if (checked) ReedTheme.colors.contentBrand else ReedTheme.colors.contentTertiary, ) } diff --git a/feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt b/feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt index 0acd5ce7..148206b6 100644 --- a/feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt +++ b/feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginScreen.kt @@ -54,6 +54,8 @@ internal fun Login( onClick = { state.eventSink(LoginUiEvent.OnKakaoLoginButtonClick) }, + sizeStyle = largeButtonStyle, + colorStyle = ReedButtonColorStyle.KAKAO, modifier = Modifier .fillMaxWidth() .padding( @@ -62,8 +64,6 @@ internal fun Login( bottom = ReedTheme.spacing.spacing8, ) .align(Alignment.BottomCenter), - colorStyle = ReedButtonColorStyle.KAKAO, - sizeStyle = largeButtonStyle, text = stringResource(id = R.string.kakao_login), leadingIcon = { Icon( diff --git a/feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt b/feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt index 7c47cfcf..f4a9f058 100644 --- a/feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt +++ b/feature/login/src/main/kotlin/com/ninecraft/booket/feature/termsagreement/TermsAgreementScreen.kt @@ -114,6 +114,8 @@ internal fun TermsAgreement( onClick = { state.eventSink(TermsAgreementUiEvent.OnStartButtonClick) }, + sizeStyle = largeButtonStyle, + colorStyle = ReedButtonColorStyle.PRIMARY, modifier = Modifier .fillMaxWidth() .padding( @@ -121,8 +123,6 @@ internal fun TermsAgreement( end = ReedTheme.spacing.spacing5, bottom = ReedTheme.spacing.spacing4, ), - colorStyle = ReedButtonColorStyle.PRIMARY, - sizeStyle = largeButtonStyle, enabled = state.isAllAgreed, text = stringResource(R.string.terms_agreement_button_start), )