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

Closes #111

client/web/src/App.vue

@@ -3,12 +3,38 @@
 </template>
 
 <style lang="scss">
+:root {
+	--color-0-black: #000;
+	--color-1-nearblack: #111;
+	--color-2-mildblack: #222;
+	--color-3-darkgray: #333;
+	--color-4-dimgray: #444;
+	--color-5-dullgray: #555;
+	--color-6-lowergray: #666;
+	--color-7-middlegray: #777;
+	--color-8-uppergray: #888;
+	--color-9-palegray: #999;
+	--color-a-softgray: #aaa;
+	--color-b-lightgray: #bbb;
+	--color-c-brightgray: #ccc;
+	--color-d-mildwhite: #ddd;
+	--color-e-nearwhite: #eee;
+	--color-f-white: #fff;
+	--color-accent: #3194d6;
+	--color-accent-hover: #49a5e2;
+
+	// TODO: Replace with CSS color() function to calculate alpha when browsers support it
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
+	// E6 = 90% alpha
+	--popover-opacity-color-2-mildblack: #222222e6;
+}
+
 html,
 body,
 #app {
 	margin: 0;
 	height: 100%;
-	background: #222;
+	background: var(--color-2-mildblack);
 	user-select: none;
 }
 
@@ -19,7 +45,7 @@ button {
 	font-family: "Source Sans Pro", Arial, sans-serif;
 	font-size: 14px;
 	line-height: 1;
-	color: #ddd;
+	color: var(--color-e-nearwhite);
 }
 
 svg,
@@ -38,6 +64,7 @@ img {
 	p {
 		margin: 0;
 	}
+
 	p {
 		margin-top: 8px;
 	}