Msbelaid/#119 create welcome screen

app/src/main/java/app/plugbrain/android/ui/designsystem/components/listitem/PlugInfoListItem.kt

@@ -22,14 +22,15 @@ import app.plugbrain.android.ui.theme.MathlockAppTheme
 
 @Composable
 fun PlugInfoListItem(
+  modifier: Modifier = Modifier,
   title: String,
   description: String,
   icon: ImageVector,
 ) {
   Row(
     horizontalArrangement = Arrangement.spacedBy(24.dp),
     verticalAlignment = Alignment.CenterVertically,
-    modifier = Modifier
+    modifier = modifier
       .background(MaterialTheme.colorScheme.surface),
   ) {
     LeadingIcon(

app/src/main/java/app/plugbrain/android/ui/onboarding/WelcomeScreen.kt

@@ -0,0 +1,112 @@
+package app.plugbrain.android.ui.onboarding
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.TrendingUp
+import androidx.compose.material.icons.rounded.LockOpen
+import androidx.compose.material.icons.rounded.TrackChanges
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.layout.onSizeChanged
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.dp
+import app.plugbrain.android.R
+import app.plugbrain.android.ui.designsystem.components.button.PlugButtonPrimary
+import app.plugbrain.android.ui.designsystem.components.listitem.PlugInfoListItem
+import app.plugbrain.android.ui.theme.MathlockAppTheme
+import app.plugbrain.android.ui.theme.Primary500
+
+@Composable
+fun WelcomeScreen() {
+  Scaffold(
+    containerColor = MaterialTheme.colorScheme.surface,
+    modifier = Modifier,
+    topBar = {},
+    bottomBar = {
+      PlugButtonPrimary(
+        text = stringResource(R.string.welcome_cta_title),
+        modifier = Modifier
+          .fillMaxWidth()
+          .padding(32.dp),
+        onClick = {},
+      )
+    },
+  ) { paddingValues ->
+    var size by remember { mutableStateOf(IntSize.Zero) }
+    Column(
+      verticalArrangement = Arrangement.SpaceEvenly,
+      horizontalAlignment = Alignment.CenterHorizontally,
+      modifier = Modifier
+        .onSizeChanged { size = it }
+        .fillMaxSize()
+        .background(CircularGradient(size))
+        .padding(paddingValues)
+        .padding(32.dp),
+    ) {
+      Image(painterResource(R.drawable.ic_launcher), "", modifier = Modifier.size(144.dp))
+      Text(stringResource(R.string.app_name), style = MaterialTheme.typography.displayLarge)
+      Text(
+        text = stringResource(R.string.welcome_title),
+        style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.Normal),
+        textAlign = TextAlign.Center,
+      )
+      Spacer(Modifier.height(8.dp))
+      PlugInfoListItem(
+        modifier = Modifier.wrapContentSize(),
+        title = stringResource(R.string.welcome_feature_one_title),
+        description = stringResource(R.string.welcome_feature_one_description),
+        icon = Icons.Rounded.TrackChanges,
+      )
+      PlugInfoListItem(
+        title = stringResource(R.string.welcome_feature_two_title),
+        description = stringResource(R.string.welcome_feature_two_description),
+        icon = Icons.Rounded.LockOpen,
+      )
+      PlugInfoListItem(
+        title = stringResource(R.string.welcome_feature_three_title),
+        description = stringResource(R.string.welcome_feature_three_description),
+        icon = Icons.AutoMirrored.Rounded.TrendingUp,
+      )
+    }
+  }
+}
+
+@Composable
+private fun CircularGradient(size: IntSize): Brush = Brush.radialGradient(
+  colors = listOf(Primary500, MaterialTheme.colorScheme.surface),
+  center = Offset(x = size.width / 2f, y = -size.height / 3f),
+  radius = 1500f,
+)
+
+@Preview(showSystemUi = true)
+@Composable
+private fun WelcomeScreenPreview() {
+  MathlockAppTheme(dynamicColor = false) {
+    WelcomeScreen()
+  }
+}

app/src/main/java/app/plugbrain/android/ui/theme/Type.kt

@@ -36,7 +36,7 @@ val Typography =
       fontFamily = SoraFontFamily,
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp,
-      lineHeight = 24.sp,
+      lineHeight = 30.sp,
     ),
 
     titleLarge = TextStyle(

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

@@ -58,4 +58,12 @@
     <string name="cancel_btn">Cancel</string>
     <string name="challenge_answer_hint">Your answer</string>
     <string name="take_me_out_of_here">Take me out of here</string>
+    <string name="welcome_title">Take back control of your attention.</string>
+    <string name="welcome_feature_one_title">Focus your attention</string>
+    <string name="welcome_feature_one_description">Spend less time on apps that distract you.</string>
+    <string name="welcome_feature_two_title">Unlock with a challenge</string>
+    <string name="welcome_feature_two_description">Solve a quick math challenge to keep using the app.</string>
+    <string name="welcome_feature_three_title">Gets harder the longer you stay</string>
+    <string name="welcome_feature_three_description">Challenges increase in difficulty the longer you keep scrolling.</string>
+    <string name="welcome_cta_title">Get started</string>
 </resources>

app/src/test/java/app/plugbrain/android/screenshots/WelcomeScreenScreenshotTest.kt

@@ -0,0 +1,38 @@
+package app.plugbrain.android.screenshots
+
+import androidx.compose.runtime.Composable
+import app.cash.paparazzi.DeviceConfig
+import app.cash.paparazzi.Paparazzi
+import app.plugbrain.android.ui.onboarding.WelcomeScreen
+import app.plugbrain.android.ui.theme.MathlockAppTheme
+import org.junit.Rule
+import org.junit.Test
+
+class WelcomeScreenScreenshotTest {
+    @get:Rule
+    val paparazzi =
+        Paparazzi(
+            deviceConfig = DeviceConfig.PIXEL_5,
+        )
+
+    @Test
+    fun welcomeScreenTest() {
+        paparazzi.snapshot {
+            welcomeScreenTest(darkTheme = false)
+        }
+    }
+
+    @Test
+    fun welcomeScreenDarkTest() {
+        paparazzi.snapshot {
+            welcomeScreenTest(darkTheme = true)
+        }
+    }
+
+    @Composable
+    private fun welcomeScreenTest(darkTheme: Boolean = false) {
+        MathlockAppTheme(dynamicColor = false, darkTheme = darkTheme) {
+            WelcomeScreen()
+        }
+    }
+}