Merge pull request #4 from patpat20/master

styling changes

Author: gracepark01

app/charts/RouteCopy.jsx

@@ -199,7 +199,7 @@ const RouteLocations = props => {
 
   return (
     <div className='traceContainer'> 
-      <span id='trace'>Traces</span>
+      <span id='tracesTitle'>Traces</span>
       <Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '8px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', backgroundColor: 'white' }} />
     </div>
   );

app/components/About.tsx

@@ -1,32 +1,34 @@
 import React from 'react';
 import '../stylesheets/About.scss';
+
 const About: React.FC = () => {
   return (
     <div className="home">
       <div className="blurb">
-        <h3 className="para">About</h3>
-        <p className="para">
+        <h3 className="mainTitle">About</h3>
+        <p className="text">
           The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
           the developer community. With many existing paid options being difficult to use and expensive to operate, Chronos was
           born. Chronos is an all-in-one network and health monitoring tool for your application or
           microservice, containerized or not!
         </p>
         <div className="doya">
-          <h3 className="para">Team Doya</h3><span id="sproutSpan"><img className="sprout" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
-          <br/>
+          <h3 className="title">Team Doya</h3><span><img className="sprout" id="sproutSpan" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
+          <br />
           <div>
-            <span className="para">Grace </span><br />
-            <span className="para">Jen </span><br />
-            <span className="para">Patty </span><br />
-            <span className="para">Stella </span><br /><br />
+            <span className="text">Grace </span><br />
+            <span className="text">Jen </span><br />
+            <span className="text">Patty </span><br />
+            <span className="text">Stella </span><br /><br />
           </div>
         </div>
-        <h3 className="para">Contributors</h3>
-        <p className="para">Michael, Ronelle, Todd, Greg
+        <h3 className="title">Contributors</h3>
+        <p className="text">Michael, Ronelle, Todd, Greg
         Brianna, Brian, Alon, Alan
         Ousman, Ben, Chris, Jenae, Tim</p>
       </div>
     </div>
   );
 };
-export default About;
+
+export default About;

app/components/Applications.tsx

@@ -87,7 +87,7 @@ const Applications = () => {
       [theme.breakpoints.up('lg')]: {
         fontSize: '18px',
         // MAIN PAGE SQUARE BUTTON FONTS
-        fontFamily: 'Inter'
+        fontFamily: 'Open Sans'
       },
     },
   }));

app/components/Contact.tsx

@@ -1,29 +1,22 @@
 import React from 'react';
-import '../stylesheets/Contact.css';
+import '../stylesheets/Contact.scss';
 
 const Contact: React.FC = () => {
   return (
     <div className="contact">
       <div className="contact-border">
         <div className="contact-container">
           <div className="contact-blurb">
-            <h1>Contact Us!</h1>
+            <h1>Contact Us</h1>
             <br />
-            <p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</p>
+            <p>Please feel free to provide any feedback, concerns, or comments.</p>
             <p>
               You can find issues the team is currently working on&nbsp;
-              <a href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
+              <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
                 here
               </a>
               .
             </p>
-            <p>
-              If you would like your voice heard, fill out the form and we will get back to you
-              ASAP!
-            </p>
-          </div>
-          <div className="chronos-contact-container">
-            <img src={'../assets/chronos-v4.png'} alt="Chronos logo" />
           </div>
         </div>
         <div className="email-container">
@@ -40,9 +33,11 @@ const Contact: React.FC = () => {
             <label htmlFor="subject">Subject: &nbsp;</label>
             <input type="text" id="subject" name="subject" placeholder="Subject" />
             <br />
-            <label htmlFor="message">Message: </label>
-            <br />
-            <textarea id="message" name="message" placeholder="Write something.."></textarea>
+            <label id="messageLabel" htmlFor="message">Message: <span>
+              <textarea id="message" name="message" placeholder="Write something.."></textarea>
+            </span>
+            </label>
+
             <br />
             <label htmlFor="myfile">Select a file: </label>
             <input type="file" id="myfile" name="myfile" accept="image/*"></input>

app/components/Copyright.tsx

@@ -8,13 +8,14 @@ export interface CopyrightProps {}
 const Copyright = () => {
   const useStyles = makeStyles(theme => ({
     copyright: {
-      fontFamily: 'Inter',
+      fontFamily: 'Open Sans',
       position: 'fixed',
+      color: "#ffffff"
     }
   }))
   const classes = useStyles();
   return (
-  <Typography className={classes.copyright} variant="body2" color="textSecondary" align="center">
+  <Typography className={classes.copyright} variant="body2" align="center">
     {'Copyright © '}
     <Link color="inherit" href="https://chronoslany.com/" target="_blank">
       Team Chronos

app/components/Header.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
-import { useHistory } from 'react-router-dom';
-
+import { useHistory, Link } from 'react-router-dom';
+import ListIcon from '@material-ui/icons/List';
 import { ApplicationContext } from '../context/ApplicationContext';
 import '../stylesheets/Header.scss';
 
@@ -18,7 +18,7 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
 
   return (
     <div className="microservice-header">
-      <h1>{app}</h1>
+      <h1 className="microserviceTitle">{app}</h1>
       <select name="microservice" value={service} onChange={e => history.replace(e.target.value)}>
         {servicesData.map(({ _id, microservice }: any) => (
           <option key={_id} value={`${microservice}`} selected={service === microservice}>
@@ -29,16 +29,22 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
           communications
         </option>
       </select>
-      <div className="header-btns">
-        <button onClick={() => history.goBack()}>Return to Applications</button>
-        <button onClick={() => setLive(!live)}>
+      <div className="header">
+        <Link className="link" id="return" to="/applications">
+          <span>
+            <ListIcon className="icon" id="returnIcon" />
+          </span>
+          <p id="returnToDash">Dashboard</p>
+        </Link>
+        {/* <button id="returnButton" onClick={() => history.goBack()}><ListIcon className="icon" id="returnIcon" /></button> */}
+        <button id="liveButton" onClick={() => setLive(!live)}>
           {live ? (
             <div>
-              <span className="dot"></span>Live
+              <span id="live">Live</span>
             </div>
           ) : (
-            <div id='gather'>Gather Live Data</div>
-          )}
+              <div id="gatherLiveData" >Gather Live Data</div>
+            )}
         </button>
       </div>
     </div>

app/components/Occupied.tsx

@@ -1,23 +1,24 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useContext, useEffect, useState, useRef, forwardRef } from 'react';
 
 // MATERIAL UI METHODS
 import {
   IconButton,
-  Modal, 
+  Modal,
   Card,
   CardHeader,
   CardContent,
-  Button, 
-  Typography } from '@material-ui/core';
+  Button,
+  Typography
+} from '@material-ui/core';
 import { Theme, makeStyles } from '@material-ui/core/styles';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 
 // MATERIAL UI ICONS
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
 import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
-import ListIcon from '@material-ui/icons/List';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
+import ListIcon from '@material-ui/icons/List';
 import SearchIcon from '@material-ui/icons/Search';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import NotificationsIcon from '@material-ui/icons/Notifications';
@@ -39,14 +40,13 @@ interface StyleProps {
 };
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
-const Occupied: React.FC = () => {
+const Occupied: React.FC = React.memo(function Occupied(props) {
   const { applications, getApplications, deleteApp } = useContext(DashboardContext);
   const [open, setOpen] = useState<boolean>(false);
   const [addOpen, setAddOpen] = useState<boolean>(false);
-
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
-  
+  const [searchTerm, setSearchTerm] = useState<string>('Search...');
   // Dynamic refs
   const delRef = useRef<any>([]);
 
@@ -68,8 +68,8 @@ const Occupied: React.FC = () => {
       setOpen(true);
     }
   };
+
   const useStyles = makeStyles<Theme, StyleProps>(theme => ({
-    // card: "+" button only
     paper: {
       height: 280,
       width: 280,
@@ -81,7 +81,7 @@ const Occupied: React.FC = () => {
       border: '0',
       boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
       '&:hover, &.Mui-focusVisible': {
-        backgroundColor: `#ccd8e1`,
+        backgroundColor: `#b5d3e9`,
         color: '#ffffff',
       },
     },
@@ -97,7 +97,7 @@ const Occupied: React.FC = () => {
       color: '#eeeeee',
       borderRadius: '0',
       backgroundColor: 'transparent',
-      '&:hover' : {
+      '&:hover': {
         backgroundColor: 'none'
       }
     },
@@ -111,10 +111,7 @@ const Occupied: React.FC = () => {
   const classes = useStyles({} as StyleProps);
 
   return (
-    
     <div className="entireArea">
-      <div className="sidebarArea">
-      </div>
       <div className="dashboardArea">
         <header className="mainHeader">
           <section className="header" id="leftHeader">
@@ -124,16 +121,16 @@ const Occupied: React.FC = () => {
           <section className="header" id="rightHeader">
             <form className="form">
               <label className="inputContainer">
-                <input className="form" id="textInput" value={`Search`} type="text" name="search" />
+                <input className="form" id="textInput" placeholder={searchTerm} onChange={e => setSearchTerm(e.target.value)} type="text" name="search" />
                 <hr />
               </label>
               <button className="form" id="submitBtn" type="submit">
-                <SearchIcon className="icon" id="searchIcon"/>
+                <SearchIcon className="icon" id="searchIcon" />
               </button>
             </form>
-            <DashboardIcon className="sideIcon" id="dashboardIcon"/>
-            <NotificationsIcon className="sideIcon" id="notificationsIcon"/>
-            <PersonIcon className="sideIcon" id="personIcon"/>
+            <DashboardIcon className="sideIcon" id="dashboardIcon" />
+            <NotificationsIcon className="sideIcon" id="notificationsIcon" />
+            <PersonIcon className="sideIcon" id="personIcon" />
           </section>
         </header>
 
@@ -144,7 +141,7 @@ const Occupied: React.FC = () => {
             </Button>
           </div>
           {applications.map((app: string[], i: number | any | string | undefined) => (
-            <div className="card" id={`card-${i}`}>
+            <div className="card" key={`card-${i}`} id={`card-${i}`}>
               <Card
                 key={`card-${i}`}
                 className={classes.paper}
@@ -159,7 +156,7 @@ const Occupied: React.FC = () => {
                       aria-label="Delete"
                       onClick={event => confirmDelete(event, app[0], i)}
                     >
-                      <HighlightOffIcon className={classes.btnStyle} id='deleteIcon' />
+                      <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
                     </IconButton>
                   }
                 ></CardHeader>
@@ -173,12 +170,12 @@ const Occupied: React.FC = () => {
             <AddModal setOpen={setAddOpen} />
           </Modal>
           <Modal open={open} onClose={() => setOpen(false)}>
-            <ServicesModal i={index} app={app} />
+            <ServicesModal key={`key-${index}`} i={index} app={app} />
           </Modal>
         </div>
       </div>
     </div>
   );
-};
+});
 
 export default Occupied;

app/components/Settings.tsx

@@ -7,8 +7,7 @@ import React from 'react';
 const Settings: React.FC = () => {
   return (
     <div className="home">
-      <h1>Currently under construction, coming soon!</h1>
-      <p>Contact the Chronos Team for anything you'd like to see!</p>
+      <p id="settings"></p>
     </div>
   );
 };

app/containers/GraphsContainer.tsx

@@ -32,7 +32,7 @@ export interface GraphsContainerProps {
 }
 
 const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
-  const { app, service } = useParams();
+  const { app, service } = useParams<any>();
   const [live, setLive] = useState<boolean>(false);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
 

app/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>CHRONOS</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100&family=Lexend+Peta&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Inter:wght@100&family=Lexend+Peta&display=swap" />
     <script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
     <base href='/'/>
   </head>