From 8519c9c767209231339e92662be63ed1d96b8cf1 Mon Sep 17 00:00:00 2001
From: alpavanoglu <alp.avanoglu@automattic.com>
Date: Wed, 27 Dec 2023 21:25:25 +0100
Subject: [PATCH 1/3] Add button background view

---
 .../Signin/Login.storyboard                   | 87 +++++++++++--------
 .../Signin/LoginPrologueViewController.swift  |  2 +
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/WordPressAuthenticator/Signin/Login.storyboard b/WordPressAuthenticator/Signin/Login.storyboard
index 50a6bcc8f..0b039b2f9 100644
--- a/WordPressAuthenticator/Signin/Login.storyboard
+++ b/WordPressAuthenticator/Signin/Login.storyboard
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Ck1-vY-O11">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="22154" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Ck1-vY-O11">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22130"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -100,23 +101,32 @@
                                     <constraint firstAttribute="height" constant="166" placeholder="YES" id="Cxl-Vh-qEI"/>
                                 </constraints>
                             </containerView>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="NZ8-xw-5c5">
+                                <rect key="frame" x="0.0" y="501" width="375" height="166"/>
+                                <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                            </view>
                         </subviews>
                         <constraints>
                             <constraint firstItem="6cw-FO-hjb" firstAttribute="leading" secondItem="EnO-7f-1yO" secondAttribute="leading" id="7Z8-mD-FWN"/>
                             <constraint firstAttribute="trailing" secondItem="G3G-Ap-6ix" secondAttribute="trailing" id="96a-eB-JlD"/>
+                            <constraint firstItem="NZ8-xw-5c5" firstAttribute="leading" secondItem="6cw-FO-hjb" secondAttribute="leading" id="Cr2-Lu-a4u"/>
                             <constraint firstItem="G3G-Ap-6ix" firstAttribute="top" secondItem="6cw-FO-hjb" secondAttribute="bottom" id="Cuw-sd-C5k"/>
                             <constraint firstAttribute="trailing" secondItem="6cw-FO-hjb" secondAttribute="trailing" id="Hgo-qC-AqF"/>
                             <constraint firstItem="s7U-M4-ZVd" firstAttribute="top" secondItem="G3G-Ap-6ix" secondAttribute="top" id="ISb-cY-EO1"/>
+                            <constraint firstItem="NZ8-xw-5c5" firstAttribute="bottom" secondItem="G3G-Ap-6ix" secondAttribute="bottom" id="Ka9-ol-PYJ"/>
                             <constraint firstAttribute="trailing" secondItem="s7U-M4-ZVd" secondAttribute="trailing" id="L02-E4-5Ik"/>
+                            <constraint firstItem="NZ8-xw-5c5" firstAttribute="trailing" secondItem="6cw-FO-hjb" secondAttribute="trailing" id="co6-Tg-Eim"/>
                             <constraint firstItem="6cw-FO-hjb" firstAttribute="top" secondItem="EnO-7f-1yO" secondAttribute="top" id="dXg-NZ-hRY"/>
                             <constraint firstItem="s7U-M4-ZVd" firstAttribute="leading" secondItem="EnO-7f-1yO" secondAttribute="leading" id="fqH-CW-3Ry"/>
                             <constraint firstAttribute="bottom" secondItem="G3G-Ap-6ix" secondAttribute="bottom" id="lOP-Up-00c"/>
+                            <constraint firstItem="NZ8-xw-5c5" firstAttribute="top" secondItem="G3G-Ap-6ix" secondAttribute="top" id="pG1-El-qWU"/>
                             <constraint firstItem="s7U-M4-ZVd" firstAttribute="bottom" secondItem="G3G-Ap-6ix" secondAttribute="bottom" id="qfx-iK-Dth"/>
                             <constraint firstItem="G3G-Ap-6ix" firstAttribute="leading" secondItem="EnO-7f-1yO" secondAttribute="leading" id="uzT-mw-eJq"/>
                         </constraints>
                     </view>
                     <navigationItem key="navigationItem" id="42E-2e-kOq"/>
                     <connections>
+                        <outlet property="buttonBackgroundView" destination="NZ8-xw-5c5" id="nKV-ec-bUi"/>
                         <outlet property="buttonBlurEffectView" destination="s7U-M4-ZVd" id="Td4-9h-aeb"/>
                         <outlet property="buttonContainerView" destination="G3G-Ap-6ix" id="cFT-6z-I4C"/>
                         <outlet property="buttonViewLeadingConstraint" destination="uzT-mw-eJq" id="ASz-qQ-ii9"/>
@@ -133,7 +143,7 @@
             <objects>
                 <navigationController id="Ck1-vY-O11" customClass="LoginNavigationController" customModule="WordPressAuthenticator" sceneMemberID="viewController">
                     <navigationBar key="navigationBar" contentMode="scaleToFill" misplaced="YES" id="mKb-UO-KoA">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
+                        <rect key="frame" x="0.0" y="20" width="375" height="44"/>
                         <autoresizingMask key="autoresizingMask"/>
                     </navigationBar>
                     <connections>
@@ -165,10 +175,10 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ozJ-hT-OEw">
-                                <rect key="frame" x="0.0" y="0.0" width="383" height="676"/>
+                                <rect key="frame" x="0.0" y="20" width="383" height="656"/>
                                 <subviews>
                                     <button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalCompressionResistancePriority="749" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="OZC-xf-OAn" customClass="NUXButton" customModule="WordPressAuthenticator">
-                                        <rect key="frame" x="327" y="612" width="36" height="44"/>
+                                        <rect key="frame" x="327" y="592" width="36" height="44"/>
                                         <accessibility key="accessibilityConfiguration" identifier="nextButton"/>
                                         <constraints>
                                             <constraint firstAttribute="height" constant="44" id="PgU-lW-anB"/>
@@ -185,7 +195,7 @@
                                         </connections>
                                     </button>
                                     <textField opaque="NO" alpha="0.10000000000000001" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="usY-bV-fpM" customClass="WPWalkthroughTextField">
-                                        <rect key="frame" x="1" y="674" width="1" height="1"/>
+                                        <rect key="frame" x="1" y="654" width="1" height="1"/>
                                         <constraints>
                                             <constraint firstAttribute="height" constant="1" id="JlK-kU-NkS"/>
                                             <constraint firstAttribute="width" constant="1" id="gg9-4D-yft"/>
@@ -197,10 +207,10 @@
                                         </connections>
                                     </textField>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="KAn-ug-oE6">
-                                        <rect key="frame" x="0.0" y="0.0" width="383" height="626"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="383" height="606"/>
                                         <subviews>
                                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="JdU-yW-tzf">
-                                                <rect key="frame" x="0.0" y="233" width="383" height="167"/>
+                                                <rect key="frame" x="0.0" y="223" width="383" height="167"/>
                                                 <subviews>
                                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="750" verticalCompressionResistancePriority="1000" text="Log in to your WordPress.com account with your email address." textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="DKR-9c-zZQ">
                                                         <rect key="frame" x="20" y="0.0" width="343" height="38"/>
@@ -369,13 +379,13 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="dSZ-FR-Cdo">
-                                <rect key="frame" x="-4" y="0.0" width="383" height="667"/>
+                                <rect key="frame" x="-4" y="20" width="383" height="647"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="y8j-4r-VXw">
-                                        <rect key="frame" x="0.0" y="0.0" width="383" height="603"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="383" height="583"/>
                                         <subviews>
                                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Wnq-Hk-jIw" userLabel="Header" customClass="SiteInfoHeaderView" customModule="WordPressAuthenticator">
-                                                <rect key="frame" x="20" y="223.5" width="343" height="36"/>
+                                                <rect key="frame" x="20" y="213.5" width="343" height="36"/>
                                                 <subviews>
                                                     <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="rFl-BX-tKE" userLabel="Header Stack View">
                                                         <rect key="frame" x="0.0" y="0.0" width="343" height="36"/>
@@ -421,7 +431,7 @@
                                                 </connections>
                                             </view>
                                             <stackView opaque="NO" contentMode="scaleToFill" verticalCompressionResistancePriority="1000" axis="vertical" distribution="fillEqually" translatesAutoresizingMaskIntoConstraints="NO" id="tW0-In-DwC">
-                                                <rect key="frame" x="0.0" y="279.5" width="383" height="88"/>
+                                                <rect key="frame" x="0.0" y="269.5" width="383" height="88"/>
                                                 <subviews>
                                                     <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Username / Email" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="ESh-DI-dtB" customClass="LoginTextField" customModule="WordPressAuthenticator">
                                                         <rect key="frame" x="0.0" y="0.0" width="383" height="44"/>
@@ -461,7 +471,7 @@
                                                 </constraints>
                                             </stackView>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Dmn-nh-HTH">
-                                                <rect key="frame" x="20" y="387.5" width="343" height="0.0"/>
+                                                <rect key="frame" x="20" y="377.5" width="343" height="0.0"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.85098039219999999" green="0.30980392159999998" blue="0.30980392159999998" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
@@ -481,7 +491,7 @@
                                         </constraints>
                                     </view>
                                     <stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="zbk-h0-lpE">
-                                        <rect key="frame" x="20" y="603" width="343" height="44"/>
+                                        <rect key="frame" x="20" y="583" width="343" height="44"/>
                                         <subviews>
                                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Gzk-TE-YfP" customClass="SubheadlineButton" customModule="WordPressAuthenticator">
                                                 <rect key="frame" x="0.0" y="7" width="141" height="30"/>
@@ -544,8 +554,8 @@
                         </constraints>
                         <variation key="heightClass=regular-widthClass=regular">
                             <mask key="constraints">
-                                <exclude reference="E8T-56-rvq"/>
                                 <exclude reference="HRv-bN-Rg3"/>
+                                <exclude reference="E8T-56-rvq"/>
                             </mask>
                         </variation>
                     </view>
@@ -576,19 +586,19 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7OQ-0t-1zq">
-                                <rect key="frame" x="-4" y="0.0" width="383" height="667"/>
+                                <rect key="frame" x="-4" y="20" width="383" height="647"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" verticalCompressionResistancePriority="1000" translatesAutoresizingMaskIntoConstraints="NO" id="ZWc-TJ-W9T">
-                                        <rect key="frame" x="0.0" y="0.0" width="383" height="603"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="383" height="583"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" placeholderIntrinsicWidth="343" placeholderIntrinsicHeight="48" text="Enter the password for your WordPress.com account." textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="bBi-2N-RAh">
-                                                <rect key="frame" x="20" y="198.5" width="343" height="48"/>
+                                                <rect key="frame" x="20" y="188.5" width="343" height="48"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.18039215689999999" green="0.2274509804" blue="0.32549019610000002" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="3be-99-g62">
-                                                <rect key="frame" x="0.0" y="278.5" width="383" height="74"/>
+                                                <rect key="frame" x="0.0" y="268.5" width="383" height="74"/>
                                                 <subviews>
                                                     <stackView opaque="NO" contentMode="scaleToFill" alignment="center" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="Xgi-ZQ-8YL">
                                                         <rect key="frame" x="20" y="0.0" width="343" height="22"/>
@@ -632,7 +642,7 @@
                                                 </constraints>
                                             </stackView>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZqY-I8-yWG">
-                                                <rect key="frame" x="20" y="372.5" width="343" height="18"/>
+                                                <rect key="frame" x="20" y="362.5" width="343" height="18"/>
                                                 <accessibility key="accessibilityConfiguration" identifier="pswdErrorLabel"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.85098039219999999" green="0.30980392159999998" blue="0.30980392159999998" alpha="1" colorSpace="calibratedRGB"/>
@@ -655,7 +665,7 @@
                                         </constraints>
                                     </view>
                                     <stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="ilv-iW-HgP">
-                                        <rect key="frame" x="20" y="603" width="343" height="44"/>
+                                        <rect key="frame" x="20" y="583" width="343" height="44"/>
                                         <subviews>
                                             <button opaque="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="250" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="0P1-6g-BI3" customClass="SubheadlineButton" customModule="WordPressAuthenticator">
                                                 <rect key="frame" x="0.0" y="7" width="141" height="30"/>
@@ -753,19 +763,19 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hTY-xb-H5h">
-                                <rect key="frame" x="-4" y="0.0" width="383" height="667"/>
+                                <rect key="frame" x="-4" y="20" width="383" height="647"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="DHF-bN-so0">
-                                        <rect key="frame" x="0.0" y="0.0" width="383" height="595"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="383" height="575"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" text="Almost there" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="h0i-9g-1E6">
-                                                <rect key="frame" x="20" y="237.5" width="343" height="18"/>
+                                                <rect key="frame" x="20" y="227.5" width="343" height="18"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.18039215689999999" green="0.2666666667" blue="0.32549019610000002" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="Verification Code" textAlignment="natural" clearsOnBeginEditing="YES" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="A2K-lq-6XM" customClass="LoginTextField" customModule="WordPressAuthenticator">
-                                                <rect key="frame" x="0.0" y="275.5" width="383" height="44"/>
+                                                <rect key="frame" x="0.0" y="265.5" width="383" height="44"/>
                                                 <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                 <accessibility key="accessibilityConfiguration" identifier="Verification Code"/>
                                                 <constraints>
@@ -795,7 +805,7 @@
                                                 </connections>
                                             </textField>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" text="" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="zhF-jf-Wcv">
-                                                <rect key="frame" x="20" y="339.5" width="343" height="0.0"/>
+                                                <rect key="frame" x="20" y="329.5" width="343" height="0.0"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.85098039215686272" green="0.30980392156862746" blue="0.30980392156862746" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
@@ -815,7 +825,7 @@
                                         </constraints>
                                     </view>
                                     <stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="x1G-Lf-mra">
-                                        <rect key="frame" x="20" y="595" width="343" height="44"/>
+                                        <rect key="frame" x="20" y="575" width="343" height="44"/>
                                         <subviews>
                                             <button opaque="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="250" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="309-z3-fPx" customClass="SubheadlineButton" customModule="WordPressAuthenticator">
                                                 <rect key="frame" x="0.0" y="0.0" width="131" height="44"/>
@@ -1010,19 +1020,19 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="a59-c7-WBk">
-                                <rect key="frame" x="-4" y="0.0" width="391" height="676"/>
+                                <rect key="frame" x="-4" y="20" width="391" height="656"/>
                                 <subviews>
                                     <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="PIc-wF-cQF">
-                                        <rect key="frame" x="0.0" y="0.0" width="391" height="600"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="391" height="580"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="750" text="Enter the address of the WordPress site you'd like to connect." textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eFO-bF-n1P">
-                                                <rect key="frame" x="20" y="220" width="351" height="38"/>
+                                                <rect key="frame" x="20" y="210" width="351" height="38"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.18039215689999999" green="0.2666666667" blue="0.32549019610000002" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" verticalHuggingPriority="251" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="https://example.com" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="ZrT-CY-qD7" customClass="LoginTextField" customModule="WordPressAuthenticator">
-                                                <rect key="frame" x="0.0" y="278" width="391" height="44"/>
+                                                <rect key="frame" x="0.0" y="268" width="391" height="44"/>
                                                 <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                 <accessibility key="accessibilityConfiguration" identifier="usernameField"/>
                                                 <constraints>
@@ -1042,7 +1052,7 @@
                                                 </connections>
                                             </textField>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="750" text="" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="SIW-Up-9bc">
-                                                <rect key="frame" x="20" y="342" width="351" height="0.0"/>
+                                                <rect key="frame" x="20" y="332" width="351" height="0.0"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleSubhead"/>
                                                 <color key="textColor" red="0.85098039219999999" green="0.30980392159999998" blue="0.30980392159999998" alpha="1" colorSpace="calibratedRGB"/>
                                                 <nil key="highlightedColor"/>
@@ -1062,7 +1072,7 @@
                                         </constraints>
                                     </view>
                                     <stackView contentMode="scaleToFill" verticalHuggingPriority="750" horizontalCompressionResistancePriority="250" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="mlx-XY-MGX">
-                                        <rect key="frame" x="20" y="600" width="351" height="44"/>
+                                        <rect key="frame" x="20" y="580" width="351" height="44"/>
                                         <subviews>
                                             <button opaque="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="250" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="roL-ID-k8n" customClass="SubheadlineButton" customModule="WordPressAuthenticator">
                                                 <rect key="frame" x="0.0" y="7" width="250" height="30"/>
@@ -1127,8 +1137,8 @@
                         </constraints>
                         <variation key="heightClass=regular-widthClass=regular">
                             <mask key="constraints">
-                                <exclude reference="atB-bL-5qa"/>
                                 <exclude reference="slk-Sa-O2b"/>
+                                <exclude reference="atB-bL-5qa"/>
                             </mask>
                         </variation>
                     </view>
@@ -1161,10 +1171,10 @@
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="O9q-gs-qUh">
-                                <rect key="frame" x="-4" y="0.0" width="383" height="667"/>
+                                <rect key="frame" x="-4" y="20" width="383" height="647"/>
                                 <subviews>
                                     <stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" alignment="center" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="hzZ-dr-nAB">
-                                        <rect key="frame" x="20" y="603" width="343" height="44"/>
+                                        <rect key="frame" x="20" y="583" width="343" height="44"/>
                                         <subviews>
                                             <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XI0-rr-yUh" customClass="SubheadlineButton" customModule="WordPressAuthenticator">
                                                 <rect key="frame" x="0.0" y="7" width="141" height="30"/>
@@ -1360,8 +1370,8 @@
                         </constraints>
                         <variation key="heightClass=regular-widthClass=regular">
                             <mask key="constraints">
-                                <exclude reference="SIn-Gk-ZB8"/>
                                 <exclude reference="ujU-1G-20s"/>
+                                <exclude reference="SIn-Gk-ZB8"/>
                             </mask>
                         </variation>
                     </view>
@@ -1464,5 +1474,8 @@
         <image name="icon-password-field" width="18" height="22"/>
         <image name="icon-url-field" width="18" height="22"/>
         <image name="icon-username-field" width="18" height="18"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
     </resources>
 </document>
diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
index 9a265cdd9..b9b534f8b 100644
--- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
+++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
@@ -7,6 +7,7 @@ class LoginPrologueViewController: LoginViewController {
 
     @IBOutlet private weak var topContainerView: UIView!
     @IBOutlet private weak var buttonBlurEffectView: UIVisualEffectView!
+    @IBOutlet private weak var buttonBackgroundView: UIView!
     private var buttonViewController: NUXButtonViewController?
     private var stackedButtonsViewController: NUXStackedButtonsViewController?
     var showCancel = false
@@ -357,6 +358,7 @@ class LoginPrologueViewController: LoginViewController {
         // Fallback to setting the button background color to clear so the blur effect blurs the Prologue background color.
         let buttonsBackgroundColor = WordPressAuthenticator.shared.unifiedStyle?.prologueButtonsBackgroundColor ?? .clear
         buttonViewController?.backgroundColor = buttonsBackgroundColor
+        buttonBackgroundView?.backgroundColor = buttonsBackgroundColor
         stackedButtonsViewController?.backgroundColor = buttonsBackgroundColor
 
         /// If host apps provide a background color for the prologue buttons:

From 215c77f4dad18b67943bc46174050d8c668c597c Mon Sep 17 00:00:00 2001
From: alpavanoglu <alp.avanoglu@automattic.com>
Date: Wed, 27 Dec 2023 21:49:37 +0100
Subject: [PATCH 2/3] Add bringSubviewToFront

---
 WordPressAuthenticator/Signin/LoginPrologueViewController.swift | 1 +
 1 file changed, 1 insertion(+)

diff --git a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
index b9b534f8b..54814a72c 100644
--- a/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
+++ b/WordPressAuthenticator/Signin/LoginPrologueViewController.swift
@@ -591,6 +591,7 @@ class LoginPrologueViewController: LoginViewController {
             self.buttonViewController = buttonViewController
             buttonViewController.move(to: self, into: buttonContainerView)
         }
+        view.bringSubviewToFront(buttonContainerView)
     }
 }
 

From 03e9a5734136b51aec58f8409402219a3e662e3f Mon Sep 17 00:00:00 2001
From: alpavanoglu <alp.avanoglu@automattic.com>
Date: Thu, 4 Jan 2024 14:40:13 +0100
Subject: [PATCH 3/3] Update `CHANGELOG.md`

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e07439974..3487b2d9b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,7 @@ _None._
 ### Bug Fixes
 
 - Fix an issue where self-hosted sites are incorrectly flagged as non WordPress sites. [#796]
+- Fix background color issue on login prologue's button section on iPad. [#821]
 
 ## 8.0.0