saving styles for pull

Author: neyser zana

build/webpack-bundle.js

@@ -16,69 +16,6 @@ h2{
   text-transform: uppercase;
 }
 
-@media screen and (max-width: 600px) {
-  .reactTab {
-    display: grid;
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'sp-box'
-      'diff'
-      'tree';
-  }
-  .state-prop-display {
-    grid-area: sp-box;
-    background-color: #333;
-    color: white;
-    overflow-y: scroll;
-    border: 1px solid black; 
-    border-radius: 5px;
-    padding: 5px 5px; 
-    margin-right: 10px;
-  }
-
-  #treeWrapper{
-    grid-area: tree;
-    background-color: rgba(214, 214, 214, 0.4);
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 5px; 
-    padding: 10px;
-    margin-left: 10px;
-  }
-
-  #stateDiff-container {
-    grid-area: diff;
-    overflow-y: scroll;
-    background-color: rgba(214, 214, 214, 0.4);
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    padding: 10px; 
-    margin-top: 10px;
-    margin-right: 10px;
-  }
-  
-  #state-header{
-    display: flex;
-    /* justify-content: space-between; */
-    margin-bottom: 5px;
-  }
-  
-  .stateDiff-div {
-    overflow-x: scroll;
-    padding: 15px;
-    background:rgba(255,255,255,0.5);
-    margin: 8px 0px;
-  }
-  
-  .state-span{
-    margin: 6px;
-    font-size: 1.2em;
-    font-weight: 500;
-    letter-spacing: 0.8px;
-    line-height: 15px;
-  }
-}
-
 #app-container{
   display: flex;
   padding: 10px 25px;
@@ -111,6 +48,10 @@ h2{
   margin-right: 10px;
 }
 
+#logo{
+  width: 100px;
+  height: 100px;
+}
 
 #treeWrapper{
   text-align: center;
@@ -195,3 +136,17 @@ button:hover{
   border: none;
   color: white;
 }
+
+
+/* for different screen sizes */
+@media screen and (max-width: 600px) {
+  .reactTab {
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'sp-box'
+      'diff'
+      'tree';
+  }
+}

build/webpack-bundle.js.map

@@ -22,8 +22,11 @@
 }
 
 #graphql-schema {
+  background-color: rgba(214, 214, 214, 0.4);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
   overflow-y: scroll;
-  max-height: 90%;
+  max-height: 600px;
   padding: 10px;
 }
 

public/app.css

@@ -196,14 +196,15 @@ class App extends Component {
       <div>
         {this.state.appState.length === 0 ?
           <div id='devToolsLoader'>
-            <img src='./logo.png' alt='devtool logo'/> 
+            <img src='./../public/assests/logo-card.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'/>
                 <span class='window-btn-wrapper'>
                   <button className='window-btn active' id='graphqlbtn' data-btn='Graphql' onClick={(e) => { this.handleWindowChange(e.target); }}>GraphQL</button>
                 </span>