From bc600d3ea2f447135f136f80cb92ee35fa3b0f03 Mon Sep 17 00:00:00 2001
From: Subrina Huda <subrinahuda@gmail.com>
Date: Tue, 17 Oct 2023 20:21:29 -0400
Subject: [PATCH 1/7] Changed shape of button/color is blue when hovered


From 8b6830b79bd75f855e115178d540f8fe02948353 Mon Sep 17 00:00:00 2001
From: Subrina Huda <subrinahuda@gmail.com>
Date: Tue, 17 Oct 2023 22:13:44 -0400
Subject: [PATCH 2/7] Changed shape of button/color is blue when hovered

---
 src/index.css | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/index.css b/src/index.css
index 83f33d0a..56ffe4dd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,18 +1,19 @@
-
 body, html{
     margin: 0;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     display:contents;
+    background-color: #f9ddd0;
 }
 
 p {
     margin: 0px;
+    text-emphasis-color: white;
 }
 
 #header {
-    background-color: white;
+    background-color: #a6b6d9;
     border: 2px solid black;
     height: 3vw;
     width: 100vw;
@@ -37,6 +38,16 @@ p {
     height: 2vw;
     border: 2px solid black;
     margin: 3px;
+    border-radius: 50%;
+}
+
+.modeButton:active,
+.modeButton:focus-visible {
+    transform: translateY(2px);
+    box-shadow: none;
+}
+.modeButton:hover {
+  background-color: rgb(156, 206, 239);
 }
 
 #content {
@@ -50,7 +61,7 @@ p {
     float: right;
     height: 2vw;
     box-sizing: border-box;
-    background-color: white;
+    background-color: #94b09c;
 }
 
 #subBar {
@@ -59,7 +70,7 @@ p {
     float: right;
     height: 2vw;
     box-sizing: border-box;
-    background-color: white;
+    background-color: rgb(188, 240, 200);
 }
 
 #cutTools {
@@ -79,7 +90,7 @@ p {
 #sidebar {
     box-sizing: border-box;
     border: 2px solid black;
-    background-color: white;
+    background-color: #526D82;
     height: 100vh;
     float: left;
     width: 5vw;

From 2d74da0c6f7586a3d4deef00c160f42c69790ab2 Mon Sep 17 00:00:00 2001
From: Subrina Huda <subrinahuda@gmail.com>
Date: Wed, 18 Oct 2023 00:39:26 -0400
Subject: [PATCH 3/7] Adjusted title on css

---
 src/index.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 56ffe4dd..b9bac812 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,9 @@ body, html{
     height: 100vh;
     overflow: hidden;
     display:contents;
-    background-color: #f9ddd0;
+    background-color: white;
+    font-weight: bold;
+    font-size: larger;
 }
 
 p {
@@ -70,7 +72,7 @@ p {
     float: right;
     height: 2vw;
     box-sizing: border-box;
-    background-color: rgb(188, 240, 200);
+    background-color: rgb(190, 215, 190);
 }
 
 #cutTools {

From 519c72929af484bcf08a64e221853181bf9fd649 Mon Sep 17 00:00:00 2001
From: AnushaTiwari5 <atiwari3@albany.edu>
Date: Wed, 18 Oct 2023 21:13:00 -0400
Subject: [PATCH 4/7] working on text overflow

---
 src/index.css  | 80 +++++++++++++++++++++++++++++++++-----------------
 src/index.html | 23 ++++++---------
 src/style.css  |  4 +--
 3 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/index.css b/src/index.css
index b9bac812..1a706674 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,24 +4,25 @@ body, html{
     height: 100vh;
     overflow: hidden;
     display:contents;
-    background-color: white;
-    font-weight: bold;
-    font-size: larger;
+    background-color: #ffffff;
 }
 
 p {
     margin: 0px;
-    text-emphasis-color: white;
+    text-emphasis-color: #ffffff;
+    white-space: nowrap;
 }
 
 #header {
     background-color: #a6b6d9;
-    border: 2px solid black;
-    height: 3vw;
+    border: 2px solid #000000;
+    min-height: 7vh;
     width: 100vw;
     text-align: center;
-    padding-top: 1vw;
+    padding-top: 1vh;
     box-sizing: border-box;
+    font-weight: bold;
+    font-size: x-large;
 }
 
 #application {
@@ -33,23 +34,36 @@ p {
 
 .row {
     display: flex;
+    justify-content: space-around;
 }
 
 .modeButton {
-    width: 2vw;
-    height: 2vw;
-    border: 2px solid black;
-    margin: 3px;
-    border-radius: 50%;
+    min-width: 2vw;
+    min-height: 5vh;
+    border: 2px solid #000000;
+    margin: 2px;
+    border-radius: 25%;
+    box-shadow: 1px 2px 1px #000000;
 }
 
-.modeButton:active,
-.modeButton:focus-visible {
+.modeButton:active {
     transform: translateY(2px);
-    box-shadow: none;
 }
+
+.modeButton:focus {
+    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
+     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
+          box-shadow: inset 0px 0px 5px #c1c1c1;
+}
+
 .modeButton:hover {
-  background-color: rgb(156, 206, 239);
+  background-color: #d4e8f5;
+}
+
+.fileButton {
+    float: right;
+    margin-right: 10px;
+    display: inline-block;
 }
 
 #content {
@@ -58,21 +72,25 @@ p {
 }
 
 #toolbar {
-    border: 2px solid black;
-    width: 95vw;
-    float: right;
-    height: 2vw;
+    border: 2px solid #000000;
+    border-left: 0px;
+    border-top: 0px;
+    min-height: 7vh;
+    max-height: fit-content;
+    width: 100vw;
     box-sizing: border-box;
     background-color: #94b09c;
 }
 
 #subBar {
     border: 2px solid black;
-    width: 95vw;
-    float: right;
-    height: 2vw;
+    border-left: 0px;
+    border-top: 0px;
+    min-height: 6vh;
+    max-height: fit-content;
+    width: 100vw;
     box-sizing: border-box;
-    background-color: rgb(190, 215, 190);
+    background-color: #bed7be;
 }
 
 #cutTools {
@@ -89,13 +107,20 @@ p {
     margin: 5px;
 }
 
+.tree-string {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+}
+
 #sidebar {
     box-sizing: border-box;
-    border: 2px solid black;
+    border: 2px solid #000000;
+    border-top: 0px;
     background-color: #526D82;
     height: 100vh;
     float: left;
-    width: 5vw;
+    min-width: 6vw;
 }
 
 #canvas {
@@ -104,9 +129,10 @@ p {
     left: 0px;
     z-index: -1;
 }
+
 .no-highlight{
     user-select: none; 
     -moz-user-select: none; 
     -webkit-text-select: none;
     -webkit-user-select: none; 
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 945bc224..c2e0a98f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,23 +38,22 @@
     <div id="toolbar">
       <div id="genericTools">
         <div class="toolSetting">
-          <p class="no-highlight" id="graphString"></p>
+          <p class="tree-string" id="graphString"></p>
+        </div>
+        <div class="fileButton">
+          <button type="button" onclick="saveMode()" title="Save File" class="modeButton">
+            <i class="fa fa-floppy-o" aria-hidden="true"></i>
+          </button>
+          <button type="button" onclick="loadMode()" title="Load File" class="modeButton">
+            <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>
+          </button>
         </div>
-        <!-- fileButton class to be styled -->
-        <button type="button" onclick="saveMode()" title="Save File" class="fileButton">
-          Export AEG
-        </button>
-        <button type="button" onclick="loadMode()" title="Load File" class="fileButton">
-          Import AEG
-        </button>
       </div>
     </div>
     <div id="subBar">
       <div id="cutTools">
         <div class="toolSetting">
           <p class="no-highlight">Show Guidelines:</p>
-        </div>
-        <div class="toolSetting">
           <input id="showRect" type="checkbox" title="Show Rect"/>
         </div>
         <div class="toolSetting">
@@ -76,14 +75,10 @@
         </div>
         <div class="toolSetting">
           <p class="no-highlight">Show Current Bounding Box</p>
-        </div>
-        <div class = "toolSetting">
           <input id="atomBox" type="checkbox" title="Show atomBox"/>
         </div>
         <div class="toolSetting">
           <p class="no-highlight">Show All Bounding Boxes</p>
-        </div>
-        <div class = "toolSetting">
           <input id="atomBoxes" type="checkbox" title="Show atomBoxes"/>
         </div>
       </div>
diff --git a/src/style.css b/src/style.css
index 0a03ea13..edb0cdb4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -38,7 +38,7 @@ body {
 }
 
 .sidebar-header {
-    background-color: rgb(241, 192, 255);
+    background-color: #f1c0ff;
     padding: 50px 20px;
     float: left; 
     margin-right: 1000px;
@@ -60,7 +60,7 @@ body {
     font-size: 2rem;
     font-weight: 300;
     text-transform: uppercase;
-    box-shadow: 0 8px 0 0 hsla(180, 13%, 12%, 0.5);
+    box-shadow: 0 8px 0 0 #1b2323;
     cursor: pointer;
     display: block; 
     margin-bottom: 10px; 

From 8aff3e4d5d7f9f11f94617be79f4e5283cf007bb Mon Sep 17 00:00:00 2001
From: AnushaTiwari5 <atiwari3@albany.edu>
Date: Wed, 18 Oct 2023 23:23:15 -0400
Subject: [PATCH 5/7] squish ui almost fix

---
 src/index.css  | 26 +++++++++++++-------------
 src/index.html |  2 +-
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/index.css b/src/index.css
index 1a706674..e30669bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
 body, html{
-    margin: 0;
+    margin: 0px;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
@@ -10,13 +10,12 @@ body, html{
 p {
     margin: 0px;
     text-emphasis-color: #ffffff;
-    white-space: nowrap;
 }
 
 #header {
     background-color: #a6b6d9;
     border: 2px solid #000000;
-    min-height: 7vh;
+    min-height: 6vh;
     width: 100vw;
     text-align: center;
     padding-top: 1vh;
@@ -39,7 +38,7 @@ p {
 
 .modeButton {
     min-width: 2vw;
-    min-height: 5vh;
+    min-height: 4vh;
     border: 2px solid #000000;
     margin: 2px;
     border-radius: 25%;
@@ -63,7 +62,13 @@ p {
 .fileButton {
     float: right;
     margin-right: 10px;
-    display: inline-block;
+    margin-top: 3px;
+    min-width: 6vw;
+}
+
+#graphString {
+    width: 84vw;
+    overflow-wrap: break-word;
 }
 
 #content {
@@ -107,20 +112,15 @@ p {
     margin: 5px;
 }
 
-.tree-string {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-}
-
 #sidebar {
     box-sizing: border-box;
     border: 2px solid #000000;
     border-top: 0px;
+    padding-top: 3px;
     background-color: #526D82;
     height: 100vh;
-    float: left;
     min-width: 6vw;
+    float: left;
 }
 
 #canvas {
@@ -135,4 +135,4 @@ p {
     -moz-user-select: none; 
     -webkit-text-select: none;
     -webkit-user-select: none; 
-}
\ No newline at end of file
+}
diff --git a/src/index.html b/src/index.html
index c2e0a98f..dd09ebee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@
     <div id="toolbar">
       <div id="genericTools">
         <div class="toolSetting">
-          <p class="tree-string" id="graphString"></p>
+          <p id="graphString"></p>
         </div>
         <div class="fileButton">
           <button type="button" onclick="saveMode()" title="Save File" class="modeButton">

From 886f1f88b9942de5cbda42655cc610a79a77a3af Mon Sep 17 00:00:00 2001
From: AnushaTiwari5 <atiwari3@albany.edu>
Date: Thu, 19 Oct 2023 17:24:17 -0400
Subject: [PATCH 6/7] permanent sol for button clicked stay down until other
 button clicked

---
 src/index.css |  2 +-
 src/index.ts  | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index e30669bc..b3400ab5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -49,7 +49,7 @@ p {
     transform: translateY(2px);
 }
 
-.modeButton:focus {
+.modeButtonPressed {
     -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
      -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
           box-shadow: inset 0px 0px 5px #c1c1c1;
diff --git a/src/index.ts b/src/index.ts
index 7959f42d..11c1bb95 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -58,6 +58,20 @@ declare global {
     }
 }
 
+//Active mode button stays pressed down
+const modeButtons = document.querySelectorAll(".modeButton");
+modeButtons.forEach(button => {
+    button.addEventListener("click", () => {
+        console.log("clicked");
+        button.classList.toggle("modeButtonPressed");
+        modeButtons.forEach(otherButton => {
+            if (otherButton !== button) {
+                otherButton.classList.remove("modeButtonPressed");
+            }
+        });
+    });
+});
+
 /**
  * If there is no current mode creates the listeners. Hides non cutTools.
  * Sets the current mode to cut mode.

From a4cf1be05acec4a9e786180718890bb1f3c321a8 Mon Sep 17 00:00:00 2001
From: AnushaTiwari5 <atiwari3@albany.edu>
Date: Thu, 19 Oct 2023 18:00:06 -0400
Subject: [PATCH 7/7] top bar overflow on resizing fixed

---
 src/index.css | 34 ++++++++++++++++------------------
 src/index.ts  |  3 +--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/index.css b/src/index.css
index b3400ab5..397de0c8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,6 +15,7 @@ p {
 #header {
     background-color: #a6b6d9;
     border: 2px solid #000000;
+    border-right: 0px;
     min-height: 6vh;
     width: 100vw;
     text-align: center;
@@ -50,9 +51,9 @@ p {
 }
 
 .modeButtonPressed {
-    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
-          box-shadow: inset 0px 0px 5px #c1c1c1;
+    -webkit-box-shadow: inset 0px 0px 5px #000000; 
+     -moz-box-shadow: inset 0px 0px 5px #000000;
+          box-shadow: inset 0px 0px 5px #000000;
 }
 
 .modeButton:hover {
@@ -66,34 +67,31 @@ p {
     min-width: 6vw;
 }
 
-#graphString {
-    width: 84vw;
-    overflow-wrap: break-word;
-}
-
 #content {
     width: 100%;
     height: auto;
 }
 
 #toolbar {
-    border: 2px solid #000000;
-    border-left: 0px;
-    border-top: 0px;
+    border-bottom: 2px solid black;
     min-height: 7vh;
-    max-height: fit-content;
-    width: 100vw;
+    max-height: 10vh;
+    max-width: 100vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
     box-sizing: border-box;
     background-color: #94b09c;
 }
 
 #subBar {
-    border: 2px solid black;
-    border-left: 0px;
-    border-top: 0px;
+    border-bottom: 2px solid black;
     min-height: 6vh;
-    max-height: fit-content;
-    width: 100vw;
+    max-height: 10vh;
+    max-width: 100vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
     box-sizing: border-box;
     background-color: #bed7be;
 }
diff --git a/src/index.ts b/src/index.ts
index 11c1bb95..9576f33c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -58,11 +58,10 @@ declare global {
     }
 }
 
-//Active mode button stays pressed down
+//Active mode button stays pressed down until another mode button is clicked
 const modeButtons = document.querySelectorAll(".modeButton");
 modeButtons.forEach(button => {
     button.addEventListener("click", () => {
-        console.log("clicked");
         button.classList.toggle("modeButtonPressed");
         modeButtons.forEach(otherButton => {
             if (otherButton !== button) {