fix: image sizes + course grid (#1261)

chaynHQ · Jan 13, 2025 · 135f723 · 135f723
1 parent f38454f
commit 135f723
Show file tree

Hide file tree

Showing 41 changed files with 182 additions and 128 deletions.
diff --git 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
@@ -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) => {
               <Typography component="h3" variant="h3">
                 {course.content.name}
               </Typography>
-              {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (
-                <ProgressStatus status={courseProgress} />
-              )}
             </Box>
           </CardContent>
         </CardActionArea>
@@ -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) => {
           </Box>
         )}
 
+        {!!courseProgress && courseProgress !== PROGRESS_STATUS.NOT_STARTED && (
+          <ProgressStatus status={courseProgress} />
+        )}
+
         <IconButton
           sx={{ marginLeft: 'auto' }}
           aria-label={`${t('expandSummary')} ${course.content.name}`}

diff --git a/components/cards/RelatedContentCard.tsx b/components/cards/RelatedContentCard.tsx
@@ -6,7 +6,6 @@ import { RELATED_CONTENT_CATEGORIES } from '../../constants/enums';
 const cardStyle = {
   mt: 0,
   width: '100%',
-  height: '100%',
   mb: { xs: '1rem', sm: '1.5rem' },
   backgroundColor: 'paleSecondaryLight',
 } as const;
@@ -39,7 +38,7 @@ export const RelatedContentCard = (props: RelatedContentProps) => {
   return (
     <Card sx={cardStyle}>
       <CardActionArea href={href}>
-        <CardContent>
+        <CardContent sx={{ minHeight: 238 }}>
           <Box position="relative" width="100%" paddingRight={3}>
             <Box>
               <Typography sx={categoryStyle}>
@@ -48,7 +47,9 @@ export const RelatedContentCard = (props: RelatedContentProps) => {
                   <span className="before-dot">{` ${duration} ${t('minuteLabel')}`}</span>
                 )}
               </Typography>
-              <Typography variant="h3">{title}</Typography>
+              <Typography variant="h3" mb={0}>
+                {title}
+              </Typography>
             </Box>
             <ArrowForwardIos
               color="error"

diff --git a/components/cards/ShortsCard.tsx b/components/cards/ShortsCard.tsx
@@ -7,9 +7,9 @@ import Link from '../common/Link';
 const cardStyle = {
   mt: 0,
   width: '250px',
-  height: '100%',
   mb: { xs: '1rem', sm: '1.5rem' },
   backgroundColor: 'paleSecondaryLight',
+  flex: 0,
 } as const;
 
 interface ShortsCardProps {
@@ -40,9 +40,12 @@ export const ShortsCard = (props: ShortsCardProps) => {
 
   return (
     <Card sx={cardStyle}>
-      <CardActionArea component={Link} href={`/${href}`}>
+      <CardActionArea component={Link} href={`/${href}`} sx={{ height: '100%' }}>
         <CardContent
-          sx={{ padding: '0 !important', display: 'flex', flexDirection: 'column', gap: '1' }}
+          sx={{
+            minHeight: 335,
+            padding: '0 !important',
+          }}
         >
           <Box height="130px" position="relative" width="100%" overflow="hidden">
             <Image

diff --git a/components/common/ContentUnavailable.tsx b/components/common/ContentUnavailable.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image';
 import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
 import { columnStyle } from '../../styles/common';
 import { TextNode } from '../../utils/helper-types/translations';
+import { getImageSizes } from '../../utils/imageSizes';
 
 const accessContainerStyle = {
   ...columnStyle,
@@ -32,7 +33,7 @@ export const ContentUnavailable = ({ title, message }: ContentUnavailableProps)
           alt={t('alt.personTea')}
           src={illustrationPerson4Peach}
           fill
-          sizes="100vw"
+          sizes={getImageSizes(imageContainerStyle.width)}
           style={{
             objectFit: 'contain',
           }}

diff --git a/components/common/ImageTextColumn.tsx b/components/common/ImageTextColumn.tsx
@@ -1,6 +1,7 @@
 import { Box, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import Image, { StaticImageData } from 'next/image';
+import { getImageSizes } from '../../utils/imageSizes';
 
 export interface ImageTextItem {
   text: string;
@@ -28,7 +29,7 @@ const itemContainerStyle = {
 } as const;
 
 const imageContainerStyle = {
-  position: 'relative', // needed for next/image to fill the container
+  position: 'relative',
   width: 100,
   height: 100,
   paddingX: 5,
@@ -55,7 +56,7 @@ const ImageTextColumn = (props: ImageTextGridProps) => {
               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
@@ -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
@@ -15,15 +15,15 @@ const ProgressStatus = (props: ProgressStatusProps) => {
 
   if (status === PROGRESS_STATUS.STARTED) {
     return (
-      <Box sx={iconTextRowStyle}>
+      <Box sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
         <DonutLargeIcon color="error" />
         <Typography>{tS('started')}</Typography>
       </Box>
     );
   }
   if (status === PROGRESS_STATUS.COMPLETED) {
     return (
-      <Box sx={iconTextRowStyle}>
+      <Box sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
         <CheckCircleIcon color="error" />
         <Typography>{tS('completed')}</Typography>
       </Box>

diff --git 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<Theme> = {
   ...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
@@ -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<Theme> = {
   ...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
@@ -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: {}) => {
         <Image
           alt={tS('alt.cookieCat')}
           src={IllustrationCookieCat}
-          sizes="100vw"
+          sizes={getImageSizes(70)}
           style={{
             width: '100%',
             height: 'auto',

diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -18,6 +18,7 @@ import tiktokLogo from '../../public/tiktok.svg';
 
 import Cookies from 'js-cookie';
 import { rowStyle } from '../../styles/common';
+import { getImageSizes } from '../../utils/imageSizes';
 import logEvent, { getEventUserData } from '../../utils/logEvent';
 import Link from '../common/Link';
 
@@ -142,16 +143,7 @@ const Footer = () => {
     <>
       <Container sx={footerContainerStyle} component="footer">
         <Box width="100%" mb={3}>
-          <Image
-            alt={tS('alt.bloomLogo')}
-            src={bloomLogo}
-            width={140}
-            height={60}
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
-          />
+          <Image alt={tS('alt.bloomLogo')} src={bloomLogo} width={140} height={60} />
         </Box>
         <Box sx={footerContentRowStyle}>
           <Box sx={getDescriptionContainerStyle(partners.length)}>
@@ -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 = () => {
                           })
                         }
                       >
-                        <Image
-                          alt={tS('alt.tiktokLogo')}
-                          src={tiktokLogo}
-                          style={{
-                            maxWidth: '100%',
-                            height: 'auto',
-                          }}
-                        />
+                        <Image alt={tS('alt.tiktokLogo')} src={tiktokLogo} width={24} height={24} />
                       </IconButton>
                     )}
                     {partner.github && (
@@ -310,27 +295,14 @@ const Footer = () => {
         </Typography>
         <Box sx={fundingLogosContainerStyle}>
           <Link href="https://www.comicrelief.com/" position="relative" target="_blank">
-            <Image
-              alt={tS('alt.comicReliefLogo')}
-              src={comicReliefLogo}
-              width={88}
-              height={64}
-              style={{
-                maxWidth: '100%',
-                height: 'auto',
-              }}
-            />
+            <Image alt={tS('alt.comicReliefLogo')} src={comicReliefLogo} width={88} height={64} />
           </Link>
           <Link href="https://www.tnlcommunityfund.org.uk/" position="relative" target="_blank">
             <Image
               alt={tS('alt.communityFundLogo')}
               src={communityFundLogo}
               width={170}
               height={50}
-              style={{
-                maxWidth: '100%',
-                height: 'auto',
-              }}
             />
           </Link>
         </Box>

diff --git 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
@@ -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
@@ -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',