From f4cbe2447bf3c3dfe8e2556fb3e3615e0de75e9b Mon Sep 17 00:00:00 2001
From: fsoussand <fflloo98@me.com>
Date: Thu, 29 Feb 2024 14:14:53 +0100
Subject: [PATCH] improve code

---
 public/locales/en/common.json                 |  3 ++-
 public/locales/fr/common.json                 |  3 ++-
 src/components/ui/Cards/HelpCard/HelpCard.tsx | 27 ++++++++++---------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 06c623a..a53bfcd 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -41,7 +41,8 @@
         "body": "Cette page peut vous donner une idée du vécu d'une personne atteinte de dyslexie. La dyslexie est un trouble de la lecture qui touche entre 2.5% et 16% de la population. Si vous voulez faciliter la navigation pour vos utilisateurs, créer des composants très espacés, en faisant attention à la typographie que vous utilisez"
       }
     },
-    "ellipsis-reduce": "Reduce"
+    "ellipsis-reduce": "Reduce",
+    "ellipsis-expand": "Expand"
   },
   "product-category": {
     "fruit": "Fruit",
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
index 0787742..3aa0092 100644
--- a/public/locales/fr/common.json
+++ b/public/locales/fr/common.json
@@ -41,7 +41,8 @@
         "body": "Cette page peut vous donner une idée du vécu d'une personne atteinte de dyslexie. La dyslexie est un trouble de la lecture qui touche entre 2.5% et 16% de la population.Si vous voulez faciliter la navigation pour vos utilisateurs, créer des composants très espacés, en faisant attention à la typographie que vous utilisez."
       }
     },
-    "ellipsis-reduce": "Réduire"
+    "ellipsis-reduce": "Voir moins",
+    "ellipsis-expand": "Voir plus"
   },
   "product-category": {
     "fruit": "Fruit",
diff --git a/src/components/ui/Cards/HelpCard/HelpCard.tsx b/src/components/ui/Cards/HelpCard/HelpCard.tsx
index addc16a..a353473 100644
--- a/src/components/ui/Cards/HelpCard/HelpCard.tsx
+++ b/src/components/ui/Cards/HelpCard/HelpCard.tsx
@@ -6,7 +6,7 @@ interface IHelpCard {
   title: string;
   body: string;
   width?: string;
-  withEllipsis?: boolean;
+  withEllipsis: boolean;
 }
 
 interface IHelpCardsGroup {
@@ -14,18 +14,14 @@ interface IHelpCardsGroup {
   disability: string;
 }
 
-const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
+const HelpCard = ({ title, body, width, withEllipsis = false }: IHelpCard) => {
   const { t } = useTranslation();
 
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(!withEllipsis);
   const paperRef = useRef<HTMLDivElement>(null);
 
   const handleExpansionChange = () => {
     setExpanded(!expanded);
-    if (!expanded && paperRef.current) {
-      // Scroll to the top when expanding
-      paperRef.current.scrollTo({ top: 0, behavior: "smooth" });
-    }
   };
 
   return (
@@ -47,7 +43,6 @@ const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
         style={{
           height: expanded ? "auto" : "100px",
           overflow: "hidden",
-          position: "relative",
         }}
         ref={paperRef}
       >
@@ -62,11 +57,17 @@ const HelpCard = ({ title, body, width, withEllipsis }: IHelpCard) => {
         <Typography>{body}</Typography>
       </div>
       {withEllipsis && (
-        <Button onClick={handleExpansionChange}>
-          <Typography sx={{ fontWeight: "bold", color: "black" }}>
-            {expanded ? t("help-cards.ellipsis-reduce") : "..."}
-          </Typography>
-        </Button>
+        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+          <Button onClick={handleExpansionChange} sx={{ padding: 0 }}>
+            <Typography
+              sx={{ fontWeight: "bold", color: "black", fontSize: "0.8em" }}
+            >
+              {expanded
+                ? t("help-cards.ellipsis-reduce")
+                : t("help-cards.ellipsis-expand")}
+            </Typography>
+          </Button>
+        </Box>
       )}
     </Paper>
   );