Merge pull request #100 from YAPP-Github/fix/design

[Fix/#99] 디자인 수정

Author: TaewoongR

core/designsystem/src/main/java/com/yapp/breake/core/designsystem/theme/Gradient.kt

@@ -28,12 +28,3 @@ val AppItemGradient = Brush.linearGradient(
 		sin(110.23 * PI / 180).toFloat() * 1000,
 	),
 )
-
-val BlockingTimerBackgroundGradient = Brush.verticalGradient(
-	colors = listOf(
-		Color(0xFF353A42),
-		Color(0xFF292C31),
-	),
-	startY = 0f,
-	endY = Float.POSITIVE_INFINITY,
-)

overlay/timer/src/main/res/drawable/img_blocking.xml

@@ -17,6 +17,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.yapp.breake.core.designsystem.component.HorizontalSpacer
 import com.yapp.breake.core.designsystem.theme.BrakeTheme
@@ -51,8 +52,9 @@ internal fun AppGroupTitle(
 			text = name,
 			style = BrakeTheme.typography.body16M,
 			color = MaterialTheme.colorScheme.onSurface,
-			maxLines = 2,
+			maxLines = 1,
 			modifier = Modifier.weight(1f),
+			overflow = TextOverflow.Ellipsis,
 		)
 		HorizontalSpacer(8.dp)
 		GroupStateIcon.entries.find { it.groupState == appGroupState }?.icon?.invoke(Modifier)

presentation/home/src/main/java/com/yapp/breake/presentation/home/component/AppGroupComponent.kt

@@ -58,7 +58,7 @@ internal fun CircularProgressTimer(
 			val radius = (this.size.minDimension - strokeWidthPx) / 2
 
 			drawCircle(
-				color = backgroundColor,
+				color = backgroundColor.copy(alpha = 0.1f),
 				radius = radius,
 				center = center,
 				style = Stroke(

presentation/home/src/main/java/com/yapp/breake/presentation/home/component/CircularProgressTimer.kt

@@ -114,22 +114,27 @@ internal fun ListScreen(
 				VerticalSpacer(12.dp)
 
 				BoxWithConstraints {
-					val containerWidth = maxWidth
+					val containerWidth = this.maxWidth
 
 					CompositionLocalProvider(LocalOverscrollFactory provides null) {
 						LazyRow(
+							modifier = Modifier.fillMaxWidth(),
 							flingBehavior = ScrollableDefaults.flingBehavior(),
 							state = needSettingState,
 							contentPadding = PaddingValues(horizontal = 28.dp),
-							horizontalArrangement = Arrangement.spacedBy(12.dp),
+							horizontalArrangement = if (appGroups.size == 1) {
+								Arrangement.Start
+							} else {
+								Arrangement.spacedBy(12.dp)
+							},
 						) {
 							items(appGroups) { appGroup ->
 								AppGroupItem(
 									appGroup = appGroup,
 									onEditClick = { onEditClick(appGroup) },
 									showSummary = true,
 									modifier = Modifier
-										.width(containerWidth * 0.8f)
+										.width(containerWidth * 0.6f)
 										.background(AppItemGradient)
 										.padding(16.dp),
 								)

presentation/home/src/main/java/com/yapp/breake/presentation/home/screen/ListScreen.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.LocalOverscrollFactory
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.ScrollableDefaults
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
@@ -38,8 +39,8 @@ import androidx.compose.ui.unit.dp
 import com.yapp.breake.core.designsystem.component.HorizontalSpacer
 import com.yapp.breake.core.designsystem.component.VerticalSpacer
 import com.yapp.breake.core.designsystem.theme.AppItemGradient
-import com.yapp.breake.core.designsystem.theme.BlockingTimerBackgroundGradient
 import com.yapp.breake.core.designsystem.theme.BrakeTheme
+import com.yapp.breake.core.designsystem.theme.Gray700
 import com.yapp.breake.core.designsystem.theme.Gray900
 import com.yapp.breake.core.designsystem.theme.LocalDynamicPaddings
 import com.yapp.breake.core.model.app.AppGroup
@@ -178,12 +179,23 @@ internal fun TickingScreen(
 											.padding(top = 16.dp, bottom = 10.dp),
 									)
 								} else {
+									val bg = painterResource(R.drawable.blocking_group_background)
+
 									BlockingAppGroup(
 										appGroup = tickingGroups[index],
 										onEditClick = { onEditClick(tickingGroups[index]) },
 										modifier = Modifier
 											.fillMaxWidth()
-											.background(BlockingTimerBackgroundGradient)
+											.background(Gray700.copy(alpha = 0.3f))
+											.drawBehind {
+												with(bg) {
+													draw(
+														size = size,
+														alpha = 1f,
+														colorFilter = null,
+													)
+												}
+											}
 											.padding(horizontal = 24.dp)
 											.padding(top = 16.dp, bottom = 19.dp),
 									)
@@ -207,22 +219,32 @@ internal fun TickingScreen(
 						item { VerticalSpacer(12.dp) }
 
 						item {
-							CompositionLocalProvider(LocalOverscrollFactory provides null) {
-								LazyRow(
-									flingBehavior = ScrollableDefaults.flingBehavior(),
-									state = needSettingState,
-									contentPadding = PaddingValues(horizontal = 28.dp),
-									horizontalArrangement = Arrangement.spacedBy(12.dp),
-								) {
-									itemsIndexed(notUsingGroups) { index, appGroup ->
-										AppGroupItem(
-											appGroup = appGroup,
-											onEditClick = { onEditClick(appGroup) },
-											modifier = Modifier
-												.width(214.dp)
-												.background(AppItemGradient)
-												.padding(16.dp),
-										)
+							BoxWithConstraints {
+								val containerWidth = this.maxWidth
+
+								CompositionLocalProvider(LocalOverscrollFactory provides null) {
+									LazyRow(
+										modifier = Modifier.fillMaxWidth(),
+										flingBehavior = ScrollableDefaults.flingBehavior(),
+										state = needSettingState,
+										contentPadding = PaddingValues(horizontal = 28.dp),
+										horizontalArrangement = if (appGroups.size == 1) {
+											Arrangement.Start
+										} else {
+											Arrangement.spacedBy(12.dp)
+										},
+									) {
+										itemsIndexed(notUsingGroups) { index, appGroup ->
+											AppGroupItem(
+												appGroup = appGroup,
+												onEditClick = { onEditClick(appGroup) },
+												showSummary = true,
+												modifier = Modifier
+													.width(containerWidth * 0.6f)
+													.background(AppItemGradient)
+													.padding(16.dp),
+											)
+										}
 									}
 								}
 							}