Add new pyronear font

Author: fe51

package.json

@@ -15,11 +15,11 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/roboto": "^5.2.6",
+    "@fontsource/open-sans": "^5.2.6",
+    "@fontsource/open-sans-condensed": "^4.5.5",
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
     "@tanstack/react-query": "^5.82.0",
-    "@types/leaflet": "^1.9.20",
     "axios": "^1.10.0",
     "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
@@ -36,6 +36,7 @@
     "@eslint/js": "^9.30.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@types/leaflet": "^1.9.20",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.36.0",

pnpm-lock.yaml

@@ -1,7 +1,8 @@
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+import '@fontsource/open-sans/300.css';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/500.css';
+import '@fontsource/open-sans/700.css';
+import '@fontsource/open-sans-condensed/700.css';
 import './i18n';
 
 import { Box } from '@mui/material';

src/App.tsx

@@ -43,7 +43,7 @@ export const AlertImages = ({ sequence }: AlertImagesType) => {
           minHeight={35}
         >
           <Grid>
-            <Typography variant="h4">
+            <Typography variant="h2">
               {formatToTime(sequence.startedAt)}
             </Typography>
           </Grid>

src/components/Alerts/AlertDetails/AlertImages.tsx

@@ -30,7 +30,7 @@ export const AlertInfos = ({ sequence, sequences }: AlertInfosType) => {
     >
       <Grid container direction="column" spacing={2} height="100%">
         <Grid minHeight={35} container alignItems="center">
-          <Typography variant="h4">{t('titleDetails')}</Typography>
+          <Typography variant="h2">{t('titleDetails')}</Typography>
         </Grid>
 
         <Divider

src/components/Alerts/AlertDetails/AlertInfos.tsx

@@ -12,7 +12,9 @@ export const AlertInfosSection = ({
   const theme = useTheme();
   return (
     <Paper sx={{ padding: 1 }}>
-      <Typography fontSize="0.85rem">{title}</Typography>
+      <Typography variant="h4" fontSize="0.85rem">
+        {title}
+      </Typography>
       <Typography fontSize="0.85rem" color={theme.palette.secondaryText.main}>
         {children}
       </Typography>

src/components/Alerts/AlertDetails/AlertInfosSection.tsx

@@ -58,7 +58,7 @@ export const AlertCard = ({ isActive, setActive, alert }: AlertCardType) => {
             marginBottom={1}
           >
             <VideocamOutlinedIcon fontSize="small" />
-            <Typography variant="h4">{t('prefixCardDetection')}</Typography>
+            <Typography variant="h3">{t('prefixCardDetection')}</Typography>
           </Stack>
           {alert.sequences.map((sequence) => (
             <Grid

src/components/Alerts/AlertsList/AlertCard.tsx

@@ -20,15 +20,15 @@ export const AlertsList = ({
 
   return (
     <Grid direction="column" bgcolor={theme.palette.customBackground.light}>
-      <Grid minHeight="55px" sx={{ padding: 1, paddingTop: 2 }}>
-        <Typography variant="h3">
+      <Grid minHeight="55px" padding={{ xs: 1, sm: 2 }} alignContent="center">
+        <Typography variant="h2">
           {`${alerts.length.toString()} ${alerts.length <= 1 ? t('titleListSimple') : t('titleListPlural')}`}
         </Typography>
       </Grid>
       <Divider orientation="horizontal" flexItem />
       <Grid
         sx={{
-          padding: '1rem',
+          padding: { xs: 1, sm: 2 },
           overflowY: 'auto',
           height: 'calc(100vh - 64px - 55px)', // To get scroll on the alert cards list only (= 100% - topbar height - title height)
         }}

src/components/Alerts/AlertsList/AlertsList.tsx

@@ -40,13 +40,20 @@ export const theme = createTheme({
     },
   },
   typography: {
+    fontFamily: 'Open Sans',
     h1: {
       fontWeight: 700,
       fontSize: '1.5rem',
+      fontFamily: 'Open Sans Condensed',
     },
-    h3: {
-      fontWeight: 500,
+    h2: {
+      fontWeight: 700,
       fontSize: '1.3rem',
+      fontFamily: 'Open Sans Condensed',
+    },
+    h3: {
+      fontWeight: 600,
+      fontSize: '1rem',
     },
     h4: {
       fontWeight: 500,