iOS 26 Full screen improvements (#448)

* max z-index

* hide payment options

* reduce vertical spacing

* tweaks for better visuals on  ios 26.1

* lint

Author: Fishbakh-N

packages/donate-button-v4/src/autoPlayMode.tsx

@@ -70,7 +70,7 @@ function mountShadowRoot() {
 	const shadowWidgetWrapper = document.createElement('div');
 	shadowWidgetWrapper.id = 'every-shadow-wrapper';
 	shadowWidgetWrapper.style.position = 'absolute';
-	shadowWidgetWrapper.style.zIndex = '20000000';
+	shadowWidgetWrapper.style.zIndex = '2147483647';
 	document.body.append(shadowWidgetWrapper);
 	shadowRoot = shadowWidgetWrapper.attachShadow({mode: 'open'});
 }

packages/donate-button-v4/src/components/widget/components/Header/styles.ts

@@ -6,7 +6,7 @@ export const containerCss = css({
 	display: 'flex',
 	justifyContent: 'flex-end',
 	alignItems: 'center',
-	padding: `${Spacing.M} ${Spacing.XL}`,
+	padding: `${Spacing.M} ${Spacing.L}`,
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		padding: 0
 	}

packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts

@@ -58,7 +58,7 @@ export const fundraiserCardLogoCss = (logoUrl: string) =>
 	]);
 
 export const nonprofitCardCss = css({
-	padding: `${Spacing.XL}`,
+	padding: `0 ${Spacing.L} ${Spacing.L}`,
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		...verticalStackCss.css(Spacing.S),
 		padding: `${Spacing.L}`

packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/index.tsx

@@ -8,7 +8,8 @@ import {
 	largePaymentMethodButtonCss,
 	smallPaymentMethodFieldSetCss,
 	smallPaymentMethodSelectListCss,
-	smallPaymentMethodButtonCss
+	smallPaymentMethodButtonCss,
+	showMoreButtonCss
 } from 'src/components/widget/components/PaymentProcess/PaymentMethodSelect/styles';
 import {legendCss} from 'src/components/widget/components/PaymentProcess/styles';
 import {useConfigContext} from 'src/components/widget/hooks/useConfigContext';
@@ -185,7 +186,9 @@ export const LargePaymentMethodSelect = () => {
 
 export const SmallPaymentMethodSelect = () => {
 	const methods = usePaymentMethods();
+	const {primaryColor} = useConfigContext();
 
+	const [showMore, setShowMore] = useState(false);
 	if (methods.length === 1) {
 		return null;
 	}
@@ -194,10 +197,27 @@ export const SmallPaymentMethodSelect = () => {
 		<fieldset className={smallPaymentMethodFieldSetCss}>
 			<legend className={legendCss}>Payment method</legend>
 			<ul className={smallPaymentMethodSelectListCss}>
-				{methods.map((method) => (
+				{methods.slice(0, 4).map((method) => (
 					<PaymentMethodListItem key={method} small method={method} />
 				))}
+				{showMore &&
+					methods
+						.slice(4)
+						.map((method) => (
+							<PaymentMethodListItem key={method} small method={method} />
+						))}
 			</ul>
+			{!showMore && (
+				<button
+					type="button"
+					className={showMoreButtonCss(primaryColor)}
+					onClick={() => {
+						setShowMore(true);
+					}}
+				>
+					More options
+				</button>
+			)}
 		</fieldset>
 	);
 };

packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/styles.ts

@@ -1,6 +1,7 @@
 import {fieldSetCss} from 'src/components/widget/components/PaymentProcess/styles';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
+import {textSize} from 'src/components/widget/theme/font-sizes';
 import {Radii} from 'src/components/widget/theme/radii';
 import {
 	verticalStackCss,
@@ -25,6 +26,7 @@ export const largePaymentMethodSelectListCss = css({
 export const smallPaymentMethodFieldSetCss = joinClassNames([
 	fieldSetCss,
 	css({
+		marginBottom: Spacing.S,
 		display: 'block',
 		[BREAKPOINTS.TabletLandscapeUp]: {
 			display: 'none'
@@ -103,3 +105,19 @@ export const smallPaymentMethodButtonCss = (
 			  }
 			: {})
 	});
+
+export const showMoreButtonCss = (primaryColor: string) =>
+	css({
+		background: 'transparent',
+		border: 'none',
+		color: primaryColor,
+		cursor: 'pointer',
+		textDecoration: 'none',
+		fontWeight: 700,
+		fontSize: textSize.xs.fontSize,
+		lineHeight: textSize.xs.lineHeight,
+		padding: 0,
+		textAlign: 'center',
+		margin: `${Spacing.S} auto 0`,
+		width: '100%'
+	});

packages/donate-button-v4/src/components/widget/components/WidgetOverlay/styles.ts

@@ -10,20 +10,21 @@ export const overlayCss = css({
 	position: 'fixed',
 	height: 'auto',
 	width: '100%',
-	zIndex: 999,
+	zIndex: 2147483647,
 	top: 0,
 	bottom: 0,
 	left: 0,
 	right: 0,
 	display: 'flex',
-	background: 'rgba(0, 0, 0, 0.5)',
+	background: '#ffffff',
 	justifyContent: 'center',
 	alignItems: 'center',
 	color: COLORS.Text,
 	fontFamily: FontFamily.BasisGrotesque,
 	padding: 0,
 	[BREAKPOINTS.TabletLandscapeUp]: {
-		padding: Spacing.XL
+		padding: Spacing.XL,
+		background: 'rgba(0, 0, 0, 0.5)'
 	},
 	// reset
 	boxSizing: 'border-box',

packages/donate-button-v4/src/components/widget/icons/LoadingIcon.tsx

@@ -1,3 +1,5 @@
+import {useConfigContext} from 'src/components/widget/hooks/useConfigContext';
+import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
 import css from 'src/helpers/css';
 
@@ -14,19 +16,23 @@ const loadingSvgCss = css({
 	maskSize: 'cover'
 });
 
-const loadingPathCss = (color: string) =>
+const loadingPathCss = (primaryColor: string) =>
 	css({
-		fill: color
+		fill: primaryColor,
+		[BREAKPOINTS.TabletLandscapeUp]: {
+			fill: COLORS.Gray
+		}
 	});
+
 interface LoadingIconProps {
 	size?: number;
-	color?: string;
 }
 
 export const LoadingIcon = ({
-	size = DEFAULT_LOADING_SIZE,
-	color = COLORS.LightGray
+	size = DEFAULT_LOADING_SIZE
 }: LoadingIconProps) => {
+	const {primaryColor} = useConfigContext();
+
 	return (
 		<svg
 			width={size}
@@ -37,7 +43,7 @@ export const LoadingIcon = ({
 			className={loadingSvgCss}
 		>
 			<path
-				className={loadingPathCss(color)}
+				className={loadingPathCss(primaryColor)}
 				d="M51.147 28.97C51.147 17.614 41.667 9 29.493 9C15.875 9 5 20.5 5 34.744C5 50.094 17.223 62.365 33.68 62.365C50.137 62.365 64.862 49.325 66.017 32.242H58.51C57.114 45.042 46.287 54.859 33.68 54.859C21.553 54.859 12.555 45.956 12.555 34.744C12.555 24.639 20.062 16.507 29.493 16.507C37.385 16.507 43.593 21.897 43.593 28.97C43.593 34.84 39.358 39.749 33.728 39.749V47.256C43.688 47.256 51.148 38.931 51.148 28.97"
 			/>
 		</svg>

packages/donate-button-v4/src/manualMode.tsx

@@ -46,7 +46,7 @@ export default function manualMode() {
 		const shadowWidgetWrapper = document.createElement('div');
 		shadowWidgetWrapper.id = 'every-shadow-wrapper';
 		shadowWidgetWrapper.style.position = 'absolute';
-		shadowWidgetWrapper.style.zIndex = '20000000';
+		shadowWidgetWrapper.style.zIndex = '2147483647';
 		document.body.append(shadowWidgetWrapper);
 
 		widgetMountPoint = document.createElement('div');