Update UI colors and alignment for consistency with the design mockup (#157)

Closes #111

client/web/src/components/widgets/labels/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="icon" :class="[`size-${String(size)}`, gapAfter && 'gap-after']">
+	<div class="icon" :class="`size-${String(size)}`">
 		<slot></slot>
 	</div>
 </template>
@@ -8,14 +8,11 @@
 .icon {
 	display: inline-block;
 	flex: 0 0 auto;
-	fill: #ddd;
+	fill: var(--color-e-nearwhite);
 	vertical-align: top;
 	width: 16px;
 	height: 16px;
-
-	&:not(.gap-after) + .icon {
-		margin-left: 0;
-	}
+	margin-left: 0;
 
 	&.size-10 {
 		width: 10px;

client/web/src/components/widgets/labels/UserInputLabel.vue

@@ -38,12 +38,12 @@
 		font-family: "Inconsolata", monospace;
 		font-weight: bold;
 		text-align: center;
-		color: #111;
-		background: #ddd;
+		color: var(--color-2-mildblack);
+		background: var(--color-e-nearwhite);
 		border: 1px;
 		box-sizing: border-box;
 		border-style: solid;
-		border-color: #888;
+		border-color: var(--color-7-middlegray);
 		border-radius: 4px;
 		height: 16px;
 		line-height: 16px;
@@ -71,11 +71,11 @@
 
 	.input-mouse {
 		.bright {
-			fill: #ddd;
+			fill: var(--color-e-nearwhite);
 		}
 
 		.dim {
-			fill: #888;
+			fill: var(--color-7-middlegray);
 		}
 
 		svg {