Skip to content

Commit 3c0222a

Browse files
mdtaggmdtagg
authored
Merge pull request #30 from oslabs-beta/styling
Styling
2 parents d148a54 + 033010c commit 3c0222a

12 files changed

Lines changed: 85 additions & 35 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: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
33
import { QueryContext } from '../context/QueryContext';
44
import { HealthContext } from '../context/HealthContext';
55
import { EventContext } from '../context/EventContext';
6-
import { DataGrid } from '@mui/x-data-grid';
6+
import { GridColDef, DataGrid } from '@mui/x-data-grid';
77
import { GridToolbar } from '@mui/x-data-grid/components';
88
import * as DashboardContext from '../context/DashboardContext';
99
import lightAndDark from './Styling';
@@ -32,6 +32,7 @@ const TransferColumns = React.memo(() => {
3232
const [searchTerm, setSearchTerm] = useState<string>('');
3333

3434
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
35+
const currentStyle = mode === 'light' ? lightAndDark.lightModeData : lightAndDark.darkModeData;
3536

3637
useEffect(() => {
3738
if (healthData) {
@@ -150,19 +151,21 @@ const TransferColumns = React.memo(() => {
150151
};
151152

152153
// makes the column titles for the selection grid
153-
const columns = [
154-
{ field: 'id', headerName: 'ID', flex: 1 },
154+
const columns: GridColDef[] = [
155+
{ field: 'id', headerName: 'ID', flex: 1, headerClassName: 'style',},
155156
{
156157
field: 'tag',
157158
headerName: 'Category',
158159
flex: 1,
159160
editable: true,
161+
headerClassName: 'style',
160162
},
161163
{
162164
field: 'title',
163165
headerName: 'Metric',
164166
flex: 3,
165167
editable: true,
168+
headerClassName: 'style',
166169
},
167170
];
168171

@@ -203,9 +206,10 @@ const TransferColumns = React.memo(() => {
203206
<div style={{ height: '500px', width: '100%' }}>
204207

205208
<DataGrid
206-
style={currentMode}
209+
// style={currentStyle }
207210
rows={rows}
208211
columns={columns}
212+
style={currentStyle}
209213
slots={{ toolbar: GridToolbar }}
210214
slotProps={{
211215
toolbar: {
@@ -227,7 +231,8 @@ const TransferColumns = React.memo(() => {
227231

228232
</div>
229233
{selectedRows.length > 0 && (
230-
<h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>
234+
<h3 style={{ marginTop: '20px', color: 'currentStyle',}}
235+
>Selected Rows:</h3>
231236
)}
232237
<ol id="selectedRows">{selectedRows}</ol>
233238
</div>

‎app/containers/GraphsContainer/GraphsContainer.tsx‎

Lines changed: 2 additions & 2 deletions
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
@@ -116,7 +116,7 @@ const GraphsContainer: React.FC = React.memo(() => {
116116
<LogsTable />
117117
</div>
118118
) : (
119-
<div className="graphs">
119+
<div className="graphs" style= {currentStyle}>
120120
{chart === 'all' && (
121121
<div className="transferColumns">
122122
<h2 style={currentMode}>Search Your Metrics to Display</h2>

‎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)