From 6ab2a1cf31286e4bd6e8fefbd557d2fd5a3895c0 Mon Sep 17 00:00:00 2001 From: Raihan Ariq <202310715297@mhs.ubharajaya.ac.id> Date: Tue, 4 Nov 2025 16:58:51 +0700 Subject: [PATCH] Desain Baru!! --- .../java/com/example/cupcake/CupcakeScreen.kt | 3 +- .../java/com/example/cupcake/MainActivity.kt | 2 +- .../com/example/cupcake/data/DataSource.kt | 6 +- .../example/cupcake/ui/SelectOptionScreen.kt | 4 +- .../example/cupcake/ui/StartOrderScreen.kt | 4 +- .../example/cupcake/ui/components/CommonUi.kt | 5 +- .../com/example/cupcake/ui/theme/Color.kt | 148 ++++++++++-------- 7 files changed, 101 insertions(+), 71 deletions(-) diff --git a/app/src/main/java/com/example/cupcake/CupcakeScreen.kt b/app/src/main/java/com/example/cupcake/CupcakeScreen.kt index e1993f1..58f08ee 100644 --- a/app/src/main/java/com/example/cupcake/CupcakeScreen.kt +++ b/app/src/main/java/com/example/cupcake/CupcakeScreen.kt @@ -39,6 +39,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.lifecycle.viewmodel.compose.viewModel import androidx.navigation.NavHostController import androidx.navigation.compose.NavHost @@ -73,7 +74,7 @@ fun CupcakeAppBar( modifier: Modifier = Modifier ) { TopAppBar( - title = { Text(stringResource(currentScreen.title)) }, + title = { Text(stringResource(currentScreen.title), fontWeight = FontWeight.Bold) }, colors = TopAppBarDefaults.mediumTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer ), diff --git a/app/src/main/java/com/example/cupcake/MainActivity.kt b/app/src/main/java/com/example/cupcake/MainActivity.kt index 8275b94..2386912 100644 --- a/app/src/main/java/com/example/cupcake/MainActivity.kt +++ b/app/src/main/java/com/example/cupcake/MainActivity.kt @@ -33,4 +33,4 @@ class MainActivity : ComponentActivity() { } } } -} +} \ No newline at end of file diff --git a/app/src/main/java/com/example/cupcake/data/DataSource.kt b/app/src/main/java/com/example/cupcake/data/DataSource.kt index d36d32d..aed0b87 100644 --- a/app/src/main/java/com/example/cupcake/data/DataSource.kt +++ b/app/src/main/java/com/example/cupcake/data/DataSource.kt @@ -27,8 +27,8 @@ object DataSource { ) val quantityOptions = listOf( - Pair(R.string.one_cupcake, 3), - Pair(R.string.six_cupcakes, 6), - Pair(R.string.twelve_cupcakes, 9) + Pair(R.string.one_cupcake, 1), + Pair(R.string.six_cupcakes, 2), + Pair(R.string.twelve_cupcakes, 3) ) } diff --git a/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt b/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt index 4420efd..2a769e5 100644 --- a/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt +++ b/app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt @@ -36,6 +36,8 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.font.FontWeight.Companion.SemiBold import androidx.compose.ui.tooling.preview.Preview import com.example.cupcake.R import com.example.cupcake.ui.components.FormattedPriceLabel @@ -81,7 +83,7 @@ fun SelectOptionScreen( onSelectionChanged(item) } ) - Text(item) + Text(item, fontWeight = SemiBold) } } Divider( diff --git a/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt b/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt index 884001d..588370e 100644 --- a/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt +++ b/app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt @@ -35,6 +35,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.cupcake.R @@ -70,7 +71,8 @@ fun StartOrderScreen( Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_medium))) Text( text = stringResource(R.string.order_cupcakes), - style = MaterialTheme.typography.headlineSmall + style = MaterialTheme.typography.headlineSmall, + fontWeight = FontWeight.Bold ) Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small))) } diff --git a/app/src/main/java/com/example/cupcake/ui/components/CommonUi.kt b/app/src/main/java/com/example/cupcake/ui/components/CommonUi.kt index 7a4fe0f..68fbe23 100644 --- a/app/src/main/java/com/example/cupcake/ui/components/CommonUi.kt +++ b/app/src/main/java/com/example/cupcake/ui/components/CommonUi.kt @@ -20,6 +20,8 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.font.FontWeight.Companion.Bold import com.example.cupcake.R /** @@ -30,6 +32,7 @@ fun FormattedPriceLabel(subtotal: String, modifier: Modifier = Modifier) { Text( text = stringResource(R.string.subtotal_price, subtotal), modifier = modifier, - style = MaterialTheme.typography.headlineSmall + style = MaterialTheme.typography.headlineSmall, + fontWeight = Bold ) } diff --git a/app/src/main/java/com/example/cupcake/ui/theme/Color.kt b/app/src/main/java/com/example/cupcake/ui/theme/Color.kt index c1b2a0b..f3b8b56 100644 --- a/app/src/main/java/com/example/cupcake/ui/theme/Color.kt +++ b/app/src/main/java/com/example/cupcake/ui/theme/Color.kt @@ -1,78 +1,100 @@ -/* - * Copyright (C) 2023 The Android Open Source Project - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * https://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ package com.example.cupcake.ui.theme import androidx.compose.ui.graphics.Color -val md_theme_light_primary = Color(0xFFE91E63) -val md_theme_light_onPrimary = Color(0xFFFFFFFF) -val md_theme_light_primaryContainer = Color(0xFFFFD9E2) -val md_theme_light_onPrimaryContainer = Color(0xFF3E001E) -val md_theme_light_secondary = Color(0xFF74565F) +// ========== LIGHT THEME (Mode Terang) ========== +// Warna Utama - Biru Modern +val md_theme_light_primary = Color(0xFF0D47A1) // Biru Tua +val md_theme_light_onPrimary = Color(0xFFFFFFFF) // Putih (teks di atas primary) +val md_theme_light_primaryContainer = Color(0xFFBBDEFB) // Biru Muda untuk container +val md_theme_light_onPrimaryContainer = Color(0xFF001F3D) // Hitam kebiruan + +// Warna Sekunder - Cyan/Tosca +val md_theme_light_secondary = Color(0xFF00838F) // Cyan gelap val md_theme_light_onSecondary = Color(0xFFFFFFFF) -val md_theme_light_secondaryContainer = Color(0xFFFFD9E2) -val md_theme_light_onSecondaryContainer = Color(0xFF2B151C) -val md_theme_light_tertiary = Color(0xFF7C5635) +val md_theme_light_secondaryContainer = Color(0xFFB2EBF2) // Cyan muda +val md_theme_light_onSecondaryContainer = Color(0xFF002022) + +// Warna Tambahan - Orange untuk aksen +val md_theme_light_tertiary = Color(0xFFFF6F00) // Orange val md_theme_light_onTertiary = Color(0xFFFFFFFF) -val md_theme_light_tertiaryContainer = Color(0xFFFFDCC2) +val md_theme_light_tertiaryContainer = Color(0xFFFFE0B2) // Orange muda val md_theme_light_onTertiaryContainer = Color(0xFF2E1500) -val md_theme_light_error = Color(0xFFBA1A1A) -val md_theme_light_errorContainer = Color(0xFFFFDAD6) + +// Error (merah untuk peringatan) +val md_theme_light_error = Color(0xFFD32F2F) +val md_theme_light_errorContainer = Color(0xFFFFCDD2) val md_theme_light_onError = Color(0xFFFFFFFF) val md_theme_light_onErrorContainer = Color(0xFF410002) -val md_theme_light_background = Color(0xFFFFFBFF) -val md_theme_light_onBackground = Color(0xFF201A1B) -val md_theme_light_surface = Color(0xFFFFFBFF) -val md_theme_light_onSurface = Color(0xFF201A1B) -val md_theme_light_surfaceVariant = Color(0xFFF2DDE2) -val md_theme_light_onSurfaceVariant = Color(0xFF514347) -val md_theme_light_outline = Color(0xFF837377) -val md_theme_light_inverseOnSurface = Color(0xFFFAEEEF) -val md_theme_light_inverseSurface = Color(0xFF352F30) -val md_theme_light_inversePrimary = Color(0xFFFFB0C9) -val md_theme_light_surfaceTint = Color(0xFF984062) -val md_theme_light_outlineVariant = Color(0xFFD5C2C6) + +// Background & Surface +val md_theme_light_background = Color(0xFFF5F5F5) // Abu-abu terang +val md_theme_light_onBackground = Color(0xFF1A1C1E) // Hitam untuk teks +val md_theme_light_surface = Color(0xFFFFFFFF) // Putih untuk card +val md_theme_light_onSurface = Color(0xFF1A1C1E) +val md_theme_light_surfaceVariant = Color(0xFFE3F2FD) // Biru sangat muda +val md_theme_light_onSurfaceVariant = Color(0xFF424242) + +// Outline & lainnya +val md_theme_light_outline = Color(0xFF757575) +val md_theme_light_inverseOnSurface = Color(0xFFF1F0F4) +val md_theme_light_inverseSurface = Color(0xFF2F3033) +val md_theme_light_inversePrimary = Color(0xFF90CAF9) // Biru terang +val md_theme_light_surfaceTint = Color(0xFF1976D2) +val md_theme_light_outlineVariant = Color(0xFFBDBDBD) val md_theme_light_scrim = Color(0xFF000000) -val md_theme_dark_primary = Color(0xFFB7CF4F) -val md_theme_dark_onPrimary = Color(0xFF1A0089) -val md_theme_dark_primaryContainer = Color(0xFF98AB3E) -val md_theme_dark_onPrimaryContainer = Color(0xFF180078) -val md_theme_dark_secondary = Color(0xFFE2BDC7) -val md_theme_dark_onSecondary = Color(0xFF16006C) -val md_theme_dark_secondaryContainer = Color(0xFF5A3F47) -val md_theme_dark_onSecondaryContainer = Color(0xFFFFD9E2) -val md_theme_dark_tertiary = Color(0xFFEFBD94) -val md_theme_dark_onTertiary = Color(0xFF3F51B5) -val md_theme_dark_tertiaryContainer = Color(0xFF623F20) -val md_theme_dark_onTertiaryContainer = Color(0xFFFFDCC2) -val md_theme_dark_error = Color(0xFFFFB4AB) +// ========== DARK THEME (Mode Gelap) ========== +// Warna Utama - Biru Neon +val md_theme_dark_primary = Color(0xFF1351AA) // Button & Belakang Frame +val md_theme_dark_onPrimary = Color(0xFFCBCAC5) // Warna Font Button +val md_theme_dark_primaryContainer = Color(0xFFCBCAC5) // Top Bar +val md_theme_dark_onPrimaryContainer = Color(0xFF002583) + +// Warna Sekunder - Cyan terang +val md_theme_dark_secondary = Color(0xFF4DD0E1) +val md_theme_dark_onSecondary = Color(0xFF003640) +val md_theme_dark_secondaryContainer = Color(0xFF004F58) +val md_theme_dark_onSecondaryContainer = Color(0xFFB2EBF2) + +// Warna Tambahan - Orange hangat +val md_theme_dark_tertiary = Color(0xFFFFAB40) +val md_theme_dark_onTertiary = Color(0xFF4E2800) +val md_theme_dark_tertiaryContainer = Color(0xFF6F3900) +val md_theme_dark_onTertiaryContainer = Color(0xFFFFDDB3) + +// Error +val md_theme_dark_error = Color(0xFFEF5350) val md_theme_dark_errorContainer = Color(0xFF93000A) val md_theme_dark_onError = Color(0xFF690005) val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) -val md_theme_dark_background = Color(0xFFEFE7D3) -val md_theme_dark_onBackground = Color(0xFF1A0089) -val md_theme_dark_surface = Color(0xFF201A1B) -val md_theme_dark_onSurface = Color(0xFF16006B) -val md_theme_dark_surfaceVariant = Color(0xFF514347) -val md_theme_dark_onSurfaceVariant = Color(0xFF3F51B5) -val md_theme_dark_outline = Color(0xFF3F51B5) -val md_theme_dark_inverseOnSurface = Color(0xFF201A1B) -val md_theme_dark_inverseSurface = Color(0xFFEBE0E1) -val md_theme_dark_inversePrimary = Color(0xFF984062) -val md_theme_dark_surfaceTint = Color(0xFFFFB0C9) -val md_theme_dark_outlineVariant = Color(0xFF514347) + +// Background & Surface - Gelap modern +val md_theme_dark_background = Color(0xFFE3E2DE) +val md_theme_dark_onBackground = Color(0xFF1351AA) +val md_theme_dark_surface = Color(0xFF253036) +val md_theme_dark_onSurface = Color(0xFF1351AA) // Warna Font Top Bar +val md_theme_dark_surfaceVariant = Color(0xFF263238) // Biru gelap +val md_theme_dark_onSurfaceVariant = Color(0xFFCFD8DC) + +// Outline & lainnya +val md_theme_dark_outline = Color(0xFF607D8B) +val md_theme_dark_inverseOnSurface = Color(0xFF1A1C1E) +val md_theme_dark_inverseSurface = Color(0xFFE3E2E6) +val md_theme_dark_inversePrimary = Color(0xFF1976D2) +val md_theme_dark_surfaceTint = Color(0xFF64B5F6) +val md_theme_dark_outlineVariant = Color(0xFF424242) val md_theme_dark_scrim = Color(0xFF000000) + +/* + * CATATAN PENGGUNAAN WARNA: + * + * - primary: Warna utama app (AppBar, Button utama) + * - secondary: Warna pelengkap (FAB, Chip) + * - tertiary: Warna aksen (highlight, badge) + * - surface: Background card/dialog + * - background: Background halaman + * + * Format: on[Nama] = warna teks di atas warna [Nama] + * Contoh: onPrimary = teks di atas background primary + */ \ No newline at end of file