Creating the upload page structure

components/Footer.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import clsx from 'clsx'
+import Image from 'next/image'
 import { Typography, Grid } from '@material-ui/core'
 import useStyles from '../styles/components/Footer'
 
 function Footer() {
   const classes = useStyles()
 
   return (
-    <footer className={clsx(classes.root, classes.appBarDrawerClose)}>
+    <footer className={classes.root}>
       <Grid
         container
         direction="row"
@@ -28,10 +28,11 @@ function Footer() {
               target="blank"
               className={classes.logoLink}
             >
-              <img
+              <Image
                 src="/logo.png"
-                title="LIneA"
-                alt="LineA"
+                alt="LIneA"
+                width={52}
+                height={52}
                 className={classes.logoFooter}
               />
             </a>

components/Header.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
 import {
   AppBar,
   Toolbar,
@@ -37,9 +38,9 @@ function Header() {
 
   return (
     <div>
-      <AppBar position="static" className={classes.toolbarWrapper}>
+      <AppBar position="static" className={classes.appbar}>
         <Toolbar className={classes.toolbar}>
-          <img src="/logo.png" alt="LIneA" className={classes.logoLIneA} />
+          <Image src="/logo.png" alt="LIneA" width={64} height={64} />
           <List className={classes.menuList}>
             {menus.map(menu => (
               <ListItem key={menu.href} className={classes.menuListItem}>

pages/index.js

@@ -6,6 +6,7 @@ import {
   CardMedia,
   Typography
 } from '@material-ui/core'
+import Link from '../components/Link'
 import useStyles from '../styles/pages/index'
 
 export default function Index() {
@@ -51,25 +52,27 @@ export default function Index() {
               lg={3}
               className={classes.gridApplicationLg}
             >
-              <Card>
-                <CardActionArea to={item.path}>
-                  <CardMedia
-                    alt={item.title}
-                    className={classes.media}
-                    image={item.background}
-                    title={item.title}
-                  >
-                    <Typography
-                      gutterBottom
-                      className={classes.titleItem}
-                      variant="h4"
-                      component="h2"
+              <Link href={item.path}>
+                <Card>
+                  <CardActionArea>
+                    <CardMedia
+                      alt={item.title}
+                      className={classes.media}
+                      image={item.background}
+                      title={item.title}
                     >
-                      {item.title}
-                    </Typography>
-                  </CardMedia>
-                </CardActionArea>
-              </Card>
+                      <Typography
+                        gutterBottom
+                        className={classes.titleItem}
+                        variant="h4"
+                        component="h2"
+                      >
+                        {item.title}
+                      </Typography>
+                    </CardMedia>
+                  </CardActionArea>
+                </Card>
+              </Link>
             </Grid>
           ))}
         </Grid>

pages/upload.js

@@ -0,0 +1,112 @@
+import React, { useRef } from 'react'
+import {
+  Container,
+  Grid,
+  Typography,
+  TextField,
+  MenuItem,
+  Button
+} from '@material-ui/core'
+import useStyles from '../styles/pages/upload'
+
+export default function Upload() {
+  const classes = useStyles()
+  const typeRef = useRef('1')
+  const nameRef = useRef('1')
+  const releaseRef = useRef('1')
+  const descriptionRef = useRef('')
+
+  const handleBrowseMainFile = () => {
+    const type = typeRef.current.value
+    const name = nameRef.current.value
+    const release = releaseRef.current.value
+    const description = descriptionRef.current.value
+
+    console.log({ type, name, release, description })
+  }
+
+  return (
+    <Container>
+      <Grid container spacing={2} className={classes.gridContainer}>
+        <Grid item xs={12}>
+          <Typography variant="h2" component="h1" align="center">
+            Upload
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={6} className={classes.formContainer}>
+          <TextField
+            id="type"
+            inputRef={typeRef}
+            value={typeRef.current.value}
+            label="Product Type"
+            variant="outlined"
+            select
+            required
+            fullWidth
+          >
+            <MenuItem value="1">Lorem</MenuItem>
+            <MenuItem value="2">Ipsum</MenuItem>
+            <MenuItem value="3">Consectetur</MenuItem>
+          </TextField>
+          <TextField
+            id="name"
+            inputRef={nameRef}
+            value={nameRef.current.value}
+            label="Product Name"
+            variant="outlined"
+            select
+            required
+            fullWidth
+          >
+            <MenuItem value="1">Lorem</MenuItem>
+            <MenuItem value="2">Ipsum</MenuItem>
+            <MenuItem value="3">Consectetur</MenuItem>
+          </TextField>
+
+          <TextField
+            id="release"
+            inputRef={releaseRef}
+            value={releaseRef.current.value}
+            label="LSST Data Release"
+            variant="outlined"
+            select
+            required
+            fullWidth
+          >
+            <MenuItem value="1">Lorem</MenuItem>
+            <MenuItem value="2">Ipsum</MenuItem>
+            <MenuItem value="3">Consectetur</MenuItem>
+          </TextField>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <TextField
+            id="description"
+            inputRef={descriptionRef}
+            value={descriptionRef.current.value}
+            label="Description"
+            variant="outlined"
+            fullWidth
+            multiline
+            minRows={8}
+          />
+        </Grid>
+
+        <Grid item xs={12} className={classes.buttonsContainer}>
+          <Button variant="contained" color="secondary">
+            Clear Form
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleBrowseMainFile}
+          >
+            Browse Main File
+          </Button>
+          <Button variant="contained" color="primary">
+            Browse Description Ancillary File
+          </Button>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}

styles/components/Footer.js

@@ -5,12 +5,8 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     float: 'right',
     height: 64,
-    position: 'relative'
-  },
-  appBarDrawerClose: {
-    top: 'auto',
+    position: 'relative',
     zIndex: 2,
-    bottom: 0,
     backgroundColor: '#212121',
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
@@ -41,8 +37,7 @@ const useStyles = makeStyles(theme => ({
   },
   logoFooter: {
     cursor: 'pointer',
-    marginLeft: '10px',
-    maxWidth: 52
+    marginLeft: '10px'
   },
   marginItem: {
     marginLeft: 20,

styles/components/Header.js

@@ -8,7 +8,7 @@ const useStyles = makeStyles(theme => ({
     marginRight: 10
   },
   appbar: {
-    background: '#212121'
+    background: theme.palette.primary.dark
   },
   separator: {
     flexGrow: 1
@@ -32,9 +32,9 @@ const useStyles = makeStyles(theme => ({
     textTransform: 'uppercase',
     whiteSpace: 'nowrap'
   },
-  logoLIneA: {
-    maxWidth: 64
-  },
+  // logoLIneA: {
+  //   maxWidth: 64
+  // },
   toolbar: {
     display: 'flex',
     [theme.breakpoints.down('xs')]: {

styles/pages/upload.js

@@ -0,0 +1,20 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(theme => ({
+  gridContainer: {
+    margin: `${theme.spacing(2)} 0`
+  },
+  formContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 20
+  },
+  buttonsContainer: {
+    display: 'flex',
+    gap: 16,
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  }
+}))
+
+export default useStyles

themes/light.js

@@ -4,8 +4,10 @@ const light = createTheme({
   palette: {
     primary: {
       light: '#4f5964',
-      dark: '#283663',
-      main: '#24292e'
+      main: '#283663',
+      dark: '#24292e'
+      // dark: '#283663',
+      // main: '#24292e'
     },
     secondary: {
       main: '#ffdd00'