Skip to content

Commit 83d2a6a

Browse files
lu0713lu0713
committed
fixed sidebar. about to fix main dashboard area
1 parent 11bc94d commit 83d2a6a

12 files changed

Lines changed: 260 additions & 168 deletions

‎app/components/Home.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import '../stylesheets/Home.scss';
55

66
const Home = () => (
77
<div className="home">
8-
<div className="pangolin-container">
9-
<img src={'../assets/icon.png'} alt="Chronos logo" />
10-
</div>
11-
<h1 id="welcome">Welcome to Chronos</h1>
12-
<p>Your all-in-one application monitoring tool.</p>
8+
<p className="welcomeMessage">Your all-in-one application monitoring tool</p>
139
<Link className="link" to="/applications">
1410
Get Started
1511
</Link>

‎app/components/Splash.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import '../stylesheets/Splash.css';
2+
import '../stylesheets/Splash.scss';
33

44
interface SplashProps {
55
setFirstVisit: React.Dispatch<React.SetStateAction<boolean>>;

‎app/containers/SidebarContainer.tsx‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,40 @@ import HomeSharpIcon from '@material-ui/icons/HomeSharp';
55
import InfoIcon from '@material-ui/icons/Info';
66
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
77
import SettingsIcon from '@material-ui/icons/Settings';
8-
import '../stylesheets/SidebarContainer.css';
8+
import '../stylesheets/SidebarContainer.scss';
99

1010
const SidebarContainer: React.FC = (): JSX.Element => (
1111
<div className="sidebar-container" id="mySidebar">
1212
<div className="sidebar">
13-
<img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/C.svg'} />
14-
<Link className="sidebar-link" to="/" id="home">
15-
<HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
16-
&emsp;Home
17-
</Link>
18-
<Link className="sidebar-link" to="/about" id="about">
19-
<InfoIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
20-
&emsp;About
21-
</Link>
22-
<Link className="sidebar-link" to="/contact" id="contact">
23-
<ContactSupportIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
24-
&emsp;Contact
25-
</Link>
26-
<Link className="sidebar-link" to="/settings" id="settings">
27-
<SettingsIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
28-
&emsp;Settings
29-
</Link>
13+
<div className="firstRow">
14+
<span><img alt="C" id="C" src={'../assets/C.svg'} /></span>
15+
<img alt="Chronos" id="logo" src={'../assets/logo.svg'} />
16+
</div>
17+
<hr className="line" id="firstLine"></hr>
18+
19+
<div className="secondRow">
20+
</div>
21+
22+
<hr className="line" id="secondLine"></hr>
23+
24+
<div className="thirdRow">
25+
<Link className="sidebar-link" to="/" id="home">
26+
<HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
27+
&emsp;Home
28+
</Link>
29+
<Link className="sidebar-link" to="/about" id="about">
30+
<InfoIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
31+
&emsp;About
32+
</Link>
33+
<Link className="sidebar-link" to="/contact" id="contact">
34+
<ContactSupportIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
35+
&emsp;Contact
36+
</Link>
37+
<Link className="sidebar-link" to="/settings" id="settings">
38+
<SettingsIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
39+
&emsp;Settings
40+
</Link>
41+
</div>
3042
</div>
3143
</div>
3244
);

‎app/stylesheets/AddModal.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
width: 100%;
99
padding: 20px 30px;
1010
text-align: center;
11-
border-bottom: thin solid $lightgray;
12-
background-color: $headergray;
11+
border-bottom: thin solid $grey;
12+
background-color: $grey;
1313
border-top-left-radius: 5px;
1414
border-top-right-radius: 5px;
1515

@@ -60,7 +60,7 @@
6060
textarea {
6161
font-size: 100%;
6262
padding: 5px;
63-
border: thin solid $lightgray;
63+
border: thin solid $grey;
6464
flex: 1;
6565
border-radius: 3px;
6666
}
@@ -102,18 +102,18 @@
102102
font-size: 115%;
103103
width: 50%;
104104
color: #fff;
105-
background-color: $sidebarblue;
105+
background-color: $navy;
106106
transition: 0.1s;
107107
margin: 20px 0;
108108
font-weight: 400;
109109
letter-spacing: 2px;
110-
border: thin solid $sidebarblue;
110+
border: thin solid $navy;
111111
padding: 4px;
112112
text-transform: uppercase;
113113

114114
&:hover {
115-
color: $sidebarblue;
116-
background-color: lighten($sidebarblue, 65%);
115+
color: $navy;
116+
background-color: lighten($navy, 65%);
117117
}
118118
}
119119
}

‎app/stylesheets/Header.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@include centerWithFlex(center);
66
flex-direction: column;
77
padding: 30px 0 50px;
8-
background-color: $headergray;
8+
background-color: $grey;
99
color: #333;
1010
margin-bottom: 30px;
1111

@@ -41,13 +41,13 @@ select {
4141
top: 20px;
4242
left: 115px;
4343
background-color: transparent;
44-
border: 1px solid $sidebarblue;
45-
color: $sidebarblue;
44+
border: 1px solid $navy;
45+
color: $navy;
4646
transition: 0.1s;
4747
font-size: 90%;
4848

4949
&:hover {
50-
background-color: $sidebarblue;
50+
background-color: $navy;
5151
color: #fff;
5252
}
5353
}

‎app/stylesheets/Home.scss‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
@import './constants.scss';
22

33
.home {
4-
background-color: #f2f2f2;
5-
height: 100%;
4+
background-image: url('../assets/mountain_long_resized.png');
5+
background-size: contain;
66
display: flex;
7-
align-items: center;
8-
justify-content: flex-start;
97
flex-direction: column;
8+
align-content: center;
9+
align-items: center;
10+
justify-content: center;
11+
justify-items: center;
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
width: 100vw;
16+
height: 100vh;
17+
opacity: 1;
18+
animation: fadeIn ease 2s;
19+
-webkit-animation: fadeIn ease 2s;
20+
-moz-animation: fadeIn ease 2s;
21+
-o-animation: fadeIn ease 2s;
22+
-ms-animation: fadeIn ease 2s;
1023

11-
.pangolin-container {
24+
.logo-container {
1225
height: auto;
1326
width: 40%;
1427
max-width: 650px;
1528

1629
img {
1730
width: 100%;
18-
animation: twirl 20s infinite linear;
31+
// animation: twirl 20s infinite linear;
1932
transition: 0.3s ease-in;
2033

2134
&:hover {
22-
filter: brightness(0.9);
35+
filter: brightness(0.7);
2336
}
2437
}
2538
}
@@ -31,6 +44,7 @@
3144

3245
p {
3346
margin: 15px 0;
47+
color: white;
3448
}
3549

3650
// Get Started Button
@@ -40,19 +54,43 @@
4054
padding: 10px 15px;
4155
letter-spacing: 0.5px;
4256
text-decoration: none;
43-
// border: thin solid $sidebarblue;
57+
// border: thin solid $navy;
4458
border-radius: 30px;
45-
background-color: $sidebarblue;
59+
background-color: $navy;
4660
color: #fff;
4761
@include centerWithFlex();
4862
transition: 0.1s;
4963
animation: glow linear 2s infinite;
5064

5165
&:hover {
52-
background-color: #bc0b0b;
66+
background-color: $hover;
5367
opacity: 0.85;
54-
// color: rgb(132, 132, 132);
5568
animation: none;
5669
}
5770
}
5871
}
72+
73+
@keyframes fadeIn {
74+
0% {opacity:0;}
75+
100% {opacity:1;}
76+
}
77+
78+
@-moz-keyframes fadeIn {
79+
0% {opacity:0;}
80+
100% {opacity:1;}
81+
}
82+
83+
@-webkit-keyframes fadeIn {
84+
0% {opacity:0;}
85+
100% {opacity:1;}
86+
}
87+
88+
@-o-keyframes fadeIn {
89+
0% {opacity:0;}
90+
100% {opacity:1;}
91+
}
92+
93+
@-ms-keyframes fadeIn {
94+
0% {opacity:0;}
95+
100% {opacity:1;}
96+
}

‎app/stylesheets/MainContainer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import './constants.scss';
22

33
.main-container {
4-
background-color: #e0e7ef;
4+
background-color: $background;
55
flex: 1;
66
min-height: 100vh;
77
@include centerWithFlex(space-between);

‎app/stylesheets/ServicesModal.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55

66
// Header
77
.services-header {
8-
background-color: $headergray;
8+
background-color: $grey;
99
width: 100%;
1010
padding: 0 0 15px;
1111
text-align: center;
1212
margin-bottom: 20px;
13-
border-bottom: thin solid $lightgray;
13+
border-bottom: thin solid $grey;
1414
border-top-left-radius: 5px;
1515
border-top-right-radius: 5px;
1616

@@ -31,24 +31,24 @@
3131
width: 80%;
3232
font-size: 110%;
3333
text-decoration: none;
34-
border: thin solid lighten($sidebarblue, 35%);
34+
border: thin solid lighten($navy, 35%);
3535
border-bottom: none;
3636
padding: 12px;
3737
margin: 0 auto;
38-
background-color: lighten($sidebarblue, 70%);
38+
background-color: lighten($navy, 70%);
3939
color: rgb(31, 31, 31);
4040
transition: 0.1s;
4141
text-align: center;
4242
font-weight: 700;
4343

4444
&:last-of-type {
45-
border-bottom: thin solid lighten($sidebarblue, 35%);
45+
border-bottom: thin solid lighten($navy, 35%);
4646
}
4747
}
4848

4949
.link:hover {
5050
color: #fff;
51-
background-color: $sidebarblue;
51+
background-color: $navy;
5252
}
5353
}
5454
}

0 commit comments

Comments
 (0)