first level UI updates

Author: sarhiri

app/charts/LogsTable.jsx

@@ -9,16 +9,20 @@ import { useTable, useGroupBy, useExpanded } from 'react-table';
 
 import { CommsContext } from '../context/CommsContext';
 
+
 /**
  * Styling for the Logs Table
  */
 
 const Styles = styled.div`
   padding: 1rem;
+  
 
   table {
     border-spacing: 0;
     border: 1px solid black;
+    background-color: #D7D7DC;
+    
 
     tr {
       :last-child {
@@ -158,10 +162,10 @@ const LogsTable = () => {
   );
 
   const data = useContext(CommsContext).commsData;
-
+ 
   return (
-    <Styles>
-      <Table columns={columns} data={data} />
+    <Styles >
+      <Table columns={columns} data={data}  />
     </Styles>
   );
 };

app/components/About/About.tsx

@@ -2,17 +2,23 @@ import React from 'react';
 import './styles.scss';
 import TeamMembers from './TeamMembers';
 import PastContributors from './PastContributors';
-import { useStylingContext } from './StylingContext';
-
+// import { useStylingContext } from './StylingContext';
+import { useContext } from 'react';
+import lightAndDark from '../Styling';
+import { DashboardContext } from '../../context/DashboardContext';
 
 const About: React.FC = React.memo(() => {
-  const currentMode = useStylingContext();
+  const { mode } = useContext(DashboardContext);
 
+  const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
-    <div className="about">
-      <div className="blurb" data-testid="aboutPage">
-        <h3 style={currentMode} className="mainTitle">About</h3>
-        <p style={currentMode} className="text" >
+
+    
+    <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.

app/components/Contact/Contact.tsx

@@ -8,10 +8,11 @@ const Contact: React.FC = React.memo(() => {
   const { mode } = useContext(DashboardContext);
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
 
   return (
     <div className="contact" style={currentMode}>
-      <div className="contact-border" data-testid="contactPage">
+      <div className="contact-border" data-testid="contactPage" style={currentStyle}>
         <div className="contact-container">
           <div className="contact-blurb">
             <h1>Contact Us</h1>

app/components/Copyright.tsx

@@ -10,7 +10,7 @@ const Copyright: React.FC = React.memo(() => {
     copyright: {
       fontFamily: 'Roboto',
       position: 'fixed',
-      color: '#ffffff',
+      color: '#FAFDF9',
     },
   }));
   const classes = useStyles();

app/components/Styling.tsx

@@ -10,11 +10,11 @@ const lightAndDark = {
     color: '#181818',
   },
   darkModeHeader: {
-    backgroundColor: '#161b22',
+    backgroundColor: '#1C202D',
     color: 'white',
   },
   darkModeMain: {
-    backgroundColor: '#161b22',
+    backgroundColor: '#1C202D',
     backgroundSize: 'contain',
     flex: '1',
     minHeight: '100vh',
@@ -26,6 +26,15 @@ const lightAndDark = {
   darkModeText: {
     color: '#fcfefb',
   },
+  darkModeData: {
+    backgroundColor: '#262837',
+    color: '#fafdf9',
+    borderColor: 'transparent',
+  },
+  lightModeData: {
+    backgroundColor: '#E7E7F2',
+    color: '#24272A',
+  },
 };
 
 export default lightAndDark;

app/components/TransferColumns.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { QueryContext } from '../context/QueryContext';
 import { HealthContext } from '../context/HealthContext';
 import { EventContext } from '../context/EventContext';
-import { DataGrid } from '@mui/x-data-grid';
+import { GridColDef, DataGrid } from '@mui/x-data-grid';
 import { GridToolbar } from '@mui/x-data-grid/components';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from './Styling';
@@ -32,6 +32,7 @@ const TransferColumns = React.memo(() => {
   const [searchTerm, setSearchTerm] = useState<string>('');
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
 
   useEffect(() => {
     if (healthData) {
@@ -150,19 +151,21 @@ const TransferColumns = React.memo(() => {
   };
 
   // makes the column titles for the selection grid
-  const columns = [
-    { field: 'id', headerName: 'ID', flex: 1 },
+  const columns: GridColDef[] = [
+    { field: 'id', headerName: 'ID', flex: 1, headerClassName: 'style',},
     {
       field: 'tag',
       headerName: 'Category',
       flex: 1,
       editable: true,
+      headerClassName: 'style',
     },
     {
       field: 'title',
       headerName: 'Metric',
       flex: 3,
       editable: true,
+      headerClassName: 'style',
     },
   ];
 
@@ -203,7 +206,7 @@ const TransferColumns = React.memo(() => {
         <div style={{ height: '500px', width: '100%' }}>
 
           <DataGrid
-            style={currentMode}
+            style={currentStyle }
             rows={rows}
             columns={columns}
             slots={{ toolbar: GridToolbar }}
@@ -227,7 +230,7 @@ const TransferColumns = React.memo(() => {
 
         </div>
         {selectedRows.length > 0 && (
-          <h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>
+          <h3 style={{ marginTop: '20px', color: currentStyle.color }}>Selected Rows:</h3>
         )}
         <ol id="selectedRows">{selectedRows}</ol>
       </div>

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -92,7 +92,7 @@ const GraphsContainer: React.FC = React.memo(() => {
   }, [service, live]);
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
-
+  const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
   return (
     <>
       <GraphNavBar
@@ -116,7 +116,7 @@ const GraphsContainer: React.FC = React.memo(() => {
             <LogsTable />
           </div>
         ) : (
-          <div className="graphs">
+          <div className="graphs" style= {currentStyle}>
             {chart === 'all' && (
               <div className="transferColumns">
                 <h2 style={currentMode}>Search Your Metrics to Display</h2>

app/containers/GraphsContainer/styles.scss

@@ -19,7 +19,7 @@
 
 .graphs-container {
   width: 100%;
-  padding: 0 5%;
+  padding: 5%;
 
   .graphs {
     @include centerWithFlex();
@@ -46,12 +46,13 @@
         }
 
         h2 {
-          padding-top: 4px;
+          padding-top: 15px;
           margin-bottom: 37px;
           align-self: center;
           font-size: 100%;
           margin-top: 20px;
           font-weight: 400;
+          padding-bottom: 10px;
         }
       }
     }
@@ -73,6 +74,7 @@
     justify-content: center;
     align-items: center;
     margin-bottom: 20px;
+    margin-top: 20px;
 
     #getCharts:hover {
       font-weight: 580;