represent numbers as structured and names of categories in routing

package.json

@@ -37,6 +37,7 @@
     "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

@@ -97,14 +97,14 @@
 
 .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

@@ -27,6 +27,7 @@ import { useParams } from "react-router";
 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);
@@ -407,7 +408,7 @@ const FileTable = ({ trigger }) => {
                   {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>
@@ -431,14 +432,16 @@ const FileTable = ({ trigger }) => {
                     {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,
@@ -459,7 +462,7 @@ const FileTable = ({ trigger }) => {
                     {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,
@@ -482,9 +485,9 @@ const FileTable = ({ trigger }) => {
                         <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

@@ -48,8 +48,13 @@ const FilesPage = ({ history }) => {
   };
 
   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 = () => {
@@ -145,7 +150,7 @@ const FilesPage = ({ history }) => {
             marginTop: matches && "20px",
           }}
         >
-          <div style={{ marginBottom: "20px" }}>
+          <div>
             <div
               style={{
                 display: "flex",
@@ -203,7 +208,7 @@ const FilesPage = ({ history }) => {
                     className="files-file-routing"
                     onClick={() => history.push({ pathname: relation.id })}
                   >
-                    {relation.name}
+                    {getNameHandler(relation.name)}
                   </div>
                 </div>
               ))}