Merge pull request #488 from angeles-bilbao6/issue487/jetsnack

[Jetsnack] UI Polish

Author: nickbutcher

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Snacks.kt

@@ -122,18 +122,18 @@ private fun HighlightedSnacks(
     modifier: Modifier = Modifier
 ) {
     val scroll = rememberScrollState(0)
-    val gradient = when (index % 2) {
+    val gradient = when ((index / 2) % 2) {
         0 -> JetsnackTheme.colors.gradient6_1
         else -> JetsnackTheme.colors.gradient6_2
     }
     // The Cards show a gradient which spans 3 cards and scrolls with parallax.
     val gradientWidth = with(LocalDensity.current) {
-        (3 * (HighlightCardWidth + HighlightCardPadding).toPx())
+        (6 * (HighlightCardWidth + HighlightCardPadding).toPx())
     }
     LazyRow(
         modifier = modifier,
         horizontalArrangement = Arrangement.spacedBy(16.dp),
-        contentPadding = PaddingValues(start = 16.dp, end = 16.dp)
+        contentPadding = PaddingValues(start = 24.dp, end = 24.dp)
     ) {
         itemsIndexed(snacks) { index, snack ->
             HighlightSnackItem(

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/Profile.kt

@@ -16,20 +16,51 @@
 
 package com.example.jetsnack.ui.home
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+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.wrapContentSize
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
 import com.example.jetsnack.R
 
 @Composable
 fun Profile(modifier: Modifier = Modifier) {
-    Text(
-        text = stringResource(R.string.home_profile),
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
         modifier = modifier
             .fillMaxSize()
             .wrapContentSize()
-    )
+            .padding(24.dp)
+    ) {
+        Image(
+            painterResource(R.drawable.empty_state_search),
+            contentDescription = null
+        )
+        Spacer(Modifier.height(24.dp))
+        Text(
+            text = stringResource(R.string.work_in_progress),
+            style = MaterialTheme.typography.subtitle1,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.fillMaxWidth()
+        )
+        Spacer(Modifier.height(16.dp))
+        Text(
+            text = stringResource(R.string.grab_beverage),
+            style = MaterialTheme.typography.body2,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
 }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/cart/Cart.kt

@@ -48,6 +48,7 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.layout.LastBaseline
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -373,7 +374,10 @@ private fun CheckoutBar(modifier: Modifier = Modifier) {
                     .weight(1f)
             ) {
                 Text(
-                    text = stringResource(id = R.string.cart_checkout)
+                    text = stringResource(id = R.string.cart_checkout),
+                    modifier = Modifier.fillMaxWidth(),
+                    textAlign = TextAlign.Left,
+                    maxLines = 1
                 )
             }
         }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/search/Categories.kt

@@ -79,7 +79,7 @@ private fun SearchCategoryCollection(
         VerticalGrid(Modifier.padding(horizontal = 16.dp)) {
             val gradient = when (index % 2) {
                 0 -> JetsnackTheme.colors.gradient2_2
-                else -> JetsnackTheme.colors.gradient3_2
+                else -> JetsnackTheme.colors.gradient2_3
             }
             collection.categories.forEach { category ->
                 SearchCategory(

Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt

@@ -50,6 +50,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.dp
@@ -110,7 +111,7 @@ private fun Header() {
         modifier = Modifier
             .height(280.dp)
             .fillMaxWidth()
-            .background(Brush.horizontalGradient(JetsnackTheme.colors.interactivePrimary))
+            .background(Brush.horizontalGradient(JetsnackTheme.colors.tornado1))
     )
 }
 
@@ -163,7 +164,7 @@ private fun Body(
                         color = JetsnackTheme.colors.textHelp,
                         modifier = HzPadding
                     )
-                    Spacer(Modifier.height(4.dp))
+                    Spacer(Modifier.height(16.dp))
                     Text(
                         text = stringResource(R.string.detail_placeholder),
                         style = MaterialTheme.typography.body1,
@@ -328,6 +329,8 @@ private fun CartBottomBar(modifier: Modifier = Modifier) {
                 ) {
                     Text(
                         text = stringResource(R.string.add_to_cart),
+                        modifier = Modifier.fillMaxWidth(),
+                        textAlign = TextAlign.Center,
                         maxLines = 1
                     )
                 }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt

@@ -33,6 +33,7 @@ import com.example.jetsnack.ui.utils.LocalSysUiController
 
 private val LightColorPalette = JetsnackColors(
     brand = Shadow5,
+    brandSecondary = Ocean3,
     uiBackground = Neutral0,
     uiBorder = Neutral4,
     uiFloated = FunctionalGrey,
@@ -50,11 +51,14 @@ private val LightColorPalette = JetsnackColors(
     gradient3_2 = listOf(Rose2, Lavender3, Rose4),
     gradient2_1 = listOf(Shadow4, Shadow11),
     gradient2_2 = listOf(Ocean3, Shadow3),
+    gradient2_3 = listOf(Lavender3, Rose2),
+    tornado1 = listOf(Shadow4, Ocean3),
     isDark = false
 )
 
 private val DarkColorPalette = JetsnackColors(
     brand = Shadow1,
+    brandSecondary = Ocean2,
     uiBackground = Neutral8,
     uiBorder = Neutral3,
     uiFloated = FunctionalDarkGrey,
@@ -73,7 +77,9 @@ private val DarkColorPalette = JetsnackColors(
     gradient3_1 = listOf(Shadow9, Ocean7, Shadow5),
     gradient3_2 = listOf(Rose8, Lavender7, Rose11),
     gradient2_1 = listOf(Ocean3, Shadow3),
-    gradient2_2 = listOf(Ocean7, Shadow7),
+    gradient2_2 = listOf(Ocean4, Shadow2),
+    gradient2_3 = listOf(Lavender3, Rose3),
+    tornado1 = listOf(Shadow4, Ocean3),
     isDark = true
 )
 
@@ -118,7 +124,9 @@ class JetsnackColors(
     gradient3_2: List<Color>,
     gradient2_1: List<Color>,
     gradient2_2: List<Color>,
+    gradient2_3: List<Color>,
     brand: Color,
+    brandSecondary: Color,
     uiBackground: Color,
     uiBorder: Color,
     uiFloated: Color,
@@ -130,6 +138,7 @@ class JetsnackColors(
     textHelp: Color,
     textInteractive: Color,
     textLink: Color,
+    tornado1: List<Color>,
     iconPrimary: Color = brand,
     iconSecondary: Color,
     iconInteractive: Color,
@@ -150,8 +159,12 @@ class JetsnackColors(
         private set
     var gradient2_2 by mutableStateOf(gradient2_2)
         private set
+    var gradient2_3 by mutableStateOf(gradient2_3)
+        private set
     var brand by mutableStateOf(brand)
         private set
+    var brandSecondary by mutableStateOf(brandSecondary)
+        private set
     var uiBackground by mutableStateOf(uiBackground)
         private set
     var uiBorder by mutableStateOf(uiBorder)
@@ -172,6 +185,8 @@ class JetsnackColors(
         private set
     var textInteractive by mutableStateOf(textInteractive)
         private set
+    var tornado1 by mutableStateOf(tornado1)
+        private set
     var textLink by mutableStateOf(textLink)
         private set
     var iconPrimary by mutableStateOf(iconPrimary)
@@ -196,7 +211,9 @@ class JetsnackColors(
         gradient3_2 = other.gradient3_2
         gradient2_1 = other.gradient2_1
         gradient2_2 = other.gradient2_2
+        gradient2_3 = other.gradient2_3
         brand = other.brand
+        brandSecondary = other.brandSecondary
         uiBackground = other.uiBackground
         uiBorder = other.uiBorder
         uiFloated = other.uiFloated
@@ -208,6 +225,7 @@ class JetsnackColors(
         textHelp = other.textHelp
         textInteractive = other.textInteractive
         textLink = other.textLink
+        tornado1 = other.tornado1
         iconPrimary = other.iconPrimary
         iconSecondary = other.iconSecondary
         iconInteractive = other.iconInteractive

Jetsnack/app/src/main/res/values/strings.xml

@@ -58,5 +58,7 @@
     <!-- Quantity Selector -->
     <string name="label_increase">Increase</string>
     <string name="label_decrease">Decrease</string>
+    <string name="work_in_progress">This is currently work in progress</string>
+    <string name="grab_beverage">Grab a beverage and check back later!</string>
 
 </resources>