Skip to content

Commit 5f874ce

Browse files
stephenhyangstephenhyang
authored
Merge pull request #3 from oslabs-beta/modularization
Modularization
2 parents f918bf6 + b299a5f commit 5f874ce

12 files changed

Lines changed: 468 additions & 411 deletions

File tree

‎app/assets/search.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/components/ApplicationsCard/styles.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,3 +204,45 @@
204204
height: 55px;
205205
}
206206
}
207+
208+
.cardLine {
209+
background-color: $grey;
210+
width: 85%;
211+
border: none;
212+
height: 1px;
213+
margin-top: 20px;
214+
margin-bottom: 15px;
215+
}
216+
217+
.cardFooter {
218+
width: 90%;
219+
display: flex;
220+
height: 20px;
221+
align-items: center;
222+
margin-left: 18px;
223+
}
224+
225+
#cardFooterText {
226+
color: $icon;
227+
font-size: 11px;
228+
margin: 0;
229+
margin-left: 10px;
230+
}
231+
232+
.cardFooterIcon {
233+
color: $icon;
234+
font-size: 14px;
235+
margin: 0;
236+
}
237+
238+
#databaseName {
239+
margin-top: 14px;
240+
margin-bottom: 0;
241+
font-size: 40px;
242+
width: 280px;
243+
}
244+
245+
#serviceName {
246+
font-size: 11px;
247+
margin-top: 6px;
248+
}

‎app/components/DashboardIcons/styles.scss‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,127 @@
2020
color: $ggreen;
2121
text-align: center;
2222
border-radius: 6px;
23-
// padding: 5px 0;
23+
font-size: 12px;
24+
position: absolute;
25+
z-index: 1;
26+
top: 50px;
27+
right: -14px;
28+
}
29+
30+
.dashboardIconArea .dashboardTooltip::after {
31+
content: '';
32+
position: absolute;
33+
bottom: 50px;
34+
left: 35px;
35+
border-width: 5px;
36+
border-style: solid;
37+
border-color: transparent transparent $background transparent;
38+
}
39+
40+
.navIcon {
41+
font-size: 34px;
42+
vertical-align: middle;
43+
text-align: center;
44+
color: $icon;
45+
background-color: transparent;
46+
box-sizing: content-box;
47+
border-radius: 50%;
48+
line-height: 1.5;
49+
white-space: nowrap;
50+
outline: 0;
51+
border: none;
52+
cursor: pointer;
53+
position: relative;
54+
min-height: auto;
55+
white-space: nowrap;
56+
margin: 5px;
57+
margin-top: 15px;
58+
padding: 5px;
59+
}
60+
61+
#dashboardIcon {
62+
margin-top: 4px;
63+
margin-left: -35px;
64+
font-size: 26px;
65+
padding: 8px;
66+
67+
&:hover {
68+
cursor: pointer;
69+
box-shadow: $boxshadow3;
70+
background-color: $background;
71+
color: $ggreen;
72+
}
73+
}
74+
75+
.notificationsIconArea {
76+
position: relative;
77+
display: inline-block;
78+
}
79+
80+
.notificationsIconArea:hover .notificationsTooltip {
81+
visibility: visible;
82+
}
83+
84+
.notificationsIconArea .notificationsTooltip {
85+
visibility: hidden;
86+
width: 80px;
87+
background-color: $background;
88+
color: $gred;
89+
text-align: center;
90+
border-radius: 6px;
91+
padding: 5px 0;
2492
font-size: 12px;
2593
/* Position the tooltip */
2694
position: absolute;
2795
z-index: 1;
2896
top: 50px;
2997
right: -14px;
98+
}
99+
100+
.notificationsIconArea .notificationsTooltip::after {
101+
content: '';
102+
position: absolute;
103+
bottom: 37px;
104+
left: 35px;
105+
border-width: 5px;
106+
border-style: solid;
107+
border-color: transparent transparent $background transparent;
108+
}
109+
110+
#notificationsIcon {
111+
margin-top: 4px;
112+
margin-left: 2px;
113+
font-size: 26px;
114+
&:hover {
115+
cursor: pointer;
116+
box-shadow: $boxshadow3;
117+
background-color: $background;
118+
color: $gred;
119+
}
120+
}
121+
122+
#personIcon {
123+
margin-top: 4px;
124+
margin-left: 2px;
125+
font-size: 26px;
126+
&:hover {
127+
cursor: pointer;
128+
box-shadow: $boxshadow3;
129+
background-color: $background;
130+
color: $gyellow;
131+
}
132+
}
133+
134+
.personIconArea {
135+
position: relative;
136+
display: inline-block;
137+
}
138+
139+
.personIconArea:hover .personTooltip {
140+
visibility: visible;
141+
}
142+
143+
.personIconArea .personTooltip {
144+
color: $gyellow;
145+
text-align: center;
30146
}

‎app/components/FirstLaunch/FirstLaunch.scss‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
@import '../../stylesheets/constants.scss';
2+
3+
.btns {
4+
display: flex;
5+
justify-content: space-around;
6+
}
7+
8+
.home {
9+
background: $darkblue;
10+
display: flex;
11+
flex-direction: column;
12+
align-content: center;
13+
align-items: center;
14+
justify-content: flex-start;
15+
justify-items: center;
16+
position: absolute;
17+
margin-left: 50px;
18+
padding-top: 160px;
19+
top: 0;
20+
left: 0;
21+
width: 100vw;
22+
height: 100vh;
23+
opacity: 1;
24+
25+
26+
.logo-container {
27+
height: auto;
28+
width: 40%;
29+
max-width: 650px;
30+
31+
img {
32+
width: 100%;
33+
transition: 0.3s ease-in;
34+
35+
&:hover {
36+
filter: brightness(0.7);
37+
}
38+
}
39+
}
40+
41+
h1 {
42+
font-size: 325%;
43+
letter-spacing: 2px;
44+
}
45+
46+
p {
47+
margin: 15px 0;
48+
color: white;
49+
}
50+
51+
// Get Started Button
52+
.link {
53+
font-size: 88%;
54+
padding: 10px 17px;
55+
letter-spacing: 0.5px;
56+
text-decoration: none;
57+
border-radius: 30px;
58+
background-color: $navy;
59+
color: #fff;
60+
@include centerWithFlex();
61+
transition: 1s;
62+
animation: glow linear 4s infinite;
63+
64+
&:hover {
65+
background-color: $hover;
66+
opacity: 0.85;
67+
animation: none;
68+
}
69+
}
70+
}
71+
72+
.welcome {
73+
color: rgba(255, 255, 255, 0.801);
74+
text-align: center;
75+
h1 {
76+
margin-bottom: 90px;
77+
}
78+
h2 {
79+
margin-bottom: 33px;
80+
}
81+
.btns {
82+
display: flex;
83+
justify-content: space-around;
84+
}
85+
form {
86+
flex-direction: column;
87+
label {
88+
width: 50%;
89+
input {
90+
padding: 5px 7px;
91+
margin: 2px 0;
92+
width: 100%;
93+
}
94+
}
95+
button.needAccount {
96+
all: initial;
97+
font-family: 'Roboto';
98+
color: rgba(255, 255, 255, 0.801);
99+
cursor: pointer;
100+
}
101+
}
102+
}
103+
104+
@keyframes fadeIn {
105+
0% {
106+
opacity: 0;
107+
}
108+
100% {
109+
opacity: 1;
110+
}
111+
}
112+
113+
@-moz-keyframes fadeIn {
114+
0% {
115+
opacity: 0;
116+
}
117+
100% {
118+
opacity: 1;
119+
}
120+
}
121+
122+
@-webkit-keyframes fadeIn {
123+
0% {
124+
opacity: 0;
125+
}
126+
100% {
127+
opacity: 1;
128+
}
129+
}
130+
131+
@-o-keyframes fadeIn {
132+
0% {
133+
opacity: 0;
134+
}
135+
100% {
136+
opacity: 1;
137+
}
138+
}
139+
140+
@-ms-keyframes fadeIn {
141+
0% {
142+
opacity: 0;
143+
}
144+
100% {
145+
opacity: 1;
146+
}
147+
}

app/components/FirstLaunch.tsx renamed to app/components/FirstLaunch/FirstLaunch.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useContext } from 'react';
2-
import { DashboardContext } from '../context/DashboardContext';
2+
import { DashboardContext } from '../../context/DashboardContext';
3+
import './FirstLaunch.scss'
34

45
// THIS FILE IS NOT DOING ANYTHING RIGHT NOW
56
const FirstLaunch: React.FC = React.memo(() => {
@@ -8,7 +9,7 @@ const FirstLaunch: React.FC = React.memo(() => {
89
return (
910
<div className="home">
1011
<div className="welcome" data-testid="FirstLaunch">
11-
<h1 className="welcomeMessage">Welcome to Chronos!</h1>
12+
<h1>Welcome to Chronos!</h1>
1213
<h2>Would you like authentication?</h2>
1314
<div className="btns">
1415
<button className="link" onClick={() => updateLandingPage('createAdmin')}>

0 commit comments

Comments
 (0)