fix: refacto

SocialGouv · Aug 18, 2023 · 58fae59 · 58fae59
1 parent 1c43cc4
commit 58fae59
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 40 deletions.
diff --git a/targets/frontend/src/components/glossary/TermForm.js b/targets/frontend/src/components/glossary/TermForm.js
@@ -80,7 +80,7 @@ export const TermForm = ({ term = {} }) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <>
-        <Box mb="small">
+        <Box mb={theme.space.small}>
           <Field
             type="text"
             {...register("term", {
@@ -89,6 +89,7 @@ export const TermForm = ({ term = {} }) => {
             label="Terme"
             onChange={() => setDuplicateTermError(false)}
             defaultValue={term.term}
+            width="100%"
           />
           <FormErrorMessage errors={errors} fieldName="term" />
           {duplicateTermError && (
@@ -102,12 +103,13 @@ export const TermForm = ({ term = {} }) => {
           )}
         </Box>
 
-        <Box mb="small">
+        <Box mb={theme.space.small}>
           <Label htmlFor={"definition"}>
             Définition&nbsp;
             <MarkdownLink />
           </Label>
-          <Textarea
+          <textarea
+            className="fr-input"
             {...register("definition", {
               required: { message: "Ce champ est requis", value: true },
             })}
@@ -121,29 +123,29 @@ export const TermForm = ({ term = {} }) => {
           sx={{
             alignItems: "flex-start",
             flexWrap: "wrap",
-            gap: "small",
+            gap: theme.space.small,
             justifyContent: "stretch",
-            mb: "small",
+            mb: theme.space.small,
             display: "flex",
           }}
         >
-          <Fieldset title="Variantes / Synonymes" sx={{ flex: "1 1 auto" }}>
+          <Fieldset title="Variantes / Synonymes" style={{ flex: "1" }}>
             <Lister
               control={control}
               name="variants"
               id="variants"
               defaultValue={term.variants}
             />
           </Fieldset>
-          <Fieldset title="Abréviations" sx={{ flex: "1 1 auto" }}>
+          <Fieldset title="Abréviations" style={{ flex: "1" }}>
             <Lister
               control={control}
               name="abbreviations"
               id="abbreviations"
               defaultValue={term.abbreviations}
             />
           </Fieldset>
-          <Fieldset title="Références" sx={{ flex: "1 1 auto" }}>
+          <Fieldset title="Références" style={{ flex: "1" }}>
             <Lister
               control={control}
               name="references"
@@ -153,9 +155,11 @@ export const TermForm = ({ term = {} }) => {
           </Fieldset>
         </Box>
 
-        <Box sx={{ alignItems: "center", mt: "medium", display: "flex" }}>
+        <Box
+          sx={{ alignItems: "center", mt: theme.space.medium, display: "flex" }}
+        >
           <Button disabled={hasError || loading}>{buttonLabel}</Button>
-          <Link href="/glossary" passHref>
+          <Link href="/glossary" style={{ marginLeft: theme.space.small }}>
             Annuler
           </Link>
         </Box>

diff --git a/targets/frontend/src/components/glossary/TermList.js b/targets/frontend/src/components/glossary/TermList.js
@@ -10,7 +10,7 @@ const TermList = ({ termsByLetters = [] }) => {
     <Box
       sx={{
         flexWrap: "wrap",
-        gap: "xsmall",
+        gap: theme.space.xsmall,
         justifyContent: "stretch",
         display: "flex",
       }}
@@ -22,11 +22,10 @@ const TermList = ({ termsByLetters = [] }) => {
               key={letter}
               sx={{
                 border: "2px solid",
-                borderColor: "neutral",
-                borderRadius: "small",
+                borderRadius: theme.space.small,
                 flex: "1 0 auto",
               }}
-              p="xsmall"
+              p={theme.space.small}
             >
               <h2
                 id={`ancre-${letter}`}

diff --git a/targets/frontend/src/pages/glossary/index.js b/targets/frontend/src/pages/glossary/index.js
@@ -10,7 +10,7 @@ import { withUserProvider } from "src/hoc/UserProvider";
 import { useDebouncedState } from "src/hooks/";
 import {
   Box,
-  Input,
+  TextField,
   InputLabel as Label,
   CircularProgress,
 } from "@mui/material";
@@ -98,27 +98,14 @@ export function GlossaryPage() {
               {termsByLetters.map(({ letter, terms }) => (
                 <li key={`letter-${letter}`}>
                   {terms.length > 0 ? (
-                    <Link
+                    <a
                       href={`#ancre-${letter}`}
-                      sx={{
-                        fontSize: "large",
-                        textDecoration: "underline",
-                        ...linkStyles,
-                        padding: "xxsmall",
-                      }}
+                      className="fr-text--bold fr-m-2v fr-text--lg"
                     >
                       {letter}
-                    </Link>
+                    </a>
                   ) : (
-                    <p
-                      style={{
-                        color: theme.colors.muted,
-                        fontSize: theme.fontSizes.large,
-                        padding: theme.space.xxsmall,
-                      }}
-                    >
-                      {letter}
-                    </p>
+                    <p className="fr-m-2v fr-text--lg">{letter}</p>
                   )}
                 </li>
               ))}
@@ -136,17 +123,17 @@ export function GlossaryPage() {
                 sx={{
                   display: "inline-block",
                   fontSize: "medium",
-                  mr: "small",
+                  mr: theme.space.small,
                   width: "auto",
                 }}
               >
                 Rechercher un terme
               </Label>
-              <Input
+              <TextField
                 id="search"
                 name="search"
                 placeholder="renseignez le terme que vous cherchez ici"
-                sx={{ maxWidth: "400px" }}
+                sx={{ width: "450px" }}
                 onChange={(e) => {
                   setSearch(e.target.value);
                 }}
@@ -171,11 +158,6 @@ export function GlossaryPage() {
             ) : (
               <h2>Aucun terme trouvé</h2>
             )}
-            {!search && !isSearching && (
-              <div>
-                <AddATermButton />
-              </div>
-            )}
           </>
         )}
       </Stack>