Merge branch 'dev' into stephenfeature

Author: stephenhyang

app/charts/LogsTable.jsx

@@ -9,16 +9,20 @@ import { useTable, useGroupBy, useExpanded } from 'react-table';
 
 import { CommsContext } from '../context/CommsContext';
 
+
 /**
  * Styling for the Logs Table
  */
 
 const Styles = styled.div`
   padding: 1rem;
+  
 
   table {
     border-spacing: 0;
     border: 1px solid black;
+    background-color: #D7D7DC;
+    
 
     tr {
       :last-child {
@@ -158,10 +162,10 @@ const LogsTable = () => {
   );
 
   const data = useContext(CommsContext).commsData;
-
+ 
   return (
-    <Styles>
-      <Table columns={columns} data={data} />
+    <Styles >
+      <Table columns={columns} data={data}  />
     </Styles>
   );
 };

app/components/About/About.tsx

@@ -2,17 +2,23 @@ import React from 'react';
 import './styles.scss';
 import TeamMembers from './TeamMembers';
 import PastContributors from './PastContributors';
-import { useStylingContext } from './StylingContext';
-
+// import { useStylingContext } from './StylingContext';
+import { useContext } from 'react';
+import lightAndDark from '../Styling';
+import { DashboardContext } from '../../context/DashboardContext';
 
 const About: React.FC = React.memo(() => {
-  const currentMode = useStylingContext();
+  const { mode } = useContext(DashboardContext);
 
+  const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
-    <div className="about">
-      <div className="blurb" data-testid="aboutPage">
-        <h3 style={currentMode} className="mainTitle">About</h3>
-        <p style={currentMode} className="text" >
+
+    
+    <div className="about" >
+      <div className="blurb" data-testid="aboutPage" style={currentStyle}>
+        <h3 style={currentStyle} className="mainTitle">About</h3>
+        <p style={currentStyle} className="text" >
           The Chronos Team has a passion for building tools that are powerful, beautifully
           designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer
           community. It can also monitor applications deployed using AWS, EC2, and ECS from Amazon.

app/components/About/PastContributors.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStylingContext } from './StylingContext';
 
 const contributors = [
-  'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
+  'Haoyu', 'Eisha', 'Edwin', 'Tyler', 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince',
   'Matt', 'Derek', 'Kit', 'Grace', 'Jen', 'Patty', 'Stella', 'Michael', 'Ronelle', 'Todd',
   'Greg', 'Brianna', 'Brian', 'Alon', 'Alan', 'Ousman', 'Ben', 'Chris', 'Jenae', 'Tim',
   'Kirk', 'Jess', 'William', 'Alexander', 'Elisa', 'Josh', 'Troy', 'Gahl', 'Brisa', 'Kelsi', 

app/components/About/TeamMembers.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStylingContext } from './StylingContext';
 
-const names = ['Haoyu', 'Eisha', 'Edwin', 'Tyler'];
+const names = ['Mike', 'Stephen', 'Ted', 'Sofia'];
 
 const TeamMembers: React.FC = () => {
   const currentMode = useStylingContext();

app/components/About/styles.scss

@@ -3,11 +3,11 @@
 .about {
   min-width: 421px;
   max-width: 600px;
-  margin: auto 20px;
+  margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 90%;
+  width: 100%;
   height: 100%;
 }
 
@@ -33,7 +33,7 @@
   font-size: 20px;
   color: $background;
   text-align: left;
-  font-weight: 200;
+  font-weight: 300;
 }
 
 .blurb {

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -1,68 +1,24 @@
 
-import React, { useContext, useRef } from "react";
-import { useNavigate } from 'react-router-dom';
+import React from "react";
 import { Card,CardHeader,IconButton,CardContent,Typography } from "@mui/material";
-import { DashboardContext } from "../../context/DashboardContext";
-import { ApplicationContext } from "../../context/ApplicationContext";
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import UpdateIcon from '@mui/icons-material/Update';
-import './styles.scss'
-
-type ClickEvent = React.MouseEvent<HTMLElement>;
-
-const ApplicationsCard = (props) => {
-
-  const { application, i, setModal, classes } = props
-  const { deleteApp,user,applications } = useContext(DashboardContext)
-  const { setAppIndex, setApp, setServicesData, app,example,connectToDB,setChart } = useContext(ApplicationContext)
-  const [ cardName,dbType,dbURI,description,serviceType ] = application
+import './styles.scss';
+import { getEventHandlers } from './EventHandlers';
 
-  //dynamic refs
-  // const delRef = useRef<any>([]);
-
-  const navigate = useNavigate();
+interface ApplicationCardProps {
+  application: any[];
+  i: number;
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+  classes: any;
+}
 
-  // Handle clicks on Application cards
-  // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance,
-  // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService
-  const handleClick = (
-    selectedApp: string,
-    selectedService: string,
-    i: number
-  ) => {
-    const services = ['auth','client','event-bus','items','inventory','orders']
-    // if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
-      setAppIndex(i);
-      setApp(selectedApp);
-      if (
-        selectedService === 'AWS' ||
-        selectedService === 'AWS/EC2' ||
-        selectedService === 'AWS/ECS' ||
-        selectedService === 'AWS/EKS'
-      ) {
-        navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
-      } 
-      else if(example) {
-        setServicesData([]);
-        setChart('communications')
+import './styles.scss'
 
-        connectToDB(user, i, app, dbURI, dbType)
-        navigate(`/applications/example/${services.join(' ')}`)
-      }
-      else {
-        setServicesData([]);
-        //When we open the service modal a connection is made to the db in a useEffect inside of the service modal component
-        setModal({isOpen:true,type:'serviceModal'})
-      }
-    // }
-  };
+const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
 
-  // Asks user to confirm deletion
-  const confirmDelete = (event: ClickEvent, i: number) => {
-    event.stopPropagation()
-    const message = `The application '${app}' will be permanently deleted. Continue?`;
-    if (confirm(message)) deleteApp(i,"");
-  };
+  const { application, i, setModal, classes } = props
+  const { handleClick, confirmDelete } = getEventHandlers({ application, setModal });
 
   return (
     <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
@@ -73,8 +29,7 @@ const ApplicationsCard = (props) => {
         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
-          <div className="databaseIconHeader">
-          </div>
+          <div className="databaseIconHeader"></div>
         </div>
 
         <CardHeader
@@ -84,11 +39,9 @@ const ApplicationsCard = (props) => {
               className={classes.iconbutton}
               aria-label="Delete"
               onClick={event => confirmDelete(event, i)}
-              size="large">
-              <HighlightOffIcon
-                className={classes.btnStyle}
-                id="deleteIcon"
-              />
+              size="large"
+            >
+              <HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
             </IconButton>
           }
         />
@@ -110,6 +63,6 @@ const ApplicationsCard = (props) => {
       </Card>
     </div>
   );
-}
+};
 
-export default ApplicationsCard
+export default ApplicationsCard;

app/components/ApplicationsCard/EventHandlers.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { DashboardContext } from '../../context/DashboardContext';
+import { ApplicationContext } from '../../context/ApplicationContext';
+
+type ClickEvent = React.MouseEvent<HTMLElement>;
+
+interface EventHandlersProps {
+  application: any[];
+  setModal: (modalState: { isOpen: boolean; type: string }) => void;
+}
+
+export const getEventHandlers = ({ application, setModal }: EventHandlersProps) => {
+  const { deleteApp, user } = useContext(DashboardContext);
+  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } =
+    useContext(ApplicationContext);
+  const navigate = useNavigate();
+
+  const handleClick = (selectedApp: string, selectedService: string, i: number) => {
+    const services = ['auth', 'client', 'event-bus', 'items', 'inventory', 'orders'];
+    setAppIndex(i);
+    setApp(selectedApp);
+    if (['AWS', 'AWS/EC2', 'AWS/ECS', 'AWS/EKS'].includes(selectedService)) {
+      navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
+    } else if (example) {
+      setServicesData([]);
+      setChart('communications');
+      connectToDB(user, i, app, application[2], application[1]);
+      navigate(`/applications/example/${services.join(' ')}`);
+    } else {
+      setServicesData([]);
+      setModal({ isOpen: true, type: 'serviceModal' });
+    }
+  };
+
+  const confirmDelete = (event: ClickEvent, i: number) => {
+    event.stopPropagation();
+    const message = `The application '${app}' will be permanently deleted. Continue?`;
+    if (confirm(message)) deleteApp(i, '');
+  };
+
+  return { handleClick, confirmDelete };
+};

app/components/Contact/Contact.tsx

@@ -8,16 +8,17 @@ const Contact: React.FC = React.memo(() => {
   const { mode } = useContext(DashboardContext);
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
 
   return (
     <div className="contact" style={currentMode}>
-      <div className="contact-border" data-testid="contactPage">
+      <div className="contact-border" data-testid="contactPage" style={currentStyle}>
         <div className="contact-container">
           <div className="contact-blurb">
             <h1>Contact Us</h1>
             <br />
             <p>Please feel free to provide any feedback, concerns, or comments.</p>
-            <p>You can find issues the team is currently working on
+            <p>You can find issues the team is currently working on  <span></span>
               <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank" rel="noreferrer">
                 here
               </a>.

app/components/Contact/ContactForm.tsx

@@ -26,7 +26,7 @@ const ContactForm = ({ currentMode }) => {
 };
 
 const FormInput: React.FC<FormInputProps> = ({ label, name, placeholder, type = "text", isTextarea = false, accept }) => (
-  <label htmlFor={name}>
+  <label htmlFor={name} style={{ fontWeight: 300 }}>
     {label}:
     {isTextarea ? (
       <textarea id={name} name={name} placeholder={placeholder} />

app/components/Contact/styles.scss

@@ -16,6 +16,7 @@
   justify-content: center;
   align-items: center;
   color: $background;
+  
 }
 .contact-border {
   display: flex;
@@ -102,12 +103,12 @@
 
 #myfile {
   font-size: 16px;
-  color: $background;
+  color: $header;
 }
 
 #contact-submit {
   border: none;
-  color: $background;
+  color: $header;
 
   &:hover {
     border: none;
@@ -147,9 +148,9 @@ input[type='file'] {
   margin-top: 20px;
   margin-left: -4px;
   padding: 10px;
-  border: 1px dotted $background;
+  border: 1px dotted $header;
   outline: none;
-  color: $background;
+  color: $header;
   background-color: transparent;
   border-radius: 8px;
   &:hover {
@@ -165,3 +166,7 @@ input[type='file'] {
     color: blue !important;
   }
 }
+
+.contact-blurb p{
+  font-weight: 300;
+}