feat: files page updated to latest design (#218)

* feat: altered the design of the tabs and redid the download tab

* feat: redesign the upload file

* fix: styles of tabs on hover

* fix: display troubleshoot component when the status of the node is not OK

* fix: when removing the file, remove the reference upload reference as well

* fix: on inputs the label should not be selectable

* feat: add placeholder to inputs and make the label non-selectable

* refactor: improved the readability of the upload file component

* chore: removed PeerDetail component

* fix: replaced "batch" with (postage) "stamp" for clarity

* refactor: address PR review comments

* feat: disable the download button if there is no value

src/components/TabsContainer.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Tab, Tabs } from '@material-ui/core'
 
 interface TabPanelProps {
   children?: ReactNode
@@ -16,24 +13,25 @@ function TabPanel(props: TabPanelProps) {
 
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && (
-        <Box p={3}>
-          <Typography>{children}</Typography>
-        </Box>
-      )}
+      {value === index && children}
     </div>
   )
 }
 
-const useStyles = makeStyles(() => ({
-  root: {
-    flexGrow: 1,
-  },
-}))
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    content: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+)
 
 interface TabsValues {
   component: ReactNode
-  label: string
+  label: ReactNode
 }
 
 interface Props {
@@ -55,16 +53,18 @@ export default function SimpleTabs({ values, index, indexChanged }: Props): Reac
 
   return (
     <div className={classes.root}>
-      <Tabs value={v} onChange={handleChange}>
+      <Tabs value={v} onChange={handleChange} variant="fullWidth">
         {values.map(({ label }, idx) => (
           <Tab key={idx} label={label} />
         ))}
       </Tabs>
-      {values.map(({ component }, idx) => (
-        <TabPanel key={idx} value={v} index={idx}>
-          {component}
-        </TabPanel>
-      ))}
+      <div className={classes.content}>
+        {values.map(({ component }, idx) => (
+          <TabPanel key={idx} value={v} index={idx}>
+            {component}
+          </TabPanel>
+        ))}
+      </div>
     </div>
   )
 }