represent numbers as structured and names of categories in routing

package.json

     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
     "react-mentions": "^4.4.7",
+    "react-pretty-numbers": "^3.0.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/assets/styles/components/_files.scss

 
 .files-page-categories-category {
   width: calc(100% / 6) !important;
-  margin: 0 !important;
   padding: 16px;
+  padding-left: 0px;
 }
 
 .files-page-categories-category-responsive {
   width: calc(100% / 3) !important;
-  margin: 0 !important;
   padding: 0px;
+  margin-top: 10px;
 }
 
 .files-page-category-button {

src/pages/FilesPage/FileTable.js

 import { PAGE_SIZE_FILES } from "../../constants/keyCodeConstants";
 import { useTheme } from "@mui/system";
 import { useMediaQuery } from "@mui/material";
+import NumericLabel from "react-pretty-numbers";
 
 const FileTable = ({ trigger }) => {
   const [file, setFile] = useState(null);
                   {file === null ? <th>{t("files.doucmentPath")}</th> : ""}
                   <th>{t("files.doucmentName")}</th>
                   {file === null ? <th>{t("files.doucmentType")}</th> : ""}
-                  {file === null ? <th>{t("files.doucmentSize")}</th> : ""}
+                  {file === null ? <th>{t("files.doucmentSize")} (kB)</th> : ""}
                   {file === null ? <th>{t("files.deleteDocument")}</th> : ""}
                   {file === null ? <th>{t("files.note")}</th> : ""}
                   <th>{t("files.downloadDocument")}</th>
                     {file === null ? <td>{n.file_type && n.file_type}</td> : ""}
 
                     {file === null ? (
-                      <td className="profession">{n.cached_file_size}kB</td>
+                      <td className="profession">
+                        {<NumericLabel>{n.cached_file_size}</NumericLabel>}
+                      </td>
                     ) : (
                       ""
                     )}
                     {file === null ? (
                       <td className="profession">
                         <IconButton
-                          className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                          className="c-btn c-btn--primary-outlined"
                           onClick={() =>
                             setFileForDelete({
                               open: true,
                     {file === null ? (
                       <td className="profession">
                         <IconButton
-                          className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                          className="c-btn c-btn--primary-outlined"
                           onClick={() => {
                             setOpenNoteModal({
                               open: true,
                         <a
                           className="applicant-cv-button"
                           style={{
-                            width: "100px",
+                            width: "90px",
                             height: "40px",
-                            padding: 8,
+                            padding: 10,
                           }}
                           download={n.title}
                           href={getPathForFile(n.file_type, n.file_stream)}

src/pages/FilesPage/FilesPage.js

   };
 
   const getNameHandler = (name) => {
-    if (name.length > 15) return name.substr(0, 15) + "...";
-    return name;
+    if (matches) {
+      if (name.length > 7) return name.substr(0, 7) + "...";
+      return name;
+    } else {
+      if (name.length > 14) return name.substr(0, 14) + "...";
+      return name;
+    }
   };
 
   const onSuccessCreatingCategoryHandler = () => {
             marginTop: matches && "20px",
           }}
         >
-          <div style={{ marginBottom: "20px" }}>
+          <div>
             <div
               style={{
                 display: "flex",
                     className="files-file-routing"
                     onClick={() => history.push({ pathname: relation.id })}
                   >
-                    {relation.name}
+                    {getNameHandler(relation.name)}
                   </div>
                 </div>
               ))}