fix: theme ui

SocialGouv · Aug 14, 2023 · 3004f4d · 3004f4d
1 parent 0ace7de
commit 3004f4d
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 17 deletions.
diff --git a/targets/frontend/src/components/forms/ErrorMessage.js b/targets/frontend/src/components/forms/ErrorMessage.js
@@ -1,13 +1,16 @@
 import { ErrorMessage } from "@hookform/error-message";
 import PropTypes from "prop-types";
 import { Box } from "@mui/material";
+import { theme } from "src/theme";
 
 export function FormErrorMessage({ errors = {}, fieldName }) {
   return (
     <ErrorMessage
       errors={errors}
       name={fieldName}
-      render={({ message }) => <Box sx={{ color: "critical" }}>{message}</Box>}
+      render={({ message }) => (
+        <Box sx={{ color: theme.colors.critical }}>{message}</Box>
+      )}
     />
   );
 }

diff --git a/targets/frontend/src/components/layout/Inline.js b/targets/frontend/src/components/layout/Inline.js
@@ -17,7 +17,11 @@ export function Inline({
     <Box
       {...props}
       as={component}
-      sx={{ alignItems: "center", flexWrap: "wrap", display: "flex" }}
+      sx={{
+        alignItems: "center",
+        flexWrap: "wrap",
+        display: "flex",
+      }}
       marginLeft={negativeSpace}
       marginTop={negativeSpace}
     >

diff --git a/targets/frontend/src/components/layout/Stack.js b/targets/frontend/src/components/layout/Stack.js
@@ -1,12 +1,13 @@
 import { Box } from "@mui/material";
 
 import { spacePropTypes } from "./spaces";
+import { theme } from "src/theme";
 
-export function Stack({ gap = "medium", ...props }) {
+export function Stack({ gap = theme.space.medium, ...props }) {
   return (
     <Box
       {...props}
-      sx={{
+      style={{
         display: "grid",
         gridGap: gap,
       }}

diff --git a/targets/frontend/src/components/layout/UserMenu.tsx b/targets/frontend/src/components/layout/UserMenu.tsx
@@ -31,7 +31,6 @@ export function UserMenu() {
               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/user/UserForm.js b/targets/frontend/src/components/user/UserForm.js
@@ -60,7 +60,7 @@ export function UserForm({
         </div>
         {isAdmin && (
           <div>
-            <Label>Role</Label>
+            <p>Role</p>
             <Select
               {...register("default_role")}
               defaultValue={user?.roles[0].role}

diff --git a/targets/frontend/src/pages/user/account.js b/targets/frontend/src/pages/user/account.js
@@ -1,12 +1,12 @@
 import Link from "next/link";
 import { Button } from "src/components/button";
 import { Layout } from "src/components/layout/auth.layout";
-import { Inline } from "src/components/layout/Inline";
 import { Stack } from "src/components/layout/Stack";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
 import { useUser } from "src/hooks/useUser";
 import { InputLabel as Label } from "@mui/material";
+import { Box } from "@mui/material";
 
 export function UserPage() {
   const { user } = useUser();
@@ -27,22 +27,26 @@ export function UserPage() {
             <Label>role</Label>
             <p>{user.roles[0].role}</p>
           </div>
-          <Inline>
+          <Box
+            style={{
+              marginTop: "20px",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
             <Link href="/user/edit" passHref style={{ textDecoration: "none" }}>
-              <Button size="small" variant="primary">
-                Modifier mes informations
-              </Button>
+              <Button size="small">Modifier mes informations</Button>
             </Link>
             <Link
               href="/user/password"
               passHref
-              style={{ textDecoration: "none" }}
+              style={{ textDecoration: "none", marginTop: "10px" }}
             >
-              <Button size="small" variant="secondary" outline>
+              <Button size="small" outline>
                 Modifier mon mot de passe
               </Button>
             </Link>
-          </Inline>
+          </Box>
         </Stack>
       )}
     </Layout>

diff --git a/targets/frontend/src/pages/user/edit/[id].js b/targets/frontend/src/pages/user/edit/[id].js
@@ -76,9 +76,6 @@ export function EditUserPage({ user }) {
     </Layout>
   );
 }
-EditUserPage.propTypes = {
-  user: PropTypes.object.isRequired,
-};
 
 EditUserPage.getInitialProps = async function ({ urqlClient, query }) {
   const { id } = query;