ADS: Onboarding (#2556)

Task/Issue URL: https://app.asana.com/0/488551667048375/1203325011590293 ### Description Update Onboarding to ADS ### UI changes | Onboarding | Onboarding | Onboarding | Onboarding | | ------ | ----- | ------ | ----- | ![Screenshot_20221124_105952](https://user-images.githubusercontent.com/531613/203755369-9dcee675-b819-428f-a1b3-8351a910ba24.png)|![Screenshot_20221124_105927](https://user-images.githubusercontent.com/531613/203755382-ad2b4346-82b1-4aab-ab50-766530e9ec7b.png)|![Screenshot_20221124_110004](https://user-images.githubusercontent.com/531613/203755362-3d2069d2-5395-467a-8d6f-3575fcd3fff0.png)|![Screenshot_20221124_105912](https://user-images.githubusercontent.com/531613/203755392-191034c5-fde4-475b-9d34-818fcf22f331.png)|
duckduckgo · Jan 12, 2023 · 4336b29 · 4336b29
1 parent 0d6d1b5
commit 4336b29
Show file tree

Hide file tree

Showing 30 changed files with 373 additions and 378 deletions.
diff --git a/app/src/main/java/com/duckduckgo/app/cta/ui/Cta.kt b/app/src/main/java/com/duckduckgo/app/cta/ui/Cta.kt
@@ -340,10 +340,10 @@ sealed class BubbleCta(
 
     override fun showCta(view: View) {
         val daxText = view.context.getString(description)
+        view.primaryCta.hide()
+        view.hiddenTextCta.text = daxText.html(view.context)
         view.show()
         view.alpha = 1f
-        view.hiddenTextCta.text = daxText.html(view.context)
-        view.primaryCta.hide()
         view.dialogTextCta.startTypingAnimation(daxText, true)
     }
 

diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/DefaultBrowserPage.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/DefaultBrowserPage.kt
@@ -25,6 +25,8 @@ import android.os.Bundle
 import android.view.Gravity
 import android.view.LayoutInflater
 import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
 import android.widget.Toast
 import androidx.lifecycle.ViewModelProvider
 import com.duckduckgo.anvil.annotations.InjectWith
@@ -35,10 +37,9 @@ import com.duckduckgo.app.global.FragmentViewModelFactory
 import com.duckduckgo.app.statistics.VariantManager
 import com.duckduckgo.appbuildconfig.api.AppBuildConfig
 import com.duckduckgo.di.scopes.FragmentScope
+import com.duckduckgo.mobile.android.ui.view.button.DaxButton
 import com.duckduckgo.mobile.android.ui.view.show
 import javax.inject.Inject
-import kotlinx.android.synthetic.main.content_onboarding_default_browser.*
-import kotlinx.android.synthetic.main.include_default_browser_buttons.*
 import timber.log.Timber
 
 @InjectWith(FragmentScope::class)
@@ -56,7 +57,13 @@ class DefaultBrowserPage : OnboardingPageFragment() {
     private var userTriedToSetDDGAsDefault = false
     private var userSelectedExternalBrowser = false
     private var toast: Toast? = null
+
     private var defaultCard: View? = null
+    private lateinit var headerImage: ImageView
+    private lateinit var title: TextView
+    private lateinit var subtitle: TextView
+    private lateinit var primaryButton: DaxButton
+    private lateinit var secondaryButton: DaxButton
 
     private val viewModel: DefaultBrowserPageViewModel by lazy {
         ViewModelProvider(this, viewModelFactory).get(DefaultBrowserPageViewModel::class.java)
@@ -71,6 +78,19 @@ class DefaultBrowserPage : OnboardingPageFragment() {
         }
     }
 
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        super.onViewCreated(view, savedInstanceState)
+
+        headerImage = view.findViewById(R.id.defaultBrowserImage)
+        title = view.findViewById(R.id.browserProtectionTitle)
+        subtitle = view.findViewById(R.id.browserProtectionSubtitle)
+        primaryButton = view.findViewById(R.id.launchSettingsButton)
+        secondaryButton = view.findViewById(R.id.continueButton)
+    }
+
     override fun onActivityCreated(savedInstanceState: Bundle?) {
         super.onActivityCreated(savedInstanceState)
         defaultCard = activity?.findViewById(R.id.defaultCard)
@@ -132,26 +152,26 @@ class DefaultBrowserPage : OnboardingPageFragment() {
     }
 
     private fun setUiForDialog() {
-        defaultBrowserImage.setImageResource(R.drawable.set_as_default_browser_illustration_dialog)
-        browserProtectionSubtitle.setText(R.string.defaultBrowserDescriptionNoDefault)
-        browserProtectionTitle.setText(R.string.onboardingDefaultBrowserTitle)
-        launchSettingsButton.setText(R.string.defaultBrowserLetsDoIt)
+        headerImage.setImageResource(R.drawable.set_as_default_browser_illustration_dialog)
+        subtitle.setText(R.string.defaultBrowserDescriptionNoDefault)
+        title.setText(R.string.onboardingDefaultBrowserTitle)
+        primaryButton.setText(R.string.defaultBrowserLetsDoIt)
         setButtonsBehaviour()
     }
 
     private fun setUiForSettings() {
-        defaultBrowserImage.setImageResource(R.drawable.set_as_default_browser_illustration_settings)
-        browserProtectionSubtitle.setText(R.string.onboardingDefaultBrowserDescription)
-        browserProtectionTitle.setText(R.string.onboardingDefaultBrowserTitle)
-        launchSettingsButton.setText(R.string.defaultBrowserLetsDoIt)
+        headerImage.setImageResource(R.drawable.set_as_default_browser_illustration_settings)
+        subtitle.setText(R.string.onboardingDefaultBrowserDescription)
+        title.setText(R.string.onboardingDefaultBrowserTitle)
+        primaryButton.setText(R.string.defaultBrowserLetsDoIt)
         setButtonsBehaviour()
     }
 
     private fun setButtonsBehaviour() {
-        launchSettingsButton.setOnClickListener {
+        primaryButton.setOnClickListener {
             viewModel.onDefaultBrowserClicked()
         }
-        continueButton.setOnClickListener {
+        secondaryButton.setOnClickListener {
             viewModel.onContinueToBrowser(userTriedToSetDDGAsDefault)
         }
     }

diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/WelcomePage.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/page/WelcomePage.kt
@@ -22,7 +22,6 @@ import android.graphics.Color
 import android.os.Bundle
 import android.view.View
 import android.view.WindowManager
-import androidx.core.content.ContextCompat
 import androidx.core.view.ViewCompat
 import androidx.core.view.ViewPropertyAnimatorCompat
 import androidx.lifecycle.ViewModelProvider
@@ -32,7 +31,6 @@ import com.duckduckgo.app.browser.R
 import com.duckduckgo.app.global.extensions.html
 import com.duckduckgo.appbuildconfig.api.AppBuildConfig
 import com.duckduckgo.di.scopes.FragmentScope
-import com.duckduckgo.mobile.android.R as CommonR
 import javax.inject.Inject
 import kotlinx.android.synthetic.main.content_onboarding_welcome.*
 import kotlinx.android.synthetic.main.include_dax_dialog_cta.*
@@ -148,10 +146,7 @@ class WelcomePage : OnboardingPageFragment() {
             ctaText = it.getString(R.string.onboardingDaxText)
             hiddenTextCta.text = ctaText.html(it)
             dialogTextCta.textInDialog = ctaText.html(it)
-            dialogTextCta.setTextColor(ContextCompat.getColor(it, CommonR.color.grayishBrown))
-            cardView.backgroundTintList = ContextCompat.getColorStateList(it, CommonR.color.white)
         }
-        triangle.setImageResource(R.drawable.ic_triangle_bubble_white)
     }
 
     private fun setSkipAnimationListener() {

diff --git a/app/src/main/res/drawable-w600dp/onboarding_background.xml b/app/src/main/res/drawable-w600dp/onboarding_background.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) 2022 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<bitmap
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:src="@drawable/onboarding_background_large"/>
diff --git a/app/src/main/res/drawable-w600dp/onboarding_background_large.png b/app/src/main/res/drawable-w600dp/onboarding_background_large.png
diff --git a/app/src/main/res/layout-land/content_onboarding_default_browser.xml b/app/src/main/res/layout-land/content_onboarding_default_browser.xml
@@ -15,67 +15,68 @@
   -->
 
 <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:id="@+id/longDescriptionContainer"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:tag="onboardingDefaultBrowser"
-    tools:background="@color/white"
-    tools:context="com.duckduckgo.app.onboarding.ui.OnboardingActivity">
-
-    <include layout="@layout/include_default_browser_buttons"/>
+               xmlns:app="http://schemas.android.com/apk/res-auto"
+               xmlns:tools="http://schemas.android.com/tools"
+               android:id="@+id/longDescriptionContainer"
+               android:layout_width="match_parent"
+               android:layout_height="match_parent"
+               android:tag="onboardingDefaultBrowser"
+               tools:context="com.duckduckgo.app.onboarding.ui.OnboardingActivity">
 
     <ImageView
         android:id="@+id/defaultBrowserImage"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_marginTop="42dp"
-        android:layout_marginEnd="20dp"
-        android:layout_marginBottom="42dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="40dp"
         android:importantForAccessibility="no"
         android:src="@drawable/set_as_default_browser_illustration_dialog"
-        app:layout_constraintBottom_toTopOf="@id/continueButton"
-        app:layout_constraintDimensionRatio="1"
-        app:layout_constraintEnd_toStartOf="@id/browserProtectionTitle"
-        app:layout_constraintHorizontal_chainStyle="packed"
-        app:layout_constraintStart_toStartOf="@id/continueButton"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/>
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/browserProtectionTitle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginStart="20dp"
-        android:fontFamily="sans-serif"
-        android:lineSpacingExtra="3sp"
         android:text="@string/onboardingDefaultBrowserTitle"
-        android:textAlignment="center"
-        android:textColor="@color/almostBlack"
-        android:textSize="17sp"
-        android:textStyle="bold"
-        app:layout_constraintBottom_toTopOf="@id/browserProtectionSubtitle"
-        app:layout_constraintEnd_toEndOf="@id/continueButton"
-        app:layout_constraintStart_toEndOf="@id/defaultBrowserImage"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintVertical_chainStyle="packed" />
+        android:textAlignment="center" app:layout_constraintBottom_toTopOf="@+id/browserProtectionSubtitle"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@+id/defaultBrowserImage" app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed"
+        app:typography="h2"/>
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/browserProtectionSubtitle"
-        android:layout_width="0dp"
+        android:layout_width="282dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
-        android:fontFamily="sans-serif"
-        android:lineSpacingExtra="7sp"
+        android:layout_marginTop="16dp"
         android:text="@string/defaultBrowserDescriptionNoDefault"
         android:textAlignment="center"
-        android:textColor="@color/brownishGrayTwo"
-        android:textSize="15sp"
-        android:textStyle="normal"
-        app:layout_constraintBottom_toTopOf="@id/continueButton"
-        app:layout_constraintEnd_toEndOf="@id/browserProtectionTitle"
-        app:layout_constraintStart_toStartOf="@id/browserProtectionTitle"
-        app:layout_constraintTop_toBottomOf="@id/browserProtectionTitle"
-        app:layout_constraintWidth_max="500dp" />
+        app:layout_constraintBottom_toTopOf="@+id/launchSettingsButton"
+        app:layout_constraintEnd_toEndOf="@+id/browserProtectionTitle"
+        app:layout_constraintStart_toStartOf="@+id/browserProtectionTitle" app:layout_constraintTop_toBottomOf="@+id/browserProtectionTitle"
+        app:typography="body1"/>
+
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+        android:id="@+id/launchSettingsButton"
+        android:layout_width="250dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="32dp"
+        android:text="@string/defaultBrowserLetsDoIt"
+        app:buttonSize="large"
+        app:layout_constraintBottom_toTopOf="@+id/continueButton"
+        app:layout_constraintEnd_toEndOf="@+id/browserProtectionSubtitle"
+        app:layout_constraintStart_toStartOf="@+id/browserProtectionSubtitle"
+        app:layout_constraintTop_toBottomOf="@+id/browserProtectionSubtitle"/>
+
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonSecondary
+        android:id="@+id/continueButton"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:text="@string/defaultBrowserMaybeLater"
+        app:buttonSize="large" app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="@+id/launchSettingsButton"
+        app:layout_constraintStart_toStartOf="@+id/launchSettingsButton"
+        app:layout_constraintTop_toBottomOf="@+id/launchSettingsButton"/>
+
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout-land/content_onboarding_welcome.xml b/app/src/main/res/layout-land/content_onboarding_welcome.xml
@@ -41,20 +41,17 @@
             android:layout_marginTop="80dp"
             app:srcCompat="@drawable/ic_dax_icon" />
 
-        <TextView
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
             android:id="@+id/welcomeTitle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            app:typography="title"
             android:layout_marginStart="54dp"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="@dimen/keyline_4"
             android:layout_marginEnd="54dp"
-            android:fontFamily="sans-serif"
-            android:lineSpacingExtra="4sp"
             android:text="@string/onboardingWelcomeTitle"
-            android:textAlignment="center"
-            android:textColor="#303030"
-            android:textSize="32sp"
-            android:textStyle="bold" />
+            android:textAlignment="center"/>
+
     </LinearLayout>
 
     <include

diff --git a/app/src/main/res/layout/content_onboarding_default_browser.xml b/app/src/main/res/layout/content_onboarding_default_browser.xml
@@ -24,8 +24,6 @@
     tools:background="@color/white"
     tools:context="com.duckduckgo.app.onboarding.ui.OnboardingActivity">
 
-    <include layout="@layout/include_default_browser_buttons"/>
-
     <ImageView
         android:id="@+id/defaultBrowserImage"
         android:layout_width="0dp"
@@ -40,10 +38,9 @@
         app:layout_constraintVertical_bias="0.5"
         app:layout_constraintWidth_max="300dp" />
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/browserProtectionTitle"
-        android:textAppearance="@style/TextAppearance.DuckDuckGo.Headline2"
-        android:textColor="@color/almostBlackDark"
+        app:typography="h2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="26dp"
@@ -53,10 +50,9 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/defaultBrowserImage" />
 
-    <TextView
+    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
         android:id="@+id/browserProtectionSubtitle"
-        android:textSize="16sp"
-        android:textColor="@color/gray90"
+        app:typography="body1"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_marginTop="@dimen/keyline_4"
@@ -69,4 +65,30 @@
         app:layout_constraintWidth_max="300dp"
         app:layout_constraintWidth_percent="0.8" />
 
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonSecondary
+        android:id="@+id/continueButton"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:buttonSize="large"
+        android:text="@string/defaultBrowserMaybeLater"
+        android:layout_marginStart="@dimen/keyline_5"
+        android:layout_marginEnd="@dimen/keyline_5"
+        android:layout_marginBottom="@dimen/keyline_5"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+
+    <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+        android:id="@+id/launchSettingsButton"
+        android:layout_width="0dp"
+        app:buttonSize="large"
+        android:layout_marginStart="@dimen/keyline_5"
+        android:layout_marginEnd="@dimen/keyline_5"
+        android:layout_marginBottom="@dimen/keyline_1"
+        android:layout_height="wrap_content"
+        android:text="@string/defaultBrowserLetsDoIt"
+        app:layout_constraintBottom_toTopOf="@+id/continueButton"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/content_onboarding_default_browser_card.xml b/app/src/main/res/layout/content_onboarding_default_browser_card.xml
@@ -41,17 +41,15 @@
             card_view:layout_constraintStart_toStartOf="parent"
             card_view:layout_constraintTop_toTopOf="parent" />
 
-        <TextView
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+            card_view:typography="body1"
             android:id="@+id/instructions"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:layout_marginEnd="20dp"
-            android:fontFamily="sans-serif-medium"
             android:gravity="center"
             android:text="@string/defaultBrowserInstructions"
             android:textAlignment="center"
-            android:textColor="@color/almostBlack"
-            android:textSize="15sp"
             card_view:layout_constraintBottom_toBottomOf="@id/logo"
             card_view:layout_constraintEnd_toEndOf="parent"
             card_view:layout_constraintStart_toEndOf="@id/logo"