conflicts resolved

Author: eternalee

README.md

@@ -1,7 +1,7 @@
 # React-Lucid
 A React-GraphQL developer tool.
 
-![Alt text](public/assets/lucidlogo-text.png?raw=true "Title")
+![Alt text](public/assets/logo-text.png?raw=true "Title")
 
 React-Lucid is a React / GraphQL DevTool designed for helping developers debug their React applications that depend on GraphQL resources more efficiently. React-Lucid allows you to visualize the component hierarchy of your React application and your GraphQL schema, queries, and mutations side by side, making development a breeze.
 
@@ -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/logo.png

@@ -1,7 +1,5 @@
 #graphql-container {
   width: 75%;
-  /* border: 1px solid #f2f2f2; */
-  /* border-radius: 5px; */
   margin-left: 20px;
   min-height: 600px;
 }
@@ -16,8 +14,11 @@
 }
 
 #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 {

build/webpack-bundle.js

@@ -21,6 +21,7 @@
   margin: 15px;
   background-color: rgba(255, 255, 255);
   /* transition: box-shadow .1s; */
+  cursor: pointer;
   box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
   0 5px 15px 0 rgba(0,0,0,0.08);
   margin-bottom: 15px;