Skip to content

Commit 3fe7a59

Browse files
NkmaiNkmai
committed
Merge branch 'reactime7' of https://github.com/caitlinchan23/reactime into reactime7
2 parents 66d271e + b8317d4 commit 3fe7a59

17 files changed

+187
-48
lines changed

‎docs/assets/css/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1662,7 +1662,7 @@ a:hover {
16621662
}
16631663

16641664
code, pre {
1665-
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
1665+
font-family: 'Roboto', sans-serif;
16661666
padding: 0.2em;
16671667
margin: 0;
16681668
font-size: 14px;

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,15 @@
6060
],
6161
"license": "ISC",
6262
"devDependencies": {
63-
"@babel/core": "^7.10.5",
63+
"@babel/core": "^7.12.7",
6464
"@babel/plugin-proposal-class-properties": "^7.10.4",
6565
"@babel/plugin-proposal-decorators": "^7.10.5",
66-
"@babel/preset-env": "^7.10.4",
67-
"@babel/preset-react": "^7.10.4",
66+
"@babel/preset-env": "^7.12.7",
67+
"@babel/preset-react": "^7.12.7",
6868
"@types/chrome": "^0.0.119",
6969
"@types/d3-scale-chromatic": "^2.0.0",
7070
"@types/jest": "^26.0.4",
71-
"@types/node": "^12.12.50",
71+
"@types/node": "^12.19.6",
7272
"@typescript-eslint/eslint-plugin": "^3.6.1",
7373
"@typescript-eslint/parser": "^3.6.1",
7474
"babel-loader": "^8.1.0",

‎src/app/styles/abstracts/_variables.scss

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
/// fontFamily: 'monaco, Consolas, Lucida Console, monospace'
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
23
/// @type List
3-
$text-font-stack: Monaco, Consolas, 'Lucida Console', monospace, Arial,
4+
$text-font-stack: 'Roboto',
45
sans-serif !default;
56

7+
/// @type Color
8+
$fiery-rose: #ff6569;
9+
10+
/// @type Color
11+
$blue-color-gradient: linear-gradient(145deg, #69e5ff, #58c1e2);
12+
13+
/// @type Color:
14+
$box-shadow-blue: inset 5px 5px 10px #53b6d5,
15+
inset -5px -5px 10px #71f6ff;
16+
617
/// @type Color
718
$text-color: rgb(231, 231, 231);
819

@@ -25,10 +36,10 @@ $navbar-color: rgb(68, 72, 78) !default;
2536
$head-color: #242529 !default;
2637

2738
/// @type Color
28-
$border-color: rgba(190, 190, 190, 0.5) !default;
39+
$border-color: rgb(41, 41, 41) !default;
2940

3041
/// @type Color
3142
$highlight-color: rgba(224, 224, 224, 0.5) !default;
3243

3344
/// @type Font Size
34-
$button-text-size: 10px;
45+
$button-text-size: 12px;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ body {
2424
}
2525
.buttons-container {
2626
grid-area: buttons;
27+
background: linear-gradient(90deg, rgba(41,41,41,1) 0%, rgba(51,51,51,1) 50%, rgba(41,41,41,1) 100%);
28+
border-color: rgba(41,41,41,1);
2729
}
2830

2931
.action-container,

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,7 @@
2525
display: flex;
2626
justify-content: center;
2727
}
28+
29+
.action-component:focus {
30+
outline: none;
31+
}

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

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
12
.empty-button {
2-
@extend %button-shared;
3+
padding: 5px;
4+
outline: transparent;
5+
color: black;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
border-style: solid;
10+
border-color: transparent;
11+
border-radius: 3px;
12+
cursor: pointer;
13+
line-height: 1.5em;
14+
font: 300 14px 'Roboto', sans-serif;
15+
font-size: $button-text-size;
316
width: 120px;
17+
background: linear-gradient(145deg, #ff6569, #e65558);
18+
}
19+
.empty-button:hover {
20+
color: black;
21+
box-shadow: inset 5px 5px 10px #d95053, inset -5px -5px 10px #ff6c71;
422
}
523

624
.state-dropdown {
@@ -25,46 +43,72 @@
2543
width: 70px;
2644
border: none;
2745
border-radius: 3px;
28-
background-color: #565a61;
29-
font: normal 11px monaco, Consolas, 'Lucida Console', monospace, Arial,
30-
sans-serif;
46+
background: linear-gradient(145deg, #5c6068, #4d5157);
47+
font: normal 11px 'Roboto', sans-serif;
3148
color: #b0b0b0;
3249
}
3350

3451
.jump-button {
35-
@extend %button-shared;
52+
outline: none;
53+
height: 20px;
3654
margin-bottom: 8px;
37-
width: 50px;
38-
opacity: 0;
55+
width: 70px;
56+
border: transparent;
57+
border-radius: 3px;
58+
background-color: #565a61;
59+
font: normal 11px 'Roboto', sans-serif;
60+
color: #b0b0b0;
3961
transform: rotateX(90deg);
4062
transition: opacity 300ms, transform 0.15s linear;
63+
opacity: 0;
4164
}
4265

4366
.jump-button:hover {
4467
// remove the blue border when button is clicked
45-
background-color: $highlight-color;
68+
color: black;
69+
background-color: $fiery-rose;
70+
71+
cursor: pointer;
4672
}
4773

4874
.empty-button:hover {
75+
color: white;
4976
background-color: $highlight-color;
5077
}
5178

5279
.play-button {
5380
@extend %button-shared;
81+
font-weight: lighter;
5482
width: 100px;
83+
height: 25px;
5584
margin: 0 1% 0 2%;
85+
border-color: transparent;
86+
background: $blue-color-gradient;
87+
}
88+
.play-button:hover {
89+
box-shadow: $box-shadow-blue;
5690
}
5791

5892
.backward-button {
5993
@extend %button-shared;
6094
width: 30px;
6195
margin: 7px;
96+
border-color: transparent;
97+
background: $blue-color-gradient;
6298
}
6399

64100
.forward-button {
65101
@extend %button-shared;
66102
width: 30px;
67103
margin: 7px;
104+
border-color: transparent;
105+
background: $blue-color-gradient;
106+
box-shadow: 5px 5px 10px #1f1f23, -5px -5px 10px #292b2f;
107+
}
108+
109+
.forward-button:hover,
110+
.backward-button:hover {
111+
box-shadow: $box-shadow-blue;
68112
}
69113

70114
.import-button,
@@ -73,28 +117,33 @@
73117
.pause-button,
74118
.persist-button {
75119
@extend %button-shared;
120+
border-color: transparent;
121+
background: $blue-color-gradient;
122+
}
123+
.import-button:hover,
124+
.export-button:hover,
125+
.lock-button:hover,
126+
.pause-button:hover,
127+
.persist-button:hover {
128+
@extend %button-shared;
129+
box-shadow: $box-shadow-blue;
76130
}
77131

78132
%button-shared {
133+
padding: 5px;
79134
outline: none;
80-
// background-color: $brand-color;
81-
color: white;
135+
background-color: $brand-color;
136+
color: black;
82137
display: flex;
83138
justify-content: center;
84139
align-items: center;
85-
height: 20px;
86-
// border-style: solid;
87-
// border-width: 1px;
88-
// border-radius: 3px;
140+
border-style: solid;
141+
border-width: 1px;
142+
border-radius: 3px;
89143
cursor: pointer;
90-
// line-height: 1.5em;
91-
font: normal 13px monaco, Consolas, 'Lucida Console', monospace, Arial,
92-
sans-serif;
144+
line-height: 1.5em;
145+
font: 300 14px 'Roboto', sans-serif;
93146
font-size: $button-text-size;
94-
padding: 1em;
95-
border-radius: 51px;
96-
background: #00fbff;
97-
box-shadow: inset -30px -30px 100px #00a1a3, inset 30px 30px 100px #00ffff;
98147

99148
@extend %disable-highlight;
100149
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.json-tree {
2+
font-size: 13px;
23
overflow: auto;
34
margin: 10px;
45
padding: 0;

‎src/app/styles/components/_rc-slider.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
left: 0;
2626
height: 4px;
2727
border-radius: 6px;
28-
background-color: #427aa1;
28+
background-color: $fiery-rose;
2929
}
3030
.rc-slider-handle {
3131
position: absolute;
@@ -38,7 +38,7 @@
3838
cursor: grab;
3939
border-radius: 50%;
4040
// border: solid 2px #96dbfa;
41-
background-color: #427aa1;
41+
background: linear-gradient(145deg, #ff6569, #e65558);;
4242
-ms-touch-action: pan-x;
4343
touch-action: pan-x;
4444
}

‎src/app/styles/components/d3graph.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); */
2-
@import url("https://fonts.googleapis.com/css?family=Overpass+Mono&display=swap");
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
33
body {
44
background-color: black;
55
}
@@ -20,8 +20,9 @@ body {
2020

2121
.node text {
2222
fill: #fae6e4;
23+
background-color: red;
2324
font-size: 10px;
24-
font-family: "Overpass Mono", monospace;
25+
font-family: 'Roboto', sans-serif;
2526
}
2627

2728

‎src/app/styles/components/diff.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
12
.jsondiffpatch-delta {
2-
font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
3+
font-family: 'Roboto', sans-serif;
34
font-size: 12px;
45
margin: 0;
56
padding: 0 0 0 12px;
67
display: inline-block;
78
}
89
.jsondiffpatch-delta pre {
9-
font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
10+
font-family: 'Roboto', sans-serif;
1011
font-size: 12px;
1112
margin: 0;
1213
padding: 0;

0 commit comments

Comments
 (0)