Changed drag & drop on whole screen

src/assets/styles/components/_ads.scss

   height: 10.5px !important;
 }
 
-.uploadCV-input {
-  width: 100%;
-  height: 140px;
-  border: 1px solid #e4e4e4;
-  border-radius: 6px;
-  margin-top: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+// .uploadCV-input {
+//   width: 100%;
+//   height: 140px;
+//   border: 1px solid #e4e4e4;
+//   border-radius: 6px;
+//   margin-top: 6px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
 
 .uploadCV-content-sub-container {
   display: flex;

src/assets/styles/components/_files.scss

   margin-bottom: 1rem;
 }
 
+.files-page-card-content.drag-and-drop {
+  width: 100%;
+  height: 140px;
+  border: 1px solid #e4e4e4;
+  border-radius: 6px;
+  margin-top: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .files-page-card-content input {
   border: 1px solid #e4e4e4 !important;
   padding: 16.5px 20px !important;
   justify-content: space-between;
 }
 
-.files-page-drag-and-drop {
-  word-break: break-all !important;
-}
+// .files-page-drag-and-drop {
+//   word-break: break-all !important;
+// }
 
 .headingRowFiles th {
   padding-right: 35px !important;

src/components/Docs/DocsFilters.js

   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));

src/pages/FilesPage/AddFile.js

 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 }) => {
     name: "",
   });
   const { t } = useTranslation();
-  const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down("370"));
-
-  console.log(matches);
 
   useEffect(() => {
     dispatch(setCategoriesReq());
     setTitle("");
     setShowMessage(true);
     setSelectedCategory({ id: -1, name: "" });
+    setDropzoneActive(false)
   };
 
   useEffect(() => {
   const handleDrop = (e) => {
     e.preventDefault();
     const selectedFile = e.dataTransfer.files[0];
+    setTitle(selectedFile.name.split(".")[0]);
     setPdfFile(selectedFile);
   };
 
   };
 
   return (
-    <div className="files-page" style={{ paddingTop: "0px" }}>
-      <div className="l-t-rectangle"></div>
-      <div className="r-b-rectangle"></div>
+    <div
+      className="uploadCV-input files-page-drag-and-drop"
+      style={{backgroundColor: !pdfFile && dropzoneActive === true ? "#F4F4F4" : "#ffffff"}}
+      onDragOver={(e) => {
+        setDropzoneActive(true);
+        e.preventDefault();
+      }}
+      onDragLeave={(e) => {
+        setDropzoneActive(false);
+        e.preventDefault();
+      }}
+      onDrop={(e) => handleDrop(e)}
+    >
+      <div className="files-page" style={{ paddingTop: "0px" }}>
+        <div className="l-t-rectangle"></div>
+        <div className="r-b-rectangle"></div>
 
-      <div className="files-page-card">
-        <div className="files-page-card-title">
-          <h1>Categories</h1>
-        </div>
-        <div className="files-page-card-content">
-          {/* <Select
-            labelId="files-page-card-content-select"
-            id="files-page-card-content-selectt"
-            sx={{ width: "100%", borderColor: "#e4e4e4 !important" }}
-            onChange={selectCategoryHandler}
-            value={selectedCategory}
-          >
-            {categories &&
-              categories.map((category, index) => (
-                <MenuItem
-                  key={index}
-                  sx={{ textAlign: "left" }}
-                  value={category.id}
-                >
-                  {category.name}
-                </MenuItem>
-              ))}
-          </Select> */}
-          <TreeViewFiles onSelectCategory={selectCategoryHandler} />
+        <div className="files-page-card">
+          <div className="files-page-card-title">
+            <h1>Categories</h1>
+          </div>
+          <div className="files-page-card-content">
+            <TreeViewFiles onSelectCategory={selectCategoryHandler} />
+          </div>
         </div>
-      </div>
 
-      <div className="files-page-card">
-        <div className="files-page-card-title">
-          <h1>Selected Category</h1>
-        </div>
-        <div className="files-page-card-input">
-          <input
-            type="text"
-            disabled={true}
-            value={selectedCategory.id !== -1 ? selectedCategory.name : "null"}
-          />
-          <Button
-            type="button"
-            variant="contained"
-            className="c-btn c-btn--primary"
-            onClick={() => setSelectedCategory({ id: -1, name: "" })}
-            disabled={selectedCategory.id === -1}
-          >
-            Set root
-          </Button>
+        <div className="files-page-card">
+          <div className="files-page-card-title">
+            <h1>Selected Category</h1>
+          </div>
+          <div className="files-page-card-input">
+            <input
+              type="text"
+              disabled={true}
+              value={
+                selectedCategory.id !== -1 ? selectedCategory.name : ""
+              }
+            />
+            <Button
+              type="button"
+              variant="contained"
+              className="c-btn c-btn--primary"
+              onClick={() => setSelectedCategory({ id: -1, name: "" })}
+              disabled={selectedCategory.id === -1}
+            >
+              Set root
+            </Button>
+          </div>
         </div>
-      </div>
 
-      <div className="files-page-card">
-        <div className="files-page-card-title">
-          <h1>Tags</h1>
-        </div>
-        <div className="files-page-card-content">
-          <div className="files-page-card-content-checkboxes">
-            {tags &&
-              tags.map((tag) => (
-                <FormControlLabel
-                  key={tag.id}
-                  control={
-                    <Checkbox
-                      value={tag.name}
-                      checked={tag.isChecked}
-                      onChange={onChangeTagsCheckbox.bind(this, tag.id)}
-                      className="create-ad-second-step-checkbox"
-                    />
-                  }
-                  label={tag.name}
-                />
-              ))}
+        <div className="files-page-card">
+          <div className="files-page-card-title">
+            <h1>Tags</h1>
+          </div>
+          <div className="files-page-card-content">
+            <div className="files-page-card-content-checkboxes">
+              {tags &&
+                tags.map((tag) => (
+                  <FormControlLabel
+                    key={tag.id}
+                    control={
+                      <Checkbox
+                        value={tag.name}
+                        checked={tag.isChecked}
+                        onChange={onChangeTagsCheckbox.bind(this, tag.id)}
+                        className="create-ad-second-step-checkbox"
+                      />
+                    }
+                    label={tag.name}
+                  />
+                ))}
+            </div>
           </div>
         </div>
-      </div>
 
-      <div className="files-page-card">
-        <div className="files-page-card-title">
-          <h1>Drag & Drop File</h1>
-        </div>
-        <div className="files-page-card-content">
+        <div className="files-page-card">
+          <div className="files-page-card-title">
+            <h1>Drag & Drop File</h1>
+          </div>
           <div
-            className="uploadCV-input files-page-drag-and-drop"
-            onDragOver={(e) => {
-              setDropzoneActive(true);
-              e.preventDefault();
-            }}
-            onDragLeave={(e) => {
-              setDropzoneActive(false);
-              e.preventDefault();
-            }}
-            onDrop={(e) => handleDrop(e)}
+            className="files-page-card-content drag-and-drop"
             style={{
               backgroundColor: dropzoneActive ? "#F4F4F4" : "#ffffff",
             }}
             </div>
           </div>
         </div>
-      </div>
 
-      <div
-        className="add-file-message"
-        style={
-          showMessage === false ? { display: "none" } : { display: "flex" }
-        }
-      >
-        <p>Uspesno dodat fajl</p>
-      </div>
-
-      <div className="files-page-card">
         <div
-          className="files-page-card-add-button"
-          style={{ alignItems: "center" }}
+          className="add-file-message"
+          style={
+            showMessage === false ? { display: "none" } : { display: "flex" }
+          }
         >
-          <p
-            className="applicant-ads-back-button"
-            onClick={() => history.push(FILES_PAGE)}
-          >
-            Nazad na sve fajlove
-          </p>
-          <IconButton
-            className="c-btn ads-page-btn c-btn--primary add-ad-btn"
-            onClick={uploadFileHandler}
+          <p>Uspesno dodat fajl</p>
+        </div>
+
+        <div className="files-page-card">
+          <div
+            className="files-page-card-add-button"
+            style={{ alignItems: "center" }}
           >
-            + {t("files.addFile")}
-          </IconButton>
+            <p
+              className="applicant-ads-back-button"
+              onClick={() => history.push(FILES_PAGE)}
+            >
+              Nazad na sve fajlove
+            </p>
+            <IconButton
+              className="c-btn ads-page-btn c-btn--primary add-ad-btn"
+              onClick={uploadFileHandler}
+            >
+              + {t("files.addFile")}
+            </IconButton>
+          </div>
         </div>
       </div>
     </div>