Implement NotificationsOnboarding ui

androidHyperskillApp/src/main/java/org/hyperskill/app/android/notification_onboarding/fragment/NotificationsOnboardingFragment.kt

@@ -0,0 +1,36 @@
+package org.hyperskill.app.android.notification_onboarding.fragment
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.ui.platform.ComposeView
+import androidx.fragment.app.Fragment
+import com.google.accompanist.themeadapter.material.MdcTheme
+import org.hyperskill.app.android.notification_onboarding.ui.NotificationsOnboardingScreen
+
+class NotificationsOnboardingFragment : Fragment() {
+
+    companion object {
+        fun newInstance(): NotificationsOnboardingFragment =
+            NotificationsOnboardingFragment()
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View =
+        ComposeView(requireContext()).apply {
+            setContent {
+                MdcTheme {
+                    NotificationsOnboardingScreen()
+                }
+            }
+        }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        // TODO: send ViewedEventMessage
+    }
+}

androidHyperskillApp/src/main/java/org/hyperskill/app/android/notification_onboarding/ui/NotificationsOnboardingScreen.kt

@@ -0,0 +1,109 @@
+package org.hyperskill.app.android.notification_onboarding.ui
+
+import android.content.res.Configuration
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Button
+import androidx.compose.material.Text
+import androidx.compose.material.TextButton
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.accompanist.themeadapter.material.MdcTheme
+import org.hyperskill.app.R
+
+@Composable
+fun NotificationsOnboardingScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxHeight()
+            .padding(
+                start = 20.dp,
+                end = 20.dp,
+                top = 24.dp,
+                bottom = 32.dp
+            ),
+        verticalArrangement = Arrangement.SpaceBetween
+    ) {
+        NotificationsOnboardingHeader()
+        Image(
+            painter = painterResource(id = org.hyperskill.app.android.R.drawable.img_notifications_onboarding),
+            contentDescription = null,
+            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally)
+        )
+        NotificationsOnboardingButtons(modifier = Modifier.weight(1f, fill = false))
+    }
+}
+
+@Composable
+private fun NotificationsOnboardingHeader(
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = stringResource(id = R.string.notifications_onboarding_title),
+            textAlign = TextAlign.Center
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(
+            text = stringResource(id = R.string.notifications_onboarding_subtitle),
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Composable
+fun NotificationsOnboardingButtons(
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Button(
+            onClick = { /*TODO*/ },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = stringResource(id = R.string.notifications_onboarding_allow_notifications_button))
+        }
+        Spacer(modifier = Modifier.height(8.dp))
+        TextButton(
+            onClick = { /*TODO*/ },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = stringResource(id = R.string.notifications_onboarding_remind_me_later_button))
+        }
+    }
+}
+
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+fun NotificationsOnboardingScreenLightModePreview() {
+    MdcTheme {
+        NotificationsOnboardingScreen()
+    }
+}
+
+@Preview(
+    uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL,
+    showBackground = true,
+    showSystemUi = true,
+    device = "id:Nexus One"
+)
+@Composable
+fun NotificationsOnboardingScreenDarkModePreview() {
+    MdcTheme {
+        NotificationsOnboardingScreen()
+    }
+}

androidHyperskillApp/src/main/res/values/dimens.xml

@@ -10,7 +10,7 @@
     <dimen name="code_text_size_default">14sp</dimen>
     <dimen name="code_toolbar_height">48dp</dimen>
     <dimen name="half_padding">8dp</dimen>
-    <dimen name="action_button_height">48dp</dimen>
+    <dimen name="action_button_height">46dp</dimen>
 
     <dimen name="item_vertical_padding">20dp</dimen>
     <dimen name="item_horizontal_padding">16dp</dimen>

shared/src/commonMain/resources/MR/base/strings.xml

@@ -508,4 +508,10 @@
     <!-- Earned badge modal -->
     <string name="earned_badge_modal_title">Wow! You\'ve reached level %d</string>
     <string name="earned_badge_modal_description">You\'ve earned the %s badge by reaching level %d! Amazing job!</string>
+
+    <!--Notifications onboarding-->
+    <string name="notifications_onboarding_title">Track your progress</string>
+    <string name="notifications_onboarding_subtitle">Enable notifications to keep your streak alive and stay consistently on top of your learning.</string>
+    <string name="notifications_onboarding_allow_notifications_button">Allow notifications</string>
+    <string name="notifications_onboarding_remind_me_later_button">Remind me later</string>
 </resources>