changes resolved

Author: Nian Liu

README.md

@@ -37,8 +37,22 @@ React-Lucid is a React / GraphQL DevTool designed for helping developers debug t
 5. Have fun!
 
 ### GraphQL View
+In the graphql panel of our devtool you'll be able to see all the previous request that you have made after you have open our devtool. If you want to see the request that are made when your page is loaded make sure you reload your page after you have open our devtool. 
+
+## Show GIF display the req and response and how the JSON viewer works
+
+You will have access to a request log on the left where you will all the previous request you've made, you can click on this logs to view previous responses. At the bottom of the panel you'll also have access to your app's schema.
+
+## Panel GIF showing previous request 
 
 ### Component Tree View
+In our component tree panel you will see a tree hierarchy of your application with options to filter out a few components fromm your tree.
+
+## GIF showing the how to fliter tree
+
+on the left of the panel you will see a box the shows the state and props of any component you hover over the tree and also what is different in your state when you make a setState.
+
+## Panel GIF showing how the tree opens and GIF showing how the hover works and showing the diff panel
 
 ## Contributing
 

build/webpack-bundle.js

@@ -1,8 +1,5 @@
 #graphql-container {
   width: 75%;
-  background-color: rgba(214, 214, 214, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
   margin-left: 20px;
   min-height: 600px;
 }
@@ -13,37 +10,25 @@
   margin: 0px;
 }
 
-#req-res{
-  display: flex;
-}
-
 #graphql-hr {
   margin: 10px 0px;
 }
 
-#graphql {
-  border-right: 1px solid black;
-  width: 50%;
-  padding: 10px;
-}
-
 #graphql-res {
-  width: 50%;
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
   padding: 10px;
+  margin-bottom: 10px;
 }
 
 #graphql-schema {
   overflow-y: scroll;
   max-height: 90%;
   padding: 10px;
-}
-
-.graphql {
-  padding: 5px;
-}
-
-.graphql:not(:last-child) {
-  border-bottom: 1px solid grey;
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
 }
 
 .graphql-p {

build/webpack-bundle.js.map

@@ -5,7 +5,7 @@
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   max-height: 600px;
-  height: 600px;
+  height: 650px;
 }
 
 #log-header{
@@ -23,6 +23,7 @@
   padding: 15px;
   background:rgba(255,255,255,0.5);
   margin: 8px 0px;
+  cursor: pointer;
 }
 
 .log-p{

public/graphql.css

@@ -17,6 +17,7 @@ const GraphQLResponse = ({ logs, log }) => {
               name={null}
               iconStyle='triangle'
               indentWidth={1}
+              collapsed={3}
               enableClipboard={false}
               displayDataTypes={false}
               displayObjectSize={false}

public/log-container.css

@@ -4,8 +4,7 @@ import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';
 
 const Log = props => {
   return (
-    <div className='log'>
-      <button onClick={() => {props.logChange(props.logId)}}>view</button>
+    <div className='log' onClick={() => { props.logChange(props.logId) }}>
       <p className='log-p'>
         <b>Request:</b> {props.logId}
       </p>

src/components/GraphQLRequest.js

@@ -9,16 +9,12 @@ const GraphQLContainer = ({ logs, schema, log }) => {
     <div id='graphql-container'>
       {logs.length !== 0 ? (
         <div>
-          <div id='req-res'>
-            <GraphQLRequest logs={logs} log ={log}/>
-            <GraphQLResponse logs={logs} log ={log}/>
-          </div>
-          <hr />
+          <GraphQLResponse logs={logs} log={log} />
           <GraphQLSchema schema={schema} />
         </div>
       ) : (
-        <h1>No requests have been made yet.</h1>
-      )}
+          <h1>No requests have been made yet.</h1>
+        )}
     </div>
   );
 };

src/components/GraphQLResponse.js

@@ -16,6 +16,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
           Clear All
         </button>
       </div>
+      <hr />
       {stateDiffs.map((el, i) => {
         return (
           <div className='stateDiff-div'>
@@ -28,7 +29,7 @@ const StateContainer = ({ stateDiffs, clearLog }) => {
                 indentWidth={1}
                 groupArraysAfterLength={20}
                 enableClipboard={false}
-                collapsed={2}
+                collapsed={1}
                 displayDataTypes={false}
                 displayObjectSize={false}
               />