Merge pull request #89 from wang3101/sidebar

Sidebar UI and Component Updates

Author: ronellecaguioa

app/components/About.tsx

@@ -1,7 +1,35 @@
 import React from 'react';
 
 const About: React.FC = () => {
-  return <div className="home">Hello this is the About</div>;
+  return (
+    <div className="home">
+      <h1>About</h1>
+      <p>
+        The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
+        the developer community.
+      </p>
+      <p>
+        With many existing paid options being difficult to use and expensive to operate, Chronos was
+        born...
+      </p>
+      <p>
+        Chronos is an all-in-one network and health monitoring tool for your application or
+        microservice, containerized or not!
+      </p>
+      <p>Insert snippets from the github readme on how to use it</p>
+      <h1>Team</h1>
+      <div>
+        <span>Michael </span>
+        <span>Greg </span>
+        <span>Ronelle </span>
+        <span>Todd </span>
+      </div>
+      <h1>History</h1>
+      <div>
+        <span>Maybe have past teams put what they want here</span>
+      </div>
+    </div>
+  );
 };
 
 export default About;

app/components/Contact.tsx

@@ -1,7 +1,51 @@
 import React from 'react';
 
 const Contact: React.FC = () => {
-  return <div className="home">Hello this is the Contact</div>;
+  return (
+    <div className="home">
+      <div>
+        <h1>Contact Us!</h1>
+        <p>The Chronos Team is always looking for any feedback or suggestions for Chronos.</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">
+            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>
+        <form>
+          <label htmlFor="fname">First Name</label>
+          <input type="text" id="fname" name="firstname" placeholder="Your name.." />
+          <br />
+          <label htmlFor="lname">Last Name</label>
+          <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
+          <br />
+          <label htmlFor="email">E-mail</label>
+          <input type="text" id="email" name="email" placeholder="Your e-mail address.." />
+          <br />
+          <label htmlFor="subject">Subject</label>
+          <input type="text" id="subject" name="subject" placeholder="Subject" />
+          <br />
+          <label htmlFor="message">Message</label>
+          <textarea
+            id="message"
+            name="message"
+            placeholder="Write something.." /*style="height:200px"*/
+          ></textarea>
+          <br />
+          <label htmlFor="myfile">Select a file: </label>
+          <input type="file" id="myfile" name="myfile" accept="image/*"></input>
+          <br />
+          <input type="submit" value="Submit" />
+        </form>
+      </div>
+    </div>
+  );
 };
 
 export default Contact;

app/components/Copyright.tsx

@@ -6,7 +6,7 @@ export interface CopyrightProps {}
 const Copyright = () => (
   <Typography variant="body2" color="textSecondary" align="center">
     {'Copyright © '}
-    <Link color="inherit" href="https://chronoslany.com/">
+    <Link color="inherit" href="https://chronoslany.com/" target="_blank">
       Team Chronos
     </Link>{' '}
     {new Date().getFullYear()}

app/components/Settings.tsx

@@ -5,7 +5,12 @@ import React from 'react';
 // Need to add flag to turn on/off live data (ideally persist on restart)
 // Need to add dark mode
 const Settings: React.FC = () => {
-  return <div className="home">Hello this is the Settings</div>;
+  return (
+    <div className="home">
+      <h1>Currently under construction, coming soon!</h1>
+      <p>Contact the Chronos Team for anything you'd like to see!</p>
+    </div>
+  );
 };
 
 export default Settings;

app/containers/MainContainer.tsx

@@ -3,6 +3,9 @@ import { Route, Switch } from 'react-router-dom';
 
 // import GraphsContainer from './Archived';
 import Home from '../components/Home';
+import About from '../components/About';
+import Contact from '../components/Contact';
+import Settings from '../components/Settings';
 import Copyright from '../components/Copyright';
 import Occupied from '../components/Occupied';
 import GraphsContainer from './GraphsContainer';
@@ -13,6 +16,9 @@ const MainContainer = () => (
     <div className="main-routes">
       <Switch>
         <Route exact path="/" component={Home} />
+        <Route exact path="/about" component={About} />
+        <Route exact path="/contact" component={Contact} />
+        <Route exact path="/settings" component={Settings} />
         <Route exact path="/applications" component={Occupied} />
         <Route exact path="/applications/:app/:service" component={GraphsContainer} />
         <Route path="*" render={() => <h1>Not found</h1>} />

app/stylesheets/SidebarContainer.css

@@ -2,7 +2,8 @@
   color: white;
   background-color: #24262f;
   width: 100px;
-  transition: 900ms;
+  position: absolute;
+  transition: 300ms;
   overflow: hidden;
   z-index: 1;
   white-space: nowrap;
@@ -36,21 +37,23 @@
 }
 
 #home {
-  transition: 600ms;
+  transition: 200ms;
 }
 #about {
-  transition: 700ms;
+  transition: 250ms;
 }
 #contact {
-  transition: 800ms;
+  transition: 300ms;
 }
 #settings {
-  transition: 900ms;
+  transition: 350ms;
 }
 
 #serviceDashLogo {
   opacity: 0;
-  transition: 900ms;
+  width: 160px;
+  margin-top: 20px;
+  transition: 300ms;
 }
 #miniLogo {
   position: absolute;
@@ -60,18 +63,21 @@
   height: 75px;
   width: 75px;
   opacity: 1;
-  transition: 400ms;
+  transition: 200ms;
+  margin-top: 10px;
 }
 .sidebar {
+  background-color: #24262f;
   padding-left: 20px;
   width: 100px;
+  height: 100%;
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-items: center;
   align-content: center;
-  transition: 900ms;
+  transition: 300ms;
 }
 
 .sidebar img {
@@ -81,16 +87,16 @@
 .sidebar-link {
   overflow: hidden;
   z-index: 1;
-  margin: 5px 5px;
-  padding: 1px 5px;
+  margin: 7px 5px;
+  padding: 20px 5px;
   display: flex;
   align-items: center;
   justify-content: left;
   background-color: #24262f;
   height: 40px;
   width: 50px;
   border: thin solid rgb(79, 79, 85);
-  border-radius: 3px;
+  border-radius: 8px;
   font-size: 125%;
   color: whitesmoke;
   text-decoration: none;