Merge pull request #1821 from AletheiaFact/Fixing-broken-icons-into-b…

…uttons Fix broken icons into buttons
AletheiaFact · Feb 19, 2025 · 8269707 · 8269707
2 parents e6d5662 + 23b76b8
commit 8269707
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>
     );