changed desing of files page

src/assets/styles/components/_files.scss

@@ -67,6 +67,10 @@
   flex-wrap: wrap;
 }
 
+.files-page-categories > :first-child {
+  padding: 16px 16px 16px 0px !important;
+}
+
 .files-page-categories-category {
   width: calc(100% / 6) !important;
   margin: 0 !important;
@@ -163,5 +167,5 @@
 }
 
 .files-file-routing:hover {
-  background-color: 	#F0F0F0;
+  background-color: #f0f0f0;
 }

src/pages/FilesPage/FileTable.js

@@ -16,7 +16,6 @@ import { Fade, Pagination } from "@mui/material";
 import FilterButton from "../../components/Button/FilterButton";
 import searchImage from "../../assets/images/search.png";
 import DocsFilters from "../../components/Docs/DocsFilters";
-import { ADD_FILE } from "../../constants/pages";
 import ConfirmDialog from "../../components/MUI/ConfirmDialog";
 import FileViewer from "react-file-viewer";
 import CustomModal from "../../components/UI/CustomModal";
@@ -24,7 +23,7 @@ import xIcon from "../../assets/images/x.png";
 import Button from "../../components/Button/Button";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
-import { useHistory, useParams } from "react-router";
+import {  useParams } from "react-router";
 import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 
 const FileTable = ({ trigger }) => {
@@ -47,7 +46,6 @@ const FileTable = ({ trigger }) => {
   });
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const history = useHistory();
 
   useEffect(() => {
     console.log("TAKOOOOOOOOOO", data);
@@ -509,13 +507,6 @@ const FileTable = ({ trigger }) => {
             shape="rounded"
             page={page}
           />
-
-          <IconButton
-            className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
-            onClick={() => history.push(ADD_FILE)}
-          >
-            + Fajl
-          </IconButton>
         </div>
         <div
           style={{

src/pages/FilesPage/FilesPage.js

@@ -11,6 +11,7 @@ import table from "../../assets/images/table.png";
 import { FILES_PAGE } from "../../constants/pages";
 import FileTable from "./FileTable";
 import { useParams } from "react-router-dom";
+import { ADD_FILE } from "../../constants/pages";
 
 const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
@@ -55,7 +56,29 @@ const FilesPage = ({ history }) => {
       >
         <div style={{ marginBottom: "50px" }}>
           <div style={{ marginBottom: "30px" }}>
-            <h1 className="page-heading">Folderi</h1>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <h1 className="page-heading">Folderi</h1>
+              <div style={{ display: "flex" }}>
+                <IconButton
+                  className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
+                  onClick={() => history.push(ADD_FILE)}
+                >
+                  + Fajl
+                </IconButton>
+                <IconButton
+                  className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
+                  onClick={() => history.push(ADD_FILE)}
+                >
+                  + Kategorija
+                </IconButton>
+              </div>
+            </div>
             <ColoredLine />
             <div className="page-navigation-buttons">
               <div