improve ui

pan-cake-team · Jul 20, 2023 · 48a6a4d · 48a6a4d
1 parent 11b5e33
commit 48a6a4d
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 53 deletions.
diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/composable/AppBar.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/composable/AppBar.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.pancake.brainburst.R
 import com.pancake.brainburst.ui.screens.home.composable.IconButtonSmall
 import com.pancake.brainburst.ui.theme.Type
+import com.pancake.brainburst.ui.theme.lightBackgroundColor
 import com.pancake.brainburst.ui.theme.space16
 import com.pancake.brainburst.ui.theme.space4
 
@@ -28,6 +29,7 @@ fun AppBar(
     modifier: Modifier = Modifier,
     @StringRes idTitleStringRes: Int,
     onClickBack: (() -> Unit)?,
+
 ) {
 
     Row(
@@ -41,7 +43,7 @@ fun AppBar(
             IconButtonSmall(
                 onClick = onClickBack,
                 iconColor = MaterialTheme.colorScheme.onBackground,
-                background = MaterialTheme.colorScheme.background,
+                background = lightBackgroundColor,
                 imageVector = Icons.Rounded.ArrowBack,
             )
 

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/composable/Loading.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/composable/Loading.kt
@@ -1,12 +1,16 @@
 package com.pancake.brainburst.ui.screens.composable
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
 import com.airbnb.lottie.compose.LottieAnimation
 import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.pancake.brainburst.R
+import com.pancake.brainburst.ui.theme.lightBackgroundColor
 
 @Composable
 fun Loading() {
@@ -15,6 +19,9 @@ fun Loading() {
         spec = LottieCompositionSpec.RawRes(R.raw.loading)
     )
     LottieAnimation(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(lightBackgroundColor),
         composition = composition,
         iterations = LottieConstants.IterateForever
     )

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/gameScreen/GameScreen.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/gameScreen/GameScreen.kt
@@ -118,15 +118,15 @@ private fun GameContent(
                         totalQuestionNumber = state.questions.size,
                     )
 
-                    Text(text = state.questions[state.currentQuestionNumber].correctAnswer)
+//                    Text(text = state.questions[state.currentQuestionNumber].correctAnswer)
                     SpacerVertical16()
 
                     QuestionProgressBar(
                         maxTarget = state.questions.size,
                         currentTarget = state.currentQuestionNumber + 1
                     )
 
-                    Text(text = currentQuestion.correctAnswer)
+//                    Text(text = currentQuestion.correctAnswer)
                     QuestionCard(
                         timer = state.timer,
                         helpTool = state.helpTool,

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/home/HomeScreen.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/home/HomeScreen.kt
@@ -43,7 +43,6 @@ import kotlinx.coroutines.launch
 fun HomeScreen(navController: NavController, viewModel: HomeViewModel = hiltViewModel()) {
     val state by viewModel.state.collectAsState()
     val pagerState = rememberPagerState(initialPage = 0)
-    val systemUiController = rememberSystemUiController()
     val coroutineScope = rememberCoroutineScope()
     val bottomSheetState = rememberModalBottomSheetState()
     var category: String by remember {
@@ -66,7 +65,6 @@ fun HomeScreen(navController: NavController, viewModel: HomeViewModel = hiltView
     HomeContent(
         state = state,
         pagerState = pagerState,
-        systemUiController = systemUiController,
         onClickHobby = viewModel::onClickHobby,
         onClickDifficulty = { difficulty ->
             navController.navigateToGameScreen(
@@ -101,7 +99,6 @@ fun HomeScreen(navController: NavController, viewModel: HomeViewModel = hiltView
 private fun HomeContent(
     state: HomeUiState,
     pagerState: PagerState,
-    systemUiController: SystemUiController,
     onClickHobby: (bobby: String) -> Unit,
     onClickDifficulty: (difficulty: String) -> Unit,
     onCategoryClick: (category: String) -> Unit,
@@ -127,6 +124,7 @@ private fun HomeContent(
             horizontalAlignment = Alignment.Start, verticalArrangement = Arrangement.Top
         ) {
 
+
             HeaderHomeScreen(
                 pagerState = pagerState,
                 categories = state.categories,
@@ -147,11 +145,7 @@ private fun HomeContent(
 
 
         }
-        SideEffect {
-            systemUiController.setStatusBarColor(
-                color = Brand500,
-            )
-        }
+
     }
 }
 

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/home/composable/HeaderHomeScreen.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/home/composable/HeaderHomeScreen.kt
@@ -1,10 +1,11 @@
 package com.pancake.brainburst.ui.screens.home.composable
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -16,17 +17,19 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.pager.ExperimentalPagerApi
 import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.PagerState
 import com.google.accompanist.pager.calculateCurrentOffsetForPage
 import com.pancake.brainburst.R
+import com.pancake.brainburst.ui.screens.composable.SpacerVertical16
+import com.pancake.brainburst.ui.screens.composable.SpacerVertical32
 import com.pancake.brainburst.ui.screens.home.CategoryUiState
+import com.pancake.brainburst.ui.theme.Brand500
+import com.pancake.brainburst.ui.theme.Type
 import com.pancake.brainburst.ui.theme.space16
 import com.pancake.brainburst.ui.theme.space8
 import com.pancake.brainburst.ui.theme.zero
@@ -45,33 +48,34 @@ fun HeaderHomeScreen(
             .fillMaxWidth()
             .height(300.dp)
     ) {
-        Image(
-            modifier = Modifier
-                .fillMaxWidth(),
-            painter = painterResource(id = R.drawable.background_home_shape),
-            contentScale = ContentScale.FillWidth,
-            contentDescription = null,
-        )
+
         Column(
             modifier = Modifier.fillMaxWidth(),
             horizontalAlignment = Alignment.Start,
             verticalArrangement = Arrangement.Top
         ) {
 
-            Box(
+            SpacerVertical16()
+            Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(space16)
+                    .padding(horizontal = space16),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically
             ) {
+                Text(
+                    text = stringResource(id = R.string.home),
+                    style = Type.Headline,
+                )
+                Spacer(modifier = Modifier.weight(1f))
                 IconButtonSmall(
                     onClick = onStarClicked,
-                    iconColor = MaterialTheme.colorScheme.onPrimary,
+                    iconColor = Brand500,
                     imageVector = Icons.Rounded.Star,
-                    modifier = Modifier
-                        .align(Alignment.TopEnd)
                 )
             }
 
+            SpacerVertical32()
             Text(
                 modifier = Modifier.padding(space16, zero, zero, space16),
                 text = stringResource(id = R.string.play_by_category),

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/home/composable/HomeBottomSheet.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/home/composable/HomeBottomSheet.kt
@@ -12,19 +12,18 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetState
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.pancake.brainburst.R
 import com.pancake.brainburst.ui.screens.composable.DifficultyCard
+import com.pancake.brainburst.ui.screens.composable.SpacerVertical32
 import com.pancake.brainburst.ui.theme.Brand500
 import com.pancake.brainburst.ui.theme.Green500
-import com.pancake.brainburst.ui.theme.LightSecondary
+import com.pancake.brainburst.ui.theme.LightBackground
 import com.pancake.brainburst.ui.theme.Red500
-import com.pancake.brainburst.ui.theme.Type
 import com.pancake.brainburst.ui.theme.space16
 import com.pancake.brainburst.ui.theme.space32
 import com.pancake.brainburst.ui.theme.space8
@@ -45,7 +44,9 @@ fun HomeBottomSheet(
 
         ModalBottomSheet(
             modifier = Modifier,
-            onDismissRequest = onDismiss, sheetState = bottomSheetState
+            containerColor = LightBackground,
+            onDismissRequest = onDismiss,
+            sheetState = bottomSheetState
         ) {
             Box(modifier = Modifier) {
                 Column(

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/savedQuestions/SavedQuestionsScreen.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/savedQuestions/SavedQuestionsScreen.kt
@@ -1,7 +1,9 @@
 package com.pancake.brainburst.ui.screens.savedQuestions
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -18,10 +20,12 @@ import androidx.navigation.NavController
 import com.pancake.brainburst.R
 import com.pancake.brainburst.domain.model.FavoriteQuestionModel
 import com.pancake.brainburst.ui.screens.composable.AppBar
+import com.pancake.brainburst.ui.screens.composable.SpacerVertical16
 import com.pancake.brainburst.ui.screens.home.backToHomeScreen
-import com.pancake.brainburst.ui.screens.savedQuestions.composable.QuestionBottomSheetContent
 import com.pancake.brainburst.ui.screens.savedQuestions.composable.ItemSaveQuestionCard
+import com.pancake.brainburst.ui.screens.savedQuestions.composable.QuestionBottomSheetContent
 import com.pancake.brainburst.ui.screens.savedQuestions.state.SavedQuestionsUiState
+import com.pancake.brainburst.ui.theme.LightBackground
 import com.pancake.brainburst.ui.theme.space16
 import com.pancake.brainburst.ui.theme.space24
 import com.pancake.brainburst.ui.theme.space8
@@ -61,7 +65,10 @@ private fun SavedQuestionContent(
 ) {
 
     LazyColumn(
-        modifier = Modifier.padding(horizontal = space16),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(LightBackground)
+            .padding(horizontal = space16),
         verticalArrangement = Arrangement.spacedBy(space8),
         contentPadding = PaddingValues(vertical = space24)
     ) {
@@ -70,6 +77,7 @@ private fun SavedQuestionContent(
                 idTitleStringRes = R.string.saved_questions,
                 onClickBack = onClickBack,
             )
+            SpacerVertical16()
         }
         items(state.questions) {
             ItemSaveQuestionCard(

diff --git a/...n/java/com/pancake/brainburst/ui/screens/savedQuestions/composable/QuestionBottomSheet.kt b/...n/java/com/pancake/brainburst/ui/screens/savedQuestions/composable/QuestionBottomSheet.kt
@@ -52,7 +52,9 @@ fun QuestionBottomSheetContent(
         bottomSheetState.isVisible -> {
             ModalBottomSheet(
                 modifier = Modifier.fillMaxSize(),
-                onDismissRequest = onDismiss, sheetState = bottomSheetState
+                onDismissRequest = onDismiss,
+                sheetState = bottomSheetState,
+                containerColor = LightBackground
             ) {
                 Column(
                     modifier = Modifier

diff --git a/app/src/main/java/com/pancake/brainburst/ui/screens/welecome/WelcomeScreen.kt b/app/src/main/java/com/pancake/brainburst/ui/screens/welecome/WelcomeScreen.kt
@@ -1,6 +1,7 @@
 package com.pancake.brainburst.ui.screens.welecome
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -24,6 +25,7 @@ import androidx.navigation.NavController
 import com.pancake.brainburst.R
 import com.pancake.brainburst.ui.screens.home.navigateToHomeScreen
 import com.pancake.brainburst.ui.theme.Cyan300
+import com.pancake.brainburst.ui.theme.LightBackground
 import com.pancake.brainburst.ui.theme.NerkoOne
 import com.pancake.brainburst.ui.theme.space24
 import com.pancake.brainburst.ui.theme.space56
@@ -50,7 +52,8 @@ private fun WelcomeContent(
 ) {
     Column(
         modifier = Modifier
-            .fillMaxSize(),
+            .fillMaxSize()
+            .background(LightBackground),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Spacer(modifier = Modifier.weight(0.3f))

diff --git a/app/src/main/java/com/pancake/brainburst/ui/theme/Theme.kt b/app/src/main/java/com/pancake/brainburst/ui/theme/Theme.kt
@@ -4,6 +4,7 @@ import android.app.Activity
 import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
@@ -48,23 +49,7 @@ fun BrainBurstTheme(
     dynamicColor: Boolean = true,
     content: @Composable () -> Unit
 ) {
-    val colorScheme = when {
-        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
-            val context = LocalContext.current
-            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
-        }
 
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
-    }
-    val view = LocalView.current
-    if (!view.isInEditMode) {
-        SideEffect {
-            val window = (view.context as Activity).window
-            window.statusBarColor = colorScheme.primary.toArgb()
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
-        }
-    }
 
     MaterialTheme(
         colorScheme = colorScheme,

diff --git a/app/src/main/res/raw/loading.json b/app/src/main/res/raw/loading.json
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -6,7 +6,7 @@
     <color name="teal_200">#FF03DAC5</color>
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
-    <color name="white">#FFFFFFFF</color>
+    <color name="white">#FFF0F5FD</color>
     <color name="blue_Brand_500">#77AAFE</color>
     <color name="tertiary">#8E9090</color>
 

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -77,4 +77,5 @@
     <string name="thank_you">Thank you</string>
     <string name="retry">Retry</string>
     <string name="saved_questions">Saved Questions</string>
+    <string name="home">Home</string>
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -1,5 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.BrainBurst" parent="android:Theme.Material.Light.NoActionBar" />
+
+
+    <style name="Theme.BrainBurst" parent="android:Theme.Material.Light.NoActionBar" >
+        <item name="android:statusBarColor">@color/white</item>
+        <item name="android:windowLightStatusBar">true</item>
+    </style>
 </resources>