Skip to content

Commit b7df553

Browse files
mdtaggmdtagg
committed
merged dev
2 parents 1142b44 + 3c0222a commit b7df553

12 files changed

Lines changed: 87 additions & 37 deletions

File tree

‎app/charts/LogsTable.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,20 @@ import { useTable, useGroupBy, useExpanded } from 'react-table';
99

1010
import { CommsContext } from '../context/CommsContext';
1111

12+
1213
/**
1314
* Styling for the Logs Table
1415
*/
1516

1617
const Styles = styled.div`
1718
padding: 1rem;
19+
1820
1921
table {
2022
border-spacing: 0;
2123
border: 1px solid black;
24+
background-color: #D7D7DC;
25+
2226
2327
tr {
2428
:last-child {
@@ -158,10 +162,10 @@ const LogsTable = () => {
158162
);
159163

160164
const data = useContext(CommsContext).commsData;
161-
165+
162166
return (
163-
<Styles>
164-
<Table columns={columns} data={data} />
167+
<Styles >
168+
<Table columns={columns} data={data} />
165169
</Styles>
166170
);
167171
};

‎app/components/About/About.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@ import React from 'react';
22
import './styles.scss';
33
import TeamMembers from './TeamMembers';
44
import PastContributors from './PastContributors';
5-
import { useStylingContext } from './StylingContext';
6-
5+
// import { useStylingContext } from './StylingContext';
6+
import { useContext } from 'react';
7+
import lightAndDark from '../Styling';
8+
import { DashboardContext } from '../../context/DashboardContext';
79

810
const About: React.FC = React.memo(() => {
9-
const currentMode = useStylingContext();
11+
const { mode } = useContext(DashboardContext);
1012

13+
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
14+
const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
1115
return (
12-
<div className="about">
13-
<div className="blurb" data-testid="aboutPage">
14-
<h3 style={currentMode} className="mainTitle">About</h3>
15-
<p style={currentMode} className="text" >
16+
17+
18+
<div className="about" >
19+
<div className="blurb" data-testid="aboutPage" style={currentStyle}>
20+
<h3 style={currentStyle} className="mainTitle">About</h3>
21+
<p style={currentStyle} className="text" >
1622
The Chronos Team has a passion for building tools that are powerful, beautifully
1723
designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer
1824
community. It can also monitor applications deployed using AWS, EC2, and ECS from Amazon.

‎app/components/Contact/Contact.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ const Contact: React.FC = React.memo(() => {
88
const { mode } = useContext(DashboardContext);
99

1010
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
11+
const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
1112

1213
return (
1314
<div className="contact" style={currentMode}>
14-
<div className="contact-border" data-testid="contactPage">
15+
<div className="contact-border" data-testid="contactPage" style={currentStyle}>
1516
<div className="contact-container">
1617
<div className="contact-blurb">
1718
<h1>Contact Us</h1>

‎app/components/Copyright.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Copyright: React.FC = React.memo(() => {
1010
copyright: {
1111
fontFamily: 'Roboto',
1212
position: 'fixed',
13-
color: '#ffffff',
13+
color: '#FAFDF9',
1414
},
1515
}));
1616
const classes = useStyles();

‎app/components/Occupied/Occupied.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import ServicesModal from '../../modals/ServicesModal/ServicesModal';
2222

2323
// STYLESHEETS
2424
import './styles.scss';
25-
25+
import lightAndDark from '../Styling';
2626
// // CONTEXT
2727
import { DashboardContext } from '../../context/DashboardContext';
2828
import { ApplicationContext } from '../../context/ApplicationContext';
@@ -38,7 +38,7 @@ import { useStylesLight, useStylesDark } from './helpers/muiHelper'
3838
//v10: Memoized function, without any props. Should theoretically be called only once.
3939
const Occupied = React.memo(() => {
4040
const { setServicesData, app, example } = useContext(ApplicationContext);
41-
const { user, applications, getApplications, mode } = useContext(DashboardContext);
41+
const { user, applications, getApplications, mode, } = useContext(DashboardContext);
4242
const [ modal,setModal ] = useState({isOpen:false,type:''})
4343
const { appIndex } = useContext(ApplicationContext);
4444
const [searchTerm, setSearchTerm] = useState<string>('');
@@ -51,6 +51,7 @@ const Occupied = React.memo(() => {
5151
}, [user]);
5252

5353
const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({});
54+
const currentStyle = mode === 'light' ? lightAndDark.lightModal : lightAndDark.darkModal;
5455

5556
return (
5657
<div
@@ -75,10 +76,13 @@ const Occupied = React.memo(() => {
7576
>
7677
{!example &&
7778
<div
79+
7880
className="card"
7981
id="card-add"
82+
8083
>
8184
<Button
85+
style={currentStyle}
8286
className={classes.paper}
8387
onClick={() => setModal({isOpen:true,type:'envModal'})}
8488
>

‎app/components/Occupied/helpers/muiHelper.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ export const useStylesDark = makeStyles(theme => ({
1616
height: 280,
1717
width: 280,
1818
textAlign: 'center',
19-
color: '#888888',
19+
color: '#fafdf9',
2020
whiteSpace: 'nowrap',
21-
backgroundColor: 'lightgray',
21+
backgroundColor: '#262837',
2222
borderRadius: 3,
2323
border: '0',
2424
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
2525
'&:hover, &.Mui-focusVisible': {
2626
backgroundColor: 'rgba(255, 255, 255, 0.2)',
27-
color: '#ffffff',
27+
color: '#fafdf9',
2828
fontWeight: 600,
2929
},
3030
},
@@ -54,7 +54,7 @@ export const useStylesDark = makeStyles(theme => ({
5454
fontSize: '18px',
5555
fontFamily: 'Roboto',
5656
fontWeight: 300,
57-
color: '#444d56',
57+
color: '#fafdf9',
5858
},
5959
}));
6060

@@ -70,9 +70,9 @@ export const useStylesLight = makeStyles(theme => ({
7070
height: 280,
7171
width: 280,
7272
textAlign: 'center',
73-
color: '#888888',
73+
color: '#E3E3F0',
7474
whiteSpace: 'nowrap',
75-
backgroundColor: 'white',
75+
backgroundColor: '#F7F8F8',
7676
borderRadius: 3,
7777
border: '0',
7878
boxShadow:

‎app/components/Styling.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ const lightAndDark = {
1010
color: '#181818',
1111
},
1212
darkModeHeader: {
13-
backgroundColor: '#161b22',
13+
backgroundColor: '#1C202D',
1414
color: 'white',
1515
},
1616
darkModeMain: {
17-
backgroundColor: '#161b22',
17+
backgroundColor: '#1C202D',
1818
backgroundSize: 'contain',
1919
flex: '1',
2020
minHeight: '100vh',
@@ -26,6 +26,24 @@ const lightAndDark = {
2626
darkModeText: {
2727
color: '#fcfefb',
2828
},
29+
darkModeData: {
30+
backgroundColor: '#262837',
31+
color: '#fafdf9',
32+
borderColor: 'transparent',
33+
},
34+
lightModeData: {
35+
backgroundColor: '#F7F8F8',
36+
color: '#24272A',
37+
},
38+
darkModal: {
39+
backgroundColor: '#262837',
40+
color: '#fafdf9',
41+
borderColor: 'transparent',
42+
},
43+
lightModal: {
44+
backgroundColor: '#F7F8F8',
45+
color: '#24272A',
46+
},
2947
};
3048

3149
export default lightAndDark;

‎app/components/TransferColumns.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useParams } from 'react-router-dom';
44
import { QueryContext } from '../context/QueryContext';
55
import { HealthContext } from '../context/HealthContext';
66
import { EventContext } from '../context/EventContext';
7-
import { DataGrid } from '@mui/x-data-grid';
7+
import { GridColDef, DataGrid } from '@mui/x-data-grid';
88
import { GridToolbar } from '@mui/x-data-grid/components';
99
import * as DashboardContext from '../context/DashboardContext';
1010
import lightAndDark from './Styling';
@@ -37,6 +37,7 @@ const TransferColumns = React.memo(() => {
3737
const { savedMetrics } = useContext(ApplicationContext)
3838

3939
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
40+
const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
4041

4142
useEffect(() => {
4243
if (healthData) {
@@ -157,22 +158,25 @@ const TransferColumns = React.memo(() => {
157158
};
158159

159160
// makes the column titles for the selection grid
160-
const columns = [
161-
{ field: 'id', headerName: 'ID', flex: 1 },
161+
const columns: GridColDef[] = [
162+
{ field: 'id', headerName: 'ID', flex: 1, headerClassName: 'style',},
162163
{
163164
field: 'tag',
164165
headerName: 'Category',
165166
flex: 1,
166167
editable: true,
168+
headerClassName: 'style',
167169
},
168170
{
169171
field: 'title',
170172
headerName: 'Metric',
171173
flex: 3,
172174
editable: true,
175+
headerClassName: 'style',
173176
},
174177
];
175178

179+
// makes the rows needed for the selection grid
176180
const rows:any[] = []
177181
let id = 0
178182
for(let savedMetric of Object.keys(savedMetrics)) {
@@ -219,9 +223,10 @@ const TransferColumns = React.memo(() => {
219223
<div style={{ height: '500px', width: '100%' }}>
220224

221225
<DataGrid
222-
style={currentMode}
226+
// style={currentStyle }
223227
rows={rows}
224228
columns={columns}
229+
style={currentStyle}
225230
slots={{ toolbar: GridToolbar }}
226231
slotProps={{
227232
toolbar: {
@@ -240,15 +245,15 @@ const TransferColumns = React.memo(() => {
240245
setTargetKeys(metrics);
241246
}}
242247

243-
/>
248+
/>
244249

245250
</div>
246251
{selectedRows.length > 0 && (
247252
<h3
248253
style={{
249-
marginTop: '20px',
250-
color: currentMode.color
251-
}}
254+
marginTop: '20px',
255+
color: 'currentStyle'
256+
}}
252257
>
253258
Selected Rows:
254259
</h3>

‎app/containers/GraphsContainer/GraphsContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const GraphsContainer: React.FC = React.memo(() => {
9292
}, [service, live]);
9393

9494
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
95-
95+
const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
9696
return (
9797
<>
9898
<GraphNavBar

‎app/containers/GraphsContainer/styles.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
.graphs-container {
2121
width: 100%;
22-
padding: 0 5%;
22+
padding: 5%;
2323

2424
.graphs {
2525
@include centerWithFlex();
@@ -46,12 +46,13 @@
4646
}
4747

4848
h2 {
49-
padding-top: 4px;
49+
padding-top: 15px;
5050
margin-bottom: 37px;
5151
align-self: center;
5252
font-size: 100%;
5353
margin-top: 20px;
5454
font-weight: 400;
55+
padding-bottom: 10px;
5556
}
5657
}
5758
}
@@ -73,6 +74,7 @@
7374
justify-content: center;
7475
align-items: center;
7576
margin-bottom: 20px;
77+
margin-top: 20px;
7678

7779
#getCharts:hover {
7880
font-weight: 580;

0 commit comments

Comments
 (0)