adding a bit of styling for logo

Author: neyser zana

build/lucidlogo-card-transparent.png

@@ -50,7 +50,7 @@ h2{
 
 #logo{
   width: 50px;
-  height: 50px;
+  height: 80px;
 }
 
 #treeWrapper{

build/webpack-bundle.js

@@ -1,6 +1,5 @@
 #graphql-container {
-  width: 75%;
-  margin-left: 20px;
+  margin-right: 0px;
   min-height: 600px;
 }
 

build/webpack-bundle.js.map

@@ -1,8 +1,9 @@
 #log-container{
   padding: 10px;
-  /* width: 250px; */
+  width: 300px;
   max-height: 700px;
   height: 700px;
+  margin-right: 40px;
 }
 
 #log-header{

public/app.css

@@ -196,15 +196,15 @@ class App extends Component {
       <div>
         {this.state.appState.length === 0 ?
           <div id='devToolsLoader'>
-            <img src='./../public/assets/logo-card.png' alt='devtool logo card' />
+            <img src='./lucidlogo-card-transparent.png' alt='devtool logo' />
             <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' />
+                <img id='logo' src='./lucidlogo-card-transparent.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>