Skip to content

Commit e410d27

Browse files
robicano22robicano22
committed
splash transition update
1 parent 61b4f6f commit e410d27

11 files changed

Lines changed: 178 additions & 51 deletions

‎app/assets/Rounded_Elegance.ttf‎

224 KB
Binary file not shown.

‎app/assets/icon2Cropped.png‎

21.5 KB
Loading

‎app/components/AddService.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const { ipcRenderer } = window.require('electron');
88
const AddService = () => {
99
// Context used to ensure that that this page is only seen when the setup is required. Updated when user adds a database.
1010
const ChronosSetup = useContext(SetupContext);
11-
11+
1212
// Local state created for form entries ONLY.
1313
const [dbState, setDbType] = useState('');
1414
const [uriState, setUri] = useState('');
@@ -23,22 +23,22 @@ const AddService = () => {
2323
// Refresh window after submit.
2424
document.location.reload();
2525
};
26-
27-
//it is setting the dbState
28-
useEffect(()=>{
29-
setDbType(document.getElementById('dbType').value)
30-
},[dbState, setDbType])
26+
27+
// it is setting the dbState
28+
useEffect(() => {
29+
setDbType(document.getElementById('dbType').value);
30+
}, [dbState, setDbType]);
3131

3232
return (
3333
<div className="mainContainer">
3434
<img src={logo} alt="logo" />
3535
<h2 className="signUpHeader">Enter Your Database Information</h2>
3636
<form>
3737
Database Type:
38-
<select id="dbType" onChange={()=>setDbType(document.getElementById('dbType').value)}>
39-
<option value="SQL">SQL</option>
40-
<option value="MongoDB">MongoDB</option>
41-
</select>
38+
<select id="dbType" onChange={() => setDbType(document.getElementById('dbType').value)}>
39+
<option value="SQL">SQL</option>
40+
<option value="MongoDB">MongoDB</option>
41+
</select>
4242
Database URI:
4343
<input
4444
className="userInput"

‎app/components/ServiceOverview.jsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const ServiceOverview = (props) => {
4646
if (!(element.currentmicroservice in serviceCache)) {
4747
const button = (
4848
<button
49-
className='servicesBtn'
49+
className="servicesBtn"
5050
currentMicroservice={element.currentmicroservice}
5151
type="button"
5252
key={`serviceItem${props.index}${i}`}
@@ -75,7 +75,7 @@ const ServiceOverview = (props) => {
7575
if (!(element.currentMicroservice in serviceCache)) {
7676
const button = (
7777
<button
78-
className='servicesBtn'
78+
className="servicesBtn"
7979
type="button"
8080
key={`serviceItem${props.index}${i}`}
8181
onClick={() => {
@@ -99,6 +99,12 @@ const ServiceOverview = (props) => {
9999
}
100100
}
101101
}
102+
// If there's no data, return 'No data present', else return microservices button
103+
if (componentButtons.length === 0) {
104+
return (
105+
<p>No data present</p>
106+
);
107+
}
102108
return componentButtons;
103109
};
104110

@@ -107,10 +113,12 @@ const ServiceOverview = (props) => {
107113
return (
108114
<div className="mainContainer">
109115
<div>
110-
<h1 className='overviewTitle'>Microservices Overview</h1>
116+
<h1 className="overviewTitle">Microservices Overview</h1>
111117
</div>
112118
<div />
113-
<div className="servicesList">{serviceList()}</div>
119+
<div className="servicesList">
120+
{serviceList()}
121+
</div>
114122
</div>
115123
);
116124
};

‎app/components/ServicesDashboard.jsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import DashboardContext from '../context/DashboardContext';
44
import SetupContext from '../context/SetupContext';
55
import AddService from './AddService.jsx';
66

7+
const path = require('path');
8+
79
const ServicesDashboard = (props) => {
810
// Used to toggle setup required if user wants to add a new database.
911
const setup = useContext(SetupContext);
@@ -16,6 +18,7 @@ const ServicesDashboard = (props) => {
1618

1719
// Creates button for each database in dashboard context.
1820
const renderServiceList = (context) => {
21+
console.log('inside renderServiceLIst');
1922
const buttonStore = [];
2023
for (let i = 0; i < context.length; i += 1) {
2124
buttonStore.push(
@@ -38,26 +41,30 @@ const ServicesDashboard = (props) => {
3841
<div className="servicesDashboardContainer">
3942
<div className="left">
4043
<div className="leftTopContainer">
44+
<img alt="Chronos Logo" src="app/assets/icon2Cropped.png" id="serviceDashLogo" />
4145
<div className="left-top">
4246
<h2 className="dashboardHeader">Your Databases</h2>
4347
{renderServiceList(serviceList)}
4448
</div>
45-
</div>
46-
<div className="left-bottom">
47-
<button
48-
className="overviewSubmitBtn"
49-
type="submit"
50-
key="BackToStart"
51-
onClick={() => {
52-
setup.setupRequired = setup.toggleSetup(false);
53-
setSelection(<AddService />);
54-
}}
55-
>
49+
<div className="left-bottom">
50+
<button
51+
className="overviewSubmitBtn"
52+
type="submit"
53+
key="BackToStart"
54+
onClick={() => {
55+
setup.setupRequired = setup.toggleSetup(false);
56+
setSelection(<AddService />);
57+
}}
58+
>
5659
Add Database
57-
</button>
60+
</button>
61+
</div>
5862
</div>
63+
64+
</div>
65+
<div className="databsaseList">
66+
{serviceSelected}
5967
</div>
60-
<div className="databsaseList">{serviceSelected}</div>
6168
</div>
6269
);
6370
};

‎app/components/Splash.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const Splash = (props) => {
77

88
return (
99
<div id="splash">
10-
<img alt="Chronos Logo" src="app/assets//icons/icon.png" id="splashLogo" />
11-
<span id="splashText">chronos</span>
10+
<img alt="Chronos Logo" src="app/assets/icons/icon.png" id="splashLogo" />
11+
<span id="splashText" style={{ fontFamily: 'Baloo Bhaijaan' }}>chronos</span>
1212
</div>
1313
);
1414
};

‎app/index.css‎

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap');
2+
13
body {
24
background-color: #333;
35
background: rgb(25,0,36);
@@ -9,7 +11,46 @@ img {
911
}
1012

1113
#splash {
12-
14+
display: flex;
15+
flex-direction: column;
16+
align-content: center;
17+
align-items: center;
18+
justify-content: center;
19+
justify-items: center;
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
opacity: 1;
26+
animation-name: fadeInOpacity;
27+
animation-iteration-count: 1;
28+
animation-timing-function: ease-out;
29+
animation-duration: 3s;
30+
}
31+
32+
@keyframes fadeInOpacity {
33+
0% {
34+
opacity: 1;
35+
}
36+
100% {
37+
opacity: 0;
38+
}
39+
}
40+
41+
#splashLogo {
42+
height: 300px;
43+
margin-bottom: 0px;
44+
margin-top: -100px;
45+
}
46+
47+
#splashText {
48+
color: #FCE356;
49+
font-size: 9vw;
50+
letter-spacing: 100px;
51+
margin-right: -100px;
52+
font-family: Baloo Bhaijaan;
53+
font-weight: lighter;
1354
}
1455

1556
.header {
@@ -28,23 +69,25 @@ img {
2869
grid-template-rows: 33% 33% 33%;
2970
justify-items: center;
3071
align-items: center;
31-
/* margin-top: 10%; */
3272
color: white;
3373
}
3474

3575
.left-top {
76+
display: flex;
77+
flex-direction: column;
3678
font-family: Arial, Helvetica, sans-serif;
3779
font-size: 1.75vh;
3880
flex-direction: column;
3981
align-content: center;
4082
width: 100%;
41-
padding: 5% 10% 0 5%;
83+
/* padding: 5% 10% 0 5%; */
4284
align-items: center;
4385
justify-items: center;
4486
justify-content: center;
87+
/* height: 1000px; */
4588
max-height: 600px;
4689
overflow-y: auto;
47-
/* background-color: rgb(151, 151, 151) */
90+
4891
}
4992

5093
.servicesBtn {
@@ -70,10 +113,12 @@ img {
70113

71114
.leftTopContainer {
72115
display: flex;
116+
flex-direction: column;
73117
border-right: 2px solid rgb(163, 163, 163);
74118
align-items: center;
75-
justify-content: center;
119+
justify-items: center;
76120
align-content: center;
121+
height: 1000px;
77122
}
78123

79124
.left-bottom {
@@ -86,10 +131,16 @@ img {
86131
}
87132

88133
.left {
89-
height: 700px;
134+
height: 1000px;
90135
/* display: flex; */
91136
}
92137

138+
#serviceDashLogo {
139+
width: 200px;
140+
margin-bottom: 0px;
141+
margin-top: 75px;
142+
}
143+
93144
h3 {
94145
color: white;
95146
margin-left: 25px;
@@ -137,7 +188,7 @@ form {
137188
}
138189

139190
.microserviceBtn {
140-
width: 100%;
191+
width: 80%;
141192
height: 50px;
142193
background-color: rgb(249, 221, 111);
143194
padding: 2%;
@@ -152,7 +203,6 @@ form {
152203

153204
.overviewSubmitBtn {
154205
background-color: #333;
155-
width: 50%;
156206
margin: 8% auto 0 auto;
157207
height: 40px;
158208
border: 1px solid white;
@@ -201,7 +251,8 @@ form {
201251

202252
.dashboardHeader {
203253
color: white;
204-
margin-top: 35%;
254+
margin-top: 10%;
255+
text-align: center;
205256
}
206257

207258
select {

0 commit comments

Comments
 (0)