Home page links desciption

src/pages/components/YoutubeModal.tsx

@@ -29,12 +29,15 @@ const InfoYoutubeModal = ({ videoUrl, label, title }: InfoYoutubeModalProps) =>
         onCancel={() => {
           setVisible(false)
         }}>
-        <div className="modal-iframe-container">
-          <iframe allowFullScreen src={videoUrl} />
-        </div>
+        {videoUrl.includes('youtube') ? (
+          <div className="modal-iframe-container">
+            <iframe allowFullScreen src={videoUrl} />
+          </div>
+        ) : (
+          <></>
+        )}
       </Modal>
     </>
   )
 }
-
 export default InfoYoutubeModal

src/pages/dashboard/DashboardPage.tsx

@@ -36,13 +36,10 @@ const DashboardPage = () => {
         {t('dashboard_page_title')}
         <InfoYoutubeModal
           label="Open video about this page"
-          title={t('youtube_modal_info_title')}
+          title={t('dashboard_page_description')}
           videoUrl="https://www.youtube.com/embed/bXg50_j_hTA?si=4rpSZwMRbMomE4g1"
         />
       </Typography>
-      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
-        {t('dashboard_page_description')}
-      </Alert>
       {startDate > endDate ? (
         <Alert severity="error" variant="outlined" sx={{ bgcolor: '#feeaea' }}>
           {t('bug_date_alert')}

src/pages/gaps/index.tsx

@@ -22,7 +22,7 @@ import { INPUT_SIZE } from 'src/resources/sizes'
 import DisplayGapsPercentage from '../components/DisplayGapsPercentage'
 import axios from 'axios'
 import Typography from '@mui/material/Typography'
-import Alert from '@mui/material/Alert'
+import InfoYoutubeModal from '../components/YoutubeModal'
 
 const Cell = styled.div`
   width: 120px;
@@ -116,12 +116,14 @@ const GapsPage = () => {
 
   return (
     <PageContainer>
-      <Typography className="page-title" variant="h4">
+      <Typography variant="h4" className="page-title">
         {t('gaps_page_title')}
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('gaps_page_description')}
+          videoUrl=""
+        />
       </Typography>
-      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
-        {t('gaps_page_description')}
-      </Alert>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
         <Grid xs={4}>

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
 import { Moment } from 'moment'
-import { Skeleton, Radio, RadioChangeEvent, Space } from 'antd'
+import { Skeleton, Radio, RadioChangeEvent } from 'antd'
 import CircularProgress from '@mui/material/CircularProgress'
 import moment from 'moment/moment'
 import { useDate } from '../components/DateTimePicker'
@@ -180,15 +180,10 @@ const GapsPatternsPage = () => {
         {t('gaps_patterns_page_title')}
         <InfoYoutubeModal
           label={t('open_video_about_this_page')}
-          title={t('youtube_modal_info_title')}
+          title={t('gaps_patterns_page_description')}
           videoUrl="https://www.youtube-nocookie.com/embed?v=-C_rZlbHBmk&list=PL6Rh06rT7uiX1AQE-lm55hy-seL3idx3T&index=4"
         />
       </Typography>
-      <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
-        <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
-          {t('gaps_patterns_page_description')}
-        </Alert>
-      </Space>
       {startDate > endDate ? (
         <Alert severity="error" variant="outlined" sx={{ bgcolor: '#feeaea' }}>
           {t('bug_date_alert')}

src/pages/historicTimeline/index.tsx

@@ -16,7 +16,6 @@ import { Label } from 'src/pages/components/Label'
 import { useTranslation } from 'react-i18next'
 import StopSelector from 'src/pages/components/StopSelector'
 import Typography from '@mui/material/Typography'
-import Alert from '@mui/material/Alert'
 import CircularProgress from '@mui/material/CircularProgress'
 import { getSiriStopHitTimesAsync } from 'src/api/siriService'
 import { TimelineBoard } from 'src/pages/components/timeline/TimelineBoard'
@@ -26,6 +25,7 @@ import { NotFound } from '../components/NotFound'
 import moment from 'moment'
 import { DateSelector } from '../components/DateSelector'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
+import InfoYoutubeModal from '../components/YoutubeModal'
 
 const StyledTimelineBoard = styled(TimelineBoard)`
   margin-top: ${MARGIN_MEDIUM * 3}px;
@@ -140,14 +140,15 @@ const TimelinePage = () => {
 
   return (
     <PageContainer>
-      <Typography variant="h4" gutterBottom>
+      <Typography variant="h4" className="page-title">
         {t('timeline_page_title')}
+        <InfoYoutubeModal
+          label={t('open_video_about_this_page')}
+          title={t('timeline_page_description')}
+          videoUrl=""
+        />
       </Typography>
 
-      <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
-        {t('timeline_page_description')}
-      </Alert>
-
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
         <Grid xs={4} className="hideOnMobile">

src/pages/homepage/HomePage.scss

@@ -1,69 +1,67 @@
 .ant-layout {
-  position: relative;
+    position: relative;
 }
 
 .container {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  overflow: hidden;
-
-  img {
-    height: 15rem;
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  p {
-    margin-bottom: 3rem;
-    font-size: large;
-  }
-
-  footer {
-    background-color: #b0d0a4;
     width: 100%;
-    font-weight: 500;
-    position: absolute;
-    bottom: 0;
-    padding: 0.5rem 0;
-  }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    overflow: hidden;
+    img {
+        height: 15rem;
+    }
+    h1 {
+        margin: 0;
+    }
+    p {
+        margin-bottom: 2rem;
+        font-size: large;
+    }
+    footer {
+        background-color: #b0d0a4;
+        width: 100%;
+        font-weight: 500;
+        position: absolute;
+        bottom: 0;
+        padding: 0.5rem 0;
+    }
 }
 
 .links {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1rem;
-
-  @media (width <= 600px) {
-    margin-bottom: 3rem;
-  }
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    @media (width <=600px) {
+        margin-bottom: 3rem;
+    }
 }
 
 .page-link {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: medium;
-  font-weight: 600;
-  justify-content: space-between;
-
-  span {
-    margin-bottom: 0.5rem;
-  }
-
-  a {
-    background-color: #b74c42;
-    color: white;
-    padding: 0 1.5rem;
-    border-radius: 0.5rem;
-    transition: 0.2s ease-in-out 0s;
-
-    &:hover {
-      transform: scale(1.25);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: medium;
+    font-weight: 600;
+    svg {
+        margin-bottom: 0.3rem;
     }
-  }
-}
+    span {
+        margin-bottom: 0.3rem;
+    }
+    p {
+        font-size: small;
+        font-weight: 500;
+    }
+    a {
+        background-color: #b74c42;
+        color: white;
+        padding: 0 1.5rem;
+        border-radius: 0.5rem;
+        transition: 0.2s ease-in-out 0s;
+        &:hover {
+            transform: scale(1.25);
+        }
+    }
+}

src/pages/homepage/HomePage.tsx

@@ -20,14 +20,30 @@ export const HomePage = () => {
       <h2>{t('homepage.databus_definition')}</h2>
       <p>{t('homepage.website_goal')}</p>
       <section className="links">
-        <PageLink icon={<HistoryOutlined />} label={t('timeline_page_title')} to="/timeline" />
-        <PageLink icon={<DirectionsBusOutlined />} label={t('gaps_page_title')} to="/gaps" />
+        <PageLink
+          icon={<HistoryOutlined />}
+          label={t('timeline_page_title')}
+          description={t('timeline_page_description')}
+          to="/timeline"
+        />
+        <PageLink
+          icon={<DirectionsBusOutlined />}
+          label={t('gaps_page_title')}
+          description={t('gaps_page_description')}
+          to="/gaps"
+        />
         <PageLink
           icon={<ViewKanbanOutlined />}
           label={t('gaps_patterns_page_title')}
+          description={t('gaps_patterns_page_description')}
           to="/gaps_patterns"
         />
-        <PageLink icon={<MapOutlined />} label={t('time_based_map_page_title')} to="/map" />
+        <PageLink
+          icon={<MapOutlined />}
+          label={t('time_based_map_page_title')}
+          description={t('time_based_map_page_description')}
+          to="/map"
+        />
       </section>
       <footer>{`${t('homepage.copyright')} ${new Date().getFullYear()}`}</footer>
     </div>
@@ -37,10 +53,12 @@ export const HomePage = () => {
 const PageLink = ({
   icon,
   label,
+  description,
   to,
 }: {
   icon: React.ReactElement<SvgIconProps>
   label: string
+  description: string
   to: To
 }) => {
   const { t } = useTranslation()
@@ -50,6 +68,7 @@ const PageLink = ({
       {icon}
       <span>{label}</span>
       <NavLink to={to}>{t('homepage.show_button')}</NavLink>
+      <p>{description}</p>
     </div>
   )
 }

src/pages/timeBasedMap/index.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { useTranslation } from 'react-i18next'
-import Alert from '@mui/material/Alert'
 import Typography from '@mui/material/Typography'
 import CircularProgress from '@mui/material/CircularProgress'
 import IconButton from '@mui/material/IconButton'
@@ -102,20 +101,12 @@ export default function TimeBasedMapPage() {
         {t('time_based_map_page_title')}
         <InfoYoutubeModal
           label={t('open_video_about_this_page')}
-          title={t('youtube_modal_info_title')}
+          title={t('time_based_map_page_description')}
           videoUrl="https://www.youtube-nocookie.com/embed/bXg50_j_hTA?si=t8PiTrTA1budRZg-&amp;start=150"
         />
       </Typography>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
-        <Grid xs={12} className="hideOnMobile">
-          <Alert severity="info" variant="outlined" sx={{ bgcolor: '#eaf5fe' }} icon={false}>
-            {t('time_based_map_page_description')}
-          </Alert>
-        </Grid>
         {/* from date */}
-        <Grid xs={2} className="hideOnMobile">
-          <Label text={t('from_date')} />
-        </Grid>
         <Grid sm={5} xs={6}>
           <DateSelector
             time={to}