Skip to content

Commit 370928e

Browse files
alon25alon25
committed
Split CSS
1 parent 1fdb96e commit 370928e

14 files changed

Lines changed: 399 additions & 7 deletions

‎app/AComp/Header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Header = (props) => {
1111
id="serviceDashLogo"
1212
/>
1313
<div className="left-top">
14-
<h2>Databases</h2>
14+
<h2 className="dashboardHeader">Databases</h2>
1515
</div>
1616
</>
1717
);

‎app/AComp/Microservices.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useContext } from 'react';
22
import HealthInformationContext from '../context/DetailsContext';
3+
import ServiceDetails from '../components/ServiceDetails.jsx';
34

45
const { ipcRenderer } = window.require('electron');
56

‎app/AComp/MonitorHeader.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
const MonitorHeader = () => (
44
<>
5-
<h1>Microservices Overview</h1>
5+
<h1 className="overviewTitle">Microservices Overview</h1>
66
<h2>Communications Data</h2>
77
</>
88
);

‎app/components/ServiceDetails.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Modal from './Modal.jsx';
55
// Renders charts created with health and communication data for a selected database.
66
const ServiceDetails = (props) => {
77
// Renders health info detail buttons
8-
const { service, details } = props;
8+
const { service, setDetails } = props;
99
// Hook used to toggle whether or not the Modal component renders
1010
const [modalDisplay, toggleModalDisplay] = useState(false);
1111
// Hook used to set the chart that the Modal displays. The
@@ -82,7 +82,7 @@ const ServiceDetails = (props) => {
8282
onClick={() => {
8383
// document.location.reload()
8484
console.log('should clear data');
85-
details(null);
85+
setDetails(null);
8686
}}
8787
>
8888
Clear Health Data

‎app/containers/DashboardContainer.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const DashboardContainer = () => {
1414

1515
return (
1616
<div className="servicesDashboardContainer">
17-
<SidebarContainer setSelection={setSelection} setDetails={setDetails}/>
17+
<SidebarContainer setSelection={setSelection} />
1818
<div className="databsaseList">
1919
{serviceSelected}
2020
</div>

‎app/containers/MonitoringContainer.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ const MonitoringContainer = (props) => {
9797
/>
9898
) : null}
9999
<div id="routeAndTrafficDisplay">
100-
{routes}
101-
{traffic}
100+
{routes}
101+
102102
</div>
103103
{detailsSelected || null}
104104
</div>

‎app/stylesheets/AddService.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
form {
2+
display: grid;
3+
justify-items: center;
4+
align-items: center;
5+
width: 100%;
6+
font-size: 2vh;
7+
}
8+
9+
.userInput {
10+
width: 70%;
11+
border: 2px solid rgb(255, 206, 9);
12+
border-radius: 45px;
13+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
14+
text-align: center;
15+
height: 50%;
16+
font-size: 2vh;
17+
padding-left: 0.25%;
18+
margin: 15px auto 30px auto;
19+
}
20+
21+
::placeholder {
22+
font-size: 1.5vh;
23+
color: rgb(201, 201, 201);
24+
}
25+
26+
.submitBtn {
27+
margin-top: 6%;
28+
margin-bottom: 10%;
29+
width: 50%;
30+
height: 40px;
31+
color: white;
32+
font-size: 2vh;
33+
border: 1px solid rgb(255, 206, 9);
34+
background-color: #333;
35+
transition: 0.25s;
36+
}
37+
38+
.submitBtn:hover {
39+
font-weight: 700;
40+
cursor: pointer;
41+
border-radius: 10px;
42+
color: #333;
43+
background-color: rgb(255, 206, 9);
44+
}
45+
46+
.signUpHeader {
47+
text-align: center;
48+
margin-top: 0%;
49+
font-weight: 300;
50+
font-size: 5.5vh;
51+
margin-bottom: 8vh;
52+
}
53+
54+
select {
55+
display: block;
56+
width: 30%;
57+
font-size: 1.75vh;
58+
font-weight: 400;
59+
/* background-color: rgb(196, 196, 196); */
60+
border: 2px solid rgb(255, 206, 9);
61+
margin-top: 1%;
62+
margin-bottom: 2.5%;
63+
}

‎app/stylesheets/DeleteServices.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.deleteMicroservice{
2+
padding: 10px;
3+
margin: 10px;
4+
}

‎app/stylesheets/dashboard.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.mainContainer {
2+
font-family: Arial, Helvetica, sans-serif;
3+
display: flex;
4+
flex-direction: column;
5+
align-items: center;
6+
color: white;
7+
}
8+
9+
.servicesDashboardContainer {
10+
display: grid;
11+
grid-template-columns: 30% 70%;
12+
}
13+
14+
#databsaseList {
15+
z-index: -1;
16+
}
17+
18+
.dashboardHeader {
19+
color: white;
20+
margin-top: 10%;
21+
text-align: center;
22+
}
23+
24+
.backButton {
25+
height: 25px;
26+
background-color: #edd9a3;
27+
transition: 0.2s;
28+
margin-left: 0px;
29+
margin-top: 5%;
30+
}
31+
32+
.backButton:hover {
33+
cursor: pointer;
34+
background-color: #fbcd4e;
35+
}
36+
37+
#serviceDetailsContainer {
38+
margin-top: 5%;
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
justify-content: center;
43+
}
44+
45+
#healthGrid {
46+
display: grid;
47+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
48+
justify-items: center;
49+
text-align: center;
50+
}
51+
52+
.healthChartContainer {
53+
margin: 10px 10px 10px 10px;
54+
}
55+
56+
.healthChartContainer:hover {
57+
opacity: 0.7;
58+
}
59+
60+
#routeAndTrafficDisplay {
61+
display: inline-flex;
62+
}
63+
64+
65+
#microserviceHealthInfo {
66+
text-align: center;
67+
margin-top: 25px;
68+
}
69+
70+
#microserviceHealthTitle {
71+
margin-left: 0px;
72+
}

‎app/stylesheets/index.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap');
2+
3+
body {
4+
background-color: #333;
5+
background: rgb(25, 0, 36);
6+
}
7+
8+
html {
9+
/* prevent the gradient from repeating past the visible section*/
10+
min-height: 100%;
11+
}
12+
13+
body {
14+
/* background-color: #333; Original background*/
15+
background: linear-gradient(
16+
135deg,
17+
rgba(25, 0, 36, 1) 0%,
18+
rgb(68, 68, 68) 0%,
19+
rgb(29, 29, 29) 100%
20+
);
21+
}
22+
23+
img {
24+
margin-bottom: -75px;
25+
}

0 commit comments

Comments
 (0)