diff --git a/src/components/Home/DonationBanner.style.tsx b/src/components/Home/DonationBanner.style.tsx index 59c5459c6..76973da73 100644 --- a/src/components/Home/DonationBanner.style.tsx +++ b/src/components/Home/DonationBanner.style.tsx @@ -12,7 +12,7 @@ const DonationBannerStyle = styled(Col)` align-self: flex-end; position: absolute; right: 10px; - top: -10px; + bottom: -10px; z-index: 1; } @@ -64,6 +64,11 @@ const DonationBannerStyle = styled(Col)` .banner-content > p { font-size: 12px; } + + .close-banner { + align-self: flex-start; + top: -10px; + } } `; diff --git a/src/components/Home/DonationBanner.tsx b/src/components/Home/DonationBanner.tsx index 0f2370315..013b5b7f1 100644 --- a/src/components/Home/DonationBanner.tsx +++ b/src/components/Home/DonationBanner.tsx @@ -12,14 +12,14 @@ const closeBanner = (onClose) => { const DonationBanner = () => { const enableDonationBanner = process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true"; - const [showDonationBanner, setDonationBanner] = useState(true); + const [showDonationBanner, setDonationBanner] = useState(false); useEffect(() => { - const BannerCookies = Cookies.get("cta_donation_banner_show") || true; - if (BannerCookies === true || BannerCookies === "true") { - return setDonationBanner(true); + const CloseBannerCookies = Cookies.get("cta_donation_banner_show"); + if (CloseBannerCookies) { + return setDonationBanner(false); } - setDonationBanner(false); + setDonationBanner(true); }, []); if (!enableDonationBanner) {