merge dev

Author: ashleybisram

README.md

@@ -20,31 +20,52 @@ Chronos is a comprehensive developer tool that monitors the health and web traff
 
 ## What's New?
 
-### Chronos 14.0
+### Chronos 15.0
 
 <div>
 
+Contributors:
+[Arnold Pinkhasov](https://github.com/apinkhasov101),
+[Ashley Bisram](https://github.com/ashleybisram),
+[Fridchard Chery](https://github.com/Gitfrich),
+[Peter Toussaint](https://github.com/Peter2oussaint)
+
+</div>
+Updates:
+<li>Forthcoming</li>
+
+
+<a href='link here'>Version 15.0 Medium Article</a>
+
+### **Iteration Log**
+<details><summary>Chronos 14.0</summary>
+    <ul>
+    <div>
+
+
 Contributors:
 [Michael Tagg](https://github.com/mdtagg),
 [Ted Pham](https://github.com/TedPham397),
 [Sofia Sarhiri](https://github.com/sarhiri),
-[Stephen Yang](https://github.com/stephenhyang),
+[Stephen Yang](https://github.com/stephenhyang)
 
 </div>
 Updates:
-<li>Implemented a new visualization button (example) to expedite data rendering processes.</li>
-<li>Refactored microservices example, switched over to community version of MongoDB for easier URI implementation.</li>
-<li>Modularized cluttered components into modular units to improve code readability and reusability.</li>
-<li>Optimized startup scripts to reduce application load time and streamline environment configuration.</li>
-<li>Upgraded Material-UI from version 4 to version 5, adapting to new API changes and improving UI responsiveness. </li>
-<li>Refactored portions of the electron app </li>
-<li>Refactored data parsing logic to reduce unnecessary rerenders and improve app performance</li>
-<li>Fixed data bottle necks in the local npm packages, data is now able to flow to microservices for data visualization</li>
-
+    <ul>
+    <li>Implemented a new visualization button (example) to expedite data rendering processes.</li>
+    <li>Refactored microservices example, switched over to community version of MongoDB for easier URI implementation.</li>
+    <li>Modularized cluttered components into modular units to improve code readability and reusability.</li>
+    <li>Optimized startup scripts to reduce application load time and streamline environment configuration.</li>
+    <li>Upgraded Material-UI from version 4 to version 5, adapting to new API changes and improving UI responsiveness. </li>
+    <li>Refactored portions of the electron app </li>
+    <li>Refactored data parsing logic to reduce unnecessary rerenders and improve app performance</li>
+    <li>Fixed data bottle necks in the local npm packages, data is now able to flow to microservices for data visualization</li>
+    </ul>
 
-<a href='link here'>Version 14.0 Medium Article</a>
+<a href='https://medium.com/@m.sofiasarhiri/a-tale-as-old-as-time-for-the-modern-developer-chronos-v-14-f84733fd4f93'>Version 14.0 Medium Article</a>
 
-### **Iteration Log**
+</ul>
+</details>
 
 <details><summary>Chronos 13.0</summary>
     <ul>
@@ -310,7 +331,7 @@ export DISPLAY="`sed -n 's/nameserver //p' /etc/resolv.conf`:0"
 
 **NOTE: You must create your own user database for extended features**
 
-1. Create a MongoDB database in which to store user information and insert it on line 2 within the [UserModel.ts](./electron/models/UserModel.ts) (_electron/models/UserModel.ts_) file.
+1. Create a MongoDB database in which to store user information and insert it within a root .env file based on .env.example [.env.example](./.env.example) (_.env.example_) file.
    - This database will privately store user information.
 2. Once this is set up, you can create new users, log in, and have your data persist between sessions.
 

app/components/About/About.tsx

@@ -13,15 +13,14 @@ const About: React.FC = React.memo(() => {
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
   const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
-
-    
-    <div className="about" >
+    <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.
+        <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.
         </p>
         <br></br>
         <TeamMembers />
@@ -31,4 +30,4 @@ const About: React.FC = React.memo(() => {
   );
 });
 
-export default About;
+export default About;

app/components/About/styles.scss

@@ -9,31 +9,39 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  padding: 0;
+
 }
 
 .sprout {
   margin: 0;
+  
 }
 
 .mainTitle {
   font-size: 36px;
   color: $background;
   text-align: left;
   font-weight: 600;
+    margin: 0;
 }
 
 .title {
   font-size: 18px;
   color: $background;
   text-align: left;
   font-weight: 600;
+  padding: 0;
+  margin: 0;
 }
 
 .text {
   font-size: 20px;
   color: $background;
   text-align: left;
   font-weight: 300;
+  padding: 0;
+  margin: 0;
 }
 
 .blurb {
@@ -46,7 +54,7 @@
   border: none;
   box-shadow: $boxshadow2;
   padding: 30px;
-
+  margin: 0;
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
@@ -63,13 +71,19 @@
   background-color: transparent;
   border-radius: 50%;
   background-size: scale-down;
+  padding: 0;
+  margin: 0;
   &:hover {
     background-color: $hover;
     opacity: 0.85;
     animation: none;
   }
 }
-
+#OSPNames p{
+  margin: 10px 0px;
+}
 p {
   padding-left: 10px;
+  margin: 0;
+  // border:2px green solid;
 }

app/components/ApplicationsCard/ApplicationsCard.tsx

@@ -26,7 +26,7 @@ const ApplicationsCard:React.FC<ApplicationCardProps> = (props) => {
         key={`card-${i}`}
         className={classes.paper}
         variant="outlined"
-        onClick={() => handleClick(application[0], application[3], i)}
+         onClick={() => handleClick(application[0], application[3], i)}
       >
         <div className="databaseIconContainer">
           <div className="databaseIconHeader"></div>

app/components/ApplicationsCard/styles.scss

@@ -8,7 +8,7 @@
   padding: 0;
   cursor: pointer;
   transition: all 0.5s;
-
+// border: 2px solid green;
   &:after,
   &:before {
     content: ' ';

app/components/Contact/styles.scss

@@ -1,4 +1,4 @@
-@use '../../index.scss' as *;
+@use '../../index' as *;
 
 .contact {
   display: flex;
@@ -10,13 +10,13 @@
   justify-items: center;
   top: 0;
   left: 0;
+  height: auto;
   min-height: 100vh;
   opacity: 1;
   vertical-align: top;
   justify-content: center;
   align-items: center;
   color: $background;
-  
 }
 .contact-border {
   display: flex;
@@ -167,6 +167,12 @@ input[type='file'] {
   }
 }
 
-.contact-blurb p{
+.contact-blurb p {
+  margin: 0;
   font-weight: 300;
-}
+
+}
+.contact-blurb h1 {
+  margin: 0;
+  padding: 0;
+}

app/components/DashboardIcons/styles.scss

@@ -2,6 +2,7 @@
 
 .dashboardIconWrapper {
   margin-right: 37px;
+
 }
 
 .dashboardIconArea {
@@ -25,6 +26,7 @@
   z-index: 1;
   top: 50px;
   right: -14px;
+
 }
 
 .dashboardIconArea .dashboardTooltip::after {
@@ -134,6 +136,7 @@
 .personIconArea {
   position: relative;
   display: inline-block;
+
 }
 
 .personIconArea:hover .personTooltip {

app/components/FirstLaunch/styles.scss

@@ -7,6 +7,7 @@
 
 .home {
   background: $darkblue;
+
   display: flex;
   flex-direction: column;
   align-content: center;