fix: font

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

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>

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 ${

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>

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

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}

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}

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>

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}

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>

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: [email protected]"
               {...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}

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

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 {

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>

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

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

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>

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,

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

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 />

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}

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>

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

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

targets/frontend/src/theme.ts

@@ -237,4 +237,4 @@ export const theme = {
       py: "small",
     },
   },
-};
+} as const;