more style changes

app/pin_handler.ts

@@ -124,6 +124,9 @@ export class PinHandler {
 		// text input field for pin name
 		const newNameInput = document.createElement('input');
 		newNameInput.id = 'nameInput_' + this.pins.toString();
+		newDiv.addEventListener('click', () => {
+			this.SelectPin(newDiv);
+		});
 		newDiv.appendChild(newNameInput);
 		newNameInput.value = 'PinName_' + this.pins.toString();
 		newNameInput.addEventListener('focusout', () => {
@@ -155,13 +158,7 @@ export class PinHandler {
 		});
 		// break
 		newDiv.appendChild(document.createElement('br'));
-		// select pin to place
-		const selectPinButton = document.createElement('button');
-		newDiv.appendChild(selectPinButton);
-		selectPinButton.textContent = 'Select';
-		selectPinButton.addEventListener('click', () => {
-			this.SelectPin(newDiv);
-		});
+
 		this.UpdateAnimationPinNames();
 		this.UpdatePinBoxStatus();
 	};

app/stylesheets/main.scss

@@ -1,7 +1,9 @@
-$bg-color: #859094;
+$bg-color: #3d2b56;
 $bg-dark-color: #7a8386;
+$canvas-bg-color: #859094;
+$secondary-bg-color: #2c497f;
 $main-border-color: #6b7578;
-$main-font-color: #101e24;
+$main-font-color: #ccf5ac;
 $selected-border-color: #09e7ca;
 $selected-bg-color: #4d998f;
 $warning-border-color: #aa093a;
@@ -10,6 +12,10 @@ $warning-selected-border-color: #ff044f;
 $warning-selected-bg-color: #aa093a;
 $warning-text-color: #ff1d61;
 
+body {
+	background-color: $bg-color;
+}
+
 div {
 	user-select: none;
 	-moz-user-select: none;
@@ -37,6 +43,7 @@ div {
 	border: 1px solid;
 	border-style: dashed;
 	border-radius: 10px;
+	background-color: $canvas-bg-color;
 }
 
 #top {
@@ -53,7 +60,8 @@ div {
 	flex-direction: column;
 	justify-content: flex-end;
 	width: 20%;
-	max-width: 200px;
+	max-width: 150px;
+	min-width: 100px;
 }
 
 .settingsItem {
@@ -70,6 +78,16 @@ div {
 	}
 }
 
+.settingsItem {
+	input {
+		border-radius: 5px;
+	}
+}
+
+#framerate {
+	width: 30px;
+}
+
 .borderbox {
 	font-size: 12px;
 	margin: auto;
@@ -84,7 +102,7 @@ div {
 	width: 50%;
 	padding: 8px;
 	text-align: center;
-	background-color: $bg-dark-color;
+	background-color: $secondary-bg-color;
 }
 
 #frameViewer {
@@ -150,16 +168,27 @@ body {
 }
 
 .pinContainer {
-	display: flex;
-	flex-direction: row;
+	display: inline-grid;
 }
+
+$pin-button-size: 6vw;
+
 .pinButtonContainer {
-	max-width: 10%;
-	flex: 1;
+	grid-row-start: 1;
+	grid-row-end: 1;
+	width: $pin-button-size;
+	height: $pin-button-size;
 	font-size: 12px;
 	border: 2px solid $main-border-color;
+	border-radius: 5px;
 	padding: 1px;
 
+	text-align: center;
+	vertical-align: middle;
+	line-height: $pin-button-size;
+
+	margin: 5px;
+
 	&.warning {
 		border: 2px solid $warning-border-color;
 		background-color: $warning-bg-color;
@@ -175,11 +204,25 @@ body {
 	}
 
 	input {
-		width: 100%;
+		width: 80%;
+		transform: translateY($pin-button-size / 2);
 	}
 }
 
+#addpin {
+	display: inline-block;
+	width: $pin-button-size;
+	height: $pin-button-size;
+	background-color: $warning-bg-color;
+	font-size: 4vw;
+}
+
 .removeButton {
+	position: relative;
+	transform: translate($pin-button-size / 2, -$pin-button-size / 2);
+	width: 15px;
+	height: 15px;
+	border-radius: 5px;
 	background-color: rgb(158, 15, 34);
 	color: rgb(227, 227, 236);
 }

dist/index.html

@@ -31,11 +31,10 @@
         <div id="frameViewer"></div>
       </div>
       <div class="borderbox">
-      <button id="addpin">Create New Pin</button>
         <div id="pinContainer" class="pinContainer" >
-        <div class="pinButtonContainer" id="originPin"><p>Origin</p><button id="selectOrigin">Select</button>
-        </div>
+          <div class="pinButtonContainer" id="originPin">Origin</div>
         </div>
+        <div id="addpin" class="pinButtonContainer">+</div>
       </div>
       <div id = "info">
           <div class="instruction">