(ml5717) Addressed getter and css cleanup requests

public/index.html

@@ -57,9 +57,7 @@
           size="25"
           color="gray"
         />
-        <button id="room-connect">
-          Connect <i class="fa fa-link" style="padding: 0 1.5px"></i>
-        </button>
+        <button id="room-connect">Connect <i class="fa fa-link"></i></button>
       </div>
       <div id="tools-panel">
         <button id="pen-tool" class="selected">
@@ -200,14 +198,14 @@
           </div>
         </div>
         <button id="eraser-tool">
-          <i class="fa fa-eraser" style="padding: 0 1px"></i>
+          <i class="fa fa-eraser"></i>
         </button>
         <div id="status-info">
           <button id="fast-undo-tool" class="disabled">
-            <i class="fa fa-fast-backward" style="padding: 0 2.5px"></i>
+            <i class="fa fa-fast-backward"></i>
           </button>
           <button id="undo-tool" class="disabled">
-            <i class="fa fa-backward" style="padding: 0 4px 0 1px"></i>
+            <i class="fa fa-backward"></i>
           </button>
           <div id="connected-room-info">
             Room:&nbsp;

public/styles.css

@@ -37,11 +37,6 @@ body {
   padding: 0.75em;
 }
 
-/*#connected-room-info:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
-}*/
-
 button.selected {
   background-color: gray !important;
 }
@@ -289,6 +284,10 @@ button.selected {
   transition-duration: 0.4s;
 }
 
+#pen-tool > i {
+  padding: 0 1px;
+}
+
 #eraser-tool {
   background-color: #2f2f2f;
   color: white;
@@ -305,6 +304,10 @@ button.selected {
   transition-duration: 0.4s;
 }
 
+#eraser-tool > i {
+  padding: 0 0.5px;
+}
+
 #undo-tool {
   background-color: #2f2f2f;
   color: white;
@@ -325,6 +328,10 @@ button.selected {
   display: none;
 }
 
+#undo-tool > i {
+  padding: 0 3px 0 0;
+}
+
 #fast-undo-tool {
   background-color: #2f2f2f;
   color: white;
@@ -345,6 +352,10 @@ button.selected {
   display: none;
 }
 
+#fast-undo-tool > i {
+  padding: 0 1px;
+}
+
 .properties {
   display: none;
   position: fixed;
@@ -596,11 +607,6 @@ button.selected {
   padding: 0 0.75em 0 0;
 }
 
-/*#user-avatar:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
-}*/
-
 #status-info {
   display: flex;
   align-items: center;

src/app.js

@@ -208,7 +208,7 @@ HTML.fastUndoButton.addEventListener("click", () => {
 
   room.fastUndo()
 
-  if (!room.canUndo) {
+  if (!room.canUndo()) {
     HTML.fastUndoButton.classList.add("disabled")
     HTML.undoButton.classList.add("disabled")
   }
@@ -218,7 +218,7 @@ HTML.undoButton.addEventListener("click", () => {
 
   room.undo()
 
-  if (!room.canUndo) {
+  if (!room.canUndo()) {
     HTML.fastUndoButton.classList.add("disabled")
     HTML.undoButton.classList.add("disabled")
   }

src/room.js

@@ -94,7 +94,7 @@ class Room extends EventTarget {
     this.shared.eraseIntervals.get(id).merge([[0, end]])
   }
 
-  get canUndo() {
+  canUndo() {
     return this.undoStack.length > 0
   }