Merge pull request #320 from JeonK1/feature/#289

[디자인] 디자인 최신화
droidknights · Jun 3, 2024 · 4799141 · 4799141
2 parents c081d4e + d74dd83
commit 4799141
Show file tree

Hide file tree

Showing 16 changed files with 158 additions and 22 deletions.
diff --git a/...signsystem/src/main/java/com/droidknights/app/core/designsystem/component/IconTextChip.kt b/...signsystem/src/main/java/com/droidknights/app/core/designsystem/component/IconTextChip.kt
@@ -0,0 +1,72 @@
+package com.droidknights.app.core.designsystem.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.droidknights.app.core.designsystem.theme.DarkGray
+import com.droidknights.app.core.designsystem.theme.KnightsTheme
+import com.droidknights.app.core.designsystem.theme.LightGray
+
+@Composable
+fun IconTextChip(
+    text: String,
+    containerColor: Color,
+    labelColor: Color,
+    iconPainter: Painter,
+    iconTint: Color,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier,
+        shape = RoundedCornerShape(10.dp),
+        color = containerColor,
+    ) {
+        Row(
+            modifier = modifier.padding(start = 4.dp, end = 10.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Start
+        ) {
+            Icon(
+                modifier = modifier
+                    .width(20.dp)
+                    .height(20.dp),
+                painter = iconPainter,
+                contentDescription = null,
+                tint = iconTint
+            )
+            ProvideTextStyle(KnightsTheme.typography.labelSmallM) {
+                Text(text = text, color = labelColor, modifier = Modifier.padding(top = 2.dp, bottom = 2.dp))
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun IconTextChipPreview() {
+    MaterialTheme {
+        IconTextChip(
+            "북마크",
+            containerColor = DarkGray,
+            labelColor = LightGray,
+            iconPainter = painterResource(id = androidx.appcompat.R.drawable.abc_btn_radio_material),
+            iconTint = Color.Green
+        )
+    }
+}
diff --git a/...s/app/core/designsystem/component/Chip.kt → ...p/core/designsystem/component/TextChip.kt b/...s/app/core/designsystem/component/Chip.kt → ...p/core/designsystem/component/TextChip.kt
@@ -34,7 +34,7 @@ fun TextChip(
         shape = RoundedCornerShape(10.dp),
         color = containerColor,
     ) {
-        ProvideTextStyle(KnightsTheme.typography.labelMediumR) {
+        ProvideTextStyle(KnightsTheme.typography.labelSmallM) {
             Text(text = text, color = labelColor, modifier = Modifier.padding(TextChipPadding))
         }
     }

diff --git a/core/designsystem/src/main/java/com/droidknights/app/core/designsystem/theme/Color.kt b/core/designsystem/src/main/java/com/droidknights/app/core/designsystem/theme/Color.kt
@@ -13,6 +13,7 @@ val Black = Color(0xFF000000)
 val Graphite = Color(0xFF292929)
 
 val Purple01 = Color(0xFFB469FF)
+val Purple01A30 = Color(0x4DB469FF)
 val Mint01 = Color(0xFF7BFAF2)
 
 val Neon01 = Color(0xFF49F300)
@@ -32,7 +33,7 @@ val Green04 = Color(0xFF386524)
 val Yellow01 = Color(0xFFF2E800)
 val Yellow02 = Color(0xFFE8ED00)
 val Yellow03 = Color(0xFFBEED00)
-val Yellow03A40 = Color(0x66BEED00)
+val Yellow03A40 = Color(0x66A1ED00)
 val Yellow04 = Color(0xFF465703)
 val Yellow05 = Color(0xFF222B00)
 

diff --git a/core/designsystem/src/main/java/com/droidknights/app/core/designsystem/theme/Theme.kt b/core/designsystem/src/main/java/com/droidknights/app/core/designsystem/theme/Theme.kt
@@ -36,6 +36,7 @@ private val DarkColorScheme = darkColorScheme(
     onErrorContainer = Red01,
     surface = Graphite,
     onSurface = White,
+    surfaceDim = Black,
     inverseSurface = Neon05,
     inverseOnSurface = Black,
     outline = DarkGray,
@@ -63,6 +64,7 @@ private val LightColorScheme = lightColorScheme(
     onErrorContainer = Red06,
     surface = PaperGray,
     onSurface = DuskGray,
+    surfaceDim = PaleGray,
     inverseSurface = Yellow05,
     inverseOnSurface = White,
     outline = LightGray,

diff --git a/feature/bookmark/src/main/java/com/droidknights/app/feature/bookmark/BookmarkScreen.kt b/feature/bookmark/src/main/java/com/droidknights/app/feature/bookmark/BookmarkScreen.kt
@@ -182,7 +182,7 @@ private fun BookmarkTopAppBar(
             modifier = Modifier
                 .align(Alignment.CenterEnd)
                 .clickable(onClick = onClickEditButton)
-                .padding(8.dp),
+                .padding(6.dp),
             text = if (isEditMode) {
                 stringResource(id = R.string.edit_button_confirm_label)
             } else {

diff --git a/...e/contributor/src/main/java/com/droidknights/app/feature/contributor/ContributorScreen.kt b/...e/contributor/src/main/java/com/droidknights/app/feature/contributor/ContributorScreen.kt
@@ -39,6 +39,7 @@ import com.droidknights.app.core.designsystem.component.KnightsCard
 import com.droidknights.app.core.designsystem.component.KnightsTopAppBar
 import com.droidknights.app.core.designsystem.component.NetworkImage
 import com.droidknights.app.core.designsystem.component.TextChip
+import com.droidknights.app.core.designsystem.component.TopAppBarNavigationType
 import com.droidknights.app.core.designsystem.res.rememberPainterResource
 import com.droidknights.app.core.designsystem.theme.Black
 import com.droidknights.app.core.designsystem.theme.KnightsTheme
@@ -106,6 +107,7 @@ private fun ContributorTopAppBar(
         titleRes = R.string.contributor_top_title,
         navigationIconContentDescription = null,
         modifier = Modifier.statusBarsPadding(),
+        navigationType = TopAppBarNavigationType.Close,
         onNavigationClick = onBackClick,
         containerColor = containerColor,
     )

diff --git a/feature/home/src/main/java/com/droidknights/app/feature/home/component/ContributorCard.kt b/feature/home/src/main/java/com/droidknights/app/feature/home/component/ContributorCard.kt
@@ -52,9 +52,9 @@ internal fun ContributorCard(
 
             Text(
                 text = stringResource(id = R.string.contributor_card_description),
-                style = KnightsTheme.typography.titleSmallR,
+                style = KnightsTheme.typography.titleSmallM140,
                 color = Green03,
-                modifier = Modifier.padding(top = 6.dp),
+                modifier = Modifier.padding(top = 6.dp, start = 3.dp),
             )
         }
     }

diff --git a/feature/home/src/main/java/com/droidknights/app/feature/home/component/SessionCard.kt b/feature/home/src/main/java/com/droidknights/app/feature/home/component/SessionCard.kt
@@ -55,7 +55,7 @@ internal fun SessionCard(
 private fun SessionCardCaption() {
     Box(
         modifier = Modifier
-            .background(Graphite, RoundedCornerShape(32.dp))
+            .background(Graphite, RoundedCornerShape(10.dp))
             .padding(horizontal = 12.dp, vertical = 2.dp)
     ) {
         Text(

diff --git a/feature/home/src/main/java/com/droidknights/app/feature/home/component/SponsorCard.kt b/feature/home/src/main/java/com/droidknights/app/feature/home/component/SponsorCard.kt
@@ -73,7 +73,7 @@ private fun SponsorCardContents(uiState: SponsorsUiState.Sponsors) {
                         uiState.goldCount,
                         uiState.silverCount
                     ),
-                    style = KnightsTheme.typography.titleSmallR,
+                    style = KnightsTheme.typography.titleSmallM140,
                     color = DuskGray,
                     modifier = Modifier.padding(top = 8.dp),
                 )
@@ -117,7 +117,7 @@ private fun SponsorGroupRow(
 
     LazyRow(
         modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(space = 22.dp),
+        horizontalArrangement = Arrangement.spacedBy(space = 24.dp),
         userScrollEnabled = false
     ) {
         items(

diff --git a/feature/session/src/main/java/com/droidknights/app/feature/session/SessionDetailScreen.kt b/feature/session/src/main/java/com/droidknights/app/feature/session/SessionDetailScreen.kt
@@ -43,8 +43,10 @@ import com.droidknights.app.core.designsystem.component.NetworkImage
 import com.droidknights.app.core.designsystem.component.TextChip
 import com.droidknights.app.core.designsystem.component.TopAppBarNavigationType
 import com.droidknights.app.core.designsystem.theme.DarkGray
+import com.droidknights.app.core.designsystem.theme.Gray
 import com.droidknights.app.core.designsystem.theme.KnightsTheme
 import com.droidknights.app.core.designsystem.theme.LightGray
+import com.droidknights.app.core.designsystem.theme.Purple01
 import com.droidknights.app.core.model.Room
 import com.droidknights.app.core.model.Session
 import com.droidknights.app.core.model.Speaker
@@ -154,7 +156,7 @@ private fun SessionDetailContent(session: Session) {
             .padding(horizontal = 16.dp)
     ) {
         SessionDetailTitle(title = session.title, modifier = Modifier.padding(top = 8.dp))
-        Spacer(modifier = Modifier.height(8.dp))
+        Spacer(modifier = Modifier.height(12.dp))
         SessionChips(session = session)
 
         if (session.content.isNotEmpty()) {
@@ -203,7 +205,7 @@ private fun SessionDetailTitle(
     modifier: Modifier = Modifier,
 ) {
     Text(
-        modifier = modifier.padding(end = 64.dp),
+        modifier = modifier.padding(end = 58.dp),
         text = title,
         style = KnightsTheme.typography.headlineMediumB,
         color = MaterialTheme.colorScheme.onSecondaryContainer,
@@ -249,11 +251,19 @@ private fun SessionDetailSpeaker(
 
 @Composable
 private fun SessionOverview(content: String) {
-    Text(
-        text = content,
-        style = KnightsTheme.typography.titleSmallR140,
-        color = MaterialTheme.colorScheme.onSecondaryContainer
-    )
+    Column {
+        Text(
+            text = stringResource(id = R.string.session_overview_title),
+            style = KnightsTheme.typography.titleSmallB,
+            color = MaterialTheme.colorScheme.onSecondaryContainer
+        )
+        Spacer(Modifier.height(4.dp))
+        Text(
+            text = content,
+            style = KnightsTheme.typography.titleSmallR140,
+            color = MaterialTheme.colorScheme.onSecondaryContainer
+        )
+    }
 }
 
 @Composable
@@ -272,7 +282,8 @@ private fun BookmarkToggleButton(
             } else {
                 painterResource(id = R.drawable.ic_session_bookmark)
             },
-            contentDescription = null
+            contentDescription = null,
+            tint = if (bookmarked) Purple01 else Gray
         )
     }
 }

diff --git a/feature/session/src/main/java/com/droidknights/app/feature/session/SessionScreen.kt b/feature/session/src/main/java/com/droidknights/app/feature/session/SessionScreen.kt
@@ -6,18 +6,24 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -78,7 +84,7 @@ private fun SessionContent(
     LazyColumn(
         modifier = modifier,
         state = sessionState.listState,
-        contentPadding = PaddingValues(horizontal = 8.dp, vertical = 12.dp),
+        contentPadding = PaddingValues(horizontal = 8.dp),
         verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
         sessionState.groups.forEachIndexed { index, group ->
@@ -91,19 +97,21 @@ private fun SessionContent(
                 room = group.room,
                 items = group.sessions,
                 topPadding = topPadding,
+                isLastGroup = index == sessionState.groups.size - 1,
                 onItemClick = onSessionClick,
             )
         }
     }
 }
 
-private val SessionTopSpace = 4.dp
-private val SessionGroupSpace = 16.dp
+private val SessionTopSpace = 16.dp
+private val SessionGroupSpace = 100.dp
 
 private fun LazyListScope.sessionItems(
     room: Room,
     items: PersistentList<Session>,
     topPadding: Dp,
+    isLastGroup: Boolean,
     onItemClick: (Session) -> Unit,
 ) {
     itemsIndexed(items) { index, item ->
@@ -114,6 +122,9 @@ private fun LazyListScope.sessionItems(
             topPadding = topPadding,
             onItemClick = onItemClick
         )
+        if (isLastGroup && index == items.size - 1) {
+            DroidKnightsFooter()
+        }
     }
 }
 
@@ -152,3 +163,17 @@ private fun RoomTitle(
         Spacer(modifier = Modifier.height(32.dp))
     }
 }
+
+@Composable
+private fun DroidKnightsFooter() {
+    Text(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(top = 56.dp, bottom = 80.dp),
+        text = stringResource(id = R.string.footer_text),
+        style = KnightsTheme.typography.labelMediumR,
+        color = Color.LightGray,
+        textAlign = TextAlign.Center
+    )
+}
diff --git a/feature/session/src/main/java/com/droidknights/app/feature/session/component/SessionCard.kt b/feature/session/src/main/java/com/droidknights/app/feature/session/component/SessionCard.kt
@@ -22,12 +22,15 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.droidknights.app.core.designsystem.component.IconTextChip
 import com.droidknights.app.core.designsystem.component.KnightsCard
 import com.droidknights.app.core.designsystem.component.NetworkImage
 import com.droidknights.app.core.designsystem.component.TextChip
 import com.droidknights.app.core.designsystem.theme.DarkGray
 import com.droidknights.app.core.designsystem.theme.KnightsTheme
 import com.droidknights.app.core.designsystem.theme.LightGray
+import com.droidknights.app.core.designsystem.theme.Purple01
+import com.droidknights.app.core.designsystem.theme.Purple01A30
 import com.droidknights.app.core.model.Room
 import com.droidknights.app.core.model.Session
 import com.droidknights.app.core.model.Speaker
@@ -131,6 +134,16 @@ private fun SessionTrackInfo(
         TrackChip(room = session.room)
         Spacer(modifier = Modifier.width(8.dp))
         TimeChip(dateTime = session.startTime)
+        if (session.isBookmarked) {
+            Spacer(modifier = Modifier.width(8.dp))
+            IconTextChip(
+                text = stringResource(id = R.string.bookmark),
+                containerColor = Purple01A30,
+                labelColor = Purple01,
+                iconPainter = painterResource(id = R.drawable.ic_session_bookmark_filled),
+                iconTint = Purple01
+            )
+        }
     }
 }
 

diff --git a/.../session/src/main/java/com/droidknights/app/feature/session/component/SessionTopAppBar.kt b/.../session/src/main/java/com/droidknights/app/feature/session/component/SessionTopAppBar.kt
@@ -142,7 +142,7 @@ private fun TabIndicator(height: Dp, modifier: Modifier) {
         modifier = modifier
             .height(height * 2)
             .offset { IntOffset(0, height.roundToPx()) }
-            .background(brush, RoundedCornerShape(8.dp))
+            .background(brush, RoundedCornerShape(100.dp, 100.dp, 0.dp, 0.dp))
     )
 }
 

diff --git a/feature/session/src/main/res/values/strings.xml b/feature/session/src/main/res/values/strings.xml
@@ -10,4 +10,8 @@
 
     <string name="session_detail_bookmark_popup_message">북마크에 저장했습니다. 시간표를 만들어보세요!</string>
     <string name="session_detail_unbookmark_popup_message">북마크가 해제되었습니다.</string>
+
+    <string name="bookmark">북마크</string>
+    <string name="session_overview_title">세션 소개</string>
+    <string name="footer_text">Droid Knights 2024</string>
 </resources>