changed desing for nested folders and files

src/assets/styles/components/_files.scss

@@ -58,7 +58,7 @@
   word-wrap: break-word !important;
 }
 
-.table-cont #docx .document-container{
+.table-cont #docx .document-container {
   width: 400px !important;
 }
 
@@ -107,14 +107,14 @@
   margin: 0 auto !important;
 }
 
-.files-note{
+.files-note {
   width: 100%;
   resize: none;
   padding: 10px;
   height: 100px;
   border: 1px solid #e4e4e4;
-  border-radius:6px;
-  outline:none;
+  border-radius: 6px;
+  outline: none;
   font-size: 18px;
 }
 
@@ -139,8 +139,8 @@
   margin-left: 8px;
 }
 
-.pg-viewer-wrapper .document-container{
-  margin:0 !important;
+.pg-viewer-wrapper .document-container {
+  margin: 0 !important;
 }
 
 .page-navigation-buttons {
@@ -151,4 +151,17 @@
 .page-navigation-buttons > button {
   margin: 0 !important;
   margin-right: 12px !important;
-}
+}
+
+.files-file-routing {
+  font-size: 1.2rem;
+  cursor: pointer;
+  border: 1px solid #ffff;
+  border-radius: 10px;
+  padding-left: 10px;
+  padding: 4px 10px;
+}
+
+.files-file-routing:hover {
+  background-color: 	#F0F0F0;
+}

src/pages/FilesPage/FilesPage.js

@@ -32,6 +32,16 @@ const FilesPage = ({ history }) => {
     return name;
   };
 
+  const ColoredLine = () => (
+    <hr
+      style={{
+        color: "#F5F5F5",
+        backgroundColor: "#F5F5F5",
+        height: 1,
+      }}
+    />
+  );
+
   return (
     <>
       <div className="l-t-rectangle"></div>
@@ -46,23 +56,40 @@ const FilesPage = ({ history }) => {
         <div style={{ marginBottom: "50px" }}>
           <div style={{ marginBottom: "30px" }}>
             <h1 className="page-heading">Folderi</h1>
+            <ColoredLine />
             <div className="page-navigation-buttons">
-              <IconButton
-                className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+              <div
                 onClick={() => history.push({ pathname: FILES_PAGE })}
+                style={{ marginLeft: 0 }}
+                className="files-file-routing"
               >
-                <p>Root</p>
-              </IconButton>
+                Root
+              </div>
               {childParentRelations.map((relation) => (
-                <IconButton
-                  className="c-btn c-btn--primary-outlined files-view-page-delete-btn"
+                <div
+                  style={{ display: "flex", alignItems: "center" }}
                   key={relation.id}
-                  onClick={() => history.push({ pathname: relation.id })}
                 >
-                  <p>{relation.name}</p>
-                </IconButton>
+                  <span
+                    style={{
+                      cursor: "auto",
+                      color: "#A9A9A9",
+                      fontWeight: "bold",
+                      marginLeft: "10px",
+                    }}
+                  >
+                    &gt;
+                  </span>
+                  <div
+                    className="files-file-routing"
+                    onClick={() => history.push({ pathname: relation.id })}
+                  >
+                    {relation.name}
+                  </div>
+                </div>
               ))}
             </div>
+            <ColoredLine />
           </div>
           <div className="files-page-categories">
             {categories &&
@@ -116,7 +143,7 @@ FilesPage.propTypes = {
       pathname: PropTypes.string,
     }),
   }),
-  setFile:PropTypes.func
+  setFile: PropTypes.func,
 };
 
 export default FilesPage;