Skip to content

Commit 29446cb

Browse files
hodeszahodesza
committed
Merge branch 'dev' of https://github.com/oslabs-beta/Chronos into dev
2 parents 99fcbd4 + ebcda7c commit 29446cb

15 files changed

+207
-126
lines changed

‎app/components/About.tsx

+22-15
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,39 @@
1-
import React from 'react';
1+
import React, {useContext, useEffect, useState} from 'react';
22
import '../stylesheets/About.scss';
3+
import { DashboardContext } from '../context/DashboardContext';
4+
import { lightAndDark } from './Styling';
35

46
const About: React.FC = React.memo(() => {
7+
let { mode } = useContext(DashboardContext);
8+
9+
let currentMode = (mode === 'light mode')? lightAndDark.lightModeText : lightAndDark.darkModeText;
10+
511
return (
6-
<div className="home">
12+
<div className="about">
713
<div className="blurb">
8-
<h3 className="mainTitle">About</h3>
9-
<p className="text">
14+
<h3 style={currentMode} className="mainTitle">About</h3>
15+
<p style={currentMode} className="text">
1016
The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
1117
the developer community. With many existing paid options being difficult to use and expensive to operate, Chronos was
1218
born. Chronos is an all-in-one network and health monitoring tool for your application or
1319
microservice, containerized or not!
1420
</p>
15-
<div className="doya">
16-
<h3 className="title">Team Doya</h3><span><img className="sprout" id="sproutSpan" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
17-
<br/>
18-
<div>
19-
<span className="text">Grace </span><br />
20-
<span className="text">Jen </span><br />
21-
<span className="text">Patty </span><br />
22-
<span className="text">Stella </span><br /><br />
23-
</div>
21+
<h3 style={currentMode} className="title">Fantastic Four</h3>
22+
<div>
23+
<span style={currentMode} className="text">Vince</span><br />
24+
<span style={currentMode} className="text">Matt</span><br />
25+
<span style={currentMode} className="text">Derek</span><br />
26+
<span style={currentMode} className="text">Kit</span><br />
27+
<br />
2428
</div>
25-
<h3 className="title">Contributors</h3>
26-
<p className="text">Michael, Ronelle, Todd, Greg
29+
<h3 style={currentMode} className="title">Contributors</h3>
30+
<p style={currentMode} className="text">Grace, Jen, Patty, Stella, Michael, Ronelle, Todd, Greg
2731
Brianna, Brian, Alon, Alan
2832
Ousman, Ben, Chris, Jenae, Tim</p>
33+
<br/>
34+
<p style={currentMode}>Copyright © Team Chronos 2021.</p>
2935
</div>
36+
3037
</div>
3138
);
3239
});

‎app/components/Contact.tsx

+19-13
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
1-
import React from 'react';
1+
import React, {useContext, useEffect, useState} from 'react';
22
import '../stylesheets/Contact.scss';
3+
import { DashboardContext } from '../context/DashboardContext';
4+
import { lightAndDark } from './Styling';
35

46
const Contact = React.memo((props) => {
7+
let { mode } = useContext(DashboardContext);
8+
9+
let currentMode = (mode === 'light mode')? lightAndDark.lightModeText : lightAndDark.darkModeText;
10+
511
return (
612
<div className="contact">
713
<div className="contact-border">
814
<div className="contact-container">
915
<div className="contact-blurb">
10-
<h1>Contact Us</h1>
16+
<h1 style={currentMode}>Contact Us</h1>
1117
<br />
12-
<p>Please feel free to provide any feedback, concerns, or comments.</p>
13-
<p>
18+
<p style={currentMode}>Please feel free to provide any feedback, concerns, or comments.</p>
19+
<p style={currentMode}>
1420
You can find issues the team is currently working on&nbsp;
15-
<a id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
21+
<a style={currentMode} id="issueLink" href="https://github.com/open-source-labs/Chronos/issues" target="_blank">
1622
here
1723
</a>
1824
.
@@ -21,28 +27,28 @@ const Contact = React.memo((props) => {
2127
</div>
2228
<div className="email-container">
2329
<form>
24-
<label htmlFor="fname">First Name: &nbsp;</label>
30+
<label style={currentMode} htmlFor="fname">First Name: &nbsp;</label>
2531
<input type="text" id="fname" name="firstname" placeholder="Your name.." />
2632
<br />
27-
<label htmlFor="lname">Last Name: &nbsp;</label>
33+
<label style={currentMode} htmlFor="lname">Last Name: &nbsp;</label>
2834
<input type="text" id="lname" name="lastname" placeholder="Your last name.." />
2935
<br />
30-
<label htmlFor="email">E-mail: &nbsp;</label>
36+
<label style={currentMode} htmlFor="email">E-mail: &nbsp;</label>
3137
<input type="text" id="email" name="email" placeholder="Your e-mail address.." />
3238
<br />
33-
<label htmlFor="subject">Subject: &nbsp;</label>
39+
<label style={currentMode} htmlFor="subject">Subject: &nbsp;</label>
3440
<input type="text" id="subject" name="subject" placeholder="Subject" />
3541
<br />
36-
<label id="messageLabel" htmlFor="message">Message: <span>
42+
<label style={currentMode} id="messageLabel" htmlFor="message">Message: <span>
3743
<textarea id="message" name="message" placeholder="Write something.."></textarea>
3844
</span>
3945
</label>
4046

4147
<br />
42-
<label htmlFor="myfile">Select a file: </label>
43-
<input type="file" id="myfile" name="myfile" accept="image/*"></input>
48+
<label style={currentMode} htmlFor="myfile">Select a file: </label>
49+
<input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*"></input>
4450
<br />
45-
<input id="contact-submit" type="submit" value="Submit" />
51+
<input style={currentMode} id="contact-submit" type="submit" value="Submit" />
4652
</form>
4753
</div>
4854
</div>

‎app/components/Occupied.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ const Occupied = React.memo(() => {
8989
height: 280,
9090
width: 280,
9191
textAlign: 'center',
92-
color: '#ffffff', // dark mode
92+
color: '#888888',
9393
whiteSpace: 'nowrap',
94-
backgroundColor: 'transparent', // dark mode
94+
backgroundColor: 'lightgray', // dark mode
9595
borderRadius: 3,
9696
border: '0',
9797
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', // dark mode
@@ -126,8 +126,8 @@ const Occupied = React.memo(() => {
126126
fontSize: '18px',
127127
fontFamily: 'Roboto',
128128
fontWeight: 300,
129-
// color: '#444d56',
130-
color: '#ffffff', // dark mode
129+
color: '#444d56',
130+
// color: '#ffffff', // dark mode
131131
}
132132
}));
133133
const useStylesLight = makeStyles<Theme, StyleProps>(theme => ({
@@ -144,7 +144,7 @@ const Occupied = React.memo(() => {
144144
textAlign: 'center',
145145
color: '#888888',
146146
whiteSpace: 'nowrap',
147-
backgroundColor: '#ffffff',
147+
backgroundColor: 'white',
148148
borderRadius: 3,
149149
border: '0',
150150
boxShadow:

‎app/components/Settings.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const Settings: React.SFC = React.memo((props) => {
1818
const handleClick = (mode: string) => {
1919
changeMode(mode);
2020
}
21+
2122
return (
2223
<div className="settings">
2324
<button className="mode" id="lightMode" onClick={() => handleClick("light mode")}>

‎app/components/Styling.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,11 @@ export const lightAndDark = {
2424
minHeight: "100vh",
2525
flexDirection: "column" as "column",
2626
paddingLeft: "140px",
27-
}
27+
},
28+
lightModeText: {
29+
color: "black"
30+
},
31+
darkModeText: {
32+
color: "white"
33+
},
2834
};

‎app/containers/MainContainer.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ const MainContainer = React.memo(() => {
3333
<Route path="*" render={() => <h1>Not found</h1>} />
3434
</Switch>
3535
</div>
36-
<div className="copyright-container">
37-
<Copyright />
38-
</div>
3936
</div>
4037
)});
4138

‎app/containers/SidebarContainer.tsx

+9-36
Original file line numberDiff line numberDiff line change
@@ -32,25 +32,7 @@ const SidebarContainer = React.memo(function SidebarContainer(props): JSX.Elemen
3232

3333
<hr className="line" id="firstLine"></hr>
3434

35-
<div className="secondRow">
36-
<span><img alt="Doya" className="sprout" id="sprout0" src={'../assets/clean-sprout.gif'}></img></span>
37-
<span><img alt="Doya" className="sprout" id="sprout1" src={'../assets/growing-bean-1.gif'}></img></span>
38-
<span><img alt="Doya" className="sprout" id="sprout2" src={'../assets/growing-bean-2.gif'}></img></span>
39-
<span><img alt="Doya" className="sprout" id="sprout3" src={'../assets/growing-bean-3.gif'}></img></span>
40-
<span><img alt="Doya" className="sprout" id="sprout4" src={'../assets/clean-sprout.gif'}></img></span>
41-
</div>
42-
43-
<hr className="line" id="secondLine"></hr>
4435
<div className="thirdRow">
45-
<Link className="sidebar-link" to="/" id="home">
46-
<HomeSharpIcon style={{
47-
WebkitBoxSizing: 'content-box',
48-
boxShadow: 'none',
49-
width: '35px',
50-
height: '35px',
51-
}} />
52-
&emsp;Home
53-
</Link>
5436
<Link className="sidebar-link" to="/applications" id="dash">
5537
<ListIcon style={{
5638
WebkitBoxSizing: 'content-box',
@@ -60,41 +42,32 @@ const SidebarContainer = React.memo(function SidebarContainer(props): JSX.Elemen
6042
}} />
6143
&emsp;Dashboard
6244
</Link>
63-
<Link className="sidebar-link" to="/about" id="about">
64-
<InfoIcon style={{
65-
WebkitBoxSizing: 'content-box',
66-
boxShadow: 'none',
67-
width: '35px',
68-
height: '35px',
69-
}} />
70-
&emsp;About
71-
</Link>
72-
<Link className="sidebar-link" to="/contact" id="contact">
73-
<ContactSupportIcon style={{
45+
<Link className="sidebar-link" to="/settings" id="settings">
46+
<SettingsIcon style={{
7447
WebkitBoxSizing: 'content-box',
7548
boxShadow: 'none',
7649
width: '35px',
7750
height: '35px',
7851
}} />
79-
&emsp;Contact
52+
&emsp;Settings
8053
</Link>
81-
<Link className="sidebar-link" to="/settings" id="settings">
82-
<SettingsIcon style={{
54+
<Link className="sidebar-link" to="/about" id="about">
55+
<InfoIcon style={{
8356
WebkitBoxSizing: 'content-box',
8457
boxShadow: 'none',
8558
width: '35px',
8659
height: '35px',
8760
}} />
88-
&emsp;Settings
61+
&emsp;About
8962
</Link>
90-
<Link className="sidebar-link" to="/" id="logout">
91-
<ExitToAppIcon style={{
63+
<Link className="sidebar-link" to="/contact" id="contact">
64+
<ContactSupportIcon style={{
9265
WebkitBoxSizing: 'content-box',
9366
boxShadow: 'none',
9467
width: '35px',
9568
height: '35px',
9669
}} />
97-
&emsp;Logout
70+
&emsp;Contact
9871
</Link>
9972
</div>
10073
</div>

‎app/stylesheets/About.scss

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@import './constants.scss';
22

3+
.about {
4+
width: 50%;
5+
margin: 25% 25%;
6+
}
7+
38
.sprout {
49
margin: 0;
510
}
@@ -25,18 +30,9 @@
2530
font-weight: 100;
2631
}
2732

28-
.doya {
29-
display: flex;
30-
flex-direction: row;
31-
align-items: flex-start;
32-
align-self: flex-start;
33-
align-content: flex-start;
34-
vertical-align: top;
35-
}
36-
3733
.blurb {
38-
margin-left: 425px;
39-
margin-right: 385px;
34+
width: 100%;
35+
margin: auto;
4036
display: flex;
4137
flex-direction: column;
4238
justify-content: left;

‎app/stylesheets/Contact.scss

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
@import './constants.scss';
22

33
.contact {
4-
background-image: url('../assets/mountain_longer.png');
5-
background-size: contain;
64
display: flex;
75
flex-direction: column;
86
flex-direction: column;
@@ -17,11 +15,6 @@
1715
width: 100vw;
1816
height: 100vh;
1917
opacity: 1;
20-
animation: fadeIn ease 2s;
21-
-webkit-animation: fadeIn ease 2s;
22-
-moz-animation: fadeIn ease 2s;
23-
-o-animation: fadeIn ease 2s;
24-
-ms-animation: fadeIn ease 2s;
2518
vertical-align: top;
2619
justify-content: center;
2720
align-items: center;;
@@ -32,12 +25,13 @@
3225
flex-direction: column;
3326
justify-content: center;
3427
font-size: 18px;
35-
width: 60vw;
36-
margin: 0 auto;
28+
3729
border-radius: 10px;
3830
border: none;
3931
box-shadow: $boxshadow2;
4032
padding: 30px;
33+
width: 50%;
34+
margin: 25% 25%;
4135

4236
&:hover {
4337
background-color: rgba(255, 255, 255, 0.1);

‎app/stylesheets/Home.scss

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@import './constants.scss';
22

33
.home {
4-
background-image: url('../assets/mountain_longer.png');
5-
background-size: contain;
4+
background: $darkblue;
65
display: flex;
76
flex-direction: column;
87
align-content: center;
@@ -16,11 +15,6 @@
1615
width: 100vw;
1716
height: 100vh;
1817
opacity: 1;
19-
animation: fadeIn ease 2s;
20-
-webkit-animation: fadeIn ease 2s;
21-
-moz-animation: fadeIn ease 2s;
22-
-o-animation: fadeIn ease 2s;
23-
-ms-animation: fadeIn ease 2s;
2418

2519
.logo-container {
2620
height: auto;

‎app/stylesheets/Occupied.scss

+5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
@import './constants.scss';
2+
3+
.entireArea {
4+
height: 100vh;
5+
}
6+
27
// HEADER
38
.mainHeader {
49
display: flex;

0 commit comments

Comments
 (0)