Skip to content

Commit d95c799

Browse files
lu0713lu0713
committed
minor styling but having problems connecting. about to pull Stella working version
1 parent d4d5c52 commit d95c799

8 files changed

Lines changed: 186 additions & 45 deletions

File tree

‎app/components/About.tsx‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
11
import React from 'react';
2+
import '../stylesheets/About.scss';
23

34
const About: React.FC = () => {
45
return (
56
<div className="home">
6-
<h1>About</h1>
7-
<p>
8-
The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
9-
the developer community.
10-
</p>
11-
<p>
12-
With many existing paid options being difficult to use and expensive to operate, Chronos was
13-
born...
14-
</p>
15-
<p>
16-
Chronos is an all-in-one network and health monitoring tool for your application or
17-
microservice, containerized or not!
18-
</p>
19-
<p>Insert snippets from the github readme on how to use it</p>
20-
<h1>Team</h1>
21-
<div>
22-
<span>Michael </span>
23-
<span>Greg </span>
24-
<span>Ronelle </span>
25-
<span>Todd </span>
26-
<span>Alan </span>
27-
</div>
28-
<h1>History</h1>
29-
<div>
30-
<span>Maybe have past teams put what they want here</span>
7+
<div className="blurb">
8+
<h3 className="para">About</h3>
9+
<p className="para">
10+
The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
11+
the developer community. With many existing paid options being difficult to use and expensive to operate, Chronos was
12+
born. Chronos is an all-in-one network and health monitoring tool for your application or
13+
microservice, containerized or not!
14+
</p>
15+
<div className="doya">
16+
<h3 className="para">Team Doya</h3><span id="sproutSpan"><img className="sprout" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
17+
<br/>
18+
<div>
19+
<span className="para">Grace </span><br />
20+
<span className="para">Jen </span><br />
21+
<span className="para">Patty </span><br />
22+
<span className="para">Stella </span><br /><br />
23+
</div>
24+
</div>
25+
<h3 className="para">Contributors</h3>
26+
<p className="para">Michael, Ronelle, Todd, Greg
27+
Brianna, Brian, Alon, Alan
28+
Ousman, Ben, Chris, Jenae, Tim</p>
3129
</div>
3230
</div>
3331
);

‎app/components/Header.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useContext } from 'react';
22
import { useHistory } from 'react-router-dom';
3-
3+
import ListIcon from '@material-ui/icons/Search';
44
import { ApplicationContext } from '../context/ApplicationContext';
55
import '../stylesheets/Header.scss';
6+
import '../stylesheets/Occupied.scss';
67

78
export interface HeaderProps {
89
app: string[];
@@ -18,7 +19,7 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
1819

1920
return (
2021
<div className="microservice-header">
21-
<h1>{app}</h1>
22+
<h1 className="microserviceTitle">{app}</h1>
2223
<select name="microservice" value={service} onChange={e => history.replace(e.target.value)}>
2324
{servicesData.map(({ _id, microservice }: any) => (
2425
<option key={_id} value={`${microservice}`} selected={service === microservice}>
@@ -30,14 +31,14 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
3031
</option>
3132
</select>
3233
<div className="header-btns">
33-
<button onClick={() => history.goBack()}>Return to Applications</button>
34+
<button onClick={() => history.goBack()}><ListIcon className="icon" id="returnToAppIcon" />Return to Applications</button>
3435
<button onClick={() => setLive(!live)}>
3536
{live ? (
3637
<div>
3738
<span className="dot"></span>Live
3839
</div>
3940
) : (
40-
<div>Gather Live Data</div>
41+
<div id="gatherLiveData">Gather Live Data</div>
4142
)}
4243
</button>
4344
</div>

‎app/components/Occupied.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
1616
import MoreVertIcon from '@material-ui/icons/MoreVert';
1717
import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone';
1818
import DeleteForeverOutlinedIcon from '@material-ui/icons/DeleteForeverOutlined';
19+
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
1920
import ListIcon from '@material-ui/icons/List';
2021
import SearchIcon from '@material-ui/icons/Search';
2122
import DashboardIcon from '@material-ui/icons/Dashboard';
@@ -73,7 +74,7 @@ const Occupied: React.FC = () => {
7374
height: 280,
7475
width: 280,
7576
textAlign: 'center',
76-
color: 'rgba(33, 34, 41, 1.2)',
77+
color: '#888888',
7778
whiteSpace: 'nowrap',
7879
backgroundColor: '#ffffff',
7980
borderRadius: 8,
@@ -84,11 +85,26 @@ const Occupied: React.FC = () => {
8485
color: '#ffffff',
8586
},
8687
},
88+
hover: {
89+
boxShadow: 'none',
90+
color: 'transparent'
91+
},
92+
btnStyle: {
93+
position: 'absolute',
94+
top: -10,
95+
left: -10,
96+
margin: '0',
97+
color: '#eeeeee',
98+
borderRadius: '0',
99+
backgroundColor: 'transparent',
100+
'&:hover' : {
101+
backgroundColor: 'none'
102+
}
103+
},
87104
icon: {
88105
width: '75px',
89106
height: '75px',
90107
boxShadow: 'none',
91-
color: '#999999',
92108
},
93109
}));
94110

@@ -149,7 +165,7 @@ const Occupied: React.FC = () => {
149165
aria-label="Delete"
150166
onClick={event => confirmDelete(event, app[0], i)}
151167
>
152-
<DeleteForeverOutlinedIcon />
168+
<HighlightOffIcon className={classes.btnStyle} id="deleteIcon" />
153169
</IconButton>
154170
}
155171
></CardHeader>

‎app/context/HealthContext.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ const HealthContextProvider: React.FC = ({ children }) => {
1717
const fetchHealthData = (service: string) => {
1818
ipcRenderer.send('healthRequest', service);
1919
ipcRenderer.on('healthResponse', (event: Electron.Event, data: any) => {
20+
let result: any;
2021
// Parse result
21-
if (data) console.log('HealthContext.tsx: data: ', data)
22-
const result = JSON.parse(data);
22+
if (data) {
23+
result = JSON.parse(data);
24+
}
2325
if (result) console.log('HealthContext.tsx: JSON.parse(data): ', result)
2426
if (result.length) console.log('Number of data points (health):', result.length);
2527
// Update context local state

‎app/stylesheets/About.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import './constants.scss';
2+
3+
.para {
4+
color: $background;
5+
text-align: left;
6+
font-size: 18px;
7+
}
8+
9+
h3 {
10+
font-size: 20px;
11+
color: $background;
12+
font-weight: 700;
13+
}
14+
15+
.doya {
16+
display: flex;
17+
flex-direction: row;
18+
// justify-content: left;
19+
align-items: flex-start;
20+
align-self: flex-start;
21+
align-content: flex-start;
22+
vertical-align: top;
23+
}
24+
25+
.blurb {
26+
margin: 500px;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: left;
30+
}
31+
32+
#sproutSpan {
33+
display: inline-block;
34+
margin-left: 15px;
35+
margin-right: 10px;
36+
height: $sproutSize;
37+
width: $sproutSize;
38+
background-color: transparent;
39+
border-radius: 50%;
40+
background-size: scale-down;
41+
&:hover {
42+
background-color: $hover;
43+
opacity: 0.85;
44+
animation: none;
45+
}
46+
}

‎app/stylesheets/Header.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,25 @@ select {
7171
}
7272
}
7373
}
74+
.microserviceTitle {
75+
color: $grey;
76+
font-size: 24px;
77+
}
78+
79+
#gatherLiveData {
80+
color: $grey;
81+
}
82+
83+
#returnToAppIcon {
84+
font-size: 42px;
85+
font-weight: 400px;
86+
margin: 10px;
87+
padding: 5px;
88+
margin-left: 160px;
89+
margin-top: 50px;
90+
}
91+
92+
#returnToAppIcon:hover {
93+
box-shadow: $boxshadow3;
94+
cursor: pointer;
95+
}

‎app/stylesheets/Occupied.scss‎

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,73 @@ button {
100100
outline: none;
101101
margin: 0px;
102102
padding: 0px;
103+
color: transparent;
103104
}
104105

105106
button:hover {
106107
background-color: transparent;
107108
}
108109

110+
// button.MuiButtonBase-root.MuiIconButton-root.makeStyles-hover-7 {
111+
// position: relative;
112+
// bottom: 50;
113+
// right: 50;
114+
// }
115+
116+
.MuiButtonBase-root {
117+
position: 'relative';
118+
bottom: 200;
119+
right: 200;
120+
}
121+
122+
.MuiIconButton-root {
123+
position: 'relative';
124+
bottom: 200;
125+
right: 200;
126+
}
127+
128+
.makeStyles-hover-7 {
129+
position: 'relative';
130+
bottom: 200;
131+
right: 200;
132+
}
133+
134+
.MuiIconButton-label {
135+
position: 'relative';
136+
bottom: 200;
137+
right: 200;
138+
}
139+
140+
.MuiSvgIcon-root {
141+
background: none;
142+
position: 'relative';
143+
bottom: 200;
144+
right: 200;
145+
border: 0;
146+
outline: none;
147+
box-shadow: none;
148+
filter: none;
149+
}
150+
151+
#deleteIcon {
152+
background: none;
153+
position: 'absolute';
154+
top: 300;
155+
right: 300;
156+
border: 0;
157+
outline: none;
158+
box-shadow: none;
159+
filter: none;
160+
}
161+
162+
#deleteIcon:hover {
163+
background: none;
164+
background-color: none;
165+
color: $red;
166+
filter: none;
167+
cursor: pointer;
168+
}
169+
109170
#searchIcon {
110171
background-color: $background;
111172
font-size: 26px;
@@ -115,11 +176,6 @@ button:hover {
115176
margin-left: 15px;
116177
}
117178

118-
#listIcon:hover {
119-
box-shadow: $boxshadow3;
120-
cursor: pointer;
121-
}
122-
123179
#searchIcon:hover {
124180
box-shadow: $boxshadow3;
125181
cursor: pointer;
@@ -219,14 +275,14 @@ select:-webkit-autofill:focus {
219275
transition: all 0.5s;
220276
}
221277
&:after {
222-
top: -1px;
223-
right: -1px;
278+
// top: -1px;
279+
// right: -1px;
224280
// border-top: 2px solid rgba(132, 216, 255, 0.7);
225281
// border-right: 2px solid rgba(132, 216, 255, 0.7);
226282
}
227283
&:before {
228-
bottom: -1px;
229-
left: -1px;
284+
// bottom: -1px;
285+
// left: -1px;
230286
// border-bottom: 2px solid rgba(132, 216, 255, 0.7);
231287
// border-left: 2px solid rgba(132, 216, 255, 0.7);
232288
}

‎app/stylesheets/constants.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
$yellow: #fce356;
2-
$navy: #12172a;
2+
$navy: #040819;
33
$background: #fff;
44
$grey: #eeeeee;
55
$icon: #999999;
66
$header: #888888;
77
$hover: rgba(255,255,255, 0.1);
8-
$red: rgb(170, 1, 1);
8+
$red: rgb(255, 0, 0);
99
$boxshadow: 2px 2px 6px rgb(187, 187, 187);
1010
$boxshadow1: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
1111
$boxshadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

0 commit comments

Comments
 (0)