before merging Elena's testing code

Author: Anthonytorrero

app/src/Dashboard/Project.tsx

@@ -201,9 +201,11 @@ const Project = ({
     : '' }
     <div className = 'header'>
       <div className = 'projectInfo'>
-        <h2>Project: { name }</h2>
-        <h3>Author: { username }</h3>
-        <h3>Likes: { likes }</h3>
+        <b>
+          <h2>Project: { name }</h2>
+          <h3>Author: { username }</h3>
+          <h3>Likes: { likes }</h3>
+        </b>
       </div>
       <div className = "icons">
           <IconButton tooltip="Like Template" style={noPointer} onClick = { handleLike }>

app/src/Dashboard/ProjectContainer.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useContext, useEffect, createContext } from 'react';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
 import { useQuery } from '@apollo/client';
 import { GET_PROJECTS } from './gqlStrings';
 import Project from './Project';
@@ -19,6 +21,7 @@ export const styleContext = createContext({
 const lightTheme = theme1;
 const darkTheme = theme2; // dark mode color in theme.ts not reached
 
+
 const ProjectContainer = () => {
   const myVar = {};
   // Need this for the individual user dasboard, for now, dashboard shows all projects from all users
@@ -119,14 +122,14 @@ const ProjectContainer = () => {
     <div className = "dashboardContainer">
       <NavBarDash setTheme={setTheme} styles={[style, setStyle]} isThemeLight={isThemeLight} optionClicked={optionClicked}/>
       <h1> Public Dashboard </h1>
-        <div className = "projectContainer">
+        <Grid className = "projectContainer" container justify='flex-start' wrap='wrap' spacing={3}>
             {sortedDisplay}
-        </div>
+        </Grid>
       <hr></hr>
         <h1> User Dashboard </h1>
-        <div className = "projectContainer">
+        <Grid className = "projectContainer" container justify='flex-start' wrap='wrap'>
           {userDisplay}
-        </div>
+        </Grid>
     </div>
     </MuiThemeProvider>
   );

app/src/Dashboard/styles.css

@@ -34,7 +34,7 @@ $button-blue: #24BCFF; */
   overflow: scroll;
 }
 
-.formContainer , .projectContainer{
+.formContainer {
   display: flex;
   flex-flow: row wrap;
   overflow: scroll;
@@ -101,7 +101,7 @@ $button-blue: #24BCFF; */
 .header {
   background-color: #0CBABA;
   color: rgba(255, 255, 255, 0.897);
-  opacity: 0.7;
+  opacity: 0.6;
   width: 100%;
 }
 /* .formContainer {