From 23b76b85199318aae6e136017a348b66671372d0 Mon Sep 17 00:00:00 2001
From: LuizFNJ <luizfnj3103@gmail.com>
Date: Sat, 15 Feb 2025 22:45:24 +0100
Subject: [PATCH] Fixing broken icons into buttons

---
 src/components/ClaimReview/ClaimReviewDrawer.tsx  |  8 +++++---
 src/components/ClaimReview/ReportModelButtons.tsx | 14 ++++++++++----
 src/components/ImageUpload.tsx                    |  5 ++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ClaimReview/ClaimReviewDrawer.tsx b/src/components/ClaimReview/ClaimReviewDrawer.tsx
index 7bd54af4e..10d4fbb21 100644
--- a/src/components/ClaimReview/ClaimReviewDrawer.tsx
+++ b/src/components/ClaimReview/ClaimReviewDrawer.tsx
@@ -65,12 +65,14 @@ const ClaimReviewDrawer = () => {
                                 padding: "1rem",
                                 display: "flex",
                                 flexDirection: "column",
-                                justifyContent:"space-between"
+                                justifyContent: "space-between"
                             }}
                         >
                             <Grid item style={{ display: "flex", gap: 32 }}>
                                 <AletheiaButton
-                                    icon={<ArrowBackOutlined style={{marginRight:"10px"}} fontSize="small"/>}
+                                    startIcon={
+                                        <ArrowBackOutlined style={{ marginRight: "10px" }} fontSize="small" />
+                                    }
                                     onClick={() =>
                                         dispatch(actions.closeReviewDrawer())
                                     }
@@ -108,7 +110,7 @@ const ClaimReviewDrawer = () => {
                                         justifyContent: "center",
                                         gap: 8,
                                         alignItems: "center",
-                                        marginTop:"10px"
+                                        marginTop: "10px"
                                     }}
                                 >
                                     <ErrorOutlineOutlined
diff --git a/src/components/ClaimReview/ReportModelButtons.tsx b/src/components/ClaimReview/ReportModelButtons.tsx
index f04ee0f9f..e128d283d 100644
--- a/src/components/ClaimReview/ReportModelButtons.tsx
+++ b/src/components/ClaimReview/ReportModelButtons.tsx
@@ -27,6 +27,12 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
         recreateMachine(event.currentTarget.id);
     };
 
+    const addIcon = (
+        <AddIcon
+            style={{ marginBottom: "5px" }}
+        />
+    );
+
     return (
         <Grid container
             style={{
@@ -51,7 +57,7 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
                                 <Button
                                     type={ButtonType.blue}
                                     onClick={toggleFormCollapse}
-                                    icon={<AddIcon />}
+                                    startIcon={addIcon}
                                     data-cy={
                                         "testAddInformativeNewsReviewButton"
                                     }
@@ -64,7 +70,7 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
                                 <Button
                                     type={ButtonType.blue}
                                     onClick={toggleFormCollapse}
-                                    icon={<AddIcon />}
+                                    startIcon={addIcon}
                                     data-cy={"testAddFactCheckReviewButton"}
                                     id={ReportModelEnum.FactChecking}
                                 >
@@ -78,7 +84,7 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
                             <Button
                                 type={ButtonType.blue}
                                 onClick={toggleFormCollapse}
-                                icon={<AddIcon />}
+                                startIcon={addIcon}
                                 data-cy={"testAddFactCheckReviewButton"}
                                 id={ReportModelEnum.FactChecking}
                             >
@@ -89,7 +95,7 @@ const ReportModelButtons = ({ setFormCollapsed }) => {
                             <Button
                                 type={ButtonType.blue}
                                 onClick={toggleFormCollapse}
-                                icon={<AddIcon />}
+                                startIcon={addIcon}
                                 data-cy={
                                     "testAddVerificationRequestReviewButton"
                                 }
diff --git a/src/components/ImageUpload.tsx b/src/components/ImageUpload.tsx
index 24731297b..d7737ec35 100644
--- a/src/components/ImageUpload.tsx
+++ b/src/components/ImageUpload.tsx
@@ -91,7 +91,10 @@ const ImageUpload = ({
     };
 
     const uploadButton = (
-        <AletheiaButton data-cy="testUploadImage" icon={<FileUploadOutlined style={{fontSize:"17px", margin:"0 5 4 0"}} />}>
+        <AletheiaButton
+            data-cy="testUploadImage"
+            startIcon={<FileUploadOutlined style={{ fontSize: "17px", margin: "0 5 4 0" }} />}
+        >
             {t("claimForm:fileInputButton")}
         </AletheiaButton>
     );