Merge pull request #1614 from chaynHQ/develop

Merge Develop onto Main

Author: annarhughes

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}
     >
-      <Box width={[50, 70]} margin="auto" mb={1}>
-        <Image
-          alt={tS('alt.cookieCat')}
-          src={IllustrationCookieCat}
-          sizes={getImageSizes(70)}
-          style={{
-            width: '100%',
-            height: 'auto',
-          }}
-        />
-      </Box>
-      <Box mb={2}>
-        <Typography fontSize={'0.875rem !important'}>
-          {tS('cookieConsent.cookieConsentExplainer')}
-          <Link
-            target="_blank"
-            href="https://chayn.notion.site/Cookie-Policy-e478b184ea6a4002ba660d052f332c5a"
-          >
-            {tS('cookieConsent.cookieConsentPolicy')}
-          </Link>
-          .
-        </Typography>
+      <Box sx={rowContainerStyle}>
+        <Box width={50} height={50}>
+          <Image
+            alt={tS('alt.cookieCat')}
+            src={IllustrationCookieCat}
+            sizes={getImageSizes(50)}
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
+          />
+        </Box>
+        <Box flex={1}>
+          <Typography fontSize={'0.875rem !important'}>
+            {tS('cookieConsent.cookieConsentExplainer')}
+            <Link
+              target="_blank"
+              href="https://chayn.notion.site/Cookie-Policy-e478b184ea6a4002ba660d052f332c5a"
+            >
+              {tS('cookieConsent.cookieConsentPolicy')}
+            </Link>
+            .
+          </Typography>
+        </Box>
       </Box>
     </CookieConsent>
   );

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%' },

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 = {

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

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,