Merge pull request #2330 from woocommerce/darkmodev2/2325-site-add-help

Dark Mode v2: Site address help

WooCommerce/src/main/res/layout/login_alert_site_address_help.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:orientation="vertical">
+
+    <FrameLayout
+        android:layout_width="match_parent"
+        android:layout_height="180dp"
+        android:layout_marginBottom="@dimen/major_125"
+        android:paddingTop="@dimen/major_150"
+        android:paddingStart="@dimen/major_250"
+        android:paddingEnd="@dimen/major_250"
+        android:background="@color/color_default_image_background">
+
+        <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:adjustViewBounds="true"
+            android:contentDescription="@null"
+            android:importantForAccessibility="no"
+            android:scaleType="fitXY"
+            android:layout_gravity="center|bottom"
+            app:srcCompat="@drawable/login_site_address_help" />
+    </FrameLayout>
+
+    <com.google.android.material.textview.MaterialTextView
+        style="@style/TextAppearance.Woo.Subtitle1"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/major_150"
+        android:layout_marginEnd="@dimen/major_150"
+        android:layout_marginBottom="@dimen/major_100"
+        android:textColor="@color/color_on_surface_high"
+        android:text="@string/login_site_address_help_title"/>
+
+    <com.google.android.material.textview.MaterialTextView
+        style="@style/TextAppearance.Woo.Body2"
+        android:textColor="@color/color_on_surface_high"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/major_150"
+        android:layout_marginEnd="@dimen/major_150"
+        android:text="@string/login_site_address_help_content" />
+</LinearLayout>

WooCommerce/src/main/res/values-night/colors_base.xml

@@ -45,6 +45,7 @@
     <color name="image_border_color">@color/woo_white_alpha_012</color>
     <color name="color_ripple_overlay">@color/woo_white_alpha_012</color>
     <color name="color_scrim_background">@color/woo_black_90_alpha_038</color>
+    <color name="color_default_image_background">@color/woo_gray_80</color>
 
     <!--
         Elevation colors

WooCommerce/src/main/res/values/colors_base.xml

@@ -38,6 +38,7 @@
 
     <color name="inverted_surface_overlay">@color/woo_black_90_alpha_012</color>
     <color name="color_scrim_background">@color/woo_white_alpha_038</color>
+    <color name="color_default_image_background">@color/woo_gray_900</color>
 
     <!--
         Icon-related resources that use the surface color should be assigned

WooCommerce/src/main/res/values/dimens_base.xml

@@ -28,6 +28,7 @@ so that's the baseline as defined in `major_100`.
     <dimen name="major_150">24dp</dimen>
     <dimen name="major_175">28dp</dimen>
     <dimen name="major_200">32dp</dimen>
+    <dimen name="major_250">40dp</dimen>
     <dimen name="major_300">48dp</dimen>
     <dimen name="major_325">56dp</dimen>
 

WooCommerce/src/main/res/values/themes.xml

@@ -69,6 +69,7 @@
         <item name="toolbarStyle">@style/Widget.Woo.Toolbar</item>
         <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Entry</item>
         <item name="materialAlertDialogTheme">@style/Theme.Woo.Dialog</item>
+        <item name="alertDialogTheme">@style/Theme.Woo.Dialog</item>
         <item name="tabStyle">@style/Woo.TabLayout</item>
         <item name="scrollableTabStyle">@style/Woo.TabLayout.Scrollable</item>
         <item name="appBarLayoutStyle">@style/Woo.AppBarLayout</item>
@@ -119,6 +120,17 @@
         <item name="colorOnBackground">@color/color_on_background</item>
         <item name="colorOnSurface">@color/color_on_surface_high</item>
         <item name="colorOnError">@color/color_on_error</item>
+
+        <item name="buttonBarStyle">@style/Woo.Dialog.ButtonBar</item>
+        <item name="android:buttonBarStyle">@style/Woo.Dialog.ButtonBar</item>
+    </style>
+
+    <style name="Woo.Dialog"/>
+    <style name="Woo.Dialog.ButtonBar">
+        <item name="android:paddingStart">@dimen/minor_100</item>
+        <item name="android:paddingEnd">@dimen/minor_100</item>
+        <item name="android:paddingTop">@dimen/minor_50</item>
+        <item name="android:paddingBottom">@dimen/minor_50</item>
     </style>
 
     <style name="Theme.Woo.NumberPicker" parent="Theme.Woo.DayNight">

WooCommerce/src/main/res/values/wc_colors_base.xml

@@ -38,6 +38,7 @@
 
     <color name="woo_gray_5">#DCDCDE</color>
     <color name="woo_gray_40">#787C82</color>
+    <color name="woo_gray_80">#2C3338</color>
     <color name="woo_gray_900">#F7F7F7</color>
 
     <color name="woo_black">@android:color/black</color>

libs/login/WordPressLoginFlow/src/main/java/org/wordpress/android/login/LoginSiteAddressHelpDialogFragment.java

@@ -48,7 +48,11 @@ public void onAttach(Context context) {
     @Override
     public Dialog onCreateDialog(Bundle savedInstanceState) {
         AlertDialog.Builder alert = new MaterialAlertDialogBuilder(getActivity());
-        alert.setTitle(R.string.login_site_address_help_title);
+        if (mLoginListener.getLoginMode() != LoginMode.WOO_LOGIN_MODE) {
+            // Only set the title if not the woo app, since the woo app specifies an override
+            // layout that includes the title.
+            alert.setTitle(R.string.login_site_address_help_title);
+        }
 
         //noinspection InflateParams
         alert.setView(getActivity().getLayoutInflater().inflate(R.layout.login_alert_site_address_help, null));