updated modal styles for smaller resolutions

src/assets/styles/components/_modal.scss

 .dialog-btn:last-of-type{
   color: $white;
   background-color: $mainBlue;
+
+&.sm-full{
+  
+  @include media-below($bp-xl) {
+    width: 80%;
+    // align-self: center;
+    // justify-self: center;
+    margin: 20px auto 0px auto;
+    height: 50px !important;
+  }
+}
 }
 .modal-content{
   padding: 25px 0px 15px 0px;

src/components/MUI/ConfirmDialog.js

 import React from "react";
 import PropTypes from "prop-types";
+import x from "../../assets/images/x.png";
 import {
   Dialog,
   DialogTitle,
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
 
-  //   const { t } = useTranslation();
-
   const handleClose = () => {
     onClose();
   };
 
-  //   useEffect(()=>{
-  //     handleClose();
-  //   },[onConfirm])
-
   return (
     <Dialog
       maxWidth={maxWidth}
     >
       <div style={{ padding: "36px" }}>
         <DialogTitle style={{ padding: 0 }}>
-          <div
-            className="flex-center"
-            style={{ justifyContent: "space-between" }}
-          >
-            <div className="flex-center" style={{ justifyContent: "start" }}>
-              <img
-                style={{
-                  position: "relative",
-                  top: -0.25,
-                  paddingRight: "10px",
-                }}
-                src={imgSrc}
-              />
-              <h5>{title}</h5>
-              <div className="vr"></div>
-              <p className="dialog-subtitle">{subtitle}</p>
+          {fullScreen ? (
+            <>
+              <div className="flex-center" style={{ justifyContent: "start" }}>
+                <img
+                  style={{
+                    position: "relative",
+                    top: -0.25,
+                    paddingRight: "10px",
+                  }}
+                  src={imgSrc}
+                />
+                <h5 style={{ textAlign: "start" }}>{title}</h5>
+                <div style={{ justifySelf: "stretch", flex:'1' }}></div>
+                <IconButton
+                onClick={onClose}
+                >
+                  <img
+                    style={{
+                      position: "relative",
+                      top: -0.25,
+                    }}
+                    src={x}
+                  />
+                </IconButton>
+              </div>
+              <p
+                className="dialog-subtitle"
+                style={{ paddingLeft: "23px", marginTop: "-10px" }}
+              >
+                | {subtitle}
+              </p>
+            </>
+          ) : (
+            <div
+              className="flex-center"
+              style={{ justifyContent: "space-between" }}
+            >
+              <div className="flex-center" style={{ justifyContent: "start" }}>
+                <img
+                  style={{
+                    position: "relative",
+                    top: -0.25,
+                    paddingRight: "10px",
+                  }}
+                  src={imgSrc}
+                />
+                <h5>{title}</h5>
+                <div className="vr"></div>
+                <p className="dialog-subtitle">{subtitle}</p>
+              </div>
             </div>
-          </div>
+          )}
         </DialogTitle>
         <DialogContent>
           <div className="modal-content">{content}</div>
         </DialogContent>
         <DialogActions style={{ padding: 0 }}>
+          {!fullScreen ? (
+            <IconButton
+              data-testid="editbtn"
+              className={`c-btn--primary-outlined  c-btn dialog-btn`}
+              onClick={onClose}
+            >
+              Cancel
+            </IconButton>
+          ) : (
+            ""
+          )}
           <IconButton
             data-testid="editbtn"
-            className={`c-btn--primary-outlined  c-btn dialog-btn`}
-            onClick={onClose}
-          >
-            Cancel
-          </IconButton>
-          <IconButton
-            data-testid="editbtn"
-            className={`c-btn--primary-outlined c-btn dialog-btn`}
+            className={`c-btn--primary-outlined sm-full c-btn dialog-btn`}
             onClick={onConfirm}
           >
             Confirm

src/components/MUI/InviteDialog.js

           firstName,
           email,
         },
-        handleApiResponseSuccess: resetForm
+        handleApiResponseSuccess: resetForm,
       })
     );
   };
     validationSchema: Yup.object().shape({
       firstName: Yup.string().required(t("login.firstnameRequired")),
       lastName: Yup.string().required(t("login.lastnameRequired")),
-      email: Yup.string().required(t("login.emailRequired")),
+      email: Yup.string()
+        .required(t("login.emailRequired"))
+        .matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/, "Invalid email format."),
     }),
     onSubmit: handleSubmit,
     validateOnBlur: true,
             <div
               className=""
               style={{
-                display: "flex",
+                display: fullScreen ? "" : "flex",
                 justifyContent: "center",
                 alignItems: "start",
                 gap: "15px",
               <TextField
                 name="firstName"
                 // label={t("users.receiver")}
-                label={'Ime'}
+                label={"Ime"}
                 margin="normal"
                 value={formik.values.firstName}
                 onChange={formik.handleChange}
               <TextField
                 name="lastName"
                 // label={t("users.receiver")}
-                label={'Prezime'}
+                label={"Prezime"}
                 margin="normal"
                 value={formik.values.lastName}
                 onChange={formik.handleChange}
             <TextField
               name="email"
               // label={t("users.receiver")}
-                label={'E-mail adresa'}
+              label={"E-mail adresa"}
               margin="normal"
               value={formik.values.email}
               onChange={formik.handleChange}

src/pages/UsersPage/UsersPage.js

                 src={addUser}
               />
               <h5>{t("users.inviteUser")}</h5>
-              <div className="vr"></div>
-              <p className="dialog-subtitle">{t("users.regLink")}</p>
+              {!matches && <div className="vr"></div>}
+              {!matches && <p className="dialog-subtitle">{t("users.regLink")}</p>}
             </div>
             <IconButton onClick={() => setShowInvite(false)}>
               <img