From 70b5978652544c0566f913486794532a7fe5ef48 Mon Sep 17 00:00:00 2001
From: Urja Banati <urja.banati@gmail.com>
Date: Fri, 2 Oct 2020 18:24:21 +0530
Subject: [PATCH 1/3] changes in UI

---
 src/App.css                            |  1 +
 src/components/tree/tree.component.css | 23 +++++++++++++++++------
 src/components/tree/tree.component.js  | 18 +++++++++++-------
 src/index.css                          |  4 +++-
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index a545301..4e34459 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,5 @@
 .App{
   width:100%;
   height:100vh;
+  background-color: rgb(255, 255, 255);
 }
\ No newline at end of file
diff --git a/src/components/tree/tree.component.css b/src/components/tree/tree.component.css
index fe9f66d..ccb9a66 100644
--- a/src/components/tree/tree.component.css
+++ b/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: 13.5%;
     color:white;
+    margin-top: 2em;
 }
 
-input:hover,button:hover{
+input:hover{
 cursor: pointer;
 }
+button:hover{
+    cursor: pointer;
+    background-color: rgb(196, 88, 206);
+    }
 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;
 }
\ No newline at end of file
diff --git a/src/components/tree/tree.component.js b/src/components/tree/tree.component.js
index 13ba089..5fd7694 100644
--- a/src/components/tree/tree.component.js
+++ b/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,18 +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>
-
         <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>
+        
+        </p>
+        
+      </div>
       <div className="tree">
         {
           constructTree(treeNode.root)
diff --git a/src/index.css b/src/index.css
index c35a70d..438de90 100644
--- a/src/index.css
+++ b/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, aqua, blue);
+  height: 100%;
 }
\ No newline at end of file

From a2b5d76a5688d41f8a6eb4942f27296284f2d7c6 Mon Sep 17 00:00:00 2001
From: Urja Banati <urja.banati@gmail.com>
Date: Fri, 2 Oct 2020 19:18:22 +0530
Subject: [PATCH 2/3] code updated and aligned

---
 src/components/tree/tree.component.css | 2 +-
 src/components/tree/tree.component.js  | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/tree/tree.component.css b/src/components/tree/tree.component.css
index ccb9a66..299d0af 100644
--- a/src/components/tree/tree.component.css
+++ b/src/components/tree/tree.component.css
@@ -87,7 +87,7 @@ button{
     font-size: 0.7rem;
     border-radius: 2px;
     padding: 0.9em;
-    margin-left: 13.5%;
+    margin-left: 7%;
     color:white;
     margin-top: 2em;
 }
diff --git a/src/components/tree/tree.component.js b/src/components/tree/tree.component.js
index bba8bdf..9f96d1c 100644
--- a/src/components/tree/tree.component.js
+++ b/src/components/tree/tree.component.js
@@ -99,12 +99,6 @@ 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>
@@ -116,7 +110,7 @@ function Tree() {
         <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>

From f011ca231dfa5d1fb11046f19a7431d7ba9446dd Mon Sep 17 00:00:00 2001
From: Urja Banati <urja.banati@gmail.com>
Date: Fri, 2 Oct 2020 19:32:24 +0530
Subject: [PATCH 3/3] Changed color scheme

---
 src/components/tree/tree.component.css | 2 +-
 src/index.css                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tree/tree.component.css b/src/components/tree/tree.component.css
index 299d0af..ce02ab3 100644
--- a/src/components/tree/tree.component.css
+++ b/src/components/tree/tree.component.css
@@ -97,7 +97,7 @@ cursor: pointer;
 }
 button:hover{
     cursor: pointer;
-    background-color: rgb(196, 88, 206);
+    background-color: #4DB686;
     }
 button:focus{
     outline: none !important
diff --git a/src/index.css b/src/index.css
index 438de90..1b6b2cc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,6 @@ body{
   margin: 0%;
   font-family: 'Montserrat';
   letter-spacing: 0.1rem;
-  background-image: linear-gradient(to right, aqua, blue);
+  background-image: linear-gradient(to right, teal,#4DB686, #80CF7F);
   height: 100%;
 }
\ No newline at end of file