From 0874011c4f554c8e1aad48628a6dc15cecc49d07 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 11:02:48 -0400
Subject: [PATCH 1/6] Remove CSS restrictions

---
 packages/client/src/App.css   |  4 +---
 packages/client/src/index.css | 20 --------------------
 2 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/packages/client/src/App.css b/packages/client/src/App.css
index 9c7629a8..a095e85a 100644
--- a/packages/client/src/App.css
+++ b/packages/client/src/App.css
@@ -1,7 +1,5 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -42,4 +40,4 @@
 
 .read-the-docs {
   color: #888;
-}
\ No newline at end of file
+}
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 2c3fac68..e9ac6a0d 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -25,7 +25,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
@@ -36,25 +35,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

From e5541a833f12ec8cb6b9463150e33be38533c629 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 11:12:55 -0400
Subject: [PATCH 2/6] Working flex without router

---
 packages/client/src/App.css                   |  1 +
 packages/client/src/App.tsx                   | 41 ++++++++++++-------
 packages/client/src/index.css                 |  1 +
 .../src/pages/studies/UserPermissions.tsx     | 10 +----
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/App.css b/packages/client/src/App.css
index a095e85a..c1c0939c 100644
--- a/packages/client/src/App.css
+++ b/packages/client/src/App.css
@@ -1,5 +1,6 @@
 #root {
   margin: 0 auto;
+  padding: 3rem;
   text-align: center;
 }
 
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 95bbcd4f..675e6c0d 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -21,7 +21,7 @@ import { EnvironmentContextProvider } from './context/EnvironmentContext';
 import { AuthProvider } from './context/AuthContext';
 import { AdminGuard } from './guards/AdminGuard';
 import { LogoutPage } from './pages/LogoutPage';
-import { CssBaseline, Box, styled } from '@mui/material';
+import { CssBaseline, Box, styled, Typography } from '@mui/material';
 import { useState } from 'react';
 import { SideBar } from './components/SideBar';
 
@@ -52,12 +52,31 @@ function App() {
       <BrowserRouter>
         <EnvironmentContextProvider>
           <AuthProvider>
-            <Box sx={{ display: 'flex' }}>
-              <CssBaseline />
+            <CssBaseline />
+            <Box>
               <NavBar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
-                <Main open={drawerOpen}>
-                  <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
-                  <Box sx={{ display: 'flex' }}>
+            </Box>
+            <Main open={drawerOpen}>
+              <Box sx={{ display: 'flex' }}>
+              <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
+              <Box sx={{ flexGrow: 1 }}>
+                <Typography>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
+
+Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. N
+                  </Typography>
+                </Box>
+              </Box>
+            </Main>
+          </AuthProvider>
+        </EnvironmentContextProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+}
+
+/*
                     <Routes>
                       <Route path={'/'} element={<HomePage />} />
                       <Route path={'/callback'} element={<AuthCallback />} />
@@ -78,14 +97,6 @@ function App() {
                         <Route path={'/logoutpage'} element={<LogoutPage />} />
                       </Route>
                     </Routes>
-                  </Box>
-                </Main>
-              </Box>
-          </AuthProvider>
-        </EnvironmentContextProvider>
-      </BrowserRouter>
-    </ThemeProvider>
-  );
-}
+                    */
 
 export default App;
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index e9ac6a0d..6e7614cd 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -28,6 +28,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  padding: 10px;
 }
 
 h1 {
diff --git a/packages/client/src/pages/studies/UserPermissions.tsx b/packages/client/src/pages/studies/UserPermissions.tsx
index c277b730..8b8e042d 100644
--- a/packages/client/src/pages/studies/UserPermissions.tsx
+++ b/packages/client/src/pages/studies/UserPermissions.tsx
@@ -72,6 +72,7 @@ export const StudyUserPermissions: React.FC = () => {
     {
       field: 'name',
       headerName: 'Name',
+      width: 150,
       flex: 0.9,
       editable: true
     },
@@ -117,16 +118,9 @@ export const StudyUserPermissions: React.FC = () => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
+    <Box>
       <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
       <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
-          }
-        }}
         getRowHeight={() => 'auto'}
         rows={rows}
         columns={columns}

From 91513081a461d6778111cef7240c1205f6c96153 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 12:11:06 -0400
Subject: [PATCH 3/6] Working flex grow

---
 packages/client/src/App.tsx                   | 67 +++++++++----------
 packages/client/src/components/SideBar.tsx    |  1 +
 packages/client/src/index.css                 |  1 -
 .../src/pages/studies/UserPermissions.tsx     | 29 +++++---
 4 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 675e6c0d..9fc20a53 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -27,21 +27,23 @@ import { SideBar } from './components/SideBar';
 
 const drawerWidth = 240;
 
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; }>(({ theme, open }) => ({
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+  open?: boolean;
+}>(({ theme, open }) => ({
   flexGrow: 1,
   padding: theme.spacing(3),
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
+    duration: theme.transitions.duration.leavingScreen
   }),
-  marginRight: -drawerWidth,
+  marginLeft: `-${drawerWidth}px`,
   ...(open && {
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
+      duration: theme.transitions.duration.enteringScreen
     }),
-    marginRight: 0,
-  }),
+    marginLeft: 0
+  })
 }));
 
 function App() {
@@ -58,14 +60,28 @@ function App() {
             </Box>
             <Main open={drawerOpen}>
               <Box sx={{ display: 'flex' }}>
-              <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
-              <Box sx={{ flexGrow: 1 }}>
-                <Typography>
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa sapien faucibus et molestie ac.
-
-Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. N
-                  </Typography>
+                <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
+                <Box sx={{ flexGrow: 1 }}>
+                  <Routes>
+                    <Route path={'/'} element={<HomePage />} />
+                    <Route path={'/callback'} element={<AuthCallback />} />
+                    <Route path={'/loginpage'} element={<LoginPage />} />
+                    <Route element={<AdminGuard />}>
+                      <Route path={'/project/new'} element={<NewProject />} />
+                      <Route path={'/project/controls'} element={<ProjectControl />} />
+                      <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
+                      <Route path={'/study/new'} element={<NewStudy />} />
+                      <Route path={'/study/controls'} element={<StudyControl />} />
+                      <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
+                      <Route path={'/study/tags'} element={<DownloadTags />} />
+                      <Route path={'/successpage'} element={<SuccessPage />} />
+                      <Route path={'/dataset/controls'} element={<DatasetControls />} />
+                      <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
+                      <Route path={'/study/contribute'} element={<ContributePage />} />
+                      <Route path={'/tagging'} element={<TagView />} />
+                      <Route path={'/logoutpage'} element={<LogoutPage />} />
+                    </Route>
+                  </Routes>
                 </Box>
               </Box>
             </Main>
@@ -76,27 +92,4 @@ Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget
   );
 }
 
-/*
-                    <Routes>
-                      <Route path={'/'} element={<HomePage />} />
-                      <Route path={'/callback'} element={<AuthCallback />} />
-                      <Route path={'/loginpage'} element={<LoginPage />} />
-                      <Route element={<AdminGuard />}>
-                        <Route path={'/project/new'} element={<NewProject />} />
-                        <Route path={'/project/controls'} element={<ProjectControl />} />
-                        <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
-                        <Route path={'/study/new'} element={<NewStudy />} />
-                        <Route path={'/study/controls'} element={<StudyControl />} />
-                        <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
-                        <Route path={'/study/tags'} element={<DownloadTags />} />
-                        <Route path={'/successpage'} element={<SuccessPage />} />
-                        <Route path={'/dataset/controls'} element={<DatasetControls />} />
-                        <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
-                        <Route path={'/study/contribute'} element={<ContributePage />} />
-                        <Route path={'/tagging'} element={<TagView />} />
-                        <Route path={'/logoutpage'} element={<LogoutPage />} />
-                      </Route>
-                    </Routes>
-                    */
-
 export default App;
diff --git a/packages/client/src/components/SideBar.tsx b/packages/client/src/components/SideBar.tsx
index 66d08766..2c68c36f 100644
--- a/packages/client/src/components/SideBar.tsx
+++ b/packages/client/src/components/SideBar.tsx
@@ -63,6 +63,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
           boxSizing: 'border-box',
           backgroundColor: '#103F68',
           color: 'white',
+          paddingTop: 18,
           mt: '64px'
         }
       }}
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 6e7614cd..9ac59400 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -26,7 +26,6 @@ a:hover {
 body {
   margin: 0;
   place-items: center;
-  min-width: 320px;
   min-height: 100vh;
   padding: 10px;
 }
diff --git a/packages/client/src/pages/studies/UserPermissions.tsx b/packages/client/src/pages/studies/UserPermissions.tsx
index 8b8e042d..41a3e629 100644
--- a/packages/client/src/pages/studies/UserPermissions.tsx
+++ b/packages/client/src/pages/studies/UserPermissions.tsx
@@ -68,34 +68,39 @@ export const StudyUserPermissions: React.FC = () => {
   };
 
   const columns: GridColDef[] = [
-    { field: 'id', headerName: 'ID', flex: 0.3 },
+    {
+      field: 'id',
+      headerName: 'ID',
+      flex: 1,
+      maxWidth: 100
+    },
     {
       field: 'name',
       headerName: 'Name',
-      width: 150,
-      flex: 0.9,
-      editable: true
+      editable: true,
+      flex: 1
     },
     {
       field: 'username',
       headerName: 'Username',
-      flex: 0.9,
-      editable: true
+      editable: true,
+      flex: 1
     },
     {
       field: 'email',
       headerName: 'Email',
-      flex: 1.1,
+      flex: 1,
       editable: true
     },
     {
       field: 'adminSwitch',
       type: 'boolean',
       editable: true,
+      maxWidth: 200,
+      flex: 1,
       headerName: 'Study Admin',
       renderCell: (params) => <Switch checked={params.value} />,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     },
     {
       field: 'visibleSwitch',
@@ -103,22 +108,24 @@ export const StudyUserPermissions: React.FC = () => {
       editable: true,
       headerName: 'Study Visible',
       renderCell: (params) => <Switch checked={params.value} />,
+      maxWidth: 200,
+      flex: 1,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     },
     {
       field: 'switch',
       type: 'boolean',
       editable: true,
+      maxWidth: 200,
+      flex: 1,
       headerName: 'Contribute',
       renderCell: (params) => <Switch checked={params.value} />,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     }
   ];
 
   return (
-    <Box>
+    <Box sx={{ width: '90%' }}>
       <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
       <DataGrid
         getRowHeight={() => 'auto'}

From c157f01c4779289871b96e4f0b58411920cc05f3 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 12:59:05 -0400
Subject: [PATCH 4/6] Remove extra spacing styling

---
 packages/client/src/App.tsx                   |  6 +--
 .../src/components/ControlComponent.tsx       | 49 ++++++++-----------
 .../src/components/DatasetAccessComponent.tsx | 43 +++++++---------
 .../components/DatasetControlComponent.tsx    | 45 ++++++-----------
 packages/client/src/components/Dropdown.tsx   | 48 ------------------
 packages/client/src/components/SideBar.tsx    |  2 +-
 .../src/pages/datasets/DatasetControls.tsx    |  4 +-
 .../src/pages/datasets/ProjectAccess.tsx      |  4 +-
 .../client/src/pages/projects/NewProject.tsx  |  6 +--
 .../src/pages/projects/ProjectControl.tsx     | 16 +++---
 .../pages/projects/ProjectUserPermissions.tsx | 16 ++----
 .../client/src/pages/studies/NewStudy.tsx     |  2 +-
 .../client/src/pages/studies/StudyControl.tsx | 13 ++---
 .../src/pages/studies/UserPermissions.tsx     | 11 +++--
 14 files changed, 87 insertions(+), 178 deletions(-)
 delete mode 100644 packages/client/src/components/Dropdown.tsx

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 9fc20a53..0eb8897a 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -21,11 +21,11 @@ import { EnvironmentContextProvider } from './context/EnvironmentContext';
 import { AuthProvider } from './context/AuthContext';
 import { AdminGuard } from './guards/AdminGuard';
 import { LogoutPage } from './pages/LogoutPage';
-import { CssBaseline, Box, styled, Typography } from '@mui/material';
+import { CssBaseline, Box, styled } from '@mui/material';
 import { useState } from 'react';
 import { SideBar } from './components/SideBar';
 
-const drawerWidth = 240;
+const drawerWidth = 256;
 
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
   open?: boolean;
@@ -61,7 +61,7 @@ function App() {
             <Main open={drawerOpen}>
               <Box sx={{ display: 'flex' }}>
                 <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
-                <Box sx={{ flexGrow: 1 }}>
+                <Box sx={{ flexGrow: 1, width: '90%' }}>
                   <Routes>
                     <Route path={'/'} element={<HomePage />} />
                     <Route path={'/callback'} element={<AuthCallback />} />
diff --git a/packages/client/src/components/ControlComponent.tsx b/packages/client/src/components/ControlComponent.tsx
index 5930a6bc..d388d5d5 100644
--- a/packages/client/src/components/ControlComponent.tsx
+++ b/packages/client/src/components/ControlComponent.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/DeleteOutlined';
 import { GridRowModesModel, GridActionsCellItem, GridRowId } from '@mui/x-data-grid-pro';
@@ -31,13 +30,15 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
     {
       field: 'name',
       headerName: 'Name',
-      width: 200,
+      flex: 1,
+      maxWidth: 200,
       editable: true
     },
     {
       field: 'description',
       headerName: 'Description',
-      width: 575,
+      flex: 1,
+      minWidth: 500,
       editable: true
     },
     {
@@ -53,32 +54,22 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            whiteSpce: 'initial !important',
-            lineHeight: '16px !important',
-            paddingTop: '10px !important',
-            paddingBottom: '10px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 8
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 8
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/DatasetAccessComponent.tsx b/packages/client/src/components/DatasetAccessComponent.tsx
index 1fd50881..047b4be9 100644
--- a/packages/client/src/components/DatasetAccessComponent.tsx
+++ b/packages/client/src/components/DatasetAccessComponent.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Switch } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -72,31 +72,22 @@ export const DatasetAccessComponent: React.FC<Table> = ({ tableRows }: Table) =>
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 10
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 10
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/DatasetControlComponent.tsx b/packages/client/src/components/DatasetControlComponent.tsx
index 48c5707d..a8c46d59 100644
--- a/packages/client/src/components/DatasetControlComponent.tsx
+++ b/packages/client/src/components/DatasetControlComponent.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
 import { useState } from 'react';
@@ -27,34 +26,22 @@ export const DatasetControlComponent: React.FC<Table> = ({ tableRows, columns }:
   };
 
   return (
-    <Box sx={{ height: 350, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '&.MuiDataGrid-root': {
-            fontWeight: 'normal'
-          },
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 5
-            }
-          }
-        }}
-        pageSizeOptions={[5, 10, 15]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5, 10, 15]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/Dropdown.tsx b/packages/client/src/components/Dropdown.tsx
deleted file mode 100644
index bd3dfb9e..00000000
--- a/packages/client/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Accordion, Button, Link } from '@mui/material';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-interface SubLink {
-  title: string;
-  link?: string;
-}
-
-interface Link {
-  name: string;
-  sublinks: SubLink[];
-}
-
-interface LinksProps {
-  links: Link[];
-}
-
-export const DropdownComponent: React.FC<LinksProps> = ({ links }: LinksProps) => {
-  return (
-    <div>
-      {links?.map((item: Link) => (
-        <Accordion key={item.name} disableGutters elevation={0} sx={{ '&:before': { display: 'none' } }}>
-          <AccordionSummary key={item.name} expandIcon={<ExpandMoreIcon />}>
-            <Link underline={'none'}>{item.name}</Link>
-          </AccordionSummary>
-          <AccordionDetails key={item.name}>
-            {item.sublinks?.map((sublink: SubLink) => (
-              <p key={sublink.title}>
-                <Button
-                  sx={{
-                    fontSize: '15px',
-                    color: 'black'
-                  }}
-                  key={sublink.title}
-                  href={`/${sublink.link}`}
-                >
-                  {sublink.title}
-                </Button>
-              </p>
-            ))}
-          </AccordionDetails>
-        </Accordion>
-      ))}
-    </div>
-  );
-};
diff --git a/packages/client/src/components/SideBar.tsx b/packages/client/src/components/SideBar.tsx
index 2c68c36f..c6cf122c 100644
--- a/packages/client/src/components/SideBar.tsx
+++ b/packages/client/src/components/SideBar.tsx
@@ -30,7 +30,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
       icon: <School />,
       subItems: [
         { name: 'New Study', action: () => navigate('/study/new') },
-        { name: 'Study Control', action: () => navigate('/study/contols') },
+        { name: 'Study Control', action: () => navigate('/study/controls') },
         { name: 'User Permissions', action: () => navigate('/study/permissions') },
         { name: 'Entry Controls', action: () => navigate('/study/controls') },
         { name: 'Download Tags', action: () => navigate('/study/tags') }
diff --git a/packages/client/src/pages/datasets/DatasetControls.tsx b/packages/client/src/pages/datasets/DatasetControls.tsx
index bd21fbfe..df2abcc6 100644
--- a/packages/client/src/pages/datasets/DatasetControls.tsx
+++ b/packages/client/src/pages/datasets/DatasetControls.tsx
@@ -97,7 +97,7 @@ export const DatasetControls: React.FC = () => {
   };
 
   return (
-    <Box sx={{ position: 'absolute', top: '8%', left: '2.5%', right: '2.5%' }}>
+    <>
       <h3 style={{ top: '10%', paddingBottom: '10px' }}>Dataset Controls</h3>
       <Box sx={{ display: 'flex', paddingBottom: '20px' }}>
         <Box sx={{ width: '22%', height: '10%', display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
@@ -136,6 +136,6 @@ export const DatasetControls: React.FC = () => {
           </Accordion>
         ))}
       </Box>
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/datasets/ProjectAccess.tsx b/packages/client/src/pages/datasets/ProjectAccess.tsx
index 936468bd..c41c8071 100644
--- a/packages/client/src/pages/datasets/ProjectAccess.tsx
+++ b/packages/client/src/pages/datasets/ProjectAccess.tsx
@@ -35,7 +35,7 @@ const rows = [
 
 export const ProjectAccess: React.FC = () => {
   return (
-    <Box sx={{ position: 'absolute', top: '8%', left: '2.5%', right: '2.5%' }}>
+    <>
       <Typography variant="h5">Project Access</Typography>
       <Accordion disableGutters>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
@@ -63,6 +63,6 @@ export const ProjectAccess: React.FC = () => {
           </Container>
         </AccordionDetails>
       </Accordion>
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/projects/NewProject.tsx b/packages/client/src/pages/projects/NewProject.tsx
index 304dea4e..972edc26 100644
--- a/packages/client/src/pages/projects/NewProject.tsx
+++ b/packages/client/src/pages/projects/NewProject.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Button, Container } from '@mui/material';
+import { Button } from '@mui/material';
 import { useState } from 'react';
 import { materialRenderers, materialCells } from '@jsonforms/material-renderers';
 import { JsonForms } from '@jsonforms/react';
@@ -73,11 +73,11 @@ export const NewProject: React.FC = () => {
   };
 
   return (
-    <Container sx={{ left: '2%', width: '96%', top: '100px', position: 'absolute' }}>
+    <>
       <JsonForms schema={schema} uischema={uischema} data={data} renderers={materialRenderers} cells={materialCells} onChange={({ data }) => handleChange(data)} />
       <Button disabled={error} sx={{ marginTop: '35px', position: 'absolute', right: '5%' }} variant="contained" onClick={handleSubmit}>
         Submit
       </Button>
-    </Container>
+    </>
   );
 };
diff --git a/packages/client/src/pages/projects/ProjectControl.tsx b/packages/client/src/pages/projects/ProjectControl.tsx
index 6c525d10..36ed2a49 100644
--- a/packages/client/src/pages/projects/ProjectControl.tsx
+++ b/packages/client/src/pages/projects/ProjectControl.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from '@mui/material';
+import { Box } from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -30,14 +30,12 @@ const rows = [
 
 const ProjectControl: React.FC = () => {
   return (
-    <Container sx={{ position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-        <h3 style={{ top: '10%', paddingBottom: '10px' }}>Project Control</h3>
-        <Box>
-          <ControlComponent tableRows={rows} />
-        </Box>
-      </Container>
-    </Container>
+    <>
+      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Project Control</h3>
+      <Box>
+        <ControlComponent tableRows={rows} />
+      </Box>
+    </>
   );
 };
 
diff --git a/packages/client/src/pages/projects/ProjectUserPermissions.tsx b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
index 7dc85cac..eb285f68 100644
--- a/packages/client/src/pages/projects/ProjectUserPermissions.tsx
+++ b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Switch } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -94,17 +94,9 @@ export const ProjectUserPermissions: React.FC = () => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
+    <>
       <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
       <DataGrid
-        sx={{
-          width: '100%',
-          position: 'absolute',
-          '& .MuiDataGrid-cell': {
-            paddingTop: '6px !important',
-            paddingBottom: '8px !important'
-          }
-        }}
         getRowHeight={() => 'auto'}
         rows={rows}
         columns={columns}
@@ -113,7 +105,7 @@ export const ProjectUserPermissions: React.FC = () => {
         initialState={{
           pagination: {
             paginationModel: {
-              pageSize: 8
+              pageSize: 10
             }
           }
         }}
@@ -121,6 +113,6 @@ export const ProjectUserPermissions: React.FC = () => {
         checkboxSelection
         disableRowSelectionOnClick
       />
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/studies/NewStudy.tsx b/packages/client/src/pages/studies/NewStudy.tsx
index 1361bfd1..d8c4e263 100644
--- a/packages/client/src/pages/studies/NewStudy.tsx
+++ b/packages/client/src/pages/studies/NewStudy.tsx
@@ -36,7 +36,7 @@ export const NewStudy: React.FC = () => {
   }
 
   return (
-    <Container sx={{ position: 'absolute', left: '-5%', right: '-5%', alignItems: 'baseline', width: '100%', top: '100px', display: 'flex', flexDirection: 'column' }}>
+    <Container sx={{ flexDirection: 'column' }}>
       <Typography sx={{ margin: '10px 0px 15px 10px' }} variant="h5">
         Create New Study
       </Typography>
diff --git a/packages/client/src/pages/studies/StudyControl.tsx b/packages/client/src/pages/studies/StudyControl.tsx
index de2e6afc..71a0099c 100644
--- a/packages/client/src/pages/studies/StudyControl.tsx
+++ b/packages/client/src/pages/studies/StudyControl.tsx
@@ -1,4 +1,3 @@
-import { Box, Container } from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -40,13 +39,9 @@ const rows = [
 
 export const StudyControl: React.FC = () => {
   return (
-    <Container sx={{ position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-        <h3 style={{ top: '10%', paddingBottom: '10px' }}>Study Control</h3>
-        <Box sx={{ position: '-webkit-sticky' }}>
-          <ControlComponent tableRows={rows} />
-        </Box>
-      </Container>
-    </Container>
+    <>
+      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Study Control</h3>
+      <ControlComponent tableRows={rows} />
+    </>
   );
 };
diff --git a/packages/client/src/pages/studies/UserPermissions.tsx b/packages/client/src/pages/studies/UserPermissions.tsx
index 41a3e629..7ecfa54f 100644
--- a/packages/client/src/pages/studies/UserPermissions.tsx
+++ b/packages/client/src/pages/studies/UserPermissions.tsx
@@ -78,18 +78,21 @@ export const StudyUserPermissions: React.FC = () => {
       field: 'name',
       headerName: 'Name',
       editable: true,
-      flex: 1
+      flex: 1,
+      maxWidth: 300
     },
     {
       field: 'username',
       headerName: 'Username',
       editable: true,
-      flex: 1
+      flex: 1,
+      maxWidth: 300
     },
     {
       field: 'email',
       headerName: 'Email',
       flex: 1,
+      maxWidth: 300,
       editable: true
     },
     {
@@ -125,7 +128,7 @@ export const StudyUserPermissions: React.FC = () => {
   ];
 
   return (
-    <Box sx={{ width: '90%' }}>
+    <>
       <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
       <DataGrid
         getRowHeight={() => 'auto'}
@@ -144,6 +147,6 @@ export const StudyUserPermissions: React.FC = () => {
         checkboxSelection
         disableRowSelectionOnClick
       />
-    </Box>
+    </>
   );
 };

From a62c9d50e6b64fa5ef73547c50391bc7fe24b41e Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 13:41:58 -0400
Subject: [PATCH 5/6] Add in contribute option

---
 .../src/components/ControlComponent.tsx       |  2 +-
 packages/client/src/components/SideBar.tsx    | 10 +++++++-
 packages/client/src/components/TagView.tsx    |  4 +--
 .../src/pages/contribute/Contribute.tsx       | 25 +++++++++----------
 .../src/pages/datasets/DatasetControls.tsx    |  2 +-
 .../src/pages/projects/ProjectControl.tsx     |  4 +--
 .../pages/projects/ProjectUserPermissions.tsx |  6 ++---
 .../client/src/pages/studies/DownloadTags.tsx |  4 +--
 .../client/src/pages/studies/StudyControl.tsx |  3 ++-
 .../src/pages/studies/UserPermissions.tsx     |  4 +--
 10 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/ControlComponent.tsx b/packages/client/src/components/ControlComponent.tsx
index d388d5d5..7dae949f 100644
--- a/packages/client/src/components/ControlComponent.tsx
+++ b/packages/client/src/components/ControlComponent.tsx
@@ -63,7 +63,7 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
       initialState={{
         pagination: {
           paginationModel: {
-            pageSize: 8
+            pageSize: 5
           }
         }
       }}
diff --git a/packages/client/src/components/SideBar.tsx b/packages/client/src/components/SideBar.tsx
index c6cf122c..374f8b1d 100644
--- a/packages/client/src/components/SideBar.tsx
+++ b/packages/client/src/components/SideBar.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode, useState } from 'react';
 import { Collapse, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { ExpandMore, ExpandLess, School, Dataset, Work, Logout } from '@mui/icons-material';
+import { ExpandMore, ExpandLess, School, Dataset, Work, Logout, GroupWork } from '@mui/icons-material';
 import { useAuth } from '../context/AuthContext';
 import {useNavigate} from 'react-router-dom';
 
@@ -45,6 +45,14 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
         { name: 'Project Access', action: () => navigate('/dataset/projectaccess') }
       ]
     },
+    {
+      name: 'Contribute',
+      action: () => {},
+      icon: <GroupWork />,
+      subItems: [
+        { name: 'Tag in Study', action: () => navigate('/study/contribute') }
+      ]
+    },
     {
       name: 'Logout',
       action: logout,
diff --git a/packages/client/src/components/TagView.tsx b/packages/client/src/components/TagView.tsx
index d0ef47c1..f2ab34b1 100644
--- a/packages/client/src/components/TagView.tsx
+++ b/packages/client/src/components/TagView.tsx
@@ -1,7 +1,7 @@
 import { JsonForms } from '@jsonforms/react';
 import { materialRenderers, materialCells } from '@jsonforms/material-renderers';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Box, Button, Container } from '@mui/material';
+import { Box, Button, Container, Typography } from '@mui/material';
 import { useState } from 'react';
 
 export const TagView = () => {
@@ -49,7 +49,7 @@ export const TagView = () => {
         </Box>
       ) : (
         <Box>
-          <h4>No Entries Tagged</h4>
+          <Typography variant='h4'>No Entries Tagged</Typography>
           <Button variant="outlined" onClick={() => handleClick('')}>
             Navigate home
           </Button>
diff --git a/packages/client/src/pages/contribute/Contribute.tsx b/packages/client/src/pages/contribute/Contribute.tsx
index c8685310..e97bf7bf 100644
--- a/packages/client/src/pages/contribute/Contribute.tsx
+++ b/packages/client/src/pages/contribute/Contribute.tsx
@@ -1,4 +1,4 @@
-import { Container, Typography, Box, Stack, Button } from '@mui/material';
+import { Container, Typography, Box, Stack, Button, Grid } from '@mui/material';
 import placeholder from './placeholder.png';
 import { useNavigate } from 'react-router-dom';
 
@@ -92,26 +92,25 @@ export const ContributePage: React.FC = () => {
   };
 
   return (
-    <Container sx={{ left: '5%', width: '90%', top: '100px', position: 'absolute' }}>
-      <Typography sx={{ left: '2%', position: 'absolute' }} variant="h5">
+    <Box>
+      <Typography variant='h2'>
         Study: {initialData.name}
       </Typography>
-      <Box sx={{ position: 'absolute', width: '100%', top: '60px' }}>
-        {initialData.image && <img src={initialData.image} style={{ position: 'absolute', width: '45%', left: '1%' }} />}
-        <Stack spacing={3} direction="column" sx={{ width: '45%', right: '1%', position: 'absolute' }}>
-          <Typography variant="body1">{initialData.complete ? 'Study Training' : 'Study Tagging'}</Typography>
-          <Typography variant="body2">Study: {initialData.name}</Typography>
-          <Typography variant="body2">Description: {initialData.description}</Typography>
-          <Typography variant="body2">Instructions: {initialData.instructions}</Typography>
+      <Box sx={{ justifyContent: 'center' }}>
+        <Stack spacing={3} direction='column' sx={{ width: '30%' }}>
+          <Typography variant='h3'>{initialData.complete ? 'Study Training' : 'Study Tagging'}</Typography>
+          <Typography variant='body2'>Study: {initialData.name}</Typography>
+          <Typography variant='body2'>Description: {initialData.description}</Typography>
+          <Typography variant='body2'>Instructions: {initialData.instructions}</Typography>
           {initialData.complete ? (
-            <Typography variant="body2">Training Complete! Reach out to your study administrator to get access to tagging</Typography>
+            <Typography variant='body2'>Training Complete! Reach out to your study administrator to get access to tagging</Typography>
           ) : (
-            <Button variant="outlined" sx={{ width: '40%', color: 'black' }} onClick={handleSubmit}>
+            <Button variant='outlined' onClick={handleSubmit} sx={{ width: '100px' }}>
               Enter tagging
             </Button>
           )}
         </Stack>
       </Box>
-    </Container>
+    </Box>
   );
 };
diff --git a/packages/client/src/pages/datasets/DatasetControls.tsx b/packages/client/src/pages/datasets/DatasetControls.tsx
index df2abcc6..fce4c3a3 100644
--- a/packages/client/src/pages/datasets/DatasetControls.tsx
+++ b/packages/client/src/pages/datasets/DatasetControls.tsx
@@ -98,7 +98,7 @@ export const DatasetControls: React.FC = () => {
 
   return (
     <>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Dataset Controls</h3>
+      <Typography variant='h3'>Dataset Controls</Typography>
       <Box sx={{ display: 'flex', paddingBottom: '20px' }}>
         <Box sx={{ width: '22%', height: '10%', display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
           <IconButton sx={{ color: 'orange', right: '-3%' }} onClick={() => handleClick('add')}>
diff --git a/packages/client/src/pages/projects/ProjectControl.tsx b/packages/client/src/pages/projects/ProjectControl.tsx
index 36ed2a49..2e380beb 100644
--- a/packages/client/src/pages/projects/ProjectControl.tsx
+++ b/packages/client/src/pages/projects/ProjectControl.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -31,7 +31,7 @@ const rows = [
 const ProjectControl: React.FC = () => {
   return (
     <>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Project Control</h3>
+      <Typography variant='h3'>Project Control</Typography>
       <Box>
         <ControlComponent tableRows={rows} />
       </Box>
diff --git a/packages/client/src/pages/projects/ProjectUserPermissions.tsx b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
index eb285f68..003a8994 100644
--- a/packages/client/src/pages/projects/ProjectUserPermissions.tsx
+++ b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
@@ -1,4 +1,4 @@
-import { Switch } from '@mui/material';
+import { Switch, Typography } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -95,7 +95,7 @@ export const ProjectUserPermissions: React.FC = () => {
 
   return (
     <>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
+      <Typography variant='h3'>User Permissions</Typography>
       <DataGrid
         getRowHeight={() => 'auto'}
         rows={rows}
@@ -105,7 +105,7 @@ export const ProjectUserPermissions: React.FC = () => {
         initialState={{
           pagination: {
             paginationModel: {
-              pageSize: 10
+              pageSize: 5
             }
           }
         }}
diff --git a/packages/client/src/pages/studies/DownloadTags.tsx b/packages/client/src/pages/studies/DownloadTags.tsx
index df5a47f7..210011a7 100644
--- a/packages/client/src/pages/studies/DownloadTags.tsx
+++ b/packages/client/src/pages/studies/DownloadTags.tsx
@@ -1,9 +1,9 @@
-import { Button, Container } from '@mui/material';
+import { Button, Container, Typography } from '@mui/material';
 
 export const DownloadTags: React.FC = () => {
   return (
     <Container sx={{ position: 'center', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-      <h3 style={{ marginLeft: 'auto', marginRight: 'auto', top: '10%', paddingBottom: '10px' }}>Download Tags</h3>
+      <Typography variant='h3'>Download Tags</Typography>
       <Button variant="outlined" sx={{ marginLeft: 'auto', marginRight: 'auto', width: 200 }}>
         Download Tag CSV
       </Button>
diff --git a/packages/client/src/pages/studies/StudyControl.tsx b/packages/client/src/pages/studies/StudyControl.tsx
index 71a0099c..3cce760a 100644
--- a/packages/client/src/pages/studies/StudyControl.tsx
+++ b/packages/client/src/pages/studies/StudyControl.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -40,7 +41,7 @@ const rows = [
 export const StudyControl: React.FC = () => {
   return (
     <>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Study Control</h3>
+      <Typography variant='h3'>Study Control</Typography>
       <ControlComponent tableRows={rows} />
     </>
   );
diff --git a/packages/client/src/pages/studies/UserPermissions.tsx b/packages/client/src/pages/studies/UserPermissions.tsx
index 7ecfa54f..90718c7c 100644
--- a/packages/client/src/pages/studies/UserPermissions.tsx
+++ b/packages/client/src/pages/studies/UserPermissions.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Box, Switch, Typography } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -129,7 +129,7 @@ export const StudyUserPermissions: React.FC = () => {
 
   return (
     <>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
+      <Typography variant='h3'>User Permissions</Typography>
       <DataGrid
         getRowHeight={() => 'auto'}
         rows={rows}

From 4431fa517d4db1778e3011cd84050ecf423920c9 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 14 Sep 2023 13:58:04 -0400
Subject: [PATCH 6/6] Add in contribute option

---
 packages/client/src/pages/projects/NewProject.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/projects/NewProject.tsx b/packages/client/src/pages/projects/NewProject.tsx
index 972edc26..824b3313 100644
--- a/packages/client/src/pages/projects/NewProject.tsx
+++ b/packages/client/src/pages/projects/NewProject.tsx
@@ -75,7 +75,7 @@ export const NewProject: React.FC = () => {
   return (
     <>
       <JsonForms schema={schema} uischema={uischema} data={data} renderers={materialRenderers} cells={materialCells} onChange={({ data }) => handleChange(data)} />
-      <Button disabled={error} sx={{ marginTop: '35px', position: 'absolute', right: '5%' }} variant="contained" onClick={handleSubmit}>
+      <Button disabled={error} variant="contained" onClick={handleSubmit}>
         Submit
       </Button>
     </>