Merge pull request #13237 from woocommerce/feature/update-prologue-lo…

…gin-screen-design

Update prologue login screen design

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/DynamicEdgeToEdgeActivity.kt

@@ -0,0 +1,8 @@
+package com.woocommerce.android.ui.login
+
+// The prologue screen requires an edge-to-edge layout, whereas the login screens do not. This interface allows
+// LoginActivity to enable edge-edge layout needed and disable it when the login screens are displayed.
+interface DynamicEdgeToEdgeActivity {
+    fun enableDynamicEdgeToEdge(forceDarkStatusBar: Boolean = false)
+    fun disableDynamicEdgeToEdge()
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginActivity.kt

@@ -7,6 +7,7 @@ import android.os.Bundle
 import android.os.Parcelable
 import android.view.MenuItem
 import androidx.activity.OnBackPressedCallback
+import androidx.activity.SystemBarStyle
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.core.view.ViewCompat
@@ -97,11 +98,12 @@ import kotlin.text.RegexOption.IGNORE_CASE
 @AndroidEntryPoint
 class LoginActivity :
     AppCompatActivity(),
+    HasAndroidInjector,
+    DynamicEdgeToEdgeActivity,
     LoginListener,
     GoogleListener,
     PrologueListener,
     PrologueCarouselListener,
-    HasAndroidInjector,
     LoginNoJetpackListener,
     LoginEmailHelpDialogFragment.Listener,
     WooLoginEmailFragment.Listener,
@@ -158,10 +160,6 @@ class LoginActivity :
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        // The Prologue screen requires an edge-to-edge layout, but the login screens do not. Since both the prologue
-        // and login screens are part of this activity, insets are manually managed based on the current fragment using
-        // the addWindowInsets() and removeWindowInsets() functions.
-        enableEdgeToEdge()
 
         ChromeCustomTabUtils.registerForPartialTabUsage(this)
         onBackPressedDispatcher.addCallback(
@@ -331,37 +329,43 @@ class LoginActivity :
 
     override fun onPrimaryButtonClicked() {
         unifiedLoginTracker.trackClick(Click.LOGIN_WITH_SITE_ADDRESS)
-        addWindowInsets()
+        disableDynamicEdgeToEdge()
         loginViaSiteAddress()
     }
 
     override fun onSecondaryButtonClicked() {
         unifiedLoginTracker.trackClick(Click.CONTINUE_WITH_WORDPRESS_COM)
-        addWindowInsets()
+        disableDynamicEdgeToEdge()
         startLoginViaWPCom()
     }
 
-    private fun addWindowInsets() {
+    override fun enableDynamicEdgeToEdge(forceDarkStatusBar: Boolean) {
+        if (forceDarkStatusBar) {
+            enableEdgeToEdge(statusBarStyle = SystemBarStyle.dark(android.graphics.Color.TRANSPARENT))
+        } else {
+            enableEdgeToEdge()
+        }
+
+        // Remove system bar insets from the fragment's root
+        ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot, null)
+        binding.snackRoot.updatePadding(0, 0, 0, 0)
+    }
+
+    override fun disableDynamicEdgeToEdge() {
+        enableEdgeToEdge()
+
+        // Add system bar insets to the fragment's root
         ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot) { v, windowInsets ->
             val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
             v.updatePadding(insets.left, insets.top, insets.right, insets.bottom)
             WindowInsetsCompat.CONSUMED
         }
     }
 
-    private fun removeWindowInsets() {
-        ViewCompat.setOnApplyWindowInsetsListener(binding.snackRoot, null)
-        binding.snackRoot.updatePadding(0, 0, 0, 0)
-    }
-
     override fun onNewToWooButtonClicked() {
         ChromeCustomTabUtils.launchUrl(this, AppUrls.HOSTING_OPTIONS_DOC)
     }
 
-    override fun onEdgeToEdgeLayoutForPrologue() = removeWindowInsets()
-
-    override fun onEdgeToEdgeLayoutForCarousel() = removeWindowInsets()
-
     private fun showMainActivityAndFinish() {
         experimentTracker.log(ExperimentTracker.LOGIN_SUCCESSFUL_EVENT)
 

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueCarouselFragment.kt

@@ -35,7 +35,6 @@ class LoginPrologueCarouselFragment : Fragment(R.layout.fragment_login_prologue_
 
     interface PrologueCarouselListener {
         fun onCarouselFinished()
-        fun onEdgeToEdgeLayoutForCarousel()
     }
 
     @Inject
@@ -50,9 +49,9 @@ class LoginPrologueCarouselFragment : Fragment(R.layout.fragment_login_prologue_
     private var prologueCarouselListener: PrologueCarouselListener? = null
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        val binding = FragmentLoginPrologueCarouselBinding.bind(view)
+        (activity as? DynamicEdgeToEdgeActivity)?.enableDynamicEdgeToEdge()
 
-        prologueCarouselListener?.onEdgeToEdgeLayoutForCarousel()
+        val binding = FragmentLoginPrologueCarouselBinding.bind(view)
 
         val isTablet = DisplayUtils.isTablet(context) || DisplayUtils.isXLargeTablet(context)
         ViewCompat.setOnApplyWindowInsetsListener(binding.buttonSkip) { v, windowInsets ->

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/login/LoginPrologueFragment.kt

@@ -3,6 +3,10 @@ package com.woocommerce.android.ui.login
 import android.content.Context
 import android.os.Bundle
 import android.view.View
+import android.view.ViewGroup.MarginLayoutParams
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.updateLayoutParams
 import androidx.fragment.app.Fragment
 import com.woocommerce.android.AppPrefsWrapper
 import com.woocommerce.android.R
@@ -24,7 +28,6 @@ class LoginPrologueFragment : Fragment(R.layout.fragment_login_prologue) {
         fun onPrimaryButtonClicked()
         fun onSecondaryButtonClicked()
         fun onNewToWooButtonClicked()
-        fun onEdgeToEdgeLayoutForPrologue()
     }
 
     @Inject
@@ -36,9 +39,15 @@ class LoginPrologueFragment : Fragment(R.layout.fragment_login_prologue) {
     private var prologueListener: PrologueListener? = null
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        prologueListener?.onEdgeToEdgeLayoutForPrologue()
+        (activity as? DynamicEdgeToEdgeActivity)?.enableDynamicEdgeToEdge(forceDarkStatusBar = true)
 
         with(FragmentLoginPrologueBinding.bind(view)) {
+            ViewCompat.setOnApplyWindowInsetsListener(loginButtons) { v, windowInsets ->
+                val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
+                v.updateLayoutParams<MarginLayoutParams> { bottomMargin = insets.bottom }
+                WindowInsetsCompat.CONSUMED
+            }
+
             buttonLoginStore.setOnClickListener {
                 // Login with site address
                 prologueListener?.onPrimaryButtonClicked()

WooCommerce/src/main/res/drawable-night/img_prologue_bg.xml → WooCommerce/src/main/res/drawable/img_prologue_bg_white.xml

@@ -4,7 +4,7 @@
     android:viewportWidth="663"
     android:viewportHeight="807">
     <path
-        android:fillColor="#2C3338"
+        android:fillColor="@color/white"
         android:fillType="evenOdd"
         android:pathData="M162.77,-98.62c58.75,-73.21 213.32,-44.72 336.75,34.02 123.43,78.74 201.48,175.95 142.73,249.16 -39.9,49.72 -123.14,65.64 -211.11,46.06a557.94,557.94 0,0 1,26.47 15.88c160.29,102.25 229.18,261.23 153.86,355.09 -23.06,28.73 -56.95,48.03 -97.49,58.04 92.62,72.22 140.07,156.36 83.95,226.3 -65.39,81.48 -223.91,88.67 -347.34,9.93S51.72,685.92 117.1,604.44c11.82,-14.73 26.69,-26.04 43.85,-34.21C17.9,468 -40.45,320.34 31.01,231.29c52.89,-65.91 162.83,-82.18 279.13,-50.61a418.86,418.86 0,0 1,-2.74 -1.73C183.96,100.21 104.03,-25.41 162.77,-98.62Z" />
 </vector>

WooCommerce/src/main/res/layout-land/fragment_login_prologue.xml

@@ -1,110 +1,106 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_surface">
+    android:background="@color/prologue_login_background_color">
+
+    <ImageView
+        android:id="@+id/image_prologue_bg"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:adjustViewBounds="true"
+        android:importantForAccessibility="no"
+        android:scaleType="fitCenter"
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_login_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
-        android:layout_marginTop="@dimen/major_200"
+        android:layout_marginTop="96dp"
         android:importantForAccessibility="no"
         android:src="@drawable/ic_woo_logo_white_99dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <ImageView
-        android:id="@+id/image_prologue_bg"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_350"
-        android:adjustViewBounds="true"
-        android:importantForAccessibility="no"
-        android:scaleType="fitXY"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/image_prologue"
-        app:srcCompat="@drawable/img_prologue_bg" />
-
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueIntro"
         style="@style/Woo.TextView.Headline6"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/major_200"
+        android:layout_marginVertical="0dp"
         android:gravity="center_horizontal"
         android:text="@string/simplified_login_prologue_intro"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@id/prologueTitle"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/image_prologue" />
+        app:layout_constraintTop_toBottomOf="@id/image_prologue"
+        app:layout_constraintVertical_chainStyle="packed"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <com.google.android.material.textview.MaterialTextView
         android:id="@+id/prologueTitle"
         style="@style/Woo.TextView.Subtitle1"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="0dp"
         android:gravity="center"
         android:text="@string/simplified_login_prologue_title"
+        android:textColor="@color/white"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@+id/loginButtons"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/prologueIntro" />
+        app:layout_constraintTop_toBottomOf="@id/prologueIntro"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent" />
 
     <LinearLayout
         android:id="@+id/loginButtons"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:orientation="horizontal"
-        app:layout_constraintBottom_toTopOf="@id/button_start_new_store"
+        android:orientation="vertical"
+        android:paddingHorizontal="16dp"
+        android:paddingBottom="@dimen/prologue_button_skip_bottom_margin"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent">
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintWidth_percent="@dimen/prologue_width_percent">
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_wpcom"
             style="@style/Woo.Button.Colored"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/minor_100"
-            android:layout_weight="1"
             android:text="@string/login_wpcom"
             android:textAllCaps="false"
             android:visibility="gone" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_login_store"
-            style="@style/Woo.Button.Colored.Circle"
-            android:layout_width="0dp"
+            style="@style/Woo.Button.Colored.White"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/major_100"
-            android:layout_marginEnd="@dimen/major_100"
-            android:layout_weight="1"
+            android:backgroundTint="@color/prologue_login_button_color"
             android:text="@string/login_store_address"
             android:textAllCaps="false"
-            tools:visibility="visible" />
-    </LinearLayout>
+            android:textColor="@color/color_on_surface" />
 
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/button_start_new_store"
-        style="@style/Woo.Button.TextButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/minor_100"
-        android:layout_marginEnd="@dimen/major_100"
-        android:layout_marginBottom="@dimen/minor_100"
-        android:text="@string/login_prologue_start_new_store"
-        android:textAllCaps="false"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_start_new_store"
+            style="@style/Woo.Button.TextButton"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/minor_50"
+            android:text="@string/login_prologue_start_new_store"
+            android:textAllCaps="false"
+            android:textColor="@color/white" />
+    </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>

WooCommerce/src/main/res/layout-land/fragment_login_prologue_carousel.xml

@@ -12,7 +12,8 @@
         android:layout_height="match_parent"
         android:importantForAccessibility="no"
         android:scaleType="fitCenter"
-        android:src="@drawable/img_prologue_bg" />
+        android:src="@drawable/img_prologue_bg_white"
+        app:tint="@color/prologue_carousel_shape_color" />
 
     <ImageView
         android:id="@+id/image_prologue"