feat: develop welcome page

RugerMcCarthy · Mar 14, 2021 · b7a9f10 · b7a9f10
1 parent edca6f1
commit b7a9f10
Show file tree

Hide file tree

Showing 14 changed files with 357 additions and 27 deletions.
diff --git a/app/src/main/java/com/example/androiddevchallenge/MainActivity.kt b/app/src/main/java/com/example/androiddevchallenge/MainActivity.kt
@@ -16,46 +16,148 @@
 package com.example.androiddevchallenge
 
 import android.os.Bundle
+import android.util.Log
+import android.view.View
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
+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.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
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
+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.vector.ImageVector
+import androidx.compose.ui.graphics.vector.VectorPainter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowCompat.setDecorFitsSystemWindows
+import com.example.androiddevchallenge.ui.theme.BloomTheme
 import com.example.androiddevchallenge.ui.theme.MyTheme
+import com.example.androiddevchallenge.ui.theme.pink100
+import com.example.androiddevchallenge.ui.theme.pink900
+import com.example.androiddevchallenge.ui.theme.welcomeAssets
+import com.example.androiddevchallenge.ui.theme.white
 
 class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        setDecorFitsSystemWindows(window, false)
+        getWindow().setStatusBarColor(Color.Transparent.value.toInt())
         setContent {
-            MyTheme {
-                MyApp()
+            BloomTheme(false) {
+                WelcomePage()
             }
         }
     }
 }
 
-// Start building your app here!
 @Composable
-fun MyApp() {
-    Surface(color = MaterialTheme.colors.background) {
-        Text(text = "Ready... Set... GO!")
-    }
-}
-
-@Preview("Light Theme", widthDp = 360, heightDp = 640)
-@Composable
-fun LightPreview() {
-    MyTheme {
-        MyApp()
+fun WelcomePage(){
+    Box(modifier = Modifier
+        .fillMaxSize()
+        .background(MaterialTheme.colors.primary)) {
+        Image(
+            painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.background)),
+            contentDescription = "weclome_bg",
+            modifier = Modifier.fillMaxSize()
+        )
+        Column(modifier = Modifier.fillMaxSize()) {
+            Image(
+                painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.illos)),
+                contentDescription = "weclome_illos",
+                modifier = Modifier
+                    .wrapContentSize()
+                    .padding(top = 72.dp, start = 88.dp)
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = 48.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Image(
+                    painter = rememberVectorPainter(image = ImageVector.vectorResource(id = MaterialTheme.welcomeAssets.logo)),
+                    contentDescription = "weclome_logo",
+                    modifier = Modifier.wrapContentSize()
+                )
+                Box(modifier = Modifier
+                    .fillMaxWidth()
+                    .height(32.dp),
+                    contentAlignment = Alignment.BottomCenter) {
+                    Text(
+                        text = "Beautiful home garden solutions",
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.typography.subtitle1,
+                        color = MaterialTheme.colors.onPrimary
+                    )
+                }
+                Spacer(modifier = Modifier.height(40.dp))
+                Button(
+                    onClick = { },
+                    modifier = Modifier
+                        .height(48.dp)
+                        .fillMaxWidth()
+                        .padding(start = 16.dp, end = 16.dp)
+                        .clip(RoundedCornerShape(50)),
+                    colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.secondary)
+                ) {
+                    Text(
+                        text = "Create account",
+                        style = MaterialTheme.typography.button,
+                        color = MaterialTheme.colors.onSecondary
+                    )
+                }
+                TextButton(
+                    onClick = {},
+                    modifier = Modifier
+                        .padding(top = 8.dp)
+                        .height(48.dp),
+                ) {
+                    Text(
+                        text = "Log in",
+                        style = MaterialTheme.typography.button,
+                        color = MaterialTheme.colors.secondary,
+                    )
+                }
+            }
+        }
     }
 }
 
-@Preview("Dark Theme", widthDp = 360, heightDp = 640)
+@Preview(showBackground = true)
 @Composable
-fun DarkPreview() {
-    MyTheme(darkTheme = true) {
-        MyApp()
+fun WelcomePagePreview() {
+    BloomTheme(true) {
+        WelcomePage()
     }
-}
+}
diff --git a/app/src/main/java/com/example/androiddevchallenge/ui/theme/Color.kt b/app/src/main/java/com/example/androiddevchallenge/ui/theme/Color.kt
@@ -21,3 +21,12 @@ val purple200 = Color(0xFFBB86FC)
 val purple500 = Color(0xFF6200EE)
 val purple700 = Color(0xFF3700B3)
 val teal200 = Color(0xFF03DAC5)
+
+val white = Color(0xFFFFFFFF)
+val white150 =  Color(0x26FFFFFF)
+val white850 =  Color(0xD9FFFFFF)
+val pink100 = Color(0xFFFFF1F1)
+val pink900 = Color(0xFF3F2C2C)
+val gray = Color(0xFF232323)
+val green300 = Color(0xFFB8C9B8)
+val green900 = Color(0xFF2D3B2D)
diff --git a/app/src/main/java/com/example/androiddevchallenge/ui/theme/Theme.kt b/app/src/main/java/com/example/androiddevchallenge/ui/theme/Theme.kt
@@ -15,11 +15,41 @@
  */
 package com.example.androiddevchallenge.ui.theme
 
+import android.util.Log
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.Colors
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import com.example.androiddevchallenge.R
+
+
+
+private val BloomLightColorPaltte = lightColors(
+    primary = pink100,
+    secondary = pink900,
+    background = white,
+    surface = white850,
+    onPrimary = gray,
+    onSecondary = white,
+    onBackground = gray,
+    onSurface = gray,
+)
+
+private val BloomDarkColorPaltte = darkColors(
+    primary = green900,
+    secondary = green300,
+    background = gray,
+    surface = white150,
+    onPrimary = white,
+    onSecondary = gray,
+    onBackground = white,
+    onSurface = white850
+)
+
+
 
 private val DarkColorPalette = darkColors(
     primary = purple200,
@@ -57,3 +87,44 @@ fun MyTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() (
         content = content
     )
 }
+
+object WelcomeAssets {
+    var background: Int = 0
+    var illos: Int = 0
+    var logo: Int = 0
+    fun set(background: Int, illos: Int, logo: Int) {
+        this.background = background
+        this.illos = illos
+        this.logo = logo
+    }
+}
+
+val MaterialTheme.welcomeAssets: WelcomeAssets
+    get() = WelcomeAssets
+
+@Composable
+fun BloomTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
+    var colors: Colors
+    if (darkTheme) {
+        colors = BloomDarkColorPaltte
+        WelcomeAssets.set(
+            background = R.drawable.ic_dark_welcome_bg,
+            illos = R.drawable.ic_dark_welcome_illos,
+            logo = R.drawable.ic_dark_logo
+        )
+    } else {
+        colors = BloomLightColorPaltte
+        WelcomeAssets.set(
+            background = R.drawable.ic_light_welcome_bg,
+            illos = R.drawable.ic_light_welcome_illos,
+            logo = R.drawable.ic_light_logo
+        )
+    }
+
+    MaterialTheme(
+        colors = colors,
+        typography = bloomTypoGraphy,
+        shapes = shapes,
+        content = content
+    )
+}
diff --git a/app/src/main/java/com/example/androiddevchallenge/ui/theme/Type.kt b/app/src/main/java/com/example/androiddevchallenge/ui/theme/Type.kt
@@ -17,9 +17,11 @@ package com.example.androiddevchallenge.ui.theme
 
 import androidx.compose.material.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import com.example.androiddevchallenge.R
 
 // Set of Material typography styles to start with
 val typography = Typography(
@@ -28,16 +30,51 @@ val typography = Typography(
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp
     )
-        /* Other default text styles to override
+)
+
+val nunitoSansFamily = FontFamily(
+    Font(R.font.nunitosans_light, FontWeight.Light),
+    Font(R.font.nunitosans_semibold, FontWeight.SemiBold),
+    Font(R.font.nunitosans_bold, FontWeight.Bold)
+)
+
+val bloomTypoGraphy = Typography(
+    h1 = TextStyle(
+        fontSize = 18.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.Bold
+    ),
+    h2 = TextStyle(
+        fontSize = 14.sp,
+        letterSpacing = 15.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.Bold
+    ),
+    subtitle1 = TextStyle(
+        fontSize = 16.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.Light
+    ),
+    body1 = TextStyle(
+        fontSize = 14.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.Light
+    ),
+    body2 = TextStyle(
+        fontSize = 12.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.Light
+    ),
     button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
+        fontSize = 14.sp,
+        letterSpacing = 1.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.SemiBold,
+        color = white
     ),
     caption = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
+        fontSize = 12.sp,
+        fontFamily = nunitoSansFamily,
+        fontWeight = FontWeight.SemiBold
     )
-    */
 )
diff --git a/app/src/main/res/drawable/ic_dark_logo.xml b/app/src/main/res/drawable/ic_dark_logo.xml
@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="92dp"
+    android:height="33dp"
+    android:viewportWidth="92"
+    android:viewportHeight="33">
+  <group>
+    <clip-path
+        android:pathData="M0,0h91.8992v32.41h-91.8992z"/>
+    <path
+        android:pathData="M7.77,17.39H6.42C6.42,18.87 6.42,20.27 6.42,21.59C6.44,22.89 6.46,24.17 6.48,25.43H7.89C11.27,25.43 12.96,24.11 12.96,21.47C12.96,20.09 12.54,19.07 11.7,18.41C10.86,17.73 9.55,17.39 7.77,17.39ZM8.07,8.63H6.48C6.46,9.91 6.44,11.18 6.42,12.44C6.42,13.7 6.42,14.86 6.42,15.92H7.65C9.19,15.92 10.32,15.61 11.04,14.99C11.76,14.37 12.12,13.42 12.12,12.14C12.12,10.9 11.78,10.01 11.1,9.47C10.44,8.91 9.43,8.63 8.07,8.63ZM0,8.51V7.1H9.18C11.48,7.1 13.18,7.55 14.28,8.45C15.38,9.35 15.93,10.49 15.93,11.87C15.93,12.91 15.57,13.86 14.85,14.72C14.13,15.56 12.87,16.15 11.07,16.49C13.19,16.75 14.71,17.33 15.63,18.23C16.55,19.13 17.01,20.21 17.01,21.47C17.01,22.13 16.86,22.79 16.56,23.45C16.28,24.09 15.81,24.68 15.15,25.22C14.51,25.76 13.63,26.19 12.51,26.51C11.41,26.83 10.03,26.99 8.37,26.99H0V25.58L2.52,25.31C2.56,24.05 2.58,22.78 2.58,21.5C2.58,20.22 2.58,18.93 2.58,17.63V16.46C2.58,15.18 2.58,13.9 2.58,12.62C2.58,11.34 2.56,10.06 2.52,8.78L0,8.51Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M19.7565,26.99V25.76L21.7965,25.37C21.8165,24.59 21.8265,23.81 21.8265,23.03C21.8465,22.25 21.8565,21.47 21.8565,20.69V7.82L19.6665,7.52V6.35L25.1265,5L25.5765,5.27L25.4565,9.5V20.69C25.4565,21.47 25.4565,22.25 25.4565,23.03C25.4765,23.81 25.4965,24.59 25.5165,25.37L27.5565,25.76V26.99H19.7565Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M37.8536,27.41C36.4936,27.41 35.2636,27.11 34.1636,26.51C33.0836,25.91 32.2236,25.04 31.5836,23.9C30.9436,22.76 30.6236,21.4 30.6236,19.82C30.6236,18.22 30.9536,16.85 31.6136,15.71C32.2936,14.57 33.1836,13.7 34.2836,13.1C35.3836,12.5 36.5736,12.2 37.8536,12.2C39.1336,12.2 40.3236,12.5 41.4236,13.1C42.5236,13.7 43.4136,14.57 44.0936,15.71C44.7736,16.83 45.1136,18.2 45.1136,19.82C45.1136,21.42 44.7836,22.79 44.1236,23.93C43.4836,25.05 42.6136,25.91 41.5136,26.51C40.4336,27.11 39.2136,27.41 37.8536,27.41ZM37.8536,25.94C38.9336,25.94 39.7536,25.44 40.3136,24.44C40.8936,23.44 41.1836,21.91 41.1836,19.85C41.1836,15.73 40.0736,13.67 37.8536,13.67C35.6536,13.67 34.5536,15.73 34.5536,19.85C34.5536,21.91 34.8336,23.44 35.3936,24.44C35.9536,25.44 36.7736,25.94 37.8536,25.94Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M55.92,27.41C54.56,27.41 53.33,27.11 52.23,26.51C51.15,25.91 50.29,25.04 49.65,23.9C49.01,22.76 48.69,21.4 48.69,19.82C48.69,18.22 49.02,16.85 49.68,15.71C50.36,14.57 51.25,13.7 52.35,13.1C53.45,12.5 54.64,12.2 55.92,12.2C57.2,12.2 58.39,12.5 59.49,13.1C60.59,13.7 61.48,14.57 62.16,15.71C62.84,16.83 63.18,18.2 63.18,19.82C63.18,21.42 62.85,22.79 62.19,23.93C61.55,25.05 60.68,25.91 59.58,26.51C58.5,27.11 57.28,27.41 55.92,27.41ZM55.92,25.94C57,25.94 57.82,25.44 58.38,24.44C58.96,23.44 59.25,21.91 59.25,19.85C59.25,15.73 58.14,13.67 55.92,13.67C53.72,13.67 52.62,15.73 52.62,19.85C52.62,21.91 52.9,23.44 53.46,24.44C54.02,25.44 54.84,25.94 55.92,25.94Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M66.5492,26.99V25.76L68.4992,25.37C68.5192,24.63 68.5292,23.83 68.5292,22.97C68.5292,22.09 68.5292,21.33 68.5292,20.69V19.1C68.5292,18.28 68.5192,17.63 68.4992,17.15C68.4992,16.65 68.4792,16.1 68.4392,15.5L66.3392,15.23V14.09L71.3492,12.2L71.8292,12.5L72.0392,14.84C72.7592,14.02 73.5392,13.38 74.3792,12.92C75.2392,12.44 76.1292,12.2 77.0492,12.2C78.9892,12.2 80.2392,13.11 80.7992,14.93C81.5992,13.97 82.4292,13.28 83.2892,12.86C84.1492,12.42 85.0392,12.2 85.9592,12.2C87.3192,12.2 88.3392,12.62 89.0192,13.46C89.6992,14.3 90.0392,15.64 90.0392,17.48V20.69C90.0392,21.37 90.0392,22.14 90.0392,23C90.0392,23.84 90.0492,24.64 90.0692,25.4L91.8992,25.76V26.99H84.5792V25.76L86.4392,25.37C86.4592,24.63 86.4692,23.84 86.4692,23C86.4692,22.14 86.4692,21.37 86.4692,20.69V17.93C86.4692,16.67 86.2992,15.82 85.9592,15.38C85.6392,14.94 85.0992,14.72 84.3392,14.72C83.2792,14.72 82.1792,15.23 81.0392,16.25C81.0592,16.45 81.0692,16.66 81.0692,16.88C81.0892,17.1 81.0992,17.33 81.0992,17.57V20.69C81.0992,21.37 81.0992,22.14 81.0992,23C81.0992,23.84 81.1092,24.64 81.1292,25.4L82.9292,25.76V26.99H75.5792V25.76L77.4992,25.37C77.5192,24.63 77.5292,23.84 77.5292,23C77.5292,22.14 77.5292,21.37 77.5292,20.69V17.99C77.5292,16.77 77.3692,15.92 77.0492,15.44C76.7492,14.96 76.2092,14.72 75.4292,14.72C74.8692,14.72 74.3092,14.86 73.7492,15.14C73.2092,15.4 72.6792,15.76 72.1592,16.22V20.69C72.1592,21.35 72.1592,22.11 72.1592,22.97C72.1592,23.83 72.1692,24.64 72.1892,25.4L73.9592,25.76V26.99H66.5492Z"
+        android:fillColor="#ffffff"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/ic_dark_welcome_bg.xml b/app/src/main/res/drawable/ic_dark_welcome_bg.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="360dp"
+    android:height="640dp"
+    android:viewportWidth="360"
+    android:viewportHeight="640">
+  <group>
+    <clip-path
+        android:pathData="M0,0h360v640h-360z"/>
+    <group>
+      <clip-path
+          android:pathData="M0,0h360v640h-360z"/>
+      <path
+          android:pathData="M374.734,659.24C346.997,635.687 296.841,604.859 264.689,599.063C228.088,592.464 201.76,604.872 171.297,605.758C133.784,606.849 117.062,602.444 73.123,582.079C26.482,560.462 -27.225,526.43 -75.428,466.643L-77.678,463.852C-123.636,406.855 -123.989,406.417 -148.224,354.735C-164.655,319.695 -162.809,316.619 -175.295,250.517L-131.794,43.962C-131.213,24.049 -124,6.957 -124,6.957L-131.794,43.962C-132.773,77.518 -114.922,119.083 -12,100.373C152,70.559 217.717,161.085 276.306,251.734C374.734,404.023 395.86,645.668 395.86,645.668L374.734,659.24Z"
+          android:fillColor="#ffffff"
+          android:fillAlpha="0.1"/>
+    </group>
+  </group>
+</vector>