42 button click indicator and squished UI

src/index.css

@@ -1,24 +1,28 @@
-
 body, html{
-    margin: 0;
+    margin: 0px;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
     display:contents;
+    background-color: #ffffff;
 }
 
 p {
     margin: 0px;
+    text-emphasis-color: #ffffff;
 }
 
 #header {
-    background-color: white;
-    border: 2px solid black;
-    height: 3vw;
+    background-color: #a6b6d9;
+    border: 2px solid #000000;
+    border-right: 0px;
+    min-height: 6vh;
     width: 100vw;
     text-align: center;
-    padding-top: 1vw;
+    padding-top: 1vh;
     box-sizing: border-box;
+    font-weight: bold;
+    font-size: x-large;
 }
 
 #application {
@@ -30,13 +34,37 @@ p {
 
 .row {
     display: flex;
+    justify-content: space-around;
 }
 
 .modeButton {
-    width: 2vw;
-    height: 2vw;
-    border: 2px solid black;
-    margin: 3px;
+    min-width: 2vw;
+    min-height: 4vh;
+    border: 2px solid #000000;
+    margin: 2px;
+    border-radius: 25%;
+    box-shadow: 1px 2px 1px #000000;
+}
+
+.modeButton:active {
+    transform: translateY(2px);
+}
+
+.modeButtonPressed {
+    -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 {
+  background-color: #d4e8f5;
+}
+
+.fileButton {
+    float: right;
+    margin-right: 10px;
+    margin-top: 3px;
+    min-width: 6vw;
 }
 
 #content {
@@ -45,21 +73,27 @@ p {
 }
 
 #toolbar {
-    border: 2px solid black;
-    width: 95vw;
-    float: right;
-    height: 2vw;
+    border-bottom: 2px solid black;
+    min-height: 7vh;
+    max-height: 10vh;
+    max-width: 100vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
     box-sizing: border-box;
-    background-color: white;
+    background-color: #94b09c;
 }
 
 #subBar {
-    border: 2px solid black;
-    width: 95vw;
-    float: right;
-    height: 2vw;
+    border-bottom: 2px solid black;
+    min-height: 6vh;
+    max-height: 10vh;
+    max-width: 100vw;
+    overflow-y: auto;
+    overflow-x: hidden;
+    overflow-wrap: break-word;
     box-sizing: border-box;
-    background-color: white;
+    background-color: #bed7be;
 }
 
 #cutTools {
@@ -78,11 +112,13 @@ p {
 
 #sidebar {
     box-sizing: border-box;
-    border: 2px solid black;
-    background-color: white;
+    border: 2px solid #000000;
+    border-top: 0px;
+    padding-top: 3px;
+    background-color: #526D82;
     height: 100vh;
+    min-width: 6vw;
     float: left;
-    width: 5vw;
 }
 
 #canvas {
@@ -91,9 +127,10 @@ p {
     left: 0px;
     z-index: -1;
 }
+
 .no-highlight{
     user-select: none; 
     -moz-user-select: none; 
     -webkit-text-select: none;
     -webkit-user-select: none; 
- }
+}

src/index.html

@@ -38,23 +38,22 @@
     <div id="toolbar">
       <div id="genericTools">
         <div class="toolSetting">
-          <p class="no-highlight" id="graphString"></p>
+          <p 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>

src/index.ts

@@ -58,6 +58,19 @@ declare global {
     }
 }
 
+//Active mode button stays pressed down until another mode button is clicked
+const modeButtons = document.querySelectorAll(".modeButton");
+modeButtons.forEach(button => {
+    button.addEventListener("click", () => {
+        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.

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;