From e00ddfb4e90c183edaf9ea4738c04ff2bdd185f6 Mon Sep 17 00:00:00 2001
From: ledouxm <martin.ledoux.pro@gmail.com>
Date: Fri, 15 Nov 2024 12:52:35 +0100
Subject: [PATCH] feat(picture edition): add desktop layout

---
 .../src/features/upload/DrawingCanvas.tsx     |  6 +--
 .../src/features/upload/UploadImage.tsx       | 41 ++++++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/features/upload/DrawingCanvas.tsx b/packages/frontend/src/features/upload/DrawingCanvas.tsx
index 9089d31..932a646 100644
--- a/packages/frontend/src/features/upload/DrawingCanvas.tsx
+++ b/packages/frontend/src/features/upload/DrawingCanvas.tsx
@@ -287,7 +287,7 @@ export const ImageCanvas = ({
           disabled={lines.length === 0}
           <i className={fr.cx("fr-icon--md", "ri-arrow-go-back-line")} />
 */}
-      <Stack pos="absolute" top="26px" right="16px" gap="18px" flexDir="row" alignItems="center">
+      <Stack pos="absolute" top="26px" right={{ base: "16px" }} gap="18px" flexDir="row" alignItems="center">
         {/* @ts-ignore */}
         <Button
           className={css({ bgColor: "white" })}
@@ -304,7 +304,7 @@ export const ImageCanvas = ({
         </Button>
       </Stack>
 
-      <styled.div flex="1" border="1px solid #e5e7eb" borderRadius="0.25rem" overflow="hidden">
+      <styled.div flex="1" borderRadius="0.25rem" overflow="hidden">
         <styled.canvas
           ref={canvasRef}
           onMouseDown={handleMouseDown}
@@ -320,7 +320,7 @@ export const ImageCanvas = ({
         />
       </styled.div>
       <Flex justifyContent="center" alignItems="center">
-        <Stack gap="20px" flexDir="row" justifyContent="center" alignItems="center" p="18px">
+        <Stack gap="14px" flexDir="row" justifyContent="center" alignItems="center" p="18px">
           {colors.map((color) => (
             <styled.button
               type="button"
diff --git a/packages/frontend/src/features/upload/UploadImage.tsx b/packages/frontend/src/features/upload/UploadImage.tsx
index d2b81fd..b9ad70e 100644
--- a/packages/frontend/src/features/upload/UploadImage.tsx
+++ b/packages/frontend/src/features/upload/UploadImage.tsx
@@ -10,7 +10,7 @@ import {
   syncImages,
   syncPictureLines,
 } from "../idb";
-import { Box, Flex, Grid, Stack, styled } from "#styled-system/jsx";
+import { Box, Center, Flex, Grid, Stack, styled } from "#styled-system/jsx";
 import { InputGroup } from "#components/InputGroup.tsx";
 import { cx } from "#styled-system/css";
 import { Tmp_pictures, Pictures, Report } from "@cr-vif/electric-client/frontend";
@@ -115,7 +115,6 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
   return (
     <>
       <styled.div
-        ref={containerRef}
         display={selectedPicture ? "initial" : "none"}
         zIndex="1000"
         pos="fixed"
@@ -123,20 +122,32 @@ export const UploadImage = ({ reportId }: { reportId: string }) => {
         left="0"
         right="0"
         bottom="0"
-        w="100%"
-        h={{ base: "100vh" }}
-        bgColor="white"
+        w="100vw"
+        h="100vh"
+        // w={{ base: "100%", lg: "634px" }}
+        // h={{ base: "100vh", lg: "792px" }}
       >
-        {selectedPicture ? (
-          <ImageCanvas
-            closeModal={() => setSelectedPicture(null)}
-            notifyPictureLines={notifyPictureLines.mutate}
-            pictureId={selectedPicture.id}
-            url={selectedPicture.url}
-            containerRef={containerRef}
-            lines={linesQuery.data}
-          />
-        ) : null}
+        <styled.div pos="fixed" top="0" left="0" right="0" bottom="0" bgColor="rgba(0, 0, 0, 0.5)"></styled.div>
+        <Center w="100%" h="100%">
+          <styled.div
+            ref={containerRef}
+            position="relative"
+            w={{ base: "100%", lg: "634px" }}
+            h={{ base: "100vh", lg: "792px" }}
+            bgColor="white"
+          >
+            {selectedPicture ? (
+              <ImageCanvas
+                closeModal={() => setSelectedPicture(null)}
+                notifyPictureLines={notifyPictureLines.mutate}
+                pictureId={selectedPicture.id}
+                url={selectedPicture.url}
+                containerRef={containerRef}
+                lines={linesQuery.data}
+              />
+            ) : null}
+          </styled.div>
+        </Center>
       </styled.div>
       <Button
         type="button"