Empty states design updates

[hafizrahman]

This is to fix #3862

Here are the list of items being worked on in this PR. The items in parenthesis are the values used in the code.

Empty State Screen in Light Mode

• Background: Gray 0 (@color/woo_gray_0 which translates to #F6F7F7)
• Headline: Headline 6 (@style/TextAppearance.Woo.Headline6)
• Body: Body 1 (@style/TextAppearance.Woo.Body1)
• Button width: 197 x 36px (@dimen/empty_states_button_width)

"Not a WordPress site" screen:

• Vertical padding 42px (@dimen/major_300)
• Body: Body 1 (@style/TextAppearance.Woo.Body1)

Site needs Jetpack screen:

• Vertically center the main content.

"Print with your device" screen

• Set bg color to be white in light mode.

Testing Instructions:

(please note that the "before" screenshots are from the develop version)

Empty State Screen in Light Mode

Changes	Before	After
Background color, headline styling, body text styling, button width.

"Not a WordPress site" screen

Changes	Before	After
Spacing between image and text, body text styling

"Site needs Jetpack" screen

Changes	Before	After
Content now vertically centered.

"Print with your device" screen in white background:

Changes	Before	After
Background color now white

Update release notes:
[x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-woocommerce]

You can test the changes on this Pull Request by downloading the APK here.

[ghost]

Hey, @hafizrahman these are looking great however, some of the body copy looks a little small to me. Do you think you'd be able to double-check these, please? Also the pink used looks a little different (not sure if it's just the screenshots) we use Pink 50 for our primary buttons in light and Pink 30 when in dark mode.

Cheers!

[anitaa1990]

I don't know if we want to wrap the images and text in a LinearLayout. The idea of using a ConstraintLayout is to ensure that there is a flat hierarchy. If you're looking to vertically align the image and text in the screen, you can change the value of layout_constraintVertical_bias=0.7 in the jetpack_required_msg. That would achieve the same effect.

Before

After

[anitaa1990]

I don't think we want to set a fixed width to the button. If we want to increase the size of the button, we could always set the width to match_parent and add margins.

I tried playing around with the button width and adding the following changes to the xml file, gave me the same results. WDYT?

        <com.google.android.material.button.MaterialButton
            android:id="@+id/empty_view_button"
            style="@style/Woo.Button.Colored"
            android:layout_marginStart="@dimen/major_300"
            android:layout_marginEnd="@dimen/major_300"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="@dimen/major_200"
            android:text="@string/share_store_button" />

[hafizrahman]

Thank you for the reviews!

Re: Button colors:

The button currently uses android:color="@color/color_secondary" declared here, and color_secondary itself is defined as:

• Light mode: <color name="color_secondary">@color/woo_pink_50</color> (values/colors_base.xml)
• Dark mode: <color name="color_secondary">@color/woo_pink_30</color> (values-night/colors_base.xml)

Or in other words, they're already set as Pink 50 in light mode and Pink 30 in dark mode 🤔
This issue seems specific to how screenshots are created from my test device (Samsung S21).

I tested this again in an emulator and the color looks correct:

@anitaa1990 I wonder if you can help check the above and see what the color looks like in your device(s)? I'm curious if the problem is specific to my device or something else is going on.

Re: Body font size

The body text in the empty view is currently set as "@style/TextAppearance.Woo.Body1" . That parameter is declared in res/values/type.xml:

    <style name="TextAppearance.Woo.Body1" parent="TextAppearance.MaterialComponents.Body1">
        <item name="fontFamily">@font/roboto</item>
        <item name="android:fontFamily">@font/roboto</item>
        <item name="android:textSize">@dimen/text_minor_125</item>
        <item name="android:textColor">@color/color_on_surface_medium_selector</item>
        <item name="android:textStyle">normal</item>
        <item name="lineHeight">@dimen/line_height_minor_100</item>
    </style>

We're interested in the @dimen/text_minor_125 value one, and that's declared in res/values/dimens_base.xml:

    <dimen name="text_minor_125">16sp</dimen>

So, the app is already being told to display the font as Roboto at 16sp, which matches the design document:

I'm not sure where the differences come from. Perhaps it's again back to my specific device and the way I set global font size in it? @anitaa1990 Any ideas?

[peril-woocommerce]

	Warnings
⚠️	PR is not assigned to a milestone.

Generated by 🚫 dangerJS

[anitaa1990]

LGTM