Working on code cleanup

src/components/Cards/CreateOfferCard/CloseButton/CloseButton.js

+import React from "react";
+import PropTypes from "prop-types";
+import { CloseIcon } from "./CloseButton.styled";
+import { ReactComponent as CloseButtonIcon } from "../../../../assets/images/svg/close-modal.svg";
+
+const CloseButton = (props) => {
+  const closeModalHandler = () => {
+    props.closeCreateOfferModal(false);
+  };
+
+  return (
+    <CloseIcon onClick={closeModalHandler}>
+      <CloseButtonIcon />
+    </CloseIcon>
+  );
+};
+
+CloseButton.propTypes = {
+  closeCreateOfferModal: PropTypes.func,
+};
+
+export default CloseButton;

src/components/Cards/CreateOfferCard/CloseButton/CloseButton.styled.js

+import styled from "styled-components";
+import { Box } from "@mui/system";
+
+export const CloseIcon = styled(Box)`
+  cursor: pointer;
+  position: absolute;
+  right: 40px;
+
+  @media screen and (max-width: 600px) {
+    right: 20px;
+
+    & svg {
+      width: 20px;
+    }
+  }
+`;

src/components/Cards/CreateOfferCard/CreateOffer.js

   ModalCreateOfferContainer,
   ModalHeader,
   BackIcon,
-  CloseIcon,
+  // CloseIcon,
 } from "./CreateOffer.styled";
 import StepProgress from "../../StepProgress/StepProgress";
 import FirstPartCreateOffer from "./FirstPart/FirstPartCreateOffer";
 } from "../../../store/actions/offers/offersActions";
 import { editOneOffer } from "../../../store/actions/offers/offersActions";
 import { ReactComponent as ArrowBack } from "../../../assets/images/svg/arrow-back.svg";
-import { ReactComponent as CloseButton } from "../../../assets/images/svg/close-modal.svg";
+// import { ReactComponent as CloseButton } from "../../../assets/images/svg/close-modal.svg";
+import { useTranslation } from "react-i18next";
 import BackdropComponent from "../../MUI/BackdropComponent";
+import CloseButton from "./CloseButton/CloseButton";
 
 const CreateOffer = ({ history, closeCreateOfferModal, editOffer, offer }) => {
   const dispatch = useDispatch();
   const [currentStep, setCurrentStep] = useState(1);
   const categories = useSelector((state) => state.categories.categories);
   const historyRouter = useHistory();
+  const { t } = useTranslation();
 
   const handleApiResponseSuccess = () => {
     if (editOffer === undefined) {
     setCurrentStep((prevState) => prevState - 1);
   };
 
-  const closeModalHandler = () => {
-    closeCreateOfferModal(false);
-  };
+  // const closeModalHandler = () => {
+  //   closeCreateOfferModal(false);
+  // };
 
   const goStepBack = (stepNumber) => {
     setCurrentStep(stepNumber);
     <>
       <BackdropComponent
         isLoading
-        handleClose={closeModalHandler}
+        handleClose={closeCreateOfferModal}
         position="fixed"
       />
       <ModalCreateOfferContainer currentStep={currentStep}>
             </BackIcon>
             <CreateOfferTitle component="h1" variant="h5">
               {currentStep === 3
-                ? "Pregled"
+                ? `${t("offer.review")}`
                 : `${
-                    editOffer !== undefined ? "Izmena Objave" : "Nova Objava"
+                    editOffer !== undefined
+                      ? `${t("offer.changeOffer")}`
+                      : `${t("offer.newOffer")}`
                   }`}
             </CreateOfferTitle>
-            <CloseIcon onClick={closeModalHandler}>
+            <CloseButton closeCreateOfferModal={closeCreateOfferModal} />
+            {/* <CloseIcon onClick={closeModalHandler}>
               <CloseButton />
-            </CloseIcon>
+            </CloseIcon> */}
           </ModalHeader>
 
           <StepProgress

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

 export const ModalCreateOfferContainer = styled(Box)`
   background-color: #fff;
   position: fixed;
-  ${props => props.currentStep === 3 && `overflow-y: auto;`}
+  ${(props) => props.currentStep === 3 && `overflow-y: auto;`}
   max-height: 90vh;
   top: ${(props) =>
     props.currentStep === 1 ? "calc(50% - 400px);" : "calc(50% - 350px);"};
   scrollbar-color: #ddd;
 
   @media (max-height: 820px) {
-    top: ${props => props.currentStep === 1 ? 'calc(50% - 340px)' : 'calc(50% - 340px)'};
-
+    top: ${(props) =>
+      props.currentStep === 1 ? "calc(50% - 340px)" : "calc(50% - 340px)"};
   }
 
   @media screen and (max-width: 628px) {
     left: 0;
     padding: 0 30px;
   }
-
 `;
 
 export const ModalHeader = styled(Box)`
   }
 `;
 
-export const CloseIcon = styled(Box)`
-  cursor: pointer;
-  position: absolute;
-  right: 40px;
+// export const CloseIcon = styled(Box)`
+//   cursor: pointer;
+//   position: absolute;
+//   right: 40px;
 
-  @media screen and (max-width: 600px) {
-    right: 20px;
+//   @media screen and (max-width: 600px) {
+//     right: 20px;
 
-    & svg {
-      width: 20px;
-    }
-  }
-`;
+//     & svg {
+//       width: 20px;
+//     }
+//   }
+// `;
 
 export const CreateOfferContainer = styled(Container)`
   margin-top: 0px;
 export const CreateOfferFormContainer = styled(Box)`
   width: 335px;
   height: 700px;
-  ${props => props.currentStep === 3 && `width: 120%; height: 420px;`}
+  ${(props) => props.currentStep === 3 && `width: 120%; height: 420px;`}
 `;
 export const RegisterAltText = styled(Typography)`
   font-family: "Poppins";

src/i18n/resources/rs.js

       "Podržani formati fotografija: <strong>.JPG</strong> | <strong>.JPEG</strong> | <strong>.PNG</strong>",
     continue: "NASTAVI",
     publish: "OBJAVI",
+    review: "Pregled",
+    changeOffer: "Izmena Objave",
+    newOffer: "Nova Objava",
   },
   apiErrors: {
     somethingWentWrong: "Greska sa serverom!",