From 6cdb4d471ae8303e83215ac0a9b405e641c24f95 Mon Sep 17 00:00:00 2001
From: Emily <44536222+emi-hi@users.noreply.github.com>
Date: Tue, 5 Mar 2024 11:42:12 -0800
Subject: [PATCH] CTHUB - Frontend styling for upload and user permissions page
 (#196)

* feat: frontend changes for upload and user admin

* chore: removes react Fragment and replaces with grid container, adds grey background to file upload grid

* chore: adds responsiveness to permissions
---
 react/src/app/styles/App.scss                | 18 +++++++++
 react/src/app/styles/FileUpload.scss         | 20 ++++++++--
 react/src/app/styles/Users.scss              | 12 ++++--
 react/src/uploads/UploadContainer.js         | 41 ++++++++++++--------
 react/src/uploads/components/FileDrop.js     |  5 +--
 react/src/uploads/components/FileDropArea.js | 23 +++++------
 react/src/uploads/components/UploadPage.js   | 22 +++++------
 react/src/users/components/UsersPage.js      | 28 +++++++------
 8 files changed, 102 insertions(+), 67 deletions(-)

diff --git a/react/src/app/styles/App.scss b/react/src/app/styles/App.scss
index b05e911f..89b60e10 100644
--- a/react/src/app/styles/App.scss
+++ b/react/src/app/styles/App.scss
@@ -13,8 +13,10 @@ $highlight: #0078FD;
 $default-link-blue: #568DBA;
 $default-background-grey: #F2F2F2;
 $md: 991px;
+$button-background-blue: #003366;
 
 .App {
+  background-color: $default-background-grey;
   .App-header {
     -ms-flex-align: center;
     -ms-flex-direction: row;
@@ -67,6 +69,8 @@ h2, h3, h4 {
 }
 
 h2 {
+  margin-top: 0;
+  margin-bottom: 0;
   font-size: 20px;
 }
 
@@ -79,3 +83,17 @@ h4 {
   font-size: 14px;
 }
 
+.button-dark-blue {
+  background-color: $button-background-blue !important;
+  color: $bg-white;
+
+  &:disabled {
+    background-color: white !important;
+    
+  }
+}
+
+.text-button {
+  color: #1a5a96 !important;
+  text-decoration: underline !important;
+}
\ No newline at end of file
diff --git a/react/src/app/styles/FileUpload.scss b/react/src/app/styles/FileUpload.scss
index fe7a8d30..e9226119 100644
--- a/react/src/app/styles/FileUpload.scss
+++ b/react/src/app/styles/FileUpload.scss
@@ -6,8 +6,10 @@
   padding: 0.5rem;
 }
 #dataset-select {
-  padding-bottom: 2rem;
-  padding-top: 2rem;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: $default-background-grey;
 
 }
 #trash-button {
@@ -18,13 +20,23 @@
   
 }
 .upload-row {
-  height: 15px;
+  background-color: $default-background-grey;
+  padding: .5rem;
+  margin: .5rem;
 }
 .file-upload {
-  border: 2px dashed $default-link-blue;
+  border: 1px dashed $button-background-blue;
   background: $bg-white;
   padding: 1rem;
   text-align: center;
   flex-direction: column;
 
 }
+
+.upload-bar {
+  background-color: $default-background-grey;
+  color: $bg-white;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-top: 2rem;
+}
diff --git a/react/src/app/styles/Users.scss b/react/src/app/styles/Users.scss
index 564814c6..20bd7092 100644
--- a/react/src/app/styles/Users.scss
+++ b/react/src/app/styles/Users.scss
@@ -1,8 +1,6 @@
 .add-user-box {
-  height: 4rem;
   background-color: $default-background-grey;
   margin-bottom: 1rem;
-  width: 40%;
 }
 
 .permissions {
@@ -12,6 +10,13 @@
  .checkbox {
     width: 40%;
   }
+  @media (max-width:991px) {
+    width: 20%;
+}
+  @media (max-width:599px) {
+    width: 40%;
+}
+
 }
 
 .user-input {
@@ -22,4 +27,5 @@
 
 .button-dark-blue {
   background-color: #003366 !important;
-}
\ No newline at end of file
+}
+
diff --git a/react/src/uploads/UploadContainer.js b/react/src/uploads/UploadContainer.js
index 8bcbf52d..c550f864 100644
--- a/react/src/uploads/UploadContainer.js
+++ b/react/src/uploads/UploadContainer.js
@@ -1,8 +1,9 @@
 import { withRouter } from 'react-router-dom';
 import axios from 'axios';
-import CircularProgress from '@mui/material/CircularProgress';
-import Alert from '@mui/material/Alert';
 import React, { useState, useEffect } from 'react';
+import {
+  Paper, Alert, CircularProgress, Stack,
+} from '@mui/material';
 import ROUTES_UPLOAD from './routes';
 import ROUTES_USERS from '../users/routes';
 import UploadPage from './components/UploadPage';
@@ -134,20 +135,28 @@ const UploadContainer = () => {
           title="Replace existing data?"
         />
         )}
-        <UploadPage
-          uploadFiles={uploadFiles}
-          datasetList={datasetList}
-          doUpload={doUpload}
-          setDatasetSelected={setDatasetSelected}
-          datasetSelected={datasetSelected}
-          setUploadFiles={setUploadFiles}
-          setReplaceData={setReplaceData}
-          replaceData={replaceData}
-          handleRadioChange={handleRadioChange}
-          downloadSpreadsheet={downloadSpreadsheet}
-        />
-        {adminUser
-        && <UsersContainer />}
+        <Stack direction="column" spacing={2}>
+          <Paper square variant="outlined">
+            <UploadPage
+              uploadFiles={uploadFiles}
+              datasetList={datasetList}
+              doUpload={doUpload}
+              setDatasetSelected={setDatasetSelected}
+              datasetSelected={datasetSelected}
+              setUploadFiles={setUploadFiles}
+              setReplaceData={setReplaceData}
+              replaceData={replaceData}
+              handleRadioChange={handleRadioChange}
+              downloadSpreadsheet={downloadSpreadsheet}
+            />
+          </Paper>
+          {adminUser
+          && (
+            <Paper square variant="outlined">
+              <UsersContainer />
+            </Paper>
+          )}
+        </Stack>
       </div>
     </div>
   );
diff --git a/react/src/uploads/components/FileDrop.js b/react/src/uploads/components/FileDrop.js
index c79fb412..528f2d5b 100644
--- a/react/src/uploads/components/FileDrop.js
+++ b/react/src/uploads/components/FileDrop.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import { Box, Button } from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
 import { useDropzone } from 'react-dropzone';
 
@@ -25,7 +24,7 @@ const FileDrop = (props) => {
         {' '}
         <br />
         <Box p={2}>
-          <Button variant="outlined">browse to select a file from your machine to upload.</Button>
+          <Button className="text-button">browse to select a file from your machine to upload.</Button>
         </Box>
         {dropMessage && (
           <div>{dropMessage}</div>
diff --git a/react/src/uploads/components/FileDropArea.js b/react/src/uploads/components/FileDropArea.js
index 1883e6f0..f47c7be7 100644
--- a/react/src/uploads/components/FileDropArea.js
+++ b/react/src/uploads/components/FileDropArea.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { Box, Button, Grid } from '@mui/material';
+import ClearIcon from '@mui/icons-material/Clear';
 import FileDrop from './FileDrop';
 import getFileSize from '../../app/utilities/getFileSize';
 
@@ -22,15 +20,14 @@ const FileDropArea = (props) => {
   function FormRow(file) {
     const { name, size } = file;
     return (
-      <React.Fragment key={name}>
-        <Grid item xs={7}>
+      <Grid container alignItems="center" key={name}>
+        <Grid item xs={7} className="upload-row">
           {name}
         </Grid>
         <Grid item xs={3} className="upload-row">
           {getFileSize(size)}
         </Grid>
         <Grid item xs={2} className="upload-row">
-
           <Button
             className="delete"
             onClick={() => {
@@ -39,17 +36,17 @@ const FileDropArea = (props) => {
             type="button"
             id="trash-button"
           >
-            <DeleteIcon />
+            <ClearIcon padding={0} sx={{ color: 'red' }} />
           </Button>
         </Grid>
-      </React.Fragment>
+      </Grid>
     );
   }
   return (
-    <div className="bordered">
+    <div>
       <div>
         <div className="content">
-          <Box p={3}>
+          <Box p={2}>
             <FileDrop
               setFiles={setUploadFiles}
             />
@@ -59,10 +56,10 @@ const FileDropArea = (props) => {
         <Box className="upload-list" pt={3} rb={2}>
           <Grid container direction="row">
             <Grid item xs={7}>
-              Filename
+              <h3>Filename</h3>
             </Grid>
             <Grid item xs={3}>
-              Size
+              <h3>Size</h3>
             </Grid>
             <Grid item xs={2} />
             {uploadFiles.map((file) => (
diff --git a/react/src/uploads/components/UploadPage.js b/react/src/uploads/components/UploadPage.js
index 81a51c86..b8bba88e 100644
--- a/react/src/uploads/components/UploadPage.js
+++ b/react/src/uploads/components/UploadPage.js
@@ -1,14 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
+import {
+  Box, Button, MenuItem, Select, Radio, RadioGroup, FormControlLabel, FormControl,
+} from '@mui/material';
 import UploadIcon from '@mui/icons-material/Upload';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
 import FileDropArea from './FileDropArea';
 
 const UploadPage = (props) => {
@@ -31,6 +26,7 @@ const UploadPage = (props) => {
   return (
     <>
       <Box p={3}>
+        <h2>Upload Program Data</h2>
         <div id="dataset-select">
           <span>
             <h3>
@@ -39,12 +35,12 @@ const UploadPage = (props) => {
           </span>
           <Select
             value={datasetSelected}
-            style={{ minWidth: 220 }}
+            style={{ minWidth: 220, backgroundColor: 'white'}}
             onChange={(e) => { setDatasetSelected(e.target.value); }}
           >
             {selectionList}
           </Select>
-          <Button onClick={downloadSpreadsheet}>Download Spreadsheet</Button>
+          <Button className="text-button" onClick={downloadSpreadsheet}>Download Spreadsheet</Button>
 
         </div>
         <div id="replace-data-select">
@@ -76,13 +72,13 @@ const UploadPage = (props) => {
             uploadFiles={uploadFiles}
           />
         </div>
-        <Box pt={2}>
+        <Box pt={2} className="upload-bar" alignItems="center" padding={2} display="flex" justifyContent="flex-end">
           <Button
             disabled={uploadFiles.length === 0 || !datasetSelected}
-            className="button primary"
+            className="button-dark-blue"
             onClick={() => doUpload()}
             type="button"
-            variant="outlined"
+            variant="contained"
           >
             <UploadIcon />
             Upload
diff --git a/react/src/users/components/UsersPage.js b/react/src/users/components/UsersPage.js
index e4d2ff62..c7568c3e 100644
--- a/react/src/users/components/UsersPage.js
+++ b/react/src/users/components/UsersPage.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
+import {
+  Box, Button, Grid, TextField, Checkbox,
+} from '@mui/material';
 import ClearIcon from '@mui/icons-material/Clear';
 import SaveIcon from '@mui/icons-material/Save';
-import TextField from '@mui/material/TextField';
 
 const UsersPage = (props) => {
   const { users, userUpdates, setUserUpdates } = props;
@@ -28,28 +26,28 @@ const UsersPage = (props) => {
     return (
       <Grid container key={user.idir}>
         <Grid item className="permissions">
-          <input type="checkbox" className="checkbox" name="uploader" id="uploader" checked={userPerms.uploader} onChange={(event) => { handleRadioChange(event); }} />
-          <input type="checkbox" className="checkbox" name="admin" id="admin" checked={userPerms.admin} onChange={(event) => { handleRadioChange(event); }} />
+          <Checkbox className="checkbox" name="uploader" id="uploader" color="default" checked={userPerms.uploader} onChange={(event) => { handleRadioChange(event); }} />
+          <Checkbox className="checkbox" name="admin" id="admin" color="default" checked={userPerms.admin} onChange={(event) => { handleRadioChange(event); }} />
         </Grid>
-        <Grid item width="20%" paddingLeft={2}>
+        <Grid item md={2} paddingLeft={2}>
           <span>{user.idir}</span>
         </Grid>
         <Grid item>
-          <ClearIcon padding={0} sx={{color: 'red' }} />
+          <ClearIcon padding={0} sx={{ color: 'red' }} />
         </Grid>
       </Grid>
     );
   };
   return (
-    <Paper variant="outlined">
+    <>
       <Box p={3}>
         <div>
           <h2>Admin</h2>
         </div>
         <Grid container>
-          <Box display="flex" flexDirection="row" className="add-user-box" alignItems="center" padding={2} justifyContent="space-evenly">
-            <Grid container alignItems="center" justifyContent="space-around">
-              <Grid item spacing={3}>
+          <Box display="flex" md={6} flexDirection="row" className="add-user-box" alignItems="center" padding={2} justifyContent="space-evenly">
+            <Grid container alignItems="center" justifyContent="space-around" spacing={2}>
+              <Grid item>
                 <h3>
                   IDIR Username
                 </h3>
@@ -58,7 +56,7 @@ const UsersPage = (props) => {
                 <TextField className="user-input" type="text" />
               </Grid>
               <Grid item>
-                <Button variant="contained" className="button-dark-blue" >
+                <Button variant="contained" className="button-dark-blue">
                   Add User
                 </Button>
               </Grid>
@@ -84,7 +82,7 @@ const UsersPage = (props) => {
           </Box>
         </Grid>
       </Box>
-    </Paper>
+    </>
   );
 };
 UsersPage.propTypes = {