Merge branch 'dev' into sofia

Author: sarhiri

app/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Splash from './components/Splash';
+import Splash from './components/Splash/Splash';
 import DashboardContainer from './containers/DashboardContainer';
 import './stylesheets/scrollBar.scss';
 

app/assets/search.svg

@@ -0,0 +1,28 @@
+import React from 'react';
+import './styles.scss';
+import TeamMembers from './TeamMembers';
+import PastContributors from './PastContributors';
+import { useStylingContext } from './StylingContext';
+
+
+const About: React.FC = React.memo(() => {
+  const currentMode = useStylingContext();
+
+  return (
+    <div className="about">
+      <div className="blurb" data-testid="aboutPage">
+        <h3 style={currentMode} className="mainTitle">About</h3>
+        <p style={currentMode} 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.
+        </p>
+        <br></br>
+        <TeamMembers />
+        <PastContributors />
+      </div>
+    </div>
+  );
+});
+
+export default About;

app/components/About.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useStylingContext } from './StylingContext';
+
+const contributors = [
+  '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', 
+  'Lucie', 'Jeffrey', 'Justin'
+];
+
+const PastContributors: React.FC = () => {
+  const currentMode = useStylingContext();
+
+  return (
+    <div>
+      <h3 style={currentMode} className="title">
+        Past Contributors
+      </h3>
+      <p style={currentMode} className="text">
+        {contributors.join(', ')}
+      </p>
+      <br />
+    </div>
+  );
+};
+
+export default PastContributors;

app/components/About/About.tsx

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { DashboardContext } from '../../context/DashboardContext';
+import lightAndDark from '../Styling'; 
+
+export const useStylingContext = () => {
+    const { mode } = useContext(DashboardContext);
+    const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+    return currentMode;
+};

app/components/About/PastContributors.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useStylingContext } from './StylingContext';
+
+const names = ['Haoyu', 'Eisha', 'Edwin', 'Tyler'];
+
+const TeamMembers: React.FC = () => {
+  const currentMode = useStylingContext();
+
+  const nameList = names.map(name => (
+    <span key={name} style={currentMode} className="text">
+      <p>{name}</p>
+    </span>
+  ));
+
+  return (
+    <div>
+      <h3 style={currentMode} className="title">
+        Current Version Authors
+      </h3>
+      <div id='OSPNames'>
+        {nameList}
+        <br />
+      </div>
+    </div>
+  );
+};
+
+export default TeamMembers;

app/components/About/StylingContext.tsx

@@ -1,4 +1,4 @@
-@import './constants.scss';
+@import '../../stylesheets/constants.scss';
 
 .about {
   min-width: 421px;
@@ -72,4 +72,4 @@
 
 p {
   padding-left: 10px;
-}
+}

app/components/About/TeamMembers.tsx

@@ -45,6 +45,7 @@ const ApplicationsCard = (props) => {
         setAppIndex(i);
         setApp(selectedApp);
         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'})
       }
     }

app/stylesheets/About.scss app/components/About/styles.scssapp/stylesheets/About.scss renamed to app/components/About/styles.scss

@@ -204,3 +204,45 @@
     height: 55px;
   }
 }
+
+.cardLine {
+  background-color: $grey;
+  width: 85%;
+  border: none;
+  height: 1px;
+  margin-top: 20px;
+  margin-bottom: 15px;
+}
+
+.cardFooter {
+  width: 90%;
+  display: flex;
+  height: 20px;
+  align-items: center;
+  margin-left: 18px;
+}
+
+#cardFooterText {
+  color: $icon;
+  font-size: 11px;
+  margin: 0;
+  margin-left: 10px;
+}
+
+.cardFooterIcon {
+  color: $icon;
+  font-size: 14px;
+  margin: 0;
+}
+
+#databaseName {
+  margin-top: 14px;
+  margin-bottom: 0;
+  font-size: 40px;
+  width: 280px;
+}
+
+#serviceName {
+  font-size: 11px;
+  margin-top: 6px;
+}