Merge branch 'feature/1564_editing_button' of Neca/HRCenter into FE_dev

src/components/Button/EditButton.js

@@ -0,0 +1,34 @@
+import { IconButton } from "@mui/material";
+import PropTypes from "prop-types";
+import React from "react";
+import userPageBtnIcon from "../../assets/images/userPageBtnIcon.png";
+import { useTheme } from "@mui/system";
+import { useMediaQuery } from "@mui/material";
+
+const EditButton = ({ onEnableEdit }) => {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <IconButton
+      className={"c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"}
+      onClick={onEnableEdit}
+    >
+      {!matches && "Režim uređivanja"}
+      <img
+        style={{
+          position: "relative",
+          top: -0.25,
+          paddingLeft: matches ? "0px" : "10px",
+        }}
+        src={userPageBtnIcon}
+      />
+    </IconButton>
+  );
+};
+
+EditButton.propTypes = {
+  onEnableEdit: PropTypes.func,
+};
+
+export default EditButton;

src/components/MUI/InviteDialog.js

@@ -73,7 +73,7 @@ const InviteDialog = ({
       lastName: Yup.string().required(t("login.lastnameRequired")),
       email: Yup.string()
         .required(t("login.emailRequired"))
-        .matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/, "Invalid email format."),
+        .matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/, t("login.invalidEmail")),
     }),
     onSubmit: handleSubmit,
     validateOnBlur: true,

src/i18n/resources/en.js

@@ -60,6 +60,7 @@ export default {
     forgotPasswordEmail: "Email",
     useDifferentEmail: "Use different email address or username",
     signInWithGoogle: "Continue with google",
+    invalidEmail: "Invalid email format",
   },
   password: {
     weak: "weak",
@@ -117,15 +118,15 @@ export default {
   users: {
     management: "User management",
     fullName: "Name and surname",
-    position: 'Position',
-    invite: 'Invite',
-    inviteUser: 'Invite user',
-    regLink: 'Registration link',
-    receiver: 'Receiver',
-    user: 'User',
-    contact: 'Contact',
-    phone: 'Phone',
-    socials: 'Social Media',
+    position: "Position",
+    invite: "Invite",
+    inviteUser: "Invite user",
+    regLink: "Registration link",
+    receiver: "Receiver",
+    user: "User",
+    contact: "Contact",
+    phone: "Phone",
+    socials: "Social Media",
   },
   selectionLevels: {
     done: {

src/i18n/resources/rs.js

@@ -77,6 +77,7 @@ export default {
     //       this._useDifferentEmail = value;
     //   },
     signInWithGoogle: "Prijava putem Google-a",
+    invalidEmail:"Format adrese nije validan"
   },
   // password: {
   //   weak: 'weak',

src/pages/UsersPage/UsersPage.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import IconButton from "../../components/IconButton/IconButton";
-import userPageBtnIcon from "../../assets/images/userPageBtnIcon.png";
 import planeVector from "../../assets/images/planeVector.png";
 import lock from "../../assets/images/lock.png";
 // import filters from "../../assets/images/filters.png";
@@ -25,6 +24,7 @@ import { Link } from "react-router-dom";
 import { forgetPassword } from "../../store/actions/login/loginActions";
 import { useTranslation } from "react-i18next";
 import ConfirmDialog from "../../components/MUI/ConfirmDialog";
+import EditButton from "../../components/Button/EditButton";
 
 const UsersPage = () => {
   const theme = useTheme();
@@ -166,24 +166,11 @@ const UsersPage = () => {
           <h1 className="page-heading">{t("users.management")}</h1>
           <div className="flex-center">
             {/* <button></button> */}
-            <IconButton
-              className={`${
-                editEnable && "enabledEdit"
-              } c-btn--primary-outlined editEnableBtn c-btn userPageBtn`}
-              onClick={() => {
+            <EditButton
+              onEnableEdit={() => {
                 setEdit((s) => !s);
               }}
-            >
-              {!matches && "Režim uređivanja"}
-              <img
-                style={{
-                  position: "relative",
-                  top: -0.25,
-                  paddingLeft: matches ? "0px" : "10px",
-                }}
-                src={userPageBtnIcon}
-              />
-            </IconButton>
+            />
             <IconButton
               className={"c-btn--primary c-btn inviteBtn"}
               onClick={() => {