From 53057b52ee979d5b7ecc6ca6d6cf33729317414a Mon Sep 17 00:00:00 2001
From: Antoine Lelong <azenoxe@gmail.com>
Date: Tue, 3 Dec 2024 11:04:43 +0100
Subject: [PATCH] fix: modal layout and design

---
 webapp/CHANGELOG.md                         |  5 +-
 webapp/src/components/modals/IssueModal.tsx | 98 ++++++++++-----------
 2 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md
index 0e4851c2..c4a57ba9 100644
--- a/webapp/CHANGELOG.md
+++ b/webapp/CHANGELOG.md
@@ -1,10 +1,9 @@
 ## [0.73.9](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.8...v0.73.9) (2024-12-03)
 
-
 ### Bug Fixes
 
-* merge changelog ([9a58849](https://github.com/SocialGouv/carte-jeune-engage/commit/9a58849770284d4ce7bbeb88d75b997f53c5aac0))
-* schedule reminder to 17h30 on wednesday ([77d01a4](https://github.com/SocialGouv/carte-jeune-engage/commit/77d01a42760743f8f2b3b3378c61ef9d9ebe26d1))
+- merge changelog ([9a58849](https://github.com/SocialGouv/carte-jeune-engage/commit/9a58849770284d4ce7bbeb88d75b997f53c5aac0))
+- schedule reminder to 17h30 on wednesday ([77d01a4](https://github.com/SocialGouv/carte-jeune-engage/commit/77d01a42760743f8f2b3b3378c61ef9d9ebe26d1))
 
 ## [0.73.8](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.73.7...v0.73.8) (2024-12-03)
 
diff --git a/webapp/src/components/modals/IssueModal.tsx b/webapp/src/components/modals/IssueModal.tsx
index 31ee37a8..2210afb9 100644
--- a/webapp/src/components/modals/IssueModal.tsx
+++ b/webapp/src/components/modals/IssueModal.tsx
@@ -123,10 +123,14 @@ const OrderIssueContent = ({
             <br />
             Que se passe-t-il ?
           </Text>
-          <RadioGroup display="flex" flexDir="column" gap={3.5} mt={8} px={4}>
+          <RadioGroup display="flex" flexDir="column" gap={3} mt={8}>
             {issues.map((cause) => (
               <Flex key={cause} alignItems="center">
-                <Radio value={cause} onChange={() => setSelectedCause(cause)}>
+                <Radio
+                  value={cause}
+                  onChange={() => setSelectedCause(cause)}
+                  gap={2}
+                >
                   <Text fontWeight={cause === selectedCause ? 800 : 500}>
                     {cause}
                   </Text>
@@ -199,57 +203,53 @@ const IssueModal = (props: IssueModalProps) => {
         ];
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="full">
+    <Modal isOpen={isOpen} onClose={onClose} isCentered={kind === "coupon"}>
       <ModalOverlay />
-      <ModalContent minH="full">
-        <ModalCloseButton />
-        <ModalBody display="flex" flexDir="column" px={8} pb={8} minH="full">
+      <ModalContent
+        mx={2.5}
+        mt={kind == "order" ? 5 : "auto"}
+        borderRadius="2.5xl"
+      >
+        <ModalCloseButton size="lg" top={4} right={4} />
+        <ModalBody display="flex" flexDir="column" px={9} pb={16} pt={4}>
           <OrderIssueContent kind={kind} id={id} issues={issues} />
           <Divider my={6} />
-          <Flex direction={"column"} gap={4} w="full">
-            <Flex direction={"column"} gap={4} mx={4}>
-              <ItemLink
-                onClick={() => setIsOpenCrisp(true)}
-                icon={HiMiniChatBubbleOvalLeftEllipsis}
-                text="Discutez avec nous en direct"
-              />
-              {kind === "order" && (
-                <>
-                  <Text
-                    my={2}
-                    fontSize={14}
-                    fontWeight={500}
-                    textAlign="center"
-                    color="disabled"
-                  >
-                    ou
+          <Flex direction="column" gap={4}>
+            <ItemLink
+              onClick={() => setIsOpenCrisp(true)}
+              icon={HiMiniChatBubbleOvalLeftEllipsis}
+              text="Discutez avec nous en direct"
+            />
+            {kind === "order" && (
+              <>
+                <Text
+                  my={2}
+                  fontSize={14}
+                  fontWeight={500}
+                  textAlign="center"
+                  color="disabled"
+                >
+                  ou
+                </Text>
+                <ItemLink
+                  href="telto:0472402828"
+                  icon={HiPhone}
+                  text="04 72 40 28 28"
+                />
+                <ItemLink
+                  href="mailto:serviceclient@reducce.fr"
+                  icon={HiEnvelope}
+                  text="serviceclient@reducce.fr"
+                />
+                <Flex direction="column" gap={4} fontSize={"sm"}>
+                  <Text fontWeight={500} textAlign="center" color="disabled">
+                    Disponible du lundi au vendredi de
+                    <br />
+                    09h à 12h30 puis de 14h à 17h30
                   </Text>
-                  <ItemLink
-                    href="telto:0472402828"
-                    icon={HiPhone}
-                    text="04 72 40 28 28"
-                  />
-                  <ItemLink
-                    href="mailto:serviceclient@reducce.fr"
-                    icon={HiEnvelope}
-                    text="serviceclient@reducce.fr"
-                  />
-                  <Flex
-                    direction="column"
-                    gap={4}
-                    fontSize={"sm"}
-                    mx={8}
-                    mt={3}
-                  >
-                    <Text textAlign="center" color="disabled">
-                      Disponible du lundi au vendredi de
-                      <br />
-                      09h à 12h30 puis de 14h à 17h30
-                    </Text>
-                  </Flex>
-                </>
-              )}
-            </Flex>
+                </Flex>
+              </>
+            )}
           </Flex>
         </ModalBody>
         {isOpenCrisp && user && (