styling

eternalee · eternalee · commit 50976b562952 · 2018-12-04T03:41:38.000-05:00
diff --git a/build/logo-card.png b/build/logo-card.png
diff --git a/build/webpack-bundle.js b/build/webpack-bundle.js
diff --git a/build/webpack-bundle.js.map b/build/webpack-bundle.js.map
diff --git a/public/app.css b/public/app.css
@@ -81,7 +81,7 @@ h2{
 
 #app-container{
   display: flex;
-  padding: 10px 25px;
+  padding: 10px;
   max-height: 95%;
 }
 
@@ -94,7 +94,7 @@ h2{
   padding: 10px;
   display: grid;
   grid-template-rows: 1fr 3fr;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 3fr 7fr;
   grid-template-areas:
     'sp-box tree'
     'diff tree';
@@ -113,7 +113,6 @@ h2{
 
 
 #treeWrapper{
-  text-align: center;
   grid-area: tree;
   height: 700px;
   padding: 10px;
@@ -122,6 +121,9 @@ h2{
   font-size: .9em;
   letter-spacing: 1.5px;
 }
+#treeButtons{
+  text-align: center;
+}
 
 .rd3t-tree-container{
   margin-top: 15px;
@@ -187,7 +189,6 @@ button:focus{
 }
 button:hover{
   background-color: #555;
-  border: none;
   color: white;
 }
 .active{
diff --git a/public/graphql.css b/public/graphql.css
@@ -14,10 +14,10 @@
 }
 
 #graphql-res {
-  background-color: rgba(214, 214, 214, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
-  padding: 10px;
+  background-color: white;;
+  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
+  0 5px 15px 0 rgba(0,0,0,0.08);
+  padding: 10px 25px;
   margin-bottom: 10px;
 }
 
@@ -27,10 +27,6 @@
   padding: 10px;
 }
 
-.graphql {
-  padding: 5px;
-}
-
 .graphql-p {
   margin-top: 10px; 
 }
diff --git a/public/log-container.css b/public/log-container.css
@@ -1,6 +1,6 @@
 #log-container{
   padding: 10px;
-  width: 250px;
+  /* width: 250px; */
   max-height: 700px;
   height: 700px;
 }
diff --git a/public/stateContainer.css b/public/stateContainer.css
@@ -3,8 +3,6 @@
   max-height: 500px;
   overflow-y: scroll;
   padding: 10px; 
-  margin-top: 10px;
-  margin-right: 10px;
 }
 
 #state-header{
diff --git a/src/components/GraphQLResponse.js b/src/components/GraphQLResponse.js
@@ -10,7 +10,7 @@ const GraphQLResponse = ({ logs, log }) => {
       {logs.length !== 0
         ?
         <div className="graphql">
-          <p className='graphql-p'><b>Response:</b></p>
+          <p className='graphql-p'><h2>Response:</h2></p>
           <span className='graphql-span'>
             <ReactJson
               src={response}
diff --git a/src/components/GraphQLSchema.js b/src/components/GraphQLSchema.js
@@ -11,8 +11,8 @@ const GraphQLSchema = ({ schema }) => {
 
     return (
       <div id='graphql-schema'>
-        <div className='graphql'>
-          <p className='graphql-p'><b>Schema:</b></p>
+        <div>
+          <p className='graphql-p'><h2>Schema:</h2></p>
           <span className='graphql-span'>
             <GraphqlCodeBlock
               className='GraphqlCodeBlock'
@@ -27,7 +27,7 @@ const GraphQLSchema = ({ schema }) => {
 
     return (
       <div id='graphql'>
-        <div className='graphql'>
+        <div>
           <p className='graphql-p'>
             No GraphQL data available.
           </p>
diff --git a/src/components/Log/Log.jsx b/src/components/Log/Log.jsx
@@ -10,6 +10,7 @@ const Log = props => {
       </p>
       <p className='log-p'>
         <b>Operation Name:</b> {props.operationName}
+        {/* {props.operationName !== null ? (<b>Operation Name:</b>props.operationName) : null} */}
       </p>
       <p className='log-p'>
         <b>Query:</b>
diff --git a/src/components/TreeDiagram.jsx b/src/components/TreeDiagram.jsx
@@ -86,10 +86,12 @@ class TreeDiagram extends React.Component {
 
     return (
       <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
-        <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reduxComponents) }}>Filter Redux</button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reactRouterComponents) }}>Filter React-Router</button>
-        <button onClick={(e) => { this.props.handleFilter(e, filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        <div id='treeButtons'>
+          <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reduxComponents) }}>Filter Redux</button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.reactRouterComponents) }}>Filter React-Router</button>
+          <button onClick={(e) => { this.props.handleFilter(e, filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        </div>
      
         {this.props.appState.length !== 0 ? (
           <Tree
diff --git a/src/containers/GraphQLContainer.js b/src/containers/GraphQLContainer.js
@@ -5,14 +5,14 @@ import styles from '../../public/graphql.css';
 
 const GraphQLContainer = ({ logs, schema, log }) => {
   return (
-    <div id='graphql-container'>
+    <div>
       {logs.length !== 0 ? (
-        <div>
+        <div id='graphql-container'>
           <GraphQLResponse logs={logs} log={log} />
           <GraphQLSchema schema={schema} />
         </div>
       ) : (
-          <h1>No requests have been made yet.</h1>
+          <h2>No requests have been made yet.</h2>
         )}
     </div>
   );
diff --git a/src/containers/LogContainer.jsx b/src/containers/LogContainer.jsx
@@ -19,12 +19,16 @@ const LogContainer = props => {
 
   logs.reverse();
   return (
-    <div id='log-container'>
-      <div id='log-header'>
-        <h2>Request Log</h2>
-        <button className='appButton' data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear</button>
-      </div>
-      <div id='logs'>{logs}</div>
+    <div>
+      {logs.length > 0 ? (
+        <div id='log-container'>
+          <div id='log-header'>
+            <h2>Request Log</h2>
+            <button className='appButton' data-log='req-log' onClick={(e) => { props.clearLog(e); }}>Clear</button>
+          </div>
+          <div id='logs'>{logs}</div>
+        </div>
+      ) : ('')}
     </div>
   );
 };
diff --git a/src/containers/StateContainer.jsx b/src/containers/StateContainer.jsx
@@ -6,7 +6,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
   return (
     <div id='stateDiff-container'>
       <div id='state-header'>
-        <h2>State Changes</h2>
+        <h2>State Log</h2>
         <button
           className='appButton' 
           data-log='state-log'
diff --git a/src/devtools.js b/src/devtools.js
@@ -196,8 +196,8 @@ class App extends Component {
       <div>
         {this.state.appState.length === 0 ?
           <div id='devToolsLoader'>
-            <img src='./logo.png' alt='devtool logo'/> 
-            <h1>Please trigger a setState() to activate Lucid devtool.<br /></h1>
+            <img src='./logo-card.png' height='200px' alt='devtool logo'/> 
+            <h2>Please trigger a setState() to activate Lucid devtool.<br /></h2>
             <p>Lucid works best on apps using React v16+ in development mode</p>
           </div>
           :

Original file line number	Diff line number	Diff line change
`@@ -14,10 +14,10 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`#graphql-res {`
`17`		`- background-color: rgba(214, 214, 214, 0.4);`
`18`		`- border: 1px solid rgba(0, 0, 0, 0.3);`
`19`		`- border-radius: 5px;`
`20`		`- padding: 10px;`
	`17`	`+ background-color: white;;`
	`18`	`+ box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),`
	`19`	`+ 0 5px 15px 0 rgba(0,0,0,0.08);`
	`20`	`+ padding: 10px 25px;`
`21`	`21`	`margin-bottom: 10px;`
`22`	`22`	`}`
`23`	`23`
`@@ -27,10 +27,6 @@`
`27`	`27`	`padding: 10px;`
`28`	`28`	`}`
`29`	`29`
`30`		`-.graphql {`
`31`		`- padding: 5px;`
`32`		`-}`
`33`		`-`
`34`	`30`	`.graphql-p {`
`35`	`31`	`margin-top: 10px;`
`36`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`#log-container{`
`2`	`2`	`padding: 10px;`
`3`		`- width: 250px;`
	`3`	`+ /* width: 250px; */`
`4`	`4`	`max-height: 700px;`
`5`	`5`	`height: 700px;`
`6`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,6 @@`
`3`	`3`	`max-height: 500px;`
`4`	`4`	`overflow-y: scroll;`
`5`	`5`	`padding: 10px;`
`6`		`- margin-top: 10px;`
`7`		`- margin-right: 10px;`
`8`	`6`	`}`
`9`	`7`
`10`	`8`	`#state-header{`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const GraphQLResponse = ({ logs, log }) => {`
`10`	`10`	`{logs.length !== 0`
`11`	`11`	`?`
`12`	`12`	`<div className="graphql">`
`13`		`- <p className='graphql-p'><b>Response:</b></p>`
	`13`	`+ <p className='graphql-p'><h2>Response:</h2></p>`
`14`	`14`	`<span className='graphql-span'>`
`15`	`15`	`<ReactJson`
`16`	`16`	`src={response}`