PhoneAuth Button Glitch Issue

[ArcherEmiya05]

Welcome to FirebaseUI and thanks for submitting an issue!

Please take a look at open issues, as well as resolved issues, to see if your issue is either already being addressed, or has been solved by someone else.

If not, please feel free to fill in the following info so we can help faster!

Step 1: Are you in the right place?

Yes

Step 2: Describe your environment

• Android device: Pixels Emulator
• Android OS version: SDK 21 and above
• Google Play Services version: 4.4.0
• Firebase/Play Services SDK version: 8.0.2

Step 3: Describe the problem:

There is a weird square shadow in Phone Auth Verify button when using Material Design 3 that cannot be removed in any approach unless android:background is set as backgroundTintwith transparent color value is not working.

Observed Results:

Expected Results:

No shadow

Relevant Code:

<!-- Base application theme -->
    <style name="Theme.MyApp" parent="Theme.Material3.DayNight">

         <item name="materialButtonStyle">@style/AppButtonStyle</item>

    </style>

<!-- Firebase UI theme -->
    <style name="Theme.MyApp.FirebaseAuthUI">

        <!-- For some reason, Firebase UI use this as textColorLink -->
        <item name="colorPrimary">@color/colorAccent</item>

        <!-- Use by Toolbar title color -->
        <!-- Use by Outlined text field color (unfocused) -->
        <!-- Use by OTP dashes color -->
        <!-- Use by Button disabled color -->
        <item name="colorOnSurface">@color/colorPrimary_White</item>

        <!-- TextInputLayout and button shape -->
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item> <!-- TODO M2 remove later -->
        <item name="shapeAppearanceCornerExtraSmall">@style/ShapeAppearance.App.SmallComponent</item>

    </style>