Feature/file images (#25)

* Added colors

* Added File Icons

* Added Last changes

* Added Size

* removed not needed css classes

Co-authored-by: qvalentin <[email protected]>

Author: Gimleux

webapp_frontend/src/background/api/filesystem.ts

@@ -0,0 +1,11 @@
+export function formatBytes(bytes:number, decimals:number = 2):string {
+    if (bytes === 0) return '0 Bytes';
+
+    const k:number = 1024;
+    const dm:number = decimals < 0 ? 0 : decimals;
+    const sizes:string[] = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i:number = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}

webapp_frontend/src/background/api/filesystem.tsx

@@ -55,12 +55,12 @@ function App(props: Props): ReactElement {
                     <BrowserRouter>
                         <TopBanner/>
                         <Header/>
-                        <main role='main' className={"flex-shrink-0 flex-grow-1"}>
-                            <Router/>
-                        </main>
-                        <footer className='footer mt-auto py-3 bg-dark text-white'>
-                            <Footer/>
-                        </footer>
+                        <div>
+                            <main role='main' className={"flex-shrink-0 flex-grow-1"}>
+                                <Router/>
+                            </main>
+                        </div>
+                        <Footer/>
                         <PermanentAssets/>
                     </BrowserRouter>
                 </div>

webapp_frontend/src/background/api/filesystemTypes.tsx renamed to webapp_frontend/src/background/api/filesystemTypes.ts

@@ -4,17 +4,19 @@ import github from "super-tiny-icons/images/svg/github.svg"
 
 export default function Footer(): ReactElement {
     return (
-        <Container>
-            <div className="d-flex flex-column justify-content-center">
-                <a href={"https://github.com/filefighter"} className="align-self-center"><img src={github} alt={"github logo"} width={"50px"}/></a>
-                <span className="align-self-center mt-2" >Made by</span>
+        <footer className='footer mt-auto py-3 text-white'>
+            <Container className="d-flex flex-column justify-content-center bg-primary p-1">
+                <a href={"https://github.com/filefighter"} className="align-self-center"><img src={github}
+                                                                                              alt={"github logo"}
+                                                                                              width={"50px"}/></a>
+                <span className="align-self-center mt-2">Made by</span>
                 <div className="d-flex justify-content-around">
                     <span>Gimleux</span>
                     <span>Open-Schnick</span>
                     <span>qvalentin</span>
                 </div>
-            </div>
-        </Container>
+            </Container>
+        </footer>
     );
 }
 

webapp_frontend/src/background/methods/bytes.ts

@@ -55,7 +55,7 @@ function Header(): ReactElement {
     return (
         <header>
             <div className="container">
-                <Navbar bg="dark" expand="lg" sticky="top">
+                <Navbar bg="primary" expand="lg" sticky="top">
                     <NavbarBrand href="/start" onClick={(event: any) => {redirect(history, "/", event);}}>
                         <img src={logo} className="d-inline-block align-top" alt="Logo" height="30px" width="auto"/>
                         FileFighter

webapp_frontend/src/background/methods/cookies.tsx renamed to webapp_frontend/src/background/methods/cookies.ts

@@ -2,8 +2,8 @@ import React, {ReactElement} from "react";
 
 export function TopBanner():ReactElement {
     return(
-        <div className="d-flex justify-content-center">
+        <div className="d-flex justify-content-center bg-dark text-yellow p-1">
             Black Lives Matter
         </div>
     )
-}
+}

webapp_frontend/src/components/App.tsx

@@ -51,8 +51,7 @@ export default function Health() {
 
 
             <div>
-                {/*<Button className={"mt-3 mb-2 float-right"} onClick={() => updateVariables()}>Refresh</Button>*/}
-                <Table striped bordered hover variant="dark">
+                <Table striped bordered hover>
                     <thead>
                     <tr>
                         <th>Backend information</th>