diff --git a/components/layout/CookieBanner.tsx b/components/layout/CookieBanner.tsx index ce9b00087..9c5a1ce80 100644 --- a/components/layout/CookieBanner.tsx +++ b/components/layout/CookieBanner.tsx @@ -23,10 +23,10 @@ const CookieBanner = () => { const consentBoxStyle: React.CSSProperties = { backgroundColor: theme.palette.secondary.light, - maxWidth: isMobileScreen ? 'none' : theme.spacing(50), + maxWidth: isMobileScreen ? 'none' : theme.spacing(54), maxHeight: theme.spacing(35), position: 'fixed', - left: isMobileScreen ? 0 : theme.spacing(2), + right: isMobileScreen ? 0 : theme.spacing(2), bottom: isMobileScreen ? mobileBottomNavHeight : isTabletScreen @@ -36,23 +36,29 @@ const CookieBanner = () => { boxShadow: `${alpha(theme.palette.common.black, 0.2)} 0px ${theme.spacing(1)} ${theme.spacing( 4, )} 0px`, - textAlign: 'center', lineHeight: 1.5, marginRight: isMobileScreen ? 0 : theme.spacing(2), - padding: isMobileScreen - ? `${theme.spacing(3)} ${theme.spacing(2)} ` - : `${theme.spacing(2)} ${theme.spacing(4)}`, + padding: `${theme.spacing(3)} ${theme.spacing(2)} `, zIndex: 5, }; + + const rowContainerStyle = { + display: 'flex', + alignItems: 'center', + gap: 2, + mb: 1, + } as const; + const acceptButtonStyle = { backgroundColor: 'secondary.main', + marginLeft: '0.5rem', float: 'inline-end', ':hover': { backgroundColor: 'secondary.dark', }, }; const declineButtonStyle = { - float: 'inline-start', + float: 'inline-end', fontWeight: 'normal', color: theme.palette.text.primary, }; @@ -121,28 +127,30 @@ const CookieBanner = () => { ariaDeclineLabel={tS('cookieConsent.declineLabel')} flipButtons={true} > - - {tS('alt.cookieCat')} - - - - {tS('cookieConsent.cookieConsentExplainer')} - - {tS('cookieConsent.cookieConsentPolicy')} - - . - + + + {tS('alt.cookieCat')} + + + + {tS('cookieConsent.cookieConsentExplainer')} + + {tS('cookieConsent.cookieConsentPolicy')} + + . + + ); diff --git a/components/layout/HomeHeader.tsx b/components/layout/HomeHeader.tsx index b64816bdf..86d13e047 100644 --- a/components/layout/HomeHeader.tsx +++ b/components/layout/HomeHeader.tsx @@ -32,6 +32,7 @@ const headerContainerStyles = { ...rowStyle, alignItems: 'center', minHeight: { xs: 220, lg: 360 }, + pt: 10, paddingBottom: { xs: '3rem !important', sm: '4rem !important' }, gap: 1, background: theme.palette.bloomGradient, @@ -51,8 +52,6 @@ const imageContainerStyle = { const textContainerStyle = { ...columnStyle, - pl: { xs: 3, sm: 0 }, - pr: { xs: 6, sm: 0 }, justifyContent: 'space-between', width: { xs: '100%', sm: 'auto' }, maxWidth: { xs: '100%', sm: '50%', md: '60%' }, diff --git a/components/layout/MobileBottomNav.tsx b/components/layout/MobileBottomNav.tsx index 79cd47ec5..a009ad5f4 100644 --- a/components/layout/MobileBottomNav.tsx +++ b/components/layout/MobileBottomNav.tsx @@ -32,11 +32,12 @@ const mobileBottomNavStyle = { right: 0, background: 'linear-gradient(180deg, #F3D6D8 36.79%, #FFEAE1 73.59%)', borderTop: 2, - borderColor: 'background.paper', + borderColor: 'common.white', boxShadow: '0 -2px 10px rgba(0,0,0,0.1)', zIndex: 1100, height: mobileBottomNavHeight, - overflow: 'scroll', + overflowX: 'scroll', + overflowY: 'hidden', } as const; const navContainerStyle = { diff --git a/cypress/integration/tests/videos.cy.tsx b/cypress/integration/tests/videos.cy.tsx index b91afd100..27b5493c4 100644 --- a/cypress/integration/tests/videos.cy.tsx +++ b/cypress/integration/tests/videos.cy.tsx @@ -37,10 +37,8 @@ describe('Videos Flow', () => { cy.get('[data-testid="team-member-card"]').should('exist'); // Feedback form appears - cy.contains('h2', 'How was this session?', { timeout: 10000 }).should('be.visible'); - // Click the Send button and check for error message - cy.get('button').contains('Send').click(); + cy.get('button').contains('Send').should('exist').click(); cy.contains('p', 'Please select a rating before sending.').should('be.visible'); // User selects a rating diff --git a/styles/hotjarNPS.css b/styles/hotjarNPS.css index e39d77f91..6310d78b7 100644 --- a/styles/hotjarNPS.css +++ b/styles/hotjarNPS.css @@ -18,10 +18,11 @@ color: #000000 !important; } -@media (min-width: 480px) { - ._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1r7qyl6.css-1r7qyl6 * { - bottom: 1.5rem; - } +._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1xaw8mu, +._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1xaw8mu.css-1xaw8mu { + bottom: 6.25rem !important; + height: 2.75rem !important; + overflow: visible !important; } /* Hotjar branding */ @@ -32,9 +33,15 @@ /* Primary button styles */ ._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button'], +._hj-widget-container + ._hj-s3UIi__styles__globalStyles + .css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49, ._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4, +._hj-widget-container + ._hj-s3UIi__styles__globalStyles + .css-meobdt.css-meobdt.css-meobdt.css-meobdt.css-meobdt.css-meobdt.css-meobdt.css-meobdt.css-meobdt, .css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4.css-zwfoj4 { background-color: #ffbfa4 !important; color: #000000 !important; @@ -48,6 +55,12 @@ ._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button']:hover, ._hj-widget-container ._hj-s3UIi__styles__globalStyles button[type='button']:focus, +._hj-widget-container + ._hj-s3UIi__styles__globalStyles + .css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49:hover, +._hj-widget-container + ._hj-s3UIi__styles__globalStyles + .css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49.css-sm1t49:focus, ._hj-widget-container ._hj-s3UIi__styles__globalStyles .css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4.css-1ce3vb4:hover,