diff --git a/packages/donate-button-v4/src/autoPlayMode.tsx b/packages/donate-button-v4/src/autoPlayMode.tsx index 3ad57fda..a6c9c365 100644 --- a/packages/donate-button-v4/src/autoPlayMode.tsx +++ b/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'}); } diff --git a/packages/donate-button-v4/src/components/widget/components/Header/styles.ts b/packages/donate-button-v4/src/components/widget/components/Header/styles.ts index e1b095f0..4432362e 100644 --- a/packages/donate-button-v4/src/components/widget/components/Header/styles.ts +++ b/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 } diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts index 6495d54f..31c8d22e 100644 --- a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts +++ b/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}` diff --git a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/index.tsx b/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/index.tsx index 85fe205d..a8857260 100644 --- a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/index.tsx +++ b/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 = () => {
Payment method + {!showMore && ( + + )}
); }; diff --git a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/styles.ts b/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/styles.ts index f1c965ff..4e966ab6 100644 --- a/packages/donate-button-v4/src/components/widget/components/PaymentProcess/PaymentMethodSelect/styles.ts +++ b/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%' + }); diff --git a/packages/donate-button-v4/src/components/widget/components/WidgetOverlay/styles.ts b/packages/donate-button-v4/src/components/widget/components/WidgetOverlay/styles.ts index af7c666f..71d2fc4c 100644 --- a/packages/donate-button-v4/src/components/widget/components/WidgetOverlay/styles.ts +++ b/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', diff --git a/packages/donate-button-v4/src/components/widget/icons/LoadingIcon.tsx b/packages/donate-button-v4/src/components/widget/icons/LoadingIcon.tsx index 505d761c..84f0d4c2 100644 --- a/packages/donate-button-v4/src/components/widget/icons/LoadingIcon.tsx +++ b/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 ( diff --git a/packages/donate-button-v4/src/manualMode.tsx b/packages/donate-button-v4/src/manualMode.tsx index f2234813..c37ab383 100644 --- a/packages/donate-button-v4/src/manualMode.tsx +++ b/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');