refactor: Remove unused Alert component and update video title in Tim…

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

@@ -35,13 +35,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" 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

@@ -6,9 +6,9 @@
 import { FormControlLabel, Switch } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import CircularProgress from '@mui/material/CircularProgress'
 import axios from 'axios'
 import Typography from '@mui/material/Typography'
 import Alert from '@mui/material/Alert'
 import { PageContainer } from '../components/PageContainer'
 import { Row } from '../components/Row'
 import { Label } from '../components/Label'
@@ -22,6 +22,9 @@
 import { getRoutesAsync } from '../../api/gtfsService'
 import { DateSelector } from '../components/DateSelector'
 import DisplayGapsPercentage from '../components/DisplayGapsPercentage'
+import axios from 'axios'
+import Typography from '@mui/material/Typography'
+import InfoYoutubeModal from '../components/YoutubeModal'
 import { INPUT_SIZE } from 'src/resources/sizes'
 
 const Cell = styled.div`
@@ -116,12 +119,14 @@
 
   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" 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 Grid from '@mui/material/Unstable_Grid2' // Grid version 2
@@ -181,15 +181,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" 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

@@ -1,13 +1,13 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import moment from 'moment'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import Typography from '@mui/material/Typography'
 import Alert from '@mui/material/Alert'
 import CircularProgress from '@mui/material/CircularProgress'
 import { PageContainer } from '../components/PageContainer'
 import { SearchContext, TimelinePageState } from '../../model/pageState'
 import { NotFound } from '../components/NotFound'
 import { DateSelector } from '../components/DateSelector'
 import LineNumberSelector from 'src/pages/components/LineSelector'
@@ -24,8 +24,17 @@
 import RouteSelector from 'src/pages/components/RouteSelector'
 import { Label } from 'src/pages/components/Label'
 import StopSelector from 'src/pages/components/StopSelector'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
 import { getSiriStopHitTimesAsync } from 'src/api/siriService'
 import { TimelineBoard } from 'src/pages/components/timeline/TimelineBoard'
+import { PageContainer } from '../components/PageContainer'
+import { SearchContext, TimelinePageState } from '../../model/pageState'
+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 +149,14 @@
 
   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" icon={false}>
-        {t('timeline_page_description')}
-      </Alert>
-
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
         <Grid xs={4} className="hideOnMobile">

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" 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}