premerge

Author: tedpham3

app/components/About.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import './style.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 className="mainTitle">About</h3>
-        <p className="text">
+        <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.

app/components/About/About.tsx

@@ -11,6 +11,31 @@
   height: 100%;
 }
 
+.sprout {
+  margin: 0;
+}
+
+.mainTitle {
+  font-size: 36px;
+  color: $background;
+  text-align: left;
+  font-weight: 600;
+}
+
+.title {
+  font-size: 18px;
+  color: $background;
+  text-align: left;
+  font-weight: 600;
+}
+
+.text {
+  font-size: 18px;
+  color: $background;
+  text-align: left;
+  font-weight: 100;
+}
+
 .blurb {
   width: 100%;
   margin: auto;
@@ -21,33 +46,30 @@
   border: none;
   box-shadow: $boxshadow2;
   padding: 30px;
-  background-color: $background; // Use your theme's background variable
 
   &:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }
 }
 
-.mainTitle, .title {
-  font-size: 18px;
-  color: $textColor; 
-  text-align: left;
-  font-weight: 600;
-}
-
-.mainTitle {
-  font-size: 36px; // Larger font for the main title
-}
-
-.text {
-  font-size: 16px;
-  color: $textColor;
-  text-align: left;
-  font-weight: 400;
-  margin-bottom: 20px; // Add some space after paragraphs
+#sproutSpan {
+  display: inline-block;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 15px;
+  margin-right: 10px;
+  height: $sproutSize;
+  width: $sproutSize;
+  background-color: transparent;
+  border-radius: 50%;
+  background-size: scale-down;
+  &:hover {
+    background-color: $hover;
+    opacity: 0.85;
+    animation: none;
+  }
 }
 
-#OSPNames {
-  margin-top: 10px;
-  margin-bottom: 20px; // Space before the past contributors section
+p {
+  padding-left: 10px;
 }

app/components/About/style.scss

@@ -1,6 +1,6 @@
 import React, { useContext,useState } from 'react';
 import { Route, Routes } from 'react-router-dom';
-import About from '../components/About';
+import About from '../components/About/About';
 import Contact from '../components/Contact';
 import Settings from '../components/Settings';
 import Occupied from '../components/Occupied/Occupied';

app/containers/MainContainer.tsx

@@ -88,7 +88,8 @@
     "test": "nyc jest",
     "backend-test": "npx jest --config __backend-tests__/jest.config.js --verbose",
     "start:selenium": "node e2e/seleniumTest.js",
-    "start:e2e": "npm run dev:electron & npm run start:selenium"
+    "start:e2e": "npm run dev:electron & npm run start:selenium",
+    "start": "concurrently \"npm:build\" \"npm:dev:app\" \"npm:dev:electron\""
   },
   "repository": {
     "type": "git",