[Jetpack focus] Remove carousel and implement WordPress landing screen redesign

WordPress/src/main/AndroidManifest.xml

@@ -101,6 +101,7 @@
         <activity
             android:name=".ui.accounts.LoginActivity"
             android:theme="@style/LoginTheme.TransparentStatusBar"
+            android:screenOrientation="portrait"
             android:windowSoftInputMode="adjustResize" />
 
         <activity

WordPress/src/main/java/org/wordpress/android/ui/accounts/LoginActivity.java

@@ -59,6 +59,7 @@
 import org.wordpress.android.ui.accounts.UnifiedLoginTracker.Source;
 import org.wordpress.android.ui.accounts.login.LoginPrologueFragment;
 import org.wordpress.android.ui.accounts.login.LoginPrologueListener;
+import org.wordpress.android.ui.accounts.login.LoginPrologueRevampedFragment;
 import org.wordpress.android.ui.accounts.login.jetpack.LoginNoSitesFragment;
 import org.wordpress.android.ui.accounts.login.jetpack.LoginSiteCheckErrorFragment;
 import org.wordpress.android.ui.main.SitePickerActivity;
@@ -76,6 +77,7 @@
 import org.wordpress.android.util.ToastUtils;
 import org.wordpress.android.util.WPActivityUtils;
 import org.wordpress.android.util.WPUrlUtils;
+import org.wordpress.android.util.config.LandingScreenRevampFeatureConfig;
 import org.wordpress.android.widgets.WPSnackbar;
 
 import java.util.ArrayList;
@@ -135,6 +137,8 @@ private enum SmartLockHelperState {
     @Inject protected ViewModelProvider.Factory mViewModelFactory;
     @Inject BuildConfigWrapper mBuildConfigWrapper;
 
+    @Inject LandingScreenRevampFeatureConfig mLandingScreenRevampFeatureConfig;
+
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         ((WordPress) getApplication()).component().inject(this);
@@ -223,7 +227,11 @@ private void initViewModel() {
     }
 
     private void loginFromPrologue() {
-        showFragment(new LoginPrologueFragment(), LoginPrologueFragment.TAG);
+        if (mLandingScreenRevampFeatureConfig.isEnabled()) {
+            showFragment(new LoginPrologueRevampedFragment(), LoginPrologueRevampedFragment.TAG);
+        } else {
+            showFragment(new LoginPrologueFragment(), LoginPrologueFragment.TAG);
+        }
         mIsSmartLockTriggeredFromPrologue = true;
         mIsSiteLoginAvailableFromPrologue = true;
         initSmartLockIfNotFinished(true);
@@ -271,6 +279,11 @@ private LoginPrologueFragment getLoginPrologueFragment() {
         return fragment == null ? null : (LoginPrologueFragment) fragment;
     }
 
+    private LoginPrologueRevampedFragment getLoginPrologueRevampedFragment() {
+        Fragment fragment = getSupportFragmentManager().findFragmentByTag(LoginPrologueRevampedFragment.TAG);
+        return fragment == null ? null : (LoginPrologueRevampedFragment) fragment;
+    }
+
     private LoginEmailFragment getLoginEmailFragment() {
         Fragment fragment = getSupportFragmentManager().findFragmentByTag(LoginEmailFragment.TAG);
         return fragment == null ? null : (LoginEmailFragment) fragment;
@@ -426,7 +439,7 @@ private void startLogin() {
             return;
         }
 
-        if (getLoginPrologueFragment() == null) {
+        if (getLoginPrologueFragment() == null && getLoginPrologueRevampedFragment() == null) {
             // prologue fragment is not shown so, the email screen will be the initial screen on the fragment container
             showFragment(LoginEmailFragment.newInstance(mIsSignupFromLoginEnabled), LoginEmailFragment.TAG);
 

WordPress/src/main/res/values-night/colors.xml

@@ -18,6 +18,10 @@
     <color name="login_prologue_background_circle_orange">@color/red_60</color>
     <color name="login_prologue_background_circle_pink">@color/purple_60</color>
 
+    <!-- Login Prologue Revamped -->
+    <color name="login_prologue_revamped_background">@color/gray_80</color>
+    <color name="login_prologue_revamped_icon">@color/white</color>
+
     <!-- Post History -->
 
     <color name="post_history_underlying_background">@color/gray_100</color>

WordPress/src/main/res/values/colors.xml

@@ -32,6 +32,10 @@
     <color name="login_prologue_background_circle_orange">@color/orange_10</color>
     <color name="login_prologue_background_circle_pink">@color/pink_10</color>
 
+    <!-- Login Prologue Revamped -->
+    <color name="login_prologue_revamped_background">@color/white</color>
+    <color name="login_prologue_revamped_icon">@color/gray_80</color>
+
     <!-- Prepublishing Nudges -->
     <color name="prepublishing_toolbar_icon_color">@color/gray_50</color>
     <color name="prepublishing_action_type_enabled_color">@color/black</color>

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

@@ -2940,6 +2940,10 @@
     <string name="login_empty_view_see_instructions">See instructions</string>
     <string name="login_empty_view_try_another_account">Try with another account</string>
 
+    <!-- Login Revamped -->
+    <string name="login_prologue_revamped_tagline">Write, edit, and publish from anywhere.</string>
+    <string name="login_prologue_revamped_content_description_wordpress_icon">WordPress icon</string>
+
     <!-- Screen titles -->
     <string name="email_address_login_title" tools:ignore="UnusedResources" a8c-src-lib="login">Email address login</string>
     <string name="site_address_login_title" tools:ignore="UnusedResources" a8c-src-lib="login">Site address login</string>

WordPress/src/wordpress/java/org/wordpress/android/ui/accounts/login/LoginPrologueRevampedFragment.kt

@@ -0,0 +1,118 @@
+package org.wordpress.android.ui.accounts.login
+
+import android.content.Context
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.view.WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.drawscope.scale
+import androidx.compose.ui.graphics.drawscope.translate
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.LayoutDirection.Rtl
+import androidx.compose.ui.unit.dp
+import androidx.fragment.app.Fragment
+import org.wordpress.android.R.color
+import org.wordpress.android.R.drawable
+import org.wordpress.android.R.string
+import org.wordpress.android.ui.accounts.login.compose.components.PrimaryButton
+import org.wordpress.android.ui.accounts.login.compose.components.SecondaryButton
+import org.wordpress.android.ui.accounts.login.compose.components.Tagline
+import org.wordpress.android.ui.compose.theme.AppTheme
+
+class LoginPrologueRevampedFragment : Fragment() {
+    private lateinit var loginPrologueListener: LoginPrologueListener
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View = ComposeView(requireContext()).apply {
+        setContent {
+            AppTheme {
+                LoginScreenRevamped(
+                        onWpComLoginClicked = loginPrologueListener::showEmailLoginScreen,
+                        onSiteAddressLoginClicked = loginPrologueListener::loginViaSiteAddress,
+                )
+            }
+        }
+        requireActivity().window.addFlags(FLAG_LAYOUT_NO_LIMITS)
+    }
+
+    override fun onAttach(context: Context) {
+        super.onAttach(context)
+        check(context is LoginPrologueListener) { "$context must implement LoginPrologueListener" }
+        loginPrologueListener = context
+    }
+
+    override fun onPause() {
+        super.onPause()
+        requireActivity().window.clearFlags(FLAG_LAYOUT_NO_LIMITS)
+    }
+
+    companion object {
+        const val TAG = "login_prologue_revamped_fragment_tag"
+    }
+}
+
+@Composable
+fun LoginScreenRevamped(
+    onWpComLoginClicked: () -> Unit,
+    onSiteAddressLoginClicked: () -> Unit,
+) {
+    val brushStrokePainter = painterResource(id = drawable.brush_stroke)
+    // Flip the background image for RTL locales
+    val scaleX = if (LocalLayoutDirection.current == Rtl) -1f else 1f
+
+    Box(modifier = Modifier
+            .background(color = colorResource(id = color.login_prologue_revamped_background))
+            .drawBehind {
+                scale(scaleX = scaleX, scaleY = 1f) {
+                    translate(left = size.width - brushStrokePainter.intrinsicSize.width - 10f, top = -75f) {
+                        with(brushStrokePainter) {
+                            draw(intrinsicSize)
+                        }
+                    }
+                }
+            }
+    ) {
+        Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.padding(vertical = 45.dp)
+        ) {
+            Tagline(text = stringResource(string.login_prologue_revamped_tagline))
+            PrimaryButton(
+                    text = stringResource(string.continue_with_wpcom),
+                    onClick = onWpComLoginClicked,
+            )
+            SecondaryButton(
+                    text = stringResource(string.enter_your_site_address),
+                    onClick = onSiteAddressLoginClicked,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, device = Devices.PIXEL_3A)
+@Preview(showBackground = true, device = Devices.PIXEL_3A, uiMode = UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewLoginScreenRevamped() {
+    AppTheme {
+        LoginScreenRevamped(onWpComLoginClicked = {}, onSiteAddressLoginClicked = {})
+    }
+}

WordPress/src/wordpress/java/org/wordpress/android/ui/accounts/login/compose/components/PrimaryButton.kt

@@ -0,0 +1,58 @@
+package org.wordpress.android.ui.accounts.login.compose.components
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+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.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.wordpress.android.R.color
+import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.unit.Margin
+
+@Composable
+fun PrimaryButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true
+) {
+    Button(
+            onClick = onClick,
+            enabled = enabled,
+            elevation = ButtonDefaults.elevation(
+                    defaultElevation = 0.dp,
+                    pressedElevation = 0.dp,
+            ),
+            shape = RoundedCornerShape(5.dp),
+            colors = ButtonDefaults.buttonColors(
+                    contentColor = Color.White,
+                    backgroundColor = colorResource(id = color.blue_50),
+                    disabledBackgroundColor = MaterialTheme.colors.background,
+            ),
+            modifier = modifier
+                    .fillMaxWidth()
+                    .padding(
+                            vertical = Margin.Small.value,
+                            horizontal = Margin.ExtraExtraMediumLarge.value,
+                    )
+    ) {
+        Text(text = text)
+    }
+}
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewPrimaryButton() {
+    AppTheme {
+        PrimaryButton("Button", onClick = {})
+    }
+}

WordPress/src/wordpress/java/org/wordpress/android/ui/accounts/login/compose/components/SecondaryButton.kt

@@ -0,0 +1,54 @@
+package org.wordpress.android.ui.accounts.login.compose.components
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.wordpress.android.ui.compose.theme.AppTheme
+import org.wordpress.android.ui.compose.unit.Margin
+
+@Composable
+fun SecondaryButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true
+) {
+    Button(
+            onClick = onClick,
+            enabled = enabled,
+            elevation = ButtonDefaults.elevation(
+                    defaultElevation = 0.dp,
+                    pressedElevation = 0.dp,
+            ),
+            colors = ButtonDefaults.buttonColors(
+                    contentColor = MaterialTheme.colors.onSurface,
+                    backgroundColor = Color.Transparent
+            ),
+            modifier = modifier
+                    .fillMaxWidth()
+                    .padding(
+                            vertical = Margin.Small.value,
+                            horizontal = Margin.ExtraExtraMediumLarge.value,
+                    )
+    ) {
+        Text(text = text)
+    }
+}
+
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun PreviewSecondaryButton() {
+    AppTheme {
+        SecondaryButton("Button", onClick = {})
+    }
+}