Skip to content

Commit b8317d4

Browse files
caitlinchan23caitlinchan23
committed
changed styles, improved UI
1 parent 52f9d4a commit b8317d4

17 files changed

+185
-37
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: 68 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
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,
22+
inset -5px -5px 10px #ff6c71
423
}
524

625
.state-dropdown {
@@ -25,45 +44,74 @@
2544
width: 70px;
2645
border: none;
2746
border-radius: 3px;
28-
background-color: #565A61;
29-
font: normal 11px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
47+
background: linear-gradient(145deg, #5c6068, #4d5157);
48+
font: normal 11px 'Roboto', sans-serif;
3049
color: #B0B0B0;
50+
3151
}
3252

3353
.jump-button {
34-
@extend %button-shared;
54+
outline: none;
55+
height: 20px;
3556
margin-bottom: 8px;
36-
width: 50px;
37-
opacity: 0;
57+
width: 70px;
58+
border: transparent;
59+
border-radius: 3px;
60+
background-color: #565A61;
61+
font: normal 11px 'Roboto', sans-serif;
62+
color: #B0B0B0;
3863
transform: rotateX(90deg);
3964
transition: opacity 300ms, transform 0.15s linear;
65+
opacity: 0;
4066
}
4167

4268
.jump-button:hover {
4369
// remove the blue border when button is clicked
44-
background-color: $highlight-color;
70+
color: black;
71+
background-color: $fiery-rose;
72+
73+
cursor: pointer;
4574
}
4675

4776
.empty-button:hover {
77+
color: white;
4878
background-color: $highlight-color;
4979
}
5080

5181
.play-button {
5282
@extend %button-shared;
83+
font-weight: lighter;
5384
width: 100px;
85+
height: 25px;
5486
margin: 0 1% 0 2%;
87+
border-color: transparent;
88+
background: $blue-color-gradient;
89+
}
90+
.play-button:hover {
91+
box-shadow: $box-shadow-blue;
5592
}
5693

5794
.backward-button {
5895
@extend %button-shared;
5996
width: 30px;
6097
margin: 7px;
98+
border-color: transparent;
99+
background: $blue-color-gradient;
61100
}
62101

63102
.forward-button {
64103
@extend %button-shared;
65104
width: 30px;
66105
margin: 7px;
106+
border-color: transparent;
107+
background: $blue-color-gradient;
108+
box-shadow: 5px 5px 10px #1f1f23,
109+
-5px -5px 10px #292b2f;
110+
}
111+
112+
.forward-button:hover,
113+
.backward-button:hover {
114+
box-shadow: $box-shadow-blue;
67115
}
68116

69117
.import-button,
@@ -72,22 +120,32 @@
72120
.pause-button,
73121
.persist-button {
74122
@extend %button-shared;
123+
border-color: transparent;
124+
background: $blue-color-gradient;
125+
}
126+
.import-button:hover,
127+
.export-button:hover,
128+
.lock-button:hover,
129+
.pause-button:hover,
130+
.persist-button:hover {
131+
@extend %button-shared;
132+
box-shadow: $box-shadow-blue;
75133
}
76134

77135
%button-shared {
136+
padding: 5px;
78137
outline: none;
79138
background-color: $brand-color;
80-
color: white;
139+
color: black;
81140
display: flex;
82141
justify-content: center;
83142
align-items: center;
84-
height: 20px;
85143
border-style: solid;
86144
border-width: 1px;
87145
border-radius: 3px;
88146
cursor: pointer;
89147
line-height: 1.5em;
90-
font: normal 13px monaco, Consolas, "Lucida Console", monospace, Arial, sans-serif;
148+
font: 300 14px 'Roboto', sans-serif;
91149
font-size: $button-text-size;
92150

93151
@extend %disable-highlight;

‎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)