Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 37 additions & 29 deletions components/layout/CookieBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
};
Expand Down Expand Up @@ -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>
);
Expand Down
3 changes: 1 addition & 2 deletions components/layout/HomeHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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%' },
Expand Down
5 changes: 3 additions & 2 deletions components/layout/MobileBottomNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 1 addition & 3 deletions cypress/integration/tests/videos.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 17 additions & 4 deletions styles/hotjarNPS.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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;
Expand All @@ -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,
Expand Down
Loading