[PR] UI Improvements (1.4.2)

app/src/main/java/com/doyoonkim/knutice/AppNavHost.kt

@@ -2,9 +2,12 @@ package com.doyoonkim.knutice
 
 import android.net.Uri
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.lifecycle.ViewModelProvider
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
@@ -23,8 +26,8 @@ fun AppNavHost(
     NavHost(
         modifier = modifier.padding(
             PaddingValues(
-                top = contentPadding.calculateTopPadding(),
-//                bottom = contentPadding.calculateBottomPadding()
+                start = contentPadding.calculateStartPadding(LayoutDirection.Ltr),
+                end = contentPadding.calculateEndPadding(LayoutDirection.Ltr)
             )
         ),
         navController = navController,

app/src/main/java/com/doyoonkim/knutice/MainActivity.kt

@@ -10,46 +10,30 @@ import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.result.contract.ActivityResultContracts
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.BottomNavigationItem
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
 import androidx.core.view.WindowCompat
 import androidx.lifecycle.ViewModelProvider
@@ -58,16 +42,16 @@ import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.doyoonkim.common.navigation.NavRoutes
 import com.doyoonkim.common.theme.KNUTICETheme
-import com.doyoonkim.common.theme.containerBackgroundSolid
 import com.doyoonkim.common.theme.subTitle
 import com.doyoonkim.common.theme.title
 import com.doyoonkim.common.ui.PermissionRationaleComposable
 import com.doyoonkim.common.R
+import com.doyoonkim.common.theme.displayBackground
+import com.doyoonkim.common.theme.onAnyBackground
 import com.doyoonkim.notification.local.NotificationAlarmScheduler
 import kotlinx.coroutines.delay
 import javax.inject.Inject
 
-@OptIn(ExperimentalMaterial3Api::class)
 class MainActivity : ComponentActivity() {
 
     @Inject lateinit var viewModelFactory: ViewModelProvider.Factory
@@ -91,11 +75,11 @@ class MainActivity : ComponentActivity() {
                 var showPermissionRationale by remember { mutableStateOf(false) }
                 navController = rememberNavController()
 
-                // Bottom Bar Handling
-                var bottomBarState = Triple(true, false, false)
+                // SharedScaffoldHandling
+                var sharedScaffoldState: Triple<Boolean, Boolean, Boolean>
                 val backStackEntryState by navController.currentBackStackEntryAsState()
-                backStackEntryState?.destination?.route.let { route ->
-                    bottomBarState = when(route) {
+                backStackEntryState?.destination?.route.let {
+                    sharedScaffoldState = when(it) {
                         NavRoutes.Home.route -> Triple(true, true, false)
                         NavRoutes.Bookmark.route -> Triple(true, false, true)
                         else -> Triple(false, false, false)
@@ -127,79 +111,9 @@ class MainActivity : ComponentActivity() {
                 }
 
                 Scaffold(
-                    modifier = Modifier.fillMaxSize()
-                        .background(MaterialTheme.colorScheme.containerBackgroundSolid),
-                    topBar = {
-                        TopAppBar(
-                            title = {
-                                Row(
-                                    modifier = Modifier.fillMaxWidth().wrapContentHeight(),
-                                    horizontalArrangement = Arrangement.Center,
-                                    verticalAlignment = Alignment.CenterVertically
-                                ) {
-                                    if (!bottomBarState.first) {
-                                        IconButton(
-                                            onClick = {
-                                                navController.popBackStack()
-                                            }
-                                        ) {
-                                            Image(
-                                                painter = painterResource(R.drawable.baseline_arrow_back_ios_new_24),
-                                                contentDescription = "back",
-                                                modifier = Modifier.wrapContentSize(),
-                                                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.title)
-                                            )
-                                        }
-                                    }
-
-                                    Text(
-                                        modifier = Modifier.fillMaxWidth(),
-                                        text = stringResource(R.string.app_name),
-                                        textAlign = TextAlign.Left,
-                                        fontSize = 20.sp,
-                                        fontWeight = FontWeight.ExtraBold,
-                                        maxLines = 1,
-                                        overflow = TextOverflow.Ellipsis,
-                                        color = MaterialTheme.colorScheme.title
-                                    )
-                                }
-                            },
-                            actions = {
-                                if (bottomBarState.first) {
-                                    IconButton(
-                                        onClick = {
-                                            navController.navigate(NavRoutes.NoticeSearch.route)
-                                        }
-                                    ) {
-                                        Image(
-                                            painter = painterResource(R.drawable.baseline_search_24),
-                                            contentDescription = "Search",
-                                            modifier = Modifier.wrapContentSize(),
-                                            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.title)
-                                        )
-                                    }
-                                    IconButton(
-                                        onClick = {
-                                            navController.navigate(NavRoutes.Settings.route)
-                                        }
-                                    ) {
-                                        Image(
-                                            painter = painterResource(R.drawable.baseline_settings_24),
-                                            contentDescription = "Settings",
-                                            modifier = Modifier.wrapContentSize(),
-                                            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.title)
-                                        )
-                                    }
-                                }
-                            },
-                            colors = TopAppBarDefaults.topAppBarColors(
-                                containerColor = MaterialTheme.colorScheme.containerBackgroundSolid,
-                                titleContentColor = MaterialTheme.colorScheme.title
-                            )
-                        )
-                    },
+                    modifier = Modifier.fillMaxSize(),
                     bottomBar = {
-                        if (bottomBarState.first) {
+                        if (sharedScaffoldState.first) {
                             BottomAppBar(
                                 modifier = Modifier
                                     .wrapContentSize()
@@ -208,10 +122,10 @@ class MainActivity : ComponentActivity() {
                                 actions = {
                                     // https://developer.android.com/develop/ui/compose/navigation#bottom-nav
                                     BottomNavigationItem(
-                                        selected = bottomBarState.second,
+                                        selected = sharedScaffoldState.second,
                                         enabled = true,
                                         onClick = {
-                                            if (!bottomBarState.second) {
+                                            if (!sharedScaffoldState.second) {
                                                 navController.navigate(NavRoutes.Home.route)
                                             }
                                         },
@@ -229,10 +143,10 @@ class MainActivity : ComponentActivity() {
                                         unselectedContentColor = MaterialTheme.colorScheme.subTitle
                                     )
                                     BottomNavigationItem(
-                                        selected = bottomBarState.third,
+                                        selected = sharedScaffoldState.third,
                                         enabled = true,
                                         onClick = {
-                                            if (!bottomBarState.third) {
+                                            if (!sharedScaffoldState.third) {
                                                 navController.navigate(NavRoutes.Bookmark.route)
                                             }
                                         },
@@ -249,21 +163,20 @@ class MainActivity : ComponentActivity() {
                                         selectedContentColor = MaterialTheme.colorScheme.title,
                                         unselectedContentColor = MaterialTheme.colorScheme.subTitle
                                     )
-                                }
+                                },
+                                containerColor = MaterialTheme.colorScheme.onAnyBackground
                             )
                         }
                     },
-                    containerColor = MaterialTheme.colorScheme.containerBackgroundSolid,
+                    containerColor = MaterialTheme.colorScheme.displayBackground
                 ) { contentPadding ->
-
                     AppNavHost(
                         modifier = Modifier,
                         contentPadding = contentPadding,
                         navController = navController,
                         viewModelFactory = viewModelFactory,
                         onExit = { activity.finish() }
                     )
-
                     LaunchedEffect(Unit) {
                         // Intent handling (access application via onCreate call; click push notification when app is closed.)
                         Log.d("MainActivity", "Intent received: ${launchedIntent?.data}")

common/src/main/java/com/doyoonkim/common/theme/Color.kt

@@ -12,20 +12,18 @@ val Pink40 = Color(0xFF7D5260)
 
 // Color Scheme
 val Notification01 = Color(0xFFE65C19)
-val Notification02 = Color(0xFFFFC55A)
+val Notification02 = Color(0xFFF59E0B)
 val Notification03 = Color(0xFF7FD099)
 val Notification04 = Color(0xFF4294F7)
+val Notification05 = Color(0xFF8B5CF6)
 
-val WhiteBackground = Color(0xFFFFFFFF)
-val DarkBackground = Color(0xFF262729)
+val WhiteBackground = Color(0xFFF3F4F6)
+val DarkBackground = Color(0xFF000000)
 
-val ContainerLight = Color(0xFFF3F3F3)
-val ContainerDark = Color(0xFF333437)
-val ContainerBlack = Color(0xFF000000)
-val ContainerWhite = Color(0xFFFFFFFF)
+val SecondaryLight = Color(0xFFFFFFFF)
+val SecondaryDark = Color(0xFF1B1C20)
 
-val bottomNavBarWhite = Color(0xFFFFFFFF)
-val bottomNavBarBlack = Color(0xFF424448)
+val VariantPurple = Color(0xFF6b79fc)
 
 val TitleBlack = Color(0xFF000000)
 val TitleWhite = Color(0xFFFFFFFF)
@@ -35,11 +33,14 @@ val SubtitleAny = Color(0xFF787879)
 val ButtonDark = Color(0xFF3C3C3C)
 val ButtonLight = Color(0xFFF3F3F3)
 
-val GradientStartDark = Color(0xFF4F4F4F)
+val OnBackgroundDark = Color(0xFF2F2F2F)
+val OnBackgroundLight = Color(0xFFECECEC)
+
+val GradientStartDark = Color(0xFF1E1E1E)
 val GradientStartLight = Color(0xFFA1A1A1)
 
-val GradientIntermediateDark = Color(0xFF5C5C5C)
+val GradientIntermediateDark = Color(0xFF383838)
 val GradientIntermediateLight = Color(0xFFD2D2D2)
 
-val GradientEndDark = Color(0xFF848484)
+val GradientEndDark = Color(0xFF444444)
 val GradientEndLight = Color(0xFFE5E5E5)

common/src/main/java/com/doyoonkim/common/theme/Theme.kt

@@ -55,21 +55,17 @@ val ColorScheme.displayBackground: Color
     @Composable
     get() = if(isSystemInDarkTheme()) DarkBackground else WhiteBackground
 
-val ColorScheme.containerBackground: Color
+val ColorScheme.secondaryBackground: Color
     @Composable
-    get() = if(isSystemInDarkTheme()) ContainerDark else ContainerWhite
-
-val ColorScheme.containerBackgroundSolid: Color
-    @Composable
-    get() = if(isSystemInDarkTheme()) ContainerBlack else ContainerLight
+    get() = if(isSystemInDarkTheme()) SecondaryDark else SecondaryLight
 
 val ColorScheme.containerGray: Color
     @Composable
     get() = if(isSystemInDarkTheme()) Color.Gray else Color.LightGray
 
-val ColorScheme.bottomNavContainer: Color
+val ColorScheme.onAnyBackground: Color
     @Composable
-    get() = if(isSystemInDarkTheme()) bottomNavBarBlack else bottomNavBarWhite
+    get() = if(isSystemInDarkTheme()) OnBackgroundDark else OnBackgroundLight
 
 val ColorScheme.title: Color
     @Composable
@@ -79,17 +75,13 @@ val ColorScheme.subTitle: Color
     @Composable
     get() = SubtitleAny
 
-val ColorScheme.buttonContainer: Color
-    @Composable
-    get() = if(isSystemInDarkTheme()) ButtonDark else ButtonLight
-
-val ColorScheme.buttonPurple: Color
+val ColorScheme.variantPurple: Color
     @Composable
-    get() = Purple40
+    get() = VariantPurple
 
-val ColorScheme.textPurple: Color
+val ColorScheme.buttonOnBackground: Color
     @Composable
-    get() = if(isSystemInDarkTheme()) Purple80 else Purple40
+    get() = if(isSystemInDarkTheme()) ButtonDark else ButtonLight
 
 val ColorScheme.animationGradientStart: Color
     @Composable

common/src/main/java/com/doyoonkim/common/ui/DateTimePicker.kt

@@ -28,7 +28,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.doyoonkim.common.theme.containerGray
+import com.doyoonkim.common.theme.onAnyBackground
+import com.doyoonkim.common.theme.secondaryBackground
 import com.doyoonkim.common.theme.title
 import java.text.SimpleDateFormat
 import java.util.Calendar
@@ -66,7 +67,7 @@ fun DatePickerDialog(
                 .background(Color.Transparent)
                 .clip(RoundedCornerShape(10.dp))
                 .clickable { pickerVisible = !pickerVisible },
-            color = MaterialTheme.colorScheme.containerGray
+            color = MaterialTheme.colorScheme.onAnyBackground
         ) {
             Text(
                 text = datePickerState.selectedDateMillis!!.toFormattedString(),

common/src/main/java/com/doyoonkim/common/ui/LabeledToggleSwitch.kt

@@ -19,9 +19,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.doyoonkim.common.theme.buttonPurple
 import com.doyoonkim.common.theme.subTitle
 import com.doyoonkim.common.theme.title
+import com.doyoonkim.common.theme.variantPurple
 
 @Composable
 fun LabeledToggleSwitch(
@@ -67,7 +67,7 @@ fun LabeledToggleSwitch(
             Switch(
                 checked = isChecked,
                 colors = SwitchDefaults.colors().copy(
-                    checkedTrackColor = MaterialTheme.colorScheme.buttonPurple,
+                    checkedTrackColor = MaterialTheme.colorScheme.variantPurple,
                     checkedThumbColor = Color.White
                 ),
                 onCheckedChange = {

common/src/main/java/com/doyoonkim/common/ui/NotificationPreview.kt

@@ -37,7 +37,7 @@ fun NotificationPreview(
 ) {
     Column(
         Modifier.padding(10.dp),
-        verticalArrangement = Arrangement.spacedBy(7.dp)
+        verticalArrangement = Arrangement.spacedBy(5.dp)
     ) {
         if (isLoading) {
             AnimatedGradient(Modifier.height(24.dp))
@@ -67,7 +67,7 @@ fun NotificationPreview(
                     .padding(top = 7.dp, start = 5.dp, end = 5.dp),
                 text = notificationTitle,
                 textAlign = TextAlign.Start,
-                fontSize = 13.sp,
+                fontSize = 14.sp,
                 fontWeight = FontWeight.SemiBold,
                 color = MaterialTheme.colorScheme.title,
                 maxLines = 1,
@@ -78,7 +78,7 @@ fun NotificationPreview(
                     .padding(top = 1.dp, start = 5.dp, bottom = 5.dp, end = 5.dp),
                 text = notificationInfo,
                 textAlign = TextAlign.Start,
-                fontSize = 9.sp,
+                fontSize = 12.sp,
                 color = MaterialTheme.colorScheme.subTitle
             )
         }