logo is now added

Author: neyser zana

build/webpack-bundle.js

@@ -49,8 +49,8 @@ h2{
 }
 
 #logo{
-  width: 100px;
-  height: 100px;
+  width: 50px;
+  height: 50px;
 }
 
 #treeWrapper{
@@ -108,16 +108,16 @@ button{
   margin: 0px;
 }
 #window-nav {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
   margin: 5px 0px 20px 0px;
   text-align: center;
+  padding: 0px 15px;
 }
-.window-btn-wrapper {
-  width: 50%;
-  box-sizing: border-box;
-  padding: 30px;
-}
+
 .window-btn{
-  width: 30%;
+  width: 25%;
   height: 35px;
   box-sizing: border-box;
   color: #555;

build/webpack-bundle.js.map

@@ -22,12 +22,12 @@
 }
 
 #graphql-schema {
-  background-color: rgba(214, 214, 214, 0.4);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 5px;
+  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;
   overflow-y: scroll;
   max-height: 600px;
-  padding: 10px;
 }
 
 .graphql-p {

public/app.css

@@ -53,7 +53,7 @@ class App extends Component {
           let diff = recurseDiff(oldstate, this.state.appReactDOM);
           appState.setState({ stateDiff: diff });
         }
-      
+
         //if there is an active setTimeout, clear it
         clearTimeout(timeout);
         timeout = setTimeout(() => {
@@ -97,14 +97,14 @@ class App extends Component {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ query: introspectionQuery })
       })
-      .then(res => res.json())
-      .then(json =>
-        this.setState({
-          schema: JSON.stringify(json.data)
-        })
+        .then(res => res.json())
+        .then(json =>
+          this.setState({
+            schema: JSON.stringify(json.data)
+          })
         );
-      }
     }
+  }
 
   //* invoke schema fetch only after a log object from a previous response is available
   componentDidUpdate(prevProps, prevState) {
@@ -128,7 +128,7 @@ class App extends Component {
       this.setState({ window: 'React' });
       document.querySelector('#reactbtn').classList.add('active');
       document.querySelector('#graphqlbtn').classList.remove('active');
-    } else if(this.state.window === 'React' && target.dataset.btn === 'Graphql'){
+    } else if (this.state.window === 'React' && target.dataset.btn === 'Graphql') {
       this.setState({ window: 'Graphql' });
       document.querySelector('#reactbtn').classList.remove('active');
       document.querySelector('#graphqlbtn').classList.add('active');
@@ -137,7 +137,7 @@ class App extends Component {
 
   // * Handles the filter for the component tree
   handleFilter(e, arr) {
-    if(e.target.classList.contains('toggleOn')) {
+    if (e.target.classList.contains('toggleOn')) {
       e.target.classList.remove('toggleOn')
     } else {
       e.target.classList.add('toggleOn');
@@ -196,21 +196,17 @@ class App extends Component {
       <div>
         {this.state.appState.length === 0 ?
           <div id='devToolsLoader'>
-            <img src='./../public/assests/logo-card.png' alt='devtool logo'/> 
+            <img src='./../public/assets/logo-card.png' alt='devtool logo card' />
             <h1>Please trigger a setState() to activate Lucid devtool.<br /></h1>
             <p>Lucid works best on apps using React v16+ in development mode</p>
           </div>
           :
           <div id='app-container'>
             <div id='window'>
               <div id='window-nav'>
-                <img id='logo' src='./logo.png' alt='devtool logo'/>
-                <span class='window-btn-wrapper'>
-                  <button className='window-btn active' id='graphqlbtn' data-btn='Graphql' onClick={(e) => { this.handleWindowChange(e.target); }}>GraphQL</button>
-                </span>
-                <span class='window-btn-wrapper'>
-                  <button className='window-btn' id='reactbtn' data-btn='React' onClick={(e) => { this.handleWindowChange(e.target); }}>Component Tree</button>
-                </span>
+                <img id='logo' src='./logo.png' alt='devtool logo' />
+                <button className='window-btn active' id='graphqlbtn' data-btn='Graphql' onClick={(e) => { this.handleWindowChange(e.target); }}>GraphQL</button>
+                <button className='window-btn' id='reactbtn' data-btn='React' onClick={(e) => { this.handleWindowChange(e.target); }}>Component Tree</button>
               </div>
 
               {/* This checks what window the user has click on.