fixing some bugs and responsive desing for user details page

src/assets/styles/components/_candidatesPage.scss

@@ -194,15 +194,29 @@
   margin-left: 42px;
 }
 
-.ads-search-field-responsive {
-  min-width: 350px;
+// .ads-search-field-responsive {
+//   min-width: 350px;
+//   border: 1px solid #226cb0;
+//   border-radius: 10px;
+//   padding: 20px;
+//   background-color: white;
+//   position: absolute;
+//   top: 100px;
+//   right: 9px;
+//   z-index: 1000;
+//   &.smaller {
+//     min-width: 250px !important;
+//   }
+// }
+
+.ads-search-field-responsive2 {
   border: 1px solid #226cb0;
   border-radius: 10px;
-  padding: 20px;
+  padding: 15px;
   background-color: white;
   position: absolute;
-  top: 100px;
-  right: 9px;
+  top: 125px;
+  right: 35px;
   z-index: 1000;
   &.smaller {
     min-width: 250px !important;

src/assets/styles/components/_files.scss

@@ -20,7 +20,6 @@
 }
 
 .files-page-card-content-checkboxes {
-  padding: 0 9px !important;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;

src/components/Docs/DocsFilters.js

@@ -22,6 +22,8 @@ const DocsFilters = ({ open, handleClose, setPage, setFile }) => {
   const dispatch = useDispatch();
   const { filters } = useSelector((s) => s.fileFilters);
   let { id } = useParams();
+  console.log(setPage);
+  console.log(setFile);
 
   const handleCheckboxesExt = (e) =>
     dispatch(updateFileFilterExt(e.target.value));
@@ -50,12 +52,14 @@ const DocsFilters = ({ open, handleClose, setPage, setFile }) => {
           extensions: extFilters,
           tags: tagFilters,
           content: filters.content === undefined ? "" : filters.content,
-          onSuccess:() => setFile(null)
+          onSuccess: () => {
+            setFile(null);
+            setPage(1);
+          },
         },
         apiSuccess: handleClose,
       })
     );
-    setPage(1);
   };
 
   const list = () => (
@@ -160,7 +164,7 @@ DocsFilters.propTypes = {
   open: PropType.any,
   handleClose: PropType.func,
   setPage: PropType.func,
-  setFile:PropType.func
+  setFile: PropType.func,
 };
 
 export default DocsFilters;

src/i18n/resources/en.js

@@ -147,7 +147,7 @@ export default {
     ad: "Ad",
     ads: "Ads",
     signUp: "Sign up",
-    dragPdf1: "Drag the .pdf document in this part of the screen or",
+    dragPdf1: "Drag the document or",
     dragPdf2: "on the computer",
     coverLetter: "Cover letter (Optional)",
     professionalQualification: "Professional qualification",

src/pages/FilesPage/AddFile.js

@@ -17,6 +17,8 @@ import { uploadFileReq } from "../../store/actions/uploadFile/uploadFileActions"
 import { FILES_PAGE } from "../../constants/pages";
 import PropTypes from "prop-types";
 import TreeViewFiles from "../../components/Files/TreeViewFiles";
+import { useTheme } from "@mui/system";
+import { useMediaQuery } from "@mui/material";
 import Button from "../../components/Button/Button";
 
 const AddFile = ({ history }) => {
@@ -32,6 +34,10 @@ const AddFile = ({ history }) => {
     name: "",
   });
   const { t } = useTranslation();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("370"));
+
+  console.log(matches);
 
   useEffect(() => {
     dispatch(setCategoriesReq());
@@ -199,7 +205,7 @@ const AddFile = ({ history }) => {
                 ) : (
                   <>
                     <p>
-                      {t("ads.dragPdf1")} &nbsp;
+                      {t("ads.dragPdf1")} <br></br>
                       <label
                         htmlFor="upload-file"
                         style={{

src/pages/FilesPage/FileTable.js

@@ -93,7 +93,8 @@ const FileTable = ({ trigger }) => {
         },
       })
     );
-  }, [id, page]);
+    setPage(1);
+  }, [id]);
 
   const handleChange = (_, value) => {
     setFile(null);
@@ -150,7 +151,11 @@ const FileTable = ({ trigger }) => {
   };
 
   const handleKeyDown = (event) => {
-    if (event.key === "Enter" && filters.content !== "" && filters.content !== undefined) {
+    if (
+      event.key === "Enter" &&
+      filters.content !== "" &&
+      filters.content !== undefined
+    ) {
       var extFilters = [];
       filters.extensions
         ?.filter((n) => n.isChecked)
@@ -173,6 +178,8 @@ const FileTable = ({ trigger }) => {
           },
         })
       );
+      setPage(1);
+      setFile(null);
     }
   };
 

src/pages/UsersPage/UserDetails.js

@@ -41,7 +41,7 @@ import Button from "../../components/Button/Button";
 
 const UserDetails = ({ history }) => {
   const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down("sm"));
+  const matches = useMediaQuery(theme.breakpoints.down("371"));
   const { id } = useParams();
   const dispatch = useDispatch();
   const [showConfirm, setConfirm] = useState(false);
@@ -272,7 +272,14 @@ const UserDetails = ({ history }) => {
                 </IconButton>
               </div>
             </div>
-            <div className="user-details-middle">
+            <div
+              className="user-details-middle"
+              style={{
+                display: "flex",
+                flexDirection: matches ? "column" : "row",
+                marginTop: matches ? "0px" : "20px",
+              }}
+            >
               <div>
                 <div
                   className="flex-center"
@@ -338,17 +345,19 @@ const UserDetails = ({ history }) => {
                     </p>
                   </div>
                 </div>
-                <div
-                  style={{
-                    display: "flex",
-                    justifyContent: "flex-end",
-                    marginTop: "150px",
-                  }}
-                >
-                  <Link to={"/users"} className="text-blue">
-                    {t("users.backToUsers")}
-                  </Link>
-                </div>
+                {!matches && (
+                  <div
+                    style={{
+                      display: "flex",
+                      alignSelf: "flex-start",
+                      marginTop: "150px",
+                    }}
+                  >
+                    <Link to={"/users"} className="text-blue">
+                      {t("users.backToUsers")}
+                    </Link>
+                  </div>
+                )}
               </div>
               <div>
                 <div
@@ -356,6 +365,7 @@ const UserDetails = ({ history }) => {
                     display: "flex",
                     justifyContent: "center",
                     marginBottom: "1rem",
+                    marginTop: matches ? "1rem" : "0px",
                   }}
                 >
                   <h1>Granted Categories</h1>
@@ -396,6 +406,23 @@ const UserDetails = ({ history }) => {
                       Apply Changes
                     </Button>
                   </div>
+                  {matches && (
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "flex-start",
+                        marginTop: "20px",
+                      }}
+                    >
+                      <Link
+                        to={"/users"}
+                        className="text-blue"
+                        style={{ fontSize: "1.1rem" }}
+                      >
+                        {t("users.backToUsers")}
+                      </Link>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

src/pages/UsersPage/UsersPage.js

@@ -118,7 +118,7 @@ const UsersPage = (props) => {
         placeholder="Pretrazi..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        className="ads-search-field-responsive smaller"
+        className="ads-search-field-responsive2 smaller"
         onClick={stopPropagation}
         style={{ zIndex: 1000, width: "300px" }}
       />
@@ -176,8 +176,8 @@ const UsersPage = (props) => {
                 style={{
                   position: "absolute",
                   zIndex: 10000,
-                  marginTop: 47.5,
-                  right: "26px",
+                  marginTop: matches ? 67.5 : 47.5,
+                  right: matches ? 40 : 26,
                 }}
               >
                 <img src={searchImage} />
@@ -253,9 +253,12 @@ const UsersPage = (props) => {
       <div>
         <div
           onClick={() => setIsSearchFieldVisible(false)}
-          className="pl-144 flex-center"
+          className="pl-144"
           style={{
-            paddingTop: "36px",
+            paddingTop: matches ? "146px" : "36px",
+            display: "flex",
+            flexDirection: matches ? "column" : "row",
+            alignItems: matches ? "flex-start" : "center",
             justifyContent: "space-between",
             postion: "relative",
           }}
@@ -308,7 +311,7 @@ const UsersPage = (props) => {
           onClick={() => setIsSearchFieldVisible(false)}
           style={{
             display: "flex",
-            marginTop: "39px",
+            marginTop: matches ? "0px" : "39px",
             flexDirection: "column",
             justifyContent: "space-between",
             minHeight: "500px",