🔧 Add language picker to the welcome modal

DLR-SC · Aug 30, 2024 · b0e2512 · b0e2512
1 parent b14a101
commit b0e2512
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/components/OnboardingComponents/WelcomeDialog/Slide.tsx b/frontend/src/components/OnboardingComponents/WelcomeDialog/Slide.tsx
@@ -30,7 +30,7 @@ export default function Slide({step, title, content, imageSrc}: SlideProps): JSX
     <>
       <Box
         sx={{
-          height: '200px',
+          height: '180px',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -40,8 +40,8 @@ export default function Slide({step, title, content, imageSrc}: SlideProps): JSX
           src={imageSrc}
           alt={`Illustration ${step + 1}`}
           style={{
-            maxWidth: '80%',
-            maxHeight: '80%',
+            maxWidth: '85%',
+            maxHeight: '85%',
             objectFit: 'cover',
           }}
         />
@@ -85,6 +85,8 @@ export default function Slide({step, title, content, imageSrc}: SlideProps): JSX
           maxWidth: '450px',
           maxHeight: '200px',
           margin: '0 auto',
+          overflow: 'hidden',
+          flexGrow: 1,
         }}
       >
         <Typography

diff --git a/frontend/src/components/OnboardingComponents/WelcomeDialog/WelcomeDialog.tsx b/frontend/src/components/OnboardingComponents/WelcomeDialog/WelcomeDialog.tsx
@@ -7,6 +7,7 @@ import {ArrowBackIos, ArrowForwardIos, Close as CloseIcon} from '@mui/icons-mate
 import {useTheme} from '@mui/material/styles';
 import Slide from './Slide';
 import TourChips from '../TourComponents/TourChipsList';
+import LanguagePicker from 'components/TopBar/LanguagePicker';
 
 interface WelcomeDialogProps {
   /** determines if the dialog is open or not */
@@ -39,6 +40,9 @@ interface WelcomeDialogProps {
   /** determines if the tour chips should be shown */
   showTourChips: boolean;
 
+  /** determines if the language picker should be shown */
+  showLanguagePicker: boolean;
+
   /** the text for the maybe later button */
   maybeLaterText: string;
 }
@@ -59,6 +63,7 @@ export default function WelcomeDialog({
   title,
   content,
   showTourChips,
+  showLanguagePicker,
   maybeLaterText,
 }: WelcomeDialogProps): JSX.Element {
   const theme = useTheme();
@@ -73,7 +78,7 @@ export default function WelcomeDialog({
         fullWidth
         sx={{
           '& .MuiDialog-paper': {
-            height: '600px',
+            height: '610px',
             padding: theme.spacing(4),
             display: 'flex',
             flexDirection: 'column',
@@ -93,6 +98,9 @@ export default function WelcomeDialog({
         >
           <CloseIcon />
         </Button>
+        <Box sx={{display: 'flex', justifyContent: 'center', minHeight: '40px'}}>
+          {showLanguagePicker && <LanguagePicker />}
+        </Box>
         <Slide step={step} title={title} content={content} imageSrc={images[step]} />
         <>
           {showTourChips && (

diff --git a/frontend/src/components/OnboardingComponents/WelcomeDialog/WelcomeDialogWrapper.tsx b/frontend/src/components/OnboardingComponents/WelcomeDialog/WelcomeDialogWrapper.tsx
@@ -81,12 +81,13 @@ export default function WelcomeDialogWrapper(): JSX.Element {
   /**
    * this useMemo gets the slide title, content, maybe later text and if the tour chips should be shown on the last slide
    */
-  const {slideTitle, slideContent, maybeLaterText, showTourChips} = useMemo(() => {
+  const {slideTitle, slideContent, maybeLaterText, showTourChips, showLanguagePicker} = useMemo(() => {
     const slideTitle = tOnboarding(`welcomeModalSlides.slide${step + 1}.title`);
     const slideContent = tOnboarding(`welcomeModalSlides.slide${step + 1}.content`);
     const maybeLaterText = tOnboarding('maybeLater');
     const showTourChips = step === numberOfSlides - 1;
-    return {slideTitle, slideContent, maybeLaterText, showTourChips};
+    const showLanguagePicker = step === 0;
+    return {slideTitle, slideContent, maybeLaterText, showTourChips, showLanguagePicker};
   }, [step, numberOfSlides, tOnboarding]);
 
   return (
@@ -101,6 +102,7 @@ export default function WelcomeDialogWrapper(): JSX.Element {
       title={slideTitle}
       content={slideContent}
       showTourChips={showTourChips}
+      showLanguagePicker={showLanguagePicker}
       maybeLaterText={maybeLaterText}
     />
   );