Skip to content

Commit 8cf215e

Browse files
eternaleeeternalee
authored
Merge pull request #100 from Gossamer-React/styles
Styles
2 parents 5aa7bd5 + 5e81df5 commit 8cf215e

File tree

11 files changed

+128
-64
lines changed

11 files changed

+128
-64
lines changed

‎build/reactTraverser.js‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
console.log('ran reacttraverser.js')
1+
let timeout;
22
let reactGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
3+
console.log('ran reacttraverser.js', reactGlobalHook)
34

45
if (reactGlobalHook) {
56

@@ -22,18 +23,21 @@ if (reactGlobalHook) {
2223
return function (...args) {
2324

2425
if (args[1] !== undefined) {
25-
virtualdom = args[1];
26-
let nodeToTraverse = virtualdom.current.stateNode.current;
27-
traverse(nodeToTraverse);
28-
console.log('traverse complete: ', reactDOMArr);
29-
30-
//send DOM's react component tree to contentScriptJS
31-
window.postMessage(JSON.parse(JSON.stringify({
32-
type: 'reactTraverser',
33-
data: reactDOMArr
34-
})), '*')
35-
36-
reactDOMArr = [];
26+
clearTimeout(timeout);
27+
timeout = setTimeout(() => {
28+
virtualdom = args[1];
29+
let nodeToTraverse = virtualdom.current.stateNode.current;
30+
traverse(nodeToTraverse);
31+
console.log('traverse complete: ', reactDOMArr);
32+
33+
//send DOM's react component tree to contentScriptJS
34+
window.postMessage(JSON.parse(JSON.stringify({
35+
type: 'reactTraverser',
36+
data: reactDOMArr
37+
})), '*')
38+
39+
reactDOMArr = [];
40+
}, 750);
3741

3842
return oCFR(...args);
3943
}

‎build/webpack-bundle.js‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/webpack-bundle.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/app.css‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:300');
12
*{
23
margin: 0px;
34
}
5+
46
body{
5-
background-color: rgb(255, 255, 255);
6-
/* background: #8e9eab; fallback for old browsers;
7-
background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab); Chrome 10-25, Safari 5.1-6;
8-
background: linear-gradient(to right, #eef2f3, #8e9eab); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+; */
7+
background: linear-gradient(to right, #ffffff, #e2ebf0);
8+
}
9+
10+
h2{
11+
font-family: 'Avenir';
12+
letter-spacing: 1px;
13+
font-weight: 100;
14+
font-size: 1.5em;
15+
padding: 5px;
16+
text-transform: uppercase;
917
}
1018

1119
@media screen and (max-width: 600px) {
@@ -83,6 +91,7 @@ body{
8391
}
8492

8593
.reactTab {
94+
padding: 10px;
8695
display: grid;
8796
grid-template-rows: 1fr 3fr;
8897
grid-template-columns: 1fr 3fr;
@@ -98,20 +107,20 @@ body{
98107
max-height: 150px;
99108
overflow-y: scroll;
100109
border: 1px solid black;
101-
border-radius: 5px;
102110
padding: 5px 5px;
103111
margin-right: 10px;
104112
}
105113

106114

107115
#treeWrapper{
116+
text-align: center;
108117
grid-area: tree;
109118
height: 700px;
110-
background-color: rgba(214, 214, 214, 0.4);
111-
border: 1px solid rgba(0, 0, 0, 0.3);
112-
border-radius: 5px;
113119
padding: 10px;
114120
margin-left: 10px;
121+
font-family: 'Roboto';
122+
font-size: .9em;
123+
letter-spacing: 1.5px;
115124
}
116125

117126
.rd3t-tree-container{
@@ -123,13 +132,26 @@ body{
123132
white-space: pre-wrap;
124133
}
125134

126-
/* graph tab */
127135
.graphQLTab {
128136
display: flex;
129137
flex-direction: row;
130138
justify-content: center;
131139
}
132140

141+
button{
142+
font-size: 10px;
143+
text-transform: uppercase;
144+
letter-spacing: 1.15px;
145+
border: solid 1px rgba(214, 214, 214);
146+
border-radius: 4px;
147+
padding: 0px 6px;
148+
height: 20px;
149+
cursor: pointer;
150+
font-family: 'Avenir';
151+
transition: all .4s ease;
152+
margin: 5px;
153+
}
154+
133155
.toggleOn {
134156
background-color: rgba(214, 214, 214, 0.8);
135157
color: white;
@@ -153,26 +175,23 @@ body{
153175
}
154176
.window-btn{
155177
width: 30%;
178+
height: 35px;
156179
box-sizing: border-box;
157-
border: solid 1px rgba(214, 214, 214);
158-
color: rgba(214, 214, 214, 0.8);
159-
text-transform: uppercase;
160-
border-radius: 5px;
180+
color: #555;
161181
background-color: Transparent;
162182
font-size: 15px;
163183
padding: 5px 0;
164-
cursor: pointer;
165-
font-family: 'Avenir';
166-
transition: all .4s ease;
167184
}
168-
.window-btn:focus{
185+
button:focus{
169186
outline: none;
170187
}
171-
.window-btn:hover{
172-
background-color: rgba(214, 214, 214, 0.8);
173-
color: black;
188+
button:hover{
189+
background-color: #555;
190+
border: none;
191+
color: white;
174192
}
175193
.active{
176-
background-color: rgba(214, 214, 214, 0.8);
177-
color: black;
194+
background-color: #555;
195+
border: none;
196+
color: white;
178197
}

‎public/graphql.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@
44
min-height: 600px;
55
}
66

7-
#vr-log{
8-
border-left: 1px solid #000;
9-
height: 100%;
10-
margin: 0px;
7+
#req-res{
8+
display: flex;
119
}
1210

13-
#graphql-hr {
14-
margin: 10px 0px;
11+
#graphql {
12+
width: 50%;
13+
padding: 10px;
1514
}
1615

1716
#graphql-res {
@@ -26,9 +25,10 @@
2625
overflow-y: scroll;
2726
max-height: 90%;
2827
padding: 10px;
29-
background-color: rgba(214, 214, 214, 0.4);
30-
border: 1px solid rgba(0, 0, 0, 0.3);
31-
border-radius: 5px;
28+
}
29+
30+
.graphql {
31+
padding: 5px;
3232
}
3333

3434
.graphql-p {

‎public/log-container.css‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
#log-container{
22
padding: 10px;
33
width: 250px;
4-
background-color: rgba(214, 214, 214, 0.4);
5-
border: 1px solid rgba(0, 0, 0, 0.3);
6-
border-radius: 5px;
7-
max-height: 600px;
8-
height: 650px;
4+
max-height: 700px;
5+
height: 700px;
96
}
107

118
#log-header{
@@ -21,9 +18,13 @@
2118
.log{
2219
overflow-x: scroll;
2320
padding: 15px;
24-
background:rgba(255,255,255,0.5);
25-
margin: 8px 0px;
21+
margin: 15px;
22+
background-color: rgba(255, 255, 255);
23+
/* transition: box-shadow .1s; */
2624
cursor: pointer;
25+
box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
26+
0 5px 15px 0 rgba(0,0,0,0.08);
27+
margin-bottom: 15px;
2728
}
2829

2930
.log-p{

‎public/stateContainer.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
grid-area: diff;
33
max-height: 500px;
44
overflow-y: scroll;
5-
background-color: rgba(214, 214, 214, 0.4);
6-
border: 1px solid rgba(0, 0, 0, 0.3);
7-
border-radius: 5px;
85
padding: 10px;
96
margin-top: 10px;
107
margin-right: 10px;
@@ -18,9 +15,14 @@
1815

1916
.stateDiff-div {
2017
overflow-x: scroll;
21-
padding: 15px;
22-
background:rgba(255,255,255,0.5);
23-
margin: 8px 0px;
18+
font-size: .9em;
19+
line-height: .8em;
20+
letter-spacing: 0.50px;
21+
background-color: rgba(255, 255, 255);
22+
box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
23+
0 5px 15px 0 rgba(0,0,0,0.08);
24+
margin-bottom: 15px;
25+
padding: 10px;
2426
}
2527

2628
.state-span{

‎src/containers/GraphQLContainer.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import GraphQLRequest from '../components/GraphQLRequest';
32
import GraphQLResponse from '../components/GraphQLResponse';
43
import GraphQLSchema from '../components/GraphQLSchema';
54
import styles from '../../public/graphql.css';

‎src/containers/LogContainer.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,9 @@ const LogContainer = props => {
2121
return (
2222
<div id='log-container'>
2323
<div id='log-header'>
24-
<h2>Requests Log</h2>
25-
<button data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear All</button>
24+
<h2>Request Log</h2>
25+
<button className='appButton' data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear</button>
2626
</div>
27-
<hr />
2827
<div id='logs'>{logs}</div>
2928
</div>
3029
);

‎src/containers/StateContainer.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
88
<div id='state-header'>
99
<h2>State Changes</h2>
1010
<button
11+
className='appButton'
1112
data-log='state-log'
1213
onClick={e => {
1314
clearLog(e);
1415
}}
1516
>
16-
Clear All
17+
Clear
1718
</button>
1819
</div>
19-
<hr />
20+
2021
{stateDiffs.map((el, i) => {
2122
return (
2223
<div className='stateDiff-div'>

0 commit comments

Comments
 (0)