fix:updated devtools icon with css fixes [ECO-188]

Author: Amitkanswal

README.md

@@ -1,4 +1,4 @@
-![![Contentstack Logo](/public/contentstack.png)](https://www.contentstack.com/)
+[![Contentstack Logo](/public/contentstack.png)](https://www.contentstack.com/)
 
 # Create a marketing website using VueJS
 

package-lock.json

@@ -107,11 +107,15 @@ header nav {
 .devtools {
   float: right;
   position: relative;
-  bottom: 23px;
-  right: 2%;
+  bottom: 30px;
+  right: 1%;
   cursor: pointer;
 }
 
+.devtools img{
+  width: 28px;
+}
+
 .header-ul {
   overflow: hidden;
 }
@@ -623,6 +627,15 @@ footer a {
   max-width: 100%;
 }
 
+.modal {
+  overflow: hidden;
+}
+
+.modal-body {
+  height:38rem;
+  overflow: auto;
+}
+
 /* ========================== */
 
 /*          Mobile            */
@@ -1156,4 +1169,23 @@ footer a {
     width: 65%;
     margin-left: 23px;
   }
-}
+}
+
+/* scroll bar */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #e0e2e8;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #eee;
+}
+
+/* scroll end */

src/assets/Devtools.gif

@@ -7,7 +7,11 @@
         data-bs-toggle="modal"
         data-bs-target="#staticBackdrop"
       >
-        <i class="fas fa-tools fa-lg"></i>
+        <img
+          src="../assets/Devtools.gif"
+          alt="Dev tools icon"
+          title="Json Preview"
+        />
       </span>
     </div>
     <div class="max-width header-div">