diff --git a/components/banner/MaintenanceBanner.tsx b/components/banner/MaintenanceBanner.tsx index 85888060..2cb36049 100644 --- a/components/banner/MaintenanceBanner.tsx +++ b/components/banner/MaintenanceBanner.tsx @@ -2,6 +2,7 @@ import { Box, Container, Typography } from '@mui/material'; import { useTranslations } from 'next-intl'; import Image from 'next/image'; import illustrationChange from '../../public/illustration_change_peach.svg'; +import { getImageSizes } from '../../utils/imageSizes'; const containerStyle = { textAlign: 'center', @@ -25,7 +26,7 @@ export const MaintenanceBanner = () => { alt={t('alt.personTea')} src={illustrationChange} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx index 62e9e3fc..e5f3c527 100644 --- a/components/cards/CourseCard.tsx +++ b/components/cards/CourseCard.tsx @@ -16,6 +16,7 @@ import Image from 'next/image'; import { useState } from 'react'; import { PROGRESS_STATUS } from '../../constants/enums'; import { iconTextRowStyle, rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import Link from '../common/Link'; import ProgressStatus from '../common/ProgressStatus'; @@ -54,8 +55,10 @@ const collapseContentStyle = { } as const; const cardActionsStyle = { + paddingLeft: 4, paddingTop: 0, - alignItems: 'end', + justifyContent: 'flex-end', + alignItems: 'center', } as const; const statusRowStyle = { @@ -96,7 +99,7 @@ const CourseCard = (props: CourseCardProps) => { alt={course.content.image_with_background.alt} src={course.content.image_with_background.filename} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} @@ -106,9 +109,6 @@ const CourseCard = (props: CourseCardProps) => { {course.content.name} - {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && ( - - )} @@ -119,7 +119,7 @@ const CourseCard = (props: CourseCardProps) => { alt={course.content.image.alt} src={course.content.image.filename} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} @@ -143,6 +143,10 @@ const CourseCard = (props: CourseCardProps) => { )} + {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && ( + + )} + { return ( - + @@ -48,7 +47,9 @@ export const RelatedContentCard = (props: RelatedContentProps) => { {` ${duration} ${t('minuteLabel')}`} )} - {title} + + {title} + { return ( - + {t('alt.personTea')} { alt={tS(item.illustrationAlt)} src={item.illustrationSrc} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/common/ImageTextGrid.tsx b/components/common/ImageTextGrid.tsx index 1c2df43f..6436972d 100644 --- a/components/common/ImageTextGrid.tsx +++ b/components/common/ImageTextGrid.tsx @@ -2,6 +2,7 @@ import { Box, Typography } from '@mui/material'; import { useTranslations } from 'next-intl'; import Image, { StaticImageData } from 'next/image'; import { richtextContentStyle, rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; export interface ImageTextItem { text: string; @@ -52,7 +53,7 @@ const ImageTextGrid = (props: ImageTextGridProps) => { alt={tS(item.illustrationAlt)} src={item.illustrationSrc} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/common/ProgressStatus.tsx b/components/common/ProgressStatus.tsx index daba2028..0bfa09fb 100644 --- a/components/common/ProgressStatus.tsx +++ b/components/common/ProgressStatus.tsx @@ -15,7 +15,7 @@ const ProgressStatus = (props: ProgressStatusProps) => { if (status === PROGRESS_STATUS.STARTED) { return ( - + {tS('started')} @@ -23,7 +23,7 @@ const ProgressStatus = (props: ProgressStatusProps) => { } if (status === PROGRESS_STATUS.COMPLETED) { return ( - + {tS('completed')} diff --git a/components/forms/ResourceFeedbackForm.tsx b/components/forms/ResourceFeedbackForm.tsx index 685c2daf..b2748ecc 100644 --- a/components/forms/ResourceFeedbackForm.tsx +++ b/components/forms/ResourceFeedbackForm.tsx @@ -19,6 +19,7 @@ import illustrationPerson4Peach from '../../public/illustration_person4_peach.sv import { useCreateResourceFeedbackMutation } from '../../store/api'; import { ResourceFeedback } from '../../store/resourcesSlice'; import { staticFieldLabelStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; const fieldBoxStyle: SxProps = { ...staticFieldLabelStyle, @@ -102,7 +103,7 @@ const ResourceFeedbackForm = (props: ResourceFeedbackFormProps) => { alt={tS('alt.personTea')} src={illustrationPerson4Peach} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/forms/SessionFeedbackForm.tsx b/components/forms/SessionFeedbackForm.tsx index 9908ee01..8586c808 100644 --- a/components/forms/SessionFeedbackForm.tsx +++ b/components/forms/SessionFeedbackForm.tsx @@ -19,6 +19,7 @@ import illustrationPerson4Peach from '../../public/illustration_person4_peach.sv import { useCreateSessionFeedbackMutation } from '../../store/api'; import { SessionFeedback } from '../../store/coursesSlice'; import { staticFieldLabelStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; const fieldBoxStyle: SxProps = { ...staticFieldLabelStyle, @@ -99,7 +100,7 @@ const SessionFeedbackForm = (props: SessionFeedbackFormProps) => { alt={tS('alt.personTea')} src={illustrationPerson4Peach} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/layout/Consent.tsx b/components/layout/Consent.tsx index d6370e6a..1a723b2f 100644 --- a/components/layout/Consent.tsx +++ b/components/layout/Consent.tsx @@ -8,6 +8,7 @@ import { COOKIES_ACCEPTED, COOKIES_REJECTED } from '../../constants/events'; import { useAppDispatch, useTypedSelector } from '../../hooks/store'; import IllustrationCookieCat from '../../public/illustration_cookie_cat.svg'; import { setCookiesAccepted } from '../../store/userSlice'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; import Link from '../common/Link'; @@ -111,7 +112,7 @@ const Consent = (props: {}) => { {tS('alt.cookieCat')} { <> - {tS('alt.bloomLogo')} + {tS('alt.bloomLogo')} @@ -190,7 +182,7 @@ const Footer = () => { alt={tS(partner.logoAlt)} src={partner.logo} fill - sizes="300px" + sizes={getImageSizes(logoContainerStyle.width)} style={{ objectFit: 'contain', objectPosition: 'left', @@ -272,14 +264,7 @@ const Footer = () => { }) } > - {tS('alt.tiktokLogo')} + {tS('alt.tiktokLogo')} )} {partner.github && ( @@ -310,16 +295,7 @@ const Footer = () => { - {tS('alt.comicReliefLogo')} + {tS('alt.comicReliefLogo')} { src={communityFundLogo} width={170} height={50} - style={{ - maxWidth: '100%', - height: 'auto', - }} /> diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 1123aa5d..bce017ff 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -8,6 +8,7 @@ import { render } from 'storyblok-rich-text-react-renderer'; import { PROGRESS_STATUS } from '../../constants/enums'; import { columnStyle, rowStyle } from '../../styles/common'; import { TextNode } from '../../utils/helper-types/translations'; +import { getImageSizes } from '../../utils/imageSizes'; import { RichTextOptions } from '../../utils/richText'; import UserResearchBanner from '../banner/UserResearchBanner'; import ProgressStatus from '../common/ProgressStatus'; @@ -58,6 +59,7 @@ const childrenContentStyle = { const textContentStyle = { marginTop: 'auto', + mb: 2, } as const; const backButtonStyle = { @@ -127,7 +129,7 @@ const Header = (props: HeaderProps) => { alt={imageAltText} src={imageSrc} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/layout/HomeHeader.tsx b/components/layout/HomeHeader.tsx index caeb4158..e468e0a8 100644 --- a/components/layout/HomeHeader.tsx +++ b/components/layout/HomeHeader.tsx @@ -7,6 +7,7 @@ import * as React from 'react'; import { render } from 'storyblok-rich-text-react-renderer'; import { columnStyle, rowStyle } from '../../styles/common'; import theme from '../../styles/theme'; +import { getImageSizes } from '../../utils/imageSizes'; import { RichTextOptions } from '../../utils/richText'; import UserResearchBanner from '../banner/UserResearchBanner'; @@ -87,7 +88,7 @@ const Header = (props: HeaderProps) => { alt={imageAltText} src={imageSrc} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/layout/PartnerAdminHeader.tsx b/components/layout/PartnerAdminHeader.tsx index 540c7c07..bc5f78ee 100644 --- a/components/layout/PartnerAdminHeader.tsx +++ b/components/layout/PartnerAdminHeader.tsx @@ -2,6 +2,7 @@ import { Container, Typography } from '@mui/material'; import { useTranslations } from 'next-intl'; import Image, { StaticImageData } from 'next/image'; import * as React from 'react'; +import { getImageSizes } from '../../utils/imageSizes'; const headerContainerStyles = { backgroundColor: 'common.white', @@ -36,6 +37,7 @@ const PartnerAdminHeader = (props: PartnerAdminHeaderProps) => { alt={tS(partnerLogoAlt)} src={partnerLogoSrc} width={200} + sizes={getImageSizes(200)} style={{ maxWidth: '100%', height: 'auto', diff --git a/components/layout/PartnerHeader.tsx b/components/layout/PartnerHeader.tsx index 5a373fa9..d04efac7 100644 --- a/components/layout/PartnerHeader.tsx +++ b/components/layout/PartnerHeader.tsx @@ -2,6 +2,7 @@ import { Box, Container } from '@mui/material'; import { useTranslations } from 'next-intl'; import Image, { StaticImageData } from 'next/image'; import { rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import UserResearchBanner from '../banner/UserResearchBanner'; const headerContainerStyles = { @@ -46,7 +47,7 @@ const PartnerHeader = (props: HeaderProps) => { alt={tS(partnerLogoAlt)} src={partnerLogoSrc} fill - sizes="100vw" + sizes={getImageSizes(logoContainerStyle.width)} style={{ objectFit: 'contain', }} @@ -57,7 +58,7 @@ const PartnerHeader = (props: HeaderProps) => { alt={tS(imageAlt)} src={imageSrc} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/layout/SecondaryNav.tsx b/components/layout/SecondaryNav.tsx index 9adcaaf6..b2330308 100644 --- a/components/layout/SecondaryNav.tsx +++ b/components/layout/SecondaryNav.tsx @@ -23,6 +23,7 @@ import { HTMLAttributes } from 'react'; import theme from '../../styles/theme'; import logEvent, { getEventUserData } from '../../utils/logEvent'; import { NextLinkComposed } from '../common/Link'; +import { getImageSizes } from '../../utils/imageSizes'; interface LinkTabProps { label?: string; @@ -72,7 +73,7 @@ export const SecondaryNavIcon = ({ alt, src }: SecondaryNavIconType) => ( alt={alt} src={src} fill - sizes="100vw" + sizes={getImageSizes(35)} style={{ objectFit: 'contain', }} diff --git a/components/layout/TopBar.tsx b/components/layout/TopBar.tsx index d412d287..68ff7162 100644 --- a/components/layout/TopBar.tsx +++ b/components/layout/TopBar.tsx @@ -7,6 +7,7 @@ import { HEADER_HOME_LOGO_CLICKED, HEADER_LOGIN_CLICKED } from '../../constants/ import { useTypedSelector } from '../../hooks/store'; import bloomLogo from '../../public/bloom_logo_white.svg'; import { rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; import { getIsMaintenanceMode } from '../../utils/maintenanceMode'; import Link from '../common/Link'; @@ -82,7 +83,7 @@ const TopBar = () => { alt={tS('alt.bloomLogo')} src={bloomLogo} fill - sizes="250px" + sizes={getImageSizes(logoContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/components/storyblok/StoryblokAccordion.tsx b/components/storyblok/StoryblokAccordion.tsx index f689414c..9b3c7e1e 100644 --- a/components/storyblok/StoryblokAccordion.tsx +++ b/components/storyblok/StoryblokAccordion.tsx @@ -14,6 +14,7 @@ import { useEffect, useRef } from 'react'; import { render } from 'storyblok-rich-text-react-renderer'; import { ACCORDION_OPENED, generateAccordionEvent } from '../../constants/events'; import { useTypedSelector } from '../../hooks/store'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; import { RichTextOptions } from '../../utils/richText'; const containerStyle = { @@ -107,7 +108,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => { alt={ai.icon.alt} src={ai.icon.filename} fill - sizes="100vw" + sizes={getImageSizes(32)} style={{ objectFit: 'contain', }} diff --git a/components/storyblok/StoryblokCard.tsx b/components/storyblok/StoryblokCard.tsx index 4cb00f7d..416d6c50 100644 --- a/components/storyblok/StoryblokCard.tsx +++ b/components/storyblok/StoryblokCard.tsx @@ -14,6 +14,7 @@ import { useTranslations } from 'next-intl'; import Image from 'next/image'; import { useState } from 'react'; import { render } from 'storyblok-rich-text-react-renderer'; +import { getImageSizes } from '../../utils/imageSizes'; import { RichTextOptions } from '../../utils/richText'; import Link from '../common/Link'; @@ -36,19 +37,6 @@ const cardActionsStyle = { bottom: 3, } as const; -const slimImageStyle = { - width: { xs: 80, sm: 80, md: 80 }, - height: { xs: 80, sm: 80, md: 80 }, - minWidth: { xs: 80, sm: 80, md: 80 }, - minHeight: { xs: 80, sm: 80, md: 80 }, -}; -const defaultStyle = { - width: { xs: 80, md: 100 }, - height: { xs: 80, md: 100 }, - minWidth: { xs: 80, md: 100 }, - minHeight: { xs: 80, md: 100 }, -}; - const cardStyle = { '&:first-of-type': { marginTop: 0, @@ -77,6 +65,8 @@ const StoryblokCard = (props: StoryblokCardProps) => { setExpanded(!expanded); }; + const isSlimStyle = style === 'slim'; + const arrowStyle = { transform: expanded ? 'rotate(180deg)' : 'none', } as const; @@ -92,7 +82,7 @@ const StoryblokCard = (props: StoryblokCardProps) => { }; const cardContentStyle = { - ...(style == 'slim' ? slimPadding : {}), + ...(isSlimStyle && slimPadding), display: 'flex', flexDirection: alignment === 'right' ? 'row-reverse' : alignment === 'center' ? 'column' : 'row', @@ -103,8 +93,11 @@ const StoryblokCard = (props: StoryblokCardProps) => { } as const; const imageContainerStyle = { - ...(style == 'slim' ? slimImageStyle : defaultStyle), position: 'relative', + width: { xs: 80, ...(isSlimStyle && { md: 100 }) }, + height: { xs: 80, ...(isSlimStyle && { md: 100 }) }, + minWidth: { xs: 80, ...(isSlimStyle && { md: 100 }) }, + minHeight: { xs: 80, ...(isSlimStyle && { md: 100 }) }, } as const; const collapseContentStyle = { @@ -117,7 +110,13 @@ const StoryblokCard = (props: StoryblokCardProps) => { {image && image.filename && ( - {image.alt} + {image.alt} )} {render(content, RichTextOptions)} diff --git a/components/storyblok/StoryblokFaqs.tsx b/components/storyblok/StoryblokFaqs.tsx index 49cd787e..8012938a 100644 --- a/components/storyblok/StoryblokFaqs.tsx +++ b/components/storyblok/StoryblokFaqs.tsx @@ -45,16 +45,7 @@ const StoryblokFaqs = (props: StoryblokFaqsProps) => { {title} - {'alt'} + {'alt'} {faqs.map((faq, i) => ( { {...storyblokEditable({ _uid, _editable, image, size, alignment })} sx={imageContainerStyle} > - {image.alt} + {image.alt} ); }; diff --git a/components/storyblok/StoryblokQuote.tsx b/components/storyblok/StoryblokQuote.tsx index a5775e11..38b1a44e 100644 --- a/components/storyblok/StoryblokQuote.tsx +++ b/components/storyblok/StoryblokQuote.tsx @@ -1,6 +1,7 @@ import { Box } from '@mui/material'; import { ISbRichtext, storyblokEditable } from '@storyblok/react'; import Image from 'next/image'; +import { getImageSizes } from '../../utils/imageSizes'; import Quote from '../common/Quote'; const containerStyle = { @@ -47,7 +48,16 @@ const StoryblokQuote = (props: StoryblokQuoteProps) => { > {image && ( - {image.alt} + {image.alt} )} diff --git a/components/storyblok/StoryblokResourceConversationPage.tsx b/components/storyblok/StoryblokResourceConversationPage.tsx index 402cc65c..344f7048 100644 --- a/components/storyblok/StoryblokResourceConversationPage.tsx +++ b/components/storyblok/StoryblokResourceConversationPage.tsx @@ -37,6 +37,7 @@ const progressStyle = { alignItems: 'center', justifyContent: 'flex-start', gap: 3, + mt: 2, '.MuiBox-root': { mt: 0, }, @@ -194,7 +195,7 @@ const StoryblokResourceConversationPage = (props: StoryblokResourceConversationP imageSrc={header_image ? header_image.filename : illustrationCourses} /> - + {tS('relatedContent.title')} { )} - + {tS('relatedContent.title')} { alt={image.alt} src={image.filename} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'cover', }} diff --git a/guards/PartnerAdminGuard.tsx b/guards/PartnerAdminGuard.tsx index 9393259f..bdfdcfa2 100644 --- a/guards/PartnerAdminGuard.tsx +++ b/guards/PartnerAdminGuard.tsx @@ -6,6 +6,7 @@ import Link from '../components/common/Link'; import { useTypedSelector } from '../hooks/store'; import illustrationPerson4Peach from '../public/illustration_person4_peach.svg'; import { columnStyle } from '../styles/common'; +import { getImageSizes } from '../utils/imageSizes'; const containerStyle = { ...columnStyle, @@ -37,7 +38,7 @@ export function PartnerAdminGuard({ children }: { children: JSX.Element }) { alt={tS('alt.personTea')} src={illustrationPerson4Peach} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/guards/SuperAdminGuard.tsx b/guards/SuperAdminGuard.tsx index 5ca2f587..8bad950b 100644 --- a/guards/SuperAdminGuard.tsx +++ b/guards/SuperAdminGuard.tsx @@ -6,6 +6,7 @@ import Link from '../components/common/Link'; import { useTypedSelector } from '../hooks/store'; import illustrationPerson4Peach from '../public/illustration_person4_peach.svg'; import { columnStyle } from '../styles/common'; +import { getImageSizes } from '../utils/imageSizes'; const containerStyle = { ...columnStyle, @@ -35,7 +36,7 @@ export function SuperAdminGuard({ children }: { children: JSX.Element }) { alt={tS('alt.personTea')} src={illustrationPerson4Peach} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/guards/TherapyAccessGuard.tsx b/guards/TherapyAccessGuard.tsx index 9ca3f1ee..707d1e91 100644 --- a/guards/TherapyAccessGuard.tsx +++ b/guards/TherapyAccessGuard.tsx @@ -6,6 +6,7 @@ import Link from '../components/common/Link'; import { useTypedSelector } from '../hooks/store'; import illustrationPerson4Peach from '../public/illustration_person4_peach.svg'; import { columnStyle } from '../styles/common'; +import { getImageSizes } from '../utils/imageSizes'; const containerStyle = { ...columnStyle, @@ -39,7 +40,7 @@ export function TherapyAccessGuard({ children }: { children: JSX.Element }) { alt={tS('alt.personTea')} src={illustrationPerson4Peach} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/package.json b/package.json index 94ac0101..a3cd5446 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dev": "next dev", "build": "next build", "start": "NODE_OPTIONS='-r @newrelic/next' next start", - "https:proxy": "local-ssl-proxy --source 3010 --target 3001 --cert localhost.pem --key localhost-key.pem", + "https:proxy": "local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem", "lint": "next lint", "lint:fix": "next lint --fix", "type-check": "tsc -p tsconfig.json", diff --git a/pages/404.tsx b/pages/404.tsx index abf400bd..f67b9cd7 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -8,6 +8,7 @@ import LoadingContainer from '../components/common/LoadingContainer'; import { useTypedSelector } from '../hooks/store'; import bloomHead from '../public/illustration_bloom_head.svg'; import { columnStyle } from '../styles/common'; +import { getImageSizes } from '../utils/imageSizes'; const containerStyle = { ...columnStyle, @@ -38,7 +39,12 @@ const Custom404: NextPage = () => { {`${t('404.title')} • Bloom`} - {t('alt.bloomLogo')} + {t('alt.bloomLogo')} {t('404.title')} diff --git a/pages/500.tsx b/pages/500.tsx index 781d3654..35779c1a 100644 --- a/pages/500.tsx +++ b/pages/500.tsx @@ -8,6 +8,7 @@ import LoadingContainer from '../components/common/LoadingContainer'; import { useTypedSelector } from '../hooks/store'; import bloomHead from '../public/illustration_bloom_head.svg'; import { columnStyle } from '../styles/common'; +import { getImageSizes } from '../utils/imageSizes'; const Custom500: NextPage = () => { const t = useTranslations('Shared'); @@ -38,7 +39,12 @@ const Custom500: NextPage = () => { {`${t('500.title')} • Bloom`} - {t('alt.bloomHead')} + {t('alt.bloomHead')} {t('500.title')} diff --git a/pages/account/apply-a-code.tsx b/pages/account/apply-a-code.tsx index 616ff809..76ea6b55 100644 --- a/pages/account/apply-a-code.tsx +++ b/pages/account/apply-a-code.tsx @@ -12,6 +12,7 @@ import { PartnerContent, getAllPartnersContent } from '../../constants/partners' import { useTypedSelector } from '../../hooks/store'; import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg'; import { rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; const containerStyle = { @@ -110,7 +111,7 @@ const ApplyACode: NextPage = () => { alt={tS(partner.logoAlt)} src={partner.logo} fill - sizes="100vw" + sizes={getImageSizes(logoContainerStyle.maxWidth)} style={{ objectFit: 'contain', }} diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx index e9ad9fa3..6ab566f0 100644 --- a/pages/auth/login.tsx +++ b/pages/auth/login.tsx @@ -28,6 +28,7 @@ import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_ye import illustrationLeafMix from '../../public/illustration_leaf_mix.svg'; import welcomeToBloom from '../../public/welcome_to_bloom.svg'; import { rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; const containerStyle = { @@ -95,7 +96,12 @@ const Login: NextPage = () => { return ( <> - {tS('alt.leafMix')} + {tS('alt.leafMix')} {t('login.newUserTitle')} diff --git a/pages/auth/register.tsx b/pages/auth/register.tsx index e4754dd2..a08458d3 100644 --- a/pages/auth/register.tsx +++ b/pages/auth/register.tsx @@ -24,6 +24,7 @@ import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_ye import illustrationLeafMixDots from '../../public/illustration_leaf_mix_dots.svg'; import welcomeToBloom from '../../public/welcome_to_bloom.svg'; import { rowStyle } from '../../styles/common'; +import { getImageSizes } from '../../utils/imageSizes'; import logEvent, { getEventUserData } from '../../utils/logEvent'; const containerStyle = { @@ -131,7 +132,12 @@ const Register: NextPage = () => { return ( <> - {tS('alt.leafMixDots')} + {tS('alt.leafMixDots')} {!partnerContent && ( // Show the public bloom and all other partner's welcome page links @@ -160,7 +166,7 @@ const Register: NextPage = () => { alt={tS(partner.logoAlt)} src={partner.logo} fill - sizes="100vw" + sizes={getImageSizes(logoContainerStyle.maxWidth)} style={{ objectFit: 'contain', }} diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx index 828e7ec0..01ad2424 100644 --- a/pages/courses/index.tsx +++ b/pages/courses/index.tsx @@ -167,8 +167,8 @@ const CourseList: NextPage = ({ stories, conversations, shorts }) => { item xs={12} sm={6} - md={4} - lg={4} + md={6} + lg={6} height="100%" maxWidth="400px" key={course.id} diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx index aa7a7897..829bebe7 100644 --- a/pages/maintenance.tsx +++ b/pages/maintenance.tsx @@ -4,6 +4,7 @@ import { Box, Container, Typography } from '@mui/material'; import { useTranslations } from 'next-intl'; import Image from 'next/image'; import illustrationChange from '../public/illustration_change_peach.svg'; +import { getImageSizes } from '../utils/imageSizes'; const containerStyle = { textAlign: 'center', @@ -27,7 +28,7 @@ const Maintenance: NextPage = () => { alt={t('alt.change')} src={illustrationChange} fill - sizes="100vw" + sizes={getImageSizes(imageContainerStyle.width)} style={{ objectFit: 'contain', }} diff --git a/pages/messaging.tsx b/pages/messaging.tsx index 29486000..0d70402b 100644 --- a/pages/messaging.tsx +++ b/pages/messaging.tsx @@ -13,6 +13,7 @@ import { useTypedSelector } from '../hooks/store'; import IllustrationCourseDBR from '../public/illustration_course_dbr.svg'; import { rowStyle } from '../styles/common'; import { getStoryblokPageProps } from '../utils/getStoryblokPageProps'; +import { getImageSizes } from '../utils/imageSizes'; const messageRowStyle = { ...rowStyle, @@ -21,7 +22,7 @@ const messageRowStyle = { } as const; const imageContainerStyle = { - position: 'relative', // needed for next/image to fill the container + position: 'relative', width: { xs: '40%', md: 260 }, height: { xs: '40%', md: 260 }, } as const; @@ -76,7 +77,7 @@ const Message: NextPage = ({ story }) => { {tS('alt.personSitting')} { {t('faqHeader')} - {tS('alt.leafMix')} + {tS('alt.leafMix')} diff --git a/pages/therapy/confirmed-session.tsx b/pages/therapy/confirmed-session.tsx index b1de2194..f6cc2db2 100644 --- a/pages/therapy/confirmed-session.tsx +++ b/pages/therapy/confirmed-session.tsx @@ -86,16 +86,7 @@ const ConfirmedSession: NextPage = () => { {t('faqHeader')} - {tS('alt.leafMix')} + {tS('alt.leafMix')} { + const breakpoints: Record = { + xs: 0, + sm: 600, + md: 900, + lg: 1200, + xl: 1536, + }; + + const getSizes = (width: WidthSxProps): string[] => { + if (typeof width === 'object') { + return Object.entries(breakpoints) + .filter(([breakpoint]) => width[breakpoint as Breakpoint] !== undefined) + .map( + ([breakpoint, maxWidth]) => + `(max-width: ${maxWidth}px) ${width[breakpoint as Breakpoint]}`, + ); + } else { + return [`${width}`]; + } + }; + + return getSizes(width).join(', '); +};