Skip to content

Commit 961c014

Browse files
kris-sorensenkris-sorensen
authored
Merge pull request #10 from oslabs-beta/style
Stylized tutorial walkthrough and applied some basic CSS to Reactime 13.0
2 parents 5bf6dfb + bfb22e7 commit 961c014

File tree

10 files changed

+123
-26
lines changed

10 files changed

+123
-26
lines changed

‎src/app/components/BarGraph.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const BarGraph = props => {
142142
<div className="bargraph-position">
143143

144144
{/* <input type="text" id ="seriesname" placeholder="Series Name" /> */}
145-
<div>
145+
<div className="saveSeriesContainer">
146146
{textbox}
147147
<button
148148
type="button"

‎src/app/components/Tutorial.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ class Tutorial extends Component {
218218
hideNext: false,
219219
skipLabel: 'Skip',
220220
keyboardNavigation: true,
221-
overlayOpacity: 0.65,
221+
overlayOpacity: 0.85,
222222
}}
223223
onBeforeChange={currentStepIndex => onChangeHandler(currentStepIndex)}
224224
ref={steps => (this.steps = steps)}

‎src/app/styles/base/_base.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,11 @@ body {
3838
border-color: $border-color;
3939
border-width: 1px;
4040
}
41+
42+
.saveSeriesContainer {
43+
padding-bottom: 15px;
44+
padding-top: 10px;
45+
}
46+
47+
48+

‎src/app/styles/components/_actionComponent.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
grid-template-columns: none;
55
align-items: center;
66
height: 20px;
7-
background-color: $brand-color;
7+
// background-color: $brand-color;
88
border-bottom-style: solid;
99
border-bottom-width: 1px;
10-
border-color: $border-color;
10+
background-color: none;
11+
border-color: #292929;
12+
// border-color: $border-color;
1113
cursor: pointer;
1214
overflow: hidden;
1315
@extend %disable-highlight;
@@ -24,6 +26,7 @@
2426
.action-component.exclude {
2527
display: flex;
2628
justify-content: center;
29+
margin-top: 10px;
2730
}
2831

2932
.action-component:focus {

‎src/app/styles/components/_performanceVisx.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,12 @@
2020
}
2121

2222
#seriesname {
23-
background-color: white;
24-
float: right;
25-
width: 117px;
26-
margin-right: 160px;
27-
height: 24px;
23+
float: right;
24+
width: 220px;
25+
margin-right: 165px;
26+
height: 24px;
27+
2828
}
29+
input:focus, textarea:focus, select:focus{
30+
outline: none;
31+
}

‎src/app/styles/layout/_actionContainer.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
.action-container {
22
// overflow: auto;
3-
background-color: $brand-color;
3+
// background-color: $brand-color;
44
overflow-x: hidden;
5+
background-color: #282828;
56
}
67

78
.actionname {
8-
background-color: #25242a;
9+
background-color: inherit;
910
color: #fffeff;
1011
}
1112

‎src/app/styles/layout/_buttonsContainer.scss‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
padding-left: 2px;
2020
}
2121

22-
.introjs-helperLayer{
23-
// border: 2px solid yellow
24-
}
22+
// .introjs-helperLayer{
23+
// // border: 2px solid yellow
24+
// }
2525

2626
.tools-container {
2727
display: flex;
@@ -33,11 +33,40 @@
3333
}
3434

3535
#seriesname {
36-
background-color: inherit;
36+
background-color: #333;
37+
color: white;
3738
}
3839

3940
@media (max-width: 500px) {
4041
.buttons-container {
4142
grid-template-columns: repeat(2, 1fr);
4243
}
4344
}
45+
46+
.introjs-nextbutton {
47+
background-color: none;
48+
color: #3256f1;
49+
border: 1px solid;
50+
outline: none;
51+
}
52+
53+
.introjs-prevbutton{
54+
background-color: none;
55+
color: #3256f1;
56+
border: 1px solid;
57+
outline: none;
58+
}
59+
60+
61+
.introjs-skipbutton {
62+
color: #d72828;
63+
border: 1px solid;
64+
margin-top: 2px;
65+
font-size: 12px;
66+
outline: none;
67+
}
68+
69+
.introjs-button {
70+
background: none;
71+
outline: none;
72+
}

‎src/app/styles/layout/_stateContainer.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
font-size: 10px;
33
overflow: auto;
44
background-color: $brand-color;
5+
// margin-left: 5px;
56
}
67

78
.toggleAC {
@@ -47,7 +48,9 @@
4748
top: 0px;
4849
left: 0px;
4950
z-index: 1;
50-
background-color: $background-color;
51+
// background-color: $background-color;
52+
background-color: #252525;
53+
5154
display: flex;
5255
flex-direction: row;
5356
justify-content: space-between;
@@ -246,6 +249,10 @@
246249
z-index: 2;
247250
}
248251

252+
253+
.state-container .router-link {
254+
border: 0.5px solid black;
255+
}
249256
/* if state view is width is less than 500px, stack the body containers */
250257
// @media (max-width: 500px) {
251258

‎src/app/styles/layout/_travelContainer.scss‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
.travel-container {
2-
background: linear-gradient(
3-
90deg,
4-
rgba(41, 41, 41, 1) 0%,
5-
rgba(51, 51, 51, 1) 50%,
6-
rgba(41, 41, 41, 1) 100%
7-
);
8-
border-color: $border-color;
2+
// background: linear-gradient(
3+
// 90deg,
4+
// rgba(41, 41, 41, 1) 0%,
5+
// rgba(51, 51, 51, 1) 50%,
6+
// rgba(41, 41, 41, 1) 100%
7+
// );
8+
// border-color: $border-color;
9+
// display: flex;
10+
// flex-direction: row;
11+
// align-items: center;
12+
// justify-content: space-around;
13+
914
display: flex;
10-
flex-direction: row;
11-
align-items: center;
12-
justify-content: space-around;
15+
flex-direction: row;
16+
align-items: center;
17+
justify-content: space-around;
18+
border: none;
19+
margin-top: 18px;
20+
}
21+
22+
.visx-group{
23+
margin-top: 10px;
1324
}
1425

1526

‎yarn.lock‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2780,6 +2780,13 @@
27802780
"resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz"
27812781
"version" "2.1.0"
27822782

2783+
"bindings@^1.5.0":
2784+
"integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
2785+
"resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
2786+
"version" "1.5.0"
2787+
dependencies:
2788+
"file-uri-to-path" "1.0.0"
2789+
27832790
"bl@^4.0.1":
27842791
"integrity" "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ=="
27852792
"resolved" "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz"
@@ -4969,6 +4976,11 @@
49694976
dependencies:
49704977
"flat-cache" "^2.0.1"
49714978

4979+
"file-uri-to-path@1.0.0":
4980+
"integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
4981+
"resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
4982+
"version" "1.0.0"
4983+
49724984
"fill-range@^4.0.0":
49734985
"integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc="
49744986
"resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@@ -5152,6 +5164,24 @@
51525164
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
51535165
"version" "1.0.0"
51545166

5167+
"fsevents@^1.2.7":
5168+
"integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
5169+
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
5170+
"version" "1.2.13"
5171+
dependencies:
5172+
"bindings" "^1.5.0"
5173+
"nan" "^2.12.1"
5174+
5175+
"fsevents@^2.1.2":
5176+
"integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
5177+
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
5178+
"version" "2.3.2"
5179+
5180+
"fsevents@~2.1.2":
5181+
"integrity" "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ=="
5182+
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz"
5183+
"version" "2.1.3"
5184+
51555185
"function-bind@^1.1.1":
51565186
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
51575187
"resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -7243,6 +7273,11 @@
72437273
"resolved" "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz"
72447274
"version" "0.0.8"
72457275

7276+
"nan@^2.12.1":
7277+
"integrity" "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
7278+
"resolved" "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz"
7279+
"version" "2.15.0"
7280+
72467281
"nanomatch@^1.2.9":
72477282
"integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
72487283
"resolved" "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"

0 commit comments

Comments
 (0)