changes in UI

src/App.css

@@ -1,4 +1,5 @@
 .App{
   width:100%;
   height:100vh;
+  background-color: rgb(255, 255, 255);
 }

src/components/tree/tree.component.css

@@ -1,5 +1,6 @@
 .container{
     margin:0 auto;
+    width: 100%;
 }
 
 #emptyTreeMsg {
@@ -56,6 +57,7 @@ input{
     height: 2em;
     color:#292929;
     font-weight: 500;
+    margin-top: 2em;
 }
 
 .navbar{
@@ -75,20 +77,28 @@ input{
 
 button{
     background-color: teal;
+    position: center;
+    box-align: center;
     border: none;
-    width:12em;
-    padding:0 2em;
+    width:20em;
+    padding: 2em;
     font-family: 'Montserrat';
     /* letter-spacing: 0.1rem; */
     font-size: 0.7rem;
     border-radius: 2px;
-    padding: 0.5em;
+    padding: 0.9em;
+    margin-left: 7%;
     color:white;
+    margin-top: 2em;
 }
 
-input:hover,button:hover{
+input:hover{
 cursor: pointer;
 }
+button:hover{
+    cursor: pointer;
+    background-color: #4DB686;
+    }
 button:focus{
     outline: none !important
 
@@ -103,8 +113,9 @@ input:focus{
     position: absolute;
     left: 3em;
     border: 2px solid teal;
-    top:3em;
-    padding:1em;
+    top:5em;
+    padding:2em;
     margin: 0;
     color:teal;
+    background-color: beige;
 }

src/components/tree/tree.component.js

@@ -88,8 +88,9 @@ function Tree() {
         <div className="logo">
           <h6>BINARY SEARCH TREE</h6>
         </div>
+
         <div className="key">
-          Key <input type="number" name="key" onChange={(e) => setKey(e.target.value)} />
+           <input type="number" placeholder="Insert key"name="key" onChange={(e) => setKey(e.target.value)} />
           <button onClick={() => insertStuff()}>Insert</button>
         </div>
 
@@ -98,19 +99,21 @@ function Tree() {
         Value <input type="number" placeholder="value" onChange={(e)=>setValue(e.target.value)}/>
         </div> */}
 
-
-        <button onClick={() => traversal(0)}>In-Order traversal</button>
-        <button onClick={() => traversal(1)}>Pre-Order traversal</button>
-        <button onClick={() => traversal(2)}>Post-Order traversal</button>
-        <button onClick={() => traversal(3)}>Breadth-First traversal</button>
-
         <div className="key">
           <input type="number" placeholder="Remove key" onChange={(e) => setKey(e.target.value)} />
           <button onClick={() => removeStuff()}>Remove</button>
         </div>
-
       </div>
 
+      <div>
+        <p>
+        <button onClick={() => traversal(0)}>In-Order traversal</button>
+        <button onClick={() => traversal(1)}>Pre-Order traversal</button>
+        <button onClick={() => traversal(2)}>Post-Order traversal</button>
+        <button onClick={() => traversal(3)}>Breadth-First traversal</button>
+        </p>
+
+      </div>
       <div className="tree">
         {
           constructTree(treeNode.root)

src/index.css

@@ -1,5 +1,7 @@
 body{
-  margin: 0;
+  margin: 0%;
   font-family: 'Montserrat';
   letter-spacing: 0.1rem;
+  background-image: linear-gradient(to right, teal,#4DB686, #80CF7F);
+  height: 100%;
 }