From 0ace7de603d25f4953831858612cb6e9d5c5b605 Mon Sep 17 00:00:00 2001
From: maxgfr <25312957+maxgfr@users.noreply.github.com>
Date: Mon, 14 Aug 2023 17:17:55 +0200
Subject: [PATCH] fix: font

---
 .../src/components/collapsible/index.js       |  2 +-
 .../src/components/documents/Actions.js       |  2 +-
 .../src/components/fiches-sp/addFicheForm.js  |  2 +-
 .../src/components/fiches-sp/selectActions.js |  2 +-
 .../src/components/glossary/TermForm.js       |  2 +-
 .../src/components/home/DuplicateItems.tsx    |  5 +--
 .../home/InvisibleLinkedDocument.tsx          |  5 +--
 .../src/components/home/UnThemedContent.tsx   |  7 ++--
 .../src/components/layout/UserMenu.tsx        |  2 +-
 .../src/components/layout/password.layout.js  |  4 +--
 .../frontend/src/components/login/index.js    | 36 +++++++++++--------
 .../components/prequalified/Prequalified.tsx  |  2 +-
 .../frontend/src/components/themes/Form.js    |  2 +-
 targets/frontend/src/components/user/List.js  |  2 +-
 .../src/components/user/PasswordForm.js       |  2 +-
 .../frontend/src/components/user/UserForm.js  |  2 +-
 .../frontend/src/pages/change_password.tsx    |  4 +--
 targets/frontend/src/pages/fichiers.js        |  2 +-
 .../src/pages/glossary/edit/[[...id]].js      |  2 +-
 targets/frontend/src/pages/index.tsx          |  4 +--
 targets/frontend/src/pages/login.js           |  4 +--
 targets/frontend/src/pages/reset_password.js  |  8 +++--
 .../frontend/src/pages/themes/edit/[id].js    |  2 +-
 targets/frontend/src/pages/unthemed.js        |  4 +--
 targets/frontend/src/theme.ts                 |  2 +-
 25 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/targets/frontend/src/components/collapsible/index.js b/targets/frontend/src/components/collapsible/index.js
index ee5842d35..21146daa1 100644
--- a/targets/frontend/src/components/collapsible/index.js
+++ b/targets/frontend/src/components/collapsible/index.js
@@ -19,7 +19,7 @@ export function Collapsible({ label, children, id, ...props }) {
         aria-controls={id}
         aria-expanded={isVisible}
         size="small"
-        variant="link"
+        variant="text"
         onClick={() => setVisible(!isVisible)}
       >
         <Inline space="xxsmall">
diff --git a/targets/frontend/src/components/documents/Actions.js b/targets/frontend/src/components/documents/Actions.js
index 31d34603f..1e80bde75 100644
--- a/targets/frontend/src/components/documents/Actions.js
+++ b/targets/frontend/src/components/documents/Actions.js
@@ -39,7 +39,7 @@ export function DocumentsListActions({ onUpdatePublication }) {
             <Button onClick={updatePublication} size="small">
               Modifier la publication des contenus
             </Button>
-            <Button variant="link" onClick={closePublishDialog} size="small">
+            <Button variant="text" onClick={closePublishDialog} size="small">
               Annuler
             </Button>
           </Inline>
diff --git a/targets/frontend/src/components/fiches-sp/addFicheForm.js b/targets/frontend/src/components/fiches-sp/addFicheForm.js
index 56584fc97..ad6e31e27 100644
--- a/targets/frontend/src/components/fiches-sp/addFicheForm.js
+++ b/targets/frontend/src/components/fiches-sp/addFicheForm.js
@@ -46,7 +46,7 @@ export function AddFicheSpForm({ onAdd }) {
   }
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Typography level="h3" sx={{ fontSize: "large", fontWeight: "600" }}>
+      <Typography variant="h3" sx={{ fontSize: "large", fontWeight: "600" }}>
         Ajouter des fiches
       </Typography>
       <p>{`Renseignez l’identifiant ${
diff --git a/targets/frontend/src/components/fiches-sp/selectActions.js b/targets/frontend/src/components/fiches-sp/selectActions.js
index 3594774b5..03e1faa6b 100644
--- a/targets/frontend/src/components/fiches-sp/selectActions.js
+++ b/targets/frontend/src/components/fiches-sp/selectActions.js
@@ -35,7 +35,7 @@ export function Actions({ onDelete }) {
             <Button onClick={deleteAction} size="small">
               Supprimer les fiches
             </Button>
-            <Button variant="link" onClick={closeDeleteDialog} size="small">
+            <Button variant="text" onClick={closeDeleteDialog} size="small">
               Annuler
             </Button>
           </Inline>
diff --git a/targets/frontend/src/components/glossary/TermForm.js b/targets/frontend/src/components/glossary/TermForm.js
index ae6e5855b..759e9e515 100644
--- a/targets/frontend/src/components/glossary/TermForm.js
+++ b/targets/frontend/src/components/glossary/TermForm.js
@@ -11,7 +11,7 @@ import { Lister } from "src/components/forms/Lister";
 import { MarkdownLink } from "src/components/MarkdownLink";
 import {
   Box,
-  Input as Field,
+  TextField as Field,
   InputLabel as Label,
   Textarea,
 } from "@mui/material";
diff --git a/targets/frontend/src/components/home/DuplicateItems.tsx b/targets/frontend/src/components/home/DuplicateItems.tsx
index 45359f763..b6c478b3c 100644
--- a/targets/frontend/src/components/home/DuplicateItems.tsx
+++ b/targets/frontend/src/components/home/DuplicateItems.tsx
@@ -6,6 +6,7 @@ import { RELATIONS } from "src/lib/relations";
 import { Card, CardContent, Typography } from "@mui/material";
 import { useQuery } from "urql";
 import { FixedSnackBar } from "../utils/SnackBar";
+import { theme } from "src/theme";
 
 export const getDuplicateQuery = `query duplicate($sources: [String!], $relationTypes: [String!]) {
   documents(
@@ -109,11 +110,11 @@ export function DuplicateContent(): JSX.Element | null {
         <CardContent>
           <Typography
             align="right"
-            color="secondary"
             variant="h2"
             sx={{
-              fontSize: "xxlarge",
+              fontSize: theme.fontSizes.xxlarge,
               fontWeight: "600",
+              color: theme.colors.secondary,
             }}
           >
             {duplicates.length}
diff --git a/targets/frontend/src/components/home/InvisibleLinkedDocument.tsx b/targets/frontend/src/components/home/InvisibleLinkedDocument.tsx
index 44d50d439..6f531bf3b 100644
--- a/targets/frontend/src/components/home/InvisibleLinkedDocument.tsx
+++ b/targets/frontend/src/components/home/InvisibleLinkedDocument.tsx
@@ -5,6 +5,7 @@ import { useQuery } from "urql";
 import { Card, CardContent, Typography } from "@mui/material";
 import { FixedSnackBar } from "../utils/SnackBar";
 import React from "react";
+import { theme } from "src/theme";
 
 export const getGhostDocumentQuery = gql`
   query ghostDocuments {
@@ -84,11 +85,11 @@ export function GhostLinkedDocuments(): JSX.Element | null {
         <CardContent>
           <Typography
             align="right"
-            color="secondary"
             variant="h2"
             sx={{
-              fontSize: "xxlarge",
+              fontSize: theme.fontSizes.xxlarge,
               fontWeight: "600",
+              color: theme.colors.secondary,
             }}
           >
             {data?.relations.length}
diff --git a/targets/frontend/src/components/home/UnThemedContent.tsx b/targets/frontend/src/components/home/UnThemedContent.tsx
index 0e711962e..35c97484b 100644
--- a/targets/frontend/src/components/home/UnThemedContent.tsx
+++ b/targets/frontend/src/components/home/UnThemedContent.tsx
@@ -5,6 +5,7 @@ import { useQuery } from "urql";
 import { Card, CardContent, Typography } from "@mui/material";
 import { FixedSnackBar } from "../utils/SnackBar";
 import React from "react";
+import { theme } from "src/theme";
 
 export const getUnthemedContentQuery = `
 query getUnthemed($themeSources: [String!]!) {
@@ -67,17 +68,17 @@ export function UnThemedContent() {
         <CardContent>
           <Typography
             align="right"
-            color="secondary"
             variant="h2"
             sx={{
-              fontSize: "xxlarge",
+              fontSize: theme.fontSizes.xxlarge,
               fontWeight: "600",
+              color: theme.colors.secondary,
             }}
           >
             {data.documents.length}
           </Typography>
 
-          <Typography sx={{ textAlign: "right" }}>
+          <Typography style={{ textAlign: "right" }}>
             Contenus non thémés
           </Typography>
         </CardContent>
diff --git a/targets/frontend/src/components/layout/UserMenu.tsx b/targets/frontend/src/components/layout/UserMenu.tsx
index a0ea98529..3d52b51b2 100644
--- a/targets/frontend/src/components/layout/UserMenu.tsx
+++ b/targets/frontend/src/components/layout/UserMenu.tsx
@@ -27,11 +27,11 @@ export function UserMenu() {
         >
           <IoMdContact style={{ fontSize: theme.fontSizes.icons }} />
           <Typography
-            color="heading"
             style={{
               fontWeight: theme.fontWeights.semibold,
               paddingLeft: theme.space.xsmall,
               paddingRight: theme.space.xsmall,
+              color: theme.colors.primary,
             }}
           >
             {user?.name}
diff --git a/targets/frontend/src/components/layout/password.layout.js b/targets/frontend/src/components/layout/password.layout.js
index b9586db21..9c4f3d623 100644
--- a/targets/frontend/src/components/layout/password.layout.js
+++ b/targets/frontend/src/components/layout/password.layout.js
@@ -19,8 +19,8 @@ export function PasswordLayout({ children, title }) {
           px="xxsmall"
           sx={{ flex: 1, justifyContent: "center", display: "flex" }}
         >
-          <Card sx={{ flexBasis: ["auto", "30em", "40em"] }}>
-            <Typography variant="h1">{title}</Typography>
+          <Card style={{ padding: "2rem", marginTop: "20px" }}>
+            <Typography variant="h3">{title}</Typography>
             <Stack>{children}</Stack>
           </Card>
         </Box>
diff --git a/targets/frontend/src/components/login/index.js b/targets/frontend/src/components/login/index.js
index 363498ac7..417d51539 100644
--- a/targets/frontend/src/components/login/index.js
+++ b/targets/frontend/src/components/login/index.js
@@ -1,9 +1,16 @@
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
-import { Box, Card, Input as Field, Typography, Alert } from "@mui/material";
+import {
+  Box,
+  Card,
+  TextField as Field,
+  Typography,
+  Alert,
+} from "@mui/material";
 
 import { Button } from "../button";
 import { Stack } from "../layout/Stack";
+import { theme } from "../../theme";
 
 const LoginForm = ({ authenticate, resetPassword, onSuccess }) => {
   const {
@@ -30,20 +37,15 @@ const LoginForm = ({ authenticate, resetPassword, onSuccess }) => {
     }
   };
   return (
-    <Box
-      sx={{
-        maxWidth: [null, "500px", "500px"],
-      }}
-    >
-      <Card
-        variant="compact"
-        sx={{ px: ["xsmall", "medium"], py: ["small", "large"] }}
-      >
+    <Box style={{ maxWidth: "500px" }}>
+      <Card variant="compact">
         <form onSubmit={handleSubmit(submit)}>
           <Stack>
-            <Typography variant="h1">Authentification</Typography>
+            <Typography variant="h3" style={{ marginBottom: "40px" }}>
+              Authentification
+            </Typography>
             <Field
-              sx={{ fontWeight: "body" }}
+              sx={{ fontWeight: theme.fontWeights.body }}
               label="Adresse email"
               placeholder="ex: lionel@travail.gouv.fr"
               {...register("email", {
@@ -59,7 +61,7 @@ const LoginForm = ({ authenticate, resetPassword, onSuccess }) => {
               <Alert severity="error">{errors.email?.message}</Alert>
             )}
             <Field
-              sx={{ fontWeight: "body" }}
+              sx={{ fontWeight: theme.fontWeights.body, marginTop: "20px" }}
               label="Mot de passe"
               {...register("password", {
                 required: {
@@ -73,11 +75,15 @@ const LoginForm = ({ authenticate, resetPassword, onSuccess }) => {
             {errors.password && (
               <Alert severity="error">{errors.password?.message}</Alert>
             )}
-            <Button type="submit" disabled={isSubmitting}>
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              style={{ marginTop: "50px", marginBottom: "10px" }}
+            >
               Se connecter
             </Button>
             <Button
-              variant="link"
+              variant="text"
               size="small"
               title="Saisissez votre email pour récupérer votre mot de passe"
               onClick={resetPassword}
diff --git a/targets/frontend/src/components/prequalified/Prequalified.tsx b/targets/frontend/src/components/prequalified/Prequalified.tsx
index 9c23d15cd..7ca73fff0 100644
--- a/targets/frontend/src/components/prequalified/Prequalified.tsx
+++ b/targets/frontend/src/components/prequalified/Prequalified.tsx
@@ -7,7 +7,7 @@ import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { Fieldset } from "src/components/forms/Fieldset";
 import { Lister } from "src/components/forms/Lister";
 import { PrequalifiedContent } from "src/types";
-import { Input as Field, InputLabel } from "@mui/material";
+import { TextField as Field, InputLabel } from "@mui/material";
 
 import { ValidationBar } from "./ValidationBar";
 import { theme } from "src/theme";
diff --git a/targets/frontend/src/components/themes/Form.js b/targets/frontend/src/components/themes/Form.js
index 680d45384..364e55b5b 100644
--- a/targets/frontend/src/components/themes/Form.js
+++ b/targets/frontend/src/components/themes/Form.js
@@ -5,7 +5,7 @@ import { Button } from "src/components/button";
 import { ContentPicker } from "src/components/forms/ContentPicker/index";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { IconPicker } from "src/components/forms/IconPicker";
-import { Box, Input as Field, Label, Textarea } from "@mui/material";
+import { Box, TextField as Field, Label, Textarea } from "@mui/material";
 
 const ThemeForm = ({ parentId, onSubmit, loading = false, theme = {} }) => {
   const {
diff --git a/targets/frontend/src/components/user/List.js b/targets/frontend/src/components/user/List.js
index 4978a03f2..2c7351952 100644
--- a/targets/frontend/src/components/user/List.js
+++ b/targets/frontend/src/components/user/List.js
@@ -95,7 +95,7 @@ export function UserList() {
         <strong>{selectedUser?.email}</strong>
         <Inline>
           <Button onClick={onDeleteUser}>Supprimer l’utilisateur</Button>
-          <Button variant="link" onClick={close}>
+          <Button variant="text" onClick={close}>
             Annuler
           </Button>
         </Inline>
diff --git a/targets/frontend/src/components/user/PasswordForm.js b/targets/frontend/src/components/user/PasswordForm.js
index ace54fd51..9cd5eaa9d 100644
--- a/targets/frontend/src/components/user/PasswordForm.js
+++ b/targets/frontend/src/components/user/PasswordForm.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
 import { Button } from "src/components/button";
 import { useUser } from "src/hooks/useUser";
-import { Input as Field } from "@mui/material";
+import { TextField as Field } from "@mui/material";
 
 import { passwordValidation } from "../../lib/auth/auth.const";
 import { FormErrorMessage } from "../forms/ErrorMessage";
diff --git a/targets/frontend/src/components/user/UserForm.js b/targets/frontend/src/components/user/UserForm.js
index b1fbd8fc2..ebb0d618a 100644
--- a/targets/frontend/src/components/user/UserForm.js
+++ b/targets/frontend/src/components/user/UserForm.js
@@ -2,7 +2,7 @@ import Link from "next/link";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
 import { Button } from "src/components/button";
-import { Input as Field, Label, Select } from "@mui/material";
+import { TextField as Field, Label, Select } from "@mui/material";
 import { useQuery } from "urql";
 
 import { FormErrorMessage } from "../forms/ErrorMessage";
diff --git a/targets/frontend/src/pages/change_password.tsx b/targets/frontend/src/pages/change_password.tsx
index f7c1d800d..d00f5203f 100644
--- a/targets/frontend/src/pages/change_password.tsx
+++ b/targets/frontend/src/pages/change_password.tsx
@@ -33,12 +33,12 @@ export default function ChangePasswordPage() {
     return (
       <PasswordLayout title={title}>
         {activate ? (
-          <Typography sx={{ fontWeight: 300 }}>
+          <Typography style={{ fontWeight: 300 }}>
             Votre compte a été activé. Suivez le lien fourni pour vous
             connecter.
           </Typography>
         ) : (
-          <Typography sx={{ fontWeight: 300 }}>
+          <Typography style={{ fontWeight: 300 }}>
             Votre mot de passe a été ré-initialisé, suivez le lien fourni pour
             vous connecter.
           </Typography>
diff --git a/targets/frontend/src/pages/fichiers.js b/targets/frontend/src/pages/fichiers.js
index 70b5d911d..229bda2c6 100644
--- a/targets/frontend/src/pages/fichiers.js
+++ b/targets/frontend/src/pages/fichiers.js
@@ -20,7 +20,7 @@ import useSWR, { mutate } from "swr";
 import {
   Box,
   Card,
-  Input as Field,
+  TextField as Field,
   InputLabel as Label,
   Alert as Message,
   Select,
diff --git a/targets/frontend/src/pages/glossary/edit/[[...id]].js b/targets/frontend/src/pages/glossary/edit/[[...id]].js
index 281269210..0a50209e9 100644
--- a/targets/frontend/src/pages/glossary/edit/[[...id]].js
+++ b/targets/frontend/src/pages/glossary/edit/[[...id]].js
@@ -75,7 +75,7 @@ export function EditTermPage() {
                     <Inline>
                       <Button onClick={onDelete}>Confirmer</Button>
                       <Button
-                        variant="link"
+                        variant="text"
                         onClick={() => setShowDeleteConfirmation(false)}
                       >
                         Annuler
diff --git a/targets/frontend/src/pages/index.tsx b/targets/frontend/src/pages/index.tsx
index c7158ba2a..d0c5254c1 100644
--- a/targets/frontend/src/pages/index.tsx
+++ b/targets/frontend/src/pages/index.tsx
@@ -11,9 +11,7 @@ export function IndexPage() {
   return (
     <Layout title="Administration des contenus et gestion des alertes">
       <Stack>
-        <Typography variant="h2" sx={{ fontSize: "large" }}>
-          Tableau de bord
-        </Typography>
+        <Typography variant="h3">Tableau de bord</Typography>
         <Box sx={{ flexWrap: "wrap", gap: "2rem", display: "flex" }}>
           <UnThemedContent />
           <DuplicateContent />
diff --git a/targets/frontend/src/pages/login.js b/targets/frontend/src/pages/login.js
index d7936d3fa..2e8a20af9 100644
--- a/targets/frontend/src/pages/login.js
+++ b/targets/frontend/src/pages/login.js
@@ -35,13 +35,13 @@ export default function LoginPage() {
       </Head>
       <Header />
       <Box
-        sx={{
+        style={{
           alignItems: "center",
           display: "flex",
           minHeight: "90vh",
         }}
       >
-        <Box p="large" sx={{ flex: 1 }}>
+        <Box style={{ flex: 1, padding: "20px" }}>
           <LoginForm
             authenticate={authenticate}
             resetPassword={resetPassword}
diff --git a/targets/frontend/src/pages/reset_password.js b/targets/frontend/src/pages/reset_password.js
index 4845c3ff2..195bae59c 100644
--- a/targets/frontend/src/pages/reset_password.js
+++ b/targets/frontend/src/pages/reset_password.js
@@ -6,7 +6,7 @@ import { FormErrorMessage } from "src/components/forms/ErrorMessage";
 import { PasswordLayout } from "src/components/layout/password.layout";
 import { Stack } from "src/components/layout/Stack";
 import { request } from "src/lib/request";
-import { Input as Field } from "@mui/material";
+import { TextField as Field } from "@mui/material";
 
 export default function ResetPasswordPage() {
   const [success, setSuccess] = useState(false);
@@ -43,7 +43,7 @@ export default function ResetPasswordPage() {
   if (success) {
     return (
       <PasswordLayout title="Nouveau mot de passe">
-        <p sx={{ fontWeight: 300 }}>
+        <p style={{ fontWeight: 300 }}>
           Nous venons de vous envoyer un lien pour ré-initialiser votre mot de
           passe par mail. Vous pouvez consulter votre boîte mail et suivre les
           instructions pour définir un nouveau mot de passe.
@@ -80,7 +80,9 @@ export default function ResetPasswordPage() {
             })}
           />
           <FormErrorMessage errors={errors} fieldName="email" />
-          <Button disabled={hasError || loading}>Valider</Button>
+          <Button disabled={hasError || loading} style={{ marginTop: "30px" }}>
+            Valider
+          </Button>
         </Stack>
       </form>
     </PasswordLayout>
diff --git a/targets/frontend/src/pages/themes/edit/[id].js b/targets/frontend/src/pages/themes/edit/[id].js
index 26f68fc96..fb893bc93 100644
--- a/targets/frontend/src/pages/themes/edit/[id].js
+++ b/targets/frontend/src/pages/themes/edit/[id].js
@@ -149,7 +149,7 @@ export function EditThemePage() {
                 <Inline>
                   <Button onClick={onDelete}>Confirmer</Button>
                   <Button
-                    variant="link"
+                    variant="text"
                     onClick={() => setShowDeleteConfirmation(false)}
                   >
                     Annuler
diff --git a/targets/frontend/src/pages/unthemed.js b/targets/frontend/src/pages/unthemed.js
index 43055bb6a..c891f6bb0 100644
--- a/targets/frontend/src/pages/unthemed.js
+++ b/targets/frontend/src/pages/unthemed.js
@@ -82,9 +82,7 @@ export function UnthemedPage() {
           {documentsBySource.map(([source, documents]) => {
             return (
               <Stack key={source} gap="small">
-                <Typography variant="h2" p="0" sx={{ fontSize: "large" }}>
-                  {getLabelBySource(source)}
-                </Typography>
+                <Typography variant="h3">{getLabelBySource(source)}</Typography>
                 <List>
                   {documents.map(({ cdtnId, title, slug }) => (
                     <Li key={cdtnId}>
diff --git a/targets/frontend/src/theme.ts b/targets/frontend/src/theme.ts
index 1a2db59ad..5590a6aa6 100644
--- a/targets/frontend/src/theme.ts
+++ b/targets/frontend/src/theme.ts
@@ -237,4 +237,4 @@ export const theme = {
       py: "small",
     },
   },
-};
+} as const;