fix(theme-ui): move component to mui on EditorialContent

targets/frontend/src/components/Roles.js → targets/frontend/src/components/Roles.tsx

@@ -1,5 +1,7 @@
-import { Badge, Message } from "theme-ui";
 import { useQuery } from "urql";
+import { FixedSnackBar } from "./utils/SnackBar";
+import React from "react";
+import { Chip } from "@mui/material";
 
 export const getRoleQuery = `
 query getRoles{
@@ -16,16 +18,14 @@ export function Roles() {
   if (fetching) return <p>loading</p>;
   if (error)
     return (
-      <Message>
-        <pre>{JSON.stringify(error, 0, 2)}</pre>
-      </Message>
+      <FixedSnackBar>
+        <pre>{JSON.stringify(error, null, 2)}</pre>
+      </FixedSnackBar>
     );
   return (
     <p>
-      {data.roles.map(({ role }) => (
-        <Badge as="span" variant="dark" key={role}>
-          {role}
-        </Badge>
+      {data.roles.map((role: string) => (
+        <Chip color="success" key={role} label={role} />
       ))}
     </p>
   );

targets/frontend/src/components/alerts/AlertTabs.tsx

@@ -1,10 +1,12 @@
 import Link from "next/link";
 import PropTypes from "prop-types";
 import { getStatusLabel, slugifyRepository } from "src/models";
-import { Message, Spinner } from "theme-ui";
+import { Spinner } from "theme-ui";
 import { useQuery } from "urql";
 
 import { TabItem, Tabs } from "../tabs";
+import { FixedSnackBar } from "../utils/SnackBar";
+import React from "react";
 
 const countAlertByStatusQuery = `
 query getAlerts($repository: String!) {
@@ -42,8 +44,11 @@ export function AlertTabs({
   }
 
   if (error) {
-    console.error(error);
-    return <Message>{error}</Message>;
+    return (
+      <FixedSnackBar>
+        <pre>{JSON.stringify(error, null, 2)}</pre>
+      </FixedSnackBar>
+    );
   }
 
   return (

targets/frontend/src/components/contributions/answers/Answer.tsx

@@ -165,28 +165,26 @@ export const ContributionsAnswer = ({
                 />
               </FormControl>
               {answer && !isCodeDuTravail(answer) && (
-                <FormControl>
-                  <FormRadioGroup
-                    name="otherAnswer"
-                    label="Type de réponse"
-                    control={control}
-                    disabled={isNotEditable(answer)}
-                    options={[
-                      {
-                        label: "Afficher la réponse",
-                        value: "ANSWER",
-                      },
-                      {
-                        label: "La convention collective ne prévoit rien",
-                        value: "NOTHING",
-                      },
-                      {
-                        label: "Nous n'avons pas la réponse",
-                        value: "UNKNOWN",
-                      },
-                    ]}
-                  />
-                </FormControl>
+                <FormRadioGroup
+                  name="otherAnswer"
+                  label="Type de réponse"
+                  control={control}
+                  disabled={isNotEditable(answer)}
+                  options={[
+                    {
+                      label: "Afficher la réponse",
+                      value: "ANSWER",
+                    },
+                    {
+                      label: "La convention collective ne prévoit rien",
+                      value: "NOTHING",
+                    },
+                    {
+                      label: "Nous n'avons pas la réponse",
+                      value: "UNKNOWN",
+                    },
+                  ]}
+                />
               )}
               {answer && !isCodeDuTravail(answer) && (
                 <KaliReferenceInput

targets/frontend/src/components/editorialContent/ContentSections.tsx

@@ -6,6 +6,7 @@ import { SortableContainer } from "react-sortable-hoc";
 import { Button } from "../button";
 import { List } from "../list";
 import { SortableSection } from "./Section";
+import { Box } from "@mui/material";
 
 const SortableSectionList = SortableContainer(
   ({ blocks, name, ...props }: any) => (
@@ -62,22 +63,26 @@ export function ContentSections({ name }: any) {
           move(oldIndex, newIndex);
         }}
       />
-      <Button
-        type="button"
-        size="small"
-        variant="secondary"
-        onClick={() => append({ blocks: [{ markdown: "", type: "markdown" }] })}
-      >
-        {/* todo refactor to a ButtonWithicon since sx props not working */}
-        <IoMdAdd
-          sx={{
-            height: "iconSmall",
-            mr: "xsmall",
-            width: "iconSmall",
-          }}
-        />
-        Ajouter une section supplémentaire
-      </Button>
+      <Box sx={{ mt: "1rem" }}>
+        <Button
+          type="button"
+          size="small"
+          variant="secondary"
+          onClick={() =>
+            append({ blocks: [{ markdown: "", type: "markdown" }] })
+          }
+        >
+          {/* todo refactor to a ButtonWithicon since sx props not working */}
+          <IoMdAdd
+            sx={{
+              height: "iconSmall",
+              mr: "xsmall",
+              width: "iconSmall",
+            }}
+          />
+          Ajouter une section
+        </Button>
+      </Box>
     </div>
   );
 }