fix: some styles

betagouv · Aug 7, 2024 · 6f62f1e · 6f62f1e
1 parent 0a9eb76
commit 6f62f1e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 19 deletions.
diff --git a/packages/frontend/src/components/SyncForm.tsx b/packages/frontend/src/components/SyncForm.tsx
@@ -192,9 +192,17 @@ const syncFormBanner = sva({
       justifyContent: "flex-end",
       w: "100%",
       maxW: { base: "unset", sm: "800px" },
+      h: { base: "56px", lg: "unset" },
       px: "15px",
     },
-    back: { ml: "-10px", color: "black", _hover: { bgColor: "transparent" } },
+    back: {
+      ml: "-10px",
+      color: "black",
+      _hover: { bgColor: "transparent" },
+      "&::before": {
+        width: "24px !important",
+      },
+    },
     label: {},
     input: {
       w: { base: "100%", lg: "100%" },

diff --git a/packages/frontend/src/features/ReportActions.tsx b/packages/frontend/src/features/ReportActions.tsx
@@ -1,5 +1,5 @@
 import { css } from "#styled-system/css";
-import { Stack } from "#styled-system/jsx";
+import { Divider, Stack } from "#styled-system/jsx";
 import Button, { ButtonProps } from "@codegouvfr/react-dsfr/Button";
 import { forwardRef } from "react";
 import { useUser } from "../contexts/AuthContext";
@@ -42,21 +42,30 @@ export const ReportActions = forwardRef<HTMLDivElement, { report: ReportWithUser
   return (
     <Stack ref={ref} gap="0">
       {isOwner ? (
-        <ReportAction
-          iconId="ri-pencil-line"
-          label="Editer"
-          onClick={() => navigate({ to: "/edit/$reportId", params: { reportId: report.id } })}
-        />
+        <>
+          <ReportAction
+            iconId="ri-pencil-line"
+            label="Editer"
+            onClick={() => navigate({ to: "/edit/$reportId", params: { reportId: report.id } })}
+          />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       {isOwner ? (
-        <ReportAction
-          iconId="ri-delete-bin-2-line"
-          label="Supprimer"
-          onClick={() => deleteMutation.mutate(report.id)}
-        />
+        <>
+          <ReportAction
+            iconId="ri-delete-bin-2-line"
+            label="Supprimer"
+            onClick={() => deleteMutation.mutate(report.id)}
+          />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       {report.pdf ? (
-        <ReportAction iconId="ri-download-line" label="Télécharger" onClick={() => downloadPdfMutation.mutate()} />
+        <>
+          <ReportAction iconId="ri-download-line" label="Télécharger" onClick={() => downloadPdfMutation.mutate()} />
+          <Divider height="1px" color="#DDD" />
+        </>
       ) : null}
       <ReportAction iconId="ri-file-add-line" label="Dupliquer" onClick={() => duplicateMutation.mutate()} />
     </Stack>

diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -262,15 +262,17 @@ const ClauseList = ({ clauses, isEditing }: { clauses: ClauseWithIndex[]; isEdit
     <Stack>
       {Object.entries(groupedByKey).map(([key, clauses], index) => (
         <Fragment key={key}>
-          <Stack gap="24px">
+          <Stack gap="20px">
             <styled.span fontSize="20px" fontWeight="normal">
               {(clauseNameMap as any)[key] ?? key}
             </styled.span>
             {clauses.map((clause) => (
               <DivOrTextarea key={clause.id} clause={clause} isEditing={isEditing ?? false} />
             ))}
           </Stack>
-          {index < Object.keys(groupedByKey).length - 1 && <Divider height="1px" my="16px" color="#C1C1FB" />}
+          {index < Object.keys(groupedByKey).length - 1 && (
+            <Divider height="1px" my={{ base: "16px", lg: "30px" }} color="#C1C1FB" />
+          )}
         </Fragment>
       ))}
     </Stack>

diff --git a/packages/frontend/src/features/menu/MenuTitle.tsx b/packages/frontend/src/features/menu/MenuTitle.tsx
@@ -23,7 +23,7 @@ export const MenuTitle = ({
       justifyContent="space-between"
       alignItems="center"
       w="100%"
-      py="16px"
+      py={{ base: "16px", lg: "30px" }}
       // mt={{ base: "0", lg: "48px" }}
       // mb={{ base: "16px", lg: "48px" }}
       bgColor="white"
@@ -59,7 +59,7 @@ export const MenuTitle = ({
     </Flex>
     {alert ? alert : null}
     {!hideDivider ? (
-      <styled.div mb="24px">
+      <styled.div hideFrom="lg" mb="24px">
         {buttons ? (
           <styled.span hideFrom={"lg"} fontSize="20px" fontWeight="bold" nowrap>
             {children}

diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
@@ -42,7 +42,7 @@ export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => vo
   return (
     <>
       <MenuTitle backButtonOnClick={backButtonOnClick}>Partage des CR</MenuTitle>
-      <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
+      <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" />
 
       <Stack w="100%">
         <styled.div>Ces personnes peuvent créer, modifier et supprimer vos CR : </styled.div>

diff --git a/packages/frontend/src/features/text-editor/TextEditor.tsx b/packages/frontend/src/features/text-editor/TextEditor.tsx
@@ -30,8 +30,9 @@ export const textEditorClassName = css({
   minH: "160px",
   "& > div": {
     outline: "none",
+    borderRadius: "0 !important",
     roundedTop: "md",
-    borderWidth: "1px",
+    borderWidth: "0px",
     h: "100%",
     minH: "160px",
     maxHeight: "100%",