Update FAB shape icon and color

[ravishanker]

Updates FAB button on both Jetpack and WordPress apps

• shape from circle to squircle
• icon from create to plus
• colour from green/blue to black/grey

Fixes # See p1686513683293089-slack-C04SFL0RP51

Light	Dark

To test:

• Launch Jetpack/WordPress app, and login
• Verify that FAB shape is now squircle
• Verify that FAB colour is now black
• Turn on dark theme, if on light before, and light if it were dark
• Verify that FAB is visible as in the second screen shot above, is squircle, and grey

Regression Notes

1. Potential unintended areas of impact
   None

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Tested both JP and WP apps in light and dark themes

3. What automated tests I added (or what prevented me from doing so)
   N/A

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

• Portrait and landscape orientations.
• Light and dark modes.
• Fonts: Larger, smaller and bold text.
• High contrast.
• Talkback.
• Languages with large words or with letters/accents not frequently used in English.
• Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
• Large and small screen sizes. (Tablet and smaller phones)
• Multi-tasking: Split screen and Pop-up view. (Android 10 or higher)

[wpmobilebot]

📲 You can test the changes from this Pull Request in Jetpack by scanning the QR code below to install the corresponding build.

	App Name	Jetpack
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18599-a343648
	Commit	a343648
	Direct Download	jetpack-prototype-build-pr18599-a343648.apk

Note: Google Login is not supported on these builds.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WordPress by scanning the QR code below to install the corresponding build.

	App Name	WordPress
	Flavor	Jalapeno
	Build Type	Debug
	Version	pr18599-a343648
	Commit	a343648
	Direct Download	wordpress-prototype-build-pr18599-a343648.apk

Note: Google Login is not supported on these builds.

[osullivanchris]

Looks great. Let's do it!

[irfano]

I have checked other places where we use FAB, and they all work fine except for the button on the media detail screen. There is a green border around the button. Can you also reproduce it? There may be a problem with the implementation of the FAB on that screen.

[ravishanker]

I have checked other places where we use FAB, and they all work fine except for the button on the media detail screen. There is a green border around the button. Can you also reproduce it?

Yes, it is missing app:borderWidth="0dp" unlike others. May be, it is intentional, also has the elevation on that particular screen to stand out on the image behind perhaps.

Wdyt? Should I add borderWidth?

[irfano]

I tested it with a black image. The green border looks ugly. A gray border could look better, but I couldn't find a way to change the color. This looks like an insignificant issue. I'm okay with removing the border. I'm approving the PR and leaving the decision to you.

with border	without border

[ravishanker]

I tested it with a black image. The green border looks ugly. A gray border could look better, but I couldn't find a way to change the color. This looks like an insignificant issue. I'm okay with removing the border. I'm approving the PR and leaving the decision to you.

Before	After

After some research found a way to change border colour with app:backgroundTint, for future reference below

    android:backgroundTint="#B1E4F6"               //inner background color
    app:backgroundTint="@color/white"              //outer background color (border color)
    app:maxImageSize="16dp"                        //inner icon size
    app:tint="@android:color/holo_blue_dark" />    //inner icon color