dev merge

Merge branch 'dev' into graphContainer/refactor

Author: mdtagg

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/components/About.tsx

@@ -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/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/PastContributors.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/StylingContext.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/TeamMembers.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/stylesheets/About.scss app/components/About/styles.scssapp/stylesheets/About.scss renamed to app/components/About/styles.scss

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import './styles.scss';
+import { DashboardContext } from '../../context/DashboardContext';
+import lightAndDark from '../Styling';
+import ContactForm from './ContactForm';
+
+const Contact: React.FC = React.memo(() => {
+  const { mode } = useContext(DashboardContext);
+
+  const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+
+  return (
+    <div className="contact" style={currentMode}>
+      <div className="contact-border" data-testid="contactPage">
+        <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
+              <a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank" rel="noreferrer">
+                here
+              </a>.
+            </p>
+          </div>
+        </div>
+        <ContactForm currentMode={currentMode}/>
+      </div>
+    </div>
+  );
+});
+
+export default Contact;

app/components/Contact.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface FormInputProps {
+  label: string;
+  name: string;
+  placeholder?: string;
+  type?: string;
+  isTextarea?: boolean;
+  accept?: string;  
+}
+
+const ContactForm = ({ currentMode }) => {
+  return (
+    <div className="email-container">
+      <form>
+        <FormInput label="First Name" name="firstname" placeholder="Your name.." />
+        <FormInput label="Last Name" name="lastname" placeholder="Your last name.." />
+        <FormInput label="E-mail" name="email" placeholder="Your e-mail address.." />
+        <FormInput label="Subject" name="subject" placeholder="Subject" />
+        <FormInput label="Message" name="message" placeholder="Write something.." isTextarea={true} />
+        <FormInput label="Select a file" name="myfile" type="file" accept="image/*" />
+        <input id="contact-submit" type="submit" value="Submit" />
+      </form>
+    </div>
+  );
+};
+
+const FormInput: React.FC<FormInputProps> = ({ label, name, placeholder, type = "text", isTextarea = false, accept }) => (
+  <label htmlFor={name}>
+    {label}:
+    {isTextarea ? (
+      <textarea id={name} name={name} placeholder={placeholder} />
+    ) : (
+      <input type={type} id={name} name={name} placeholder={placeholder} accept={accept} />
+    )}
+  </label>
+);
+
+export default ContactForm;