Replace custom socket implementation with SignalR.

Replace MSAL and custom cookie auth with Microsoft.Identity.EntityFramework
Also some UI redesign to accommodate different login experience.

Shogi.UI/wwwroot/css/app.css

@@ -1,65 +1,16 @@
-@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
-
-html, body, #app {
+html, body, #app {
 	height: 100vh;
 }
 
 body {
 	margin: 0;
 	padding: 0;
-	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-	color: var(--primary-color);
-}
-
-span {
-	display: inline-block;
-	vertical-align: middle;
-}
-
-a {
-	text-decoration: none;
-}
-
-	a.plain {
-		color: inherit;
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-
-button {
-	background-color: var(--primary-color);
-	color: var(--contrast-color);
-	border: none;
-	padding: 0.3rem 0.7rem;
-	border: 1px solid var(--primary-color);
-	border-radius: 2px;
-	cursor: pointer;
-	font: inherit;
-	font-size: 85%;
-}
-
-.smaller {
-	font-size: smaller;
 }
 
 #app {
 	display: grid;
 }
 
-.valid.modified:not([type=checkbox]) {
-	outline: 1px solid #26b050;
-}
-
-.invalid {
-	outline: 1px solid red;
-}
-
-.validation-message {
-	color: red;
-}
-
 #blazor-error-ui {
 	background: lightyellow;
 	bottom: 0;
@@ -88,40 +39,3 @@ button {
 	.blazor-error-boundary::after {
 		content: "An error has occurred."
 	}
-
-p {
-	margin-bottom: 0.5rem;
-}
-
-/* Layout */
-.flex-between {
-	display: flex;
-	justify-content: space-between;
-}
-
-/* Variables */
-html {
-	--primary-color: #444;
-	--secondary-color: #5e5e5e;
-	--contrast-color: #eaeaea;
-}
-
-/* Bootstrap overrides */
-
-h1, h2, h3, h4, h5, h6 {
-	all: revert;
-	margin-top: 0;
-	margin-bottom: 0.5rem;
-}
-
-button.btn-link {
-	color: #0066cc;
-}
-
-button.btn.btn-link:not(:hover) {
-	text-decoration: none;
-}
-
-.place-self-center {
-	place-self: center;
-}

Shogi.UI/wwwroot/css/themes.css

@@ -0,0 +1,68 @@
+.PrimaryTheme {
+	--backgroundColor: #444444;
+	--foregroundColor: #eaeaea;
+	--hrefColor: #99c3ff;
+	--uniformBottomMargin: 0.5rem;
+	background-color: var(--backgroundColor);
+	color: var(--foregroundColor);
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+	.PrimaryTheme a {
+		color: var(--hrefColor);
+	}
+
+		.PrimaryTheme a:not(:hover) {
+			text-decoration: none;
+		}
+
+
+	.PrimaryTheme button {
+		background-color: var(--foregroundColor);
+		color: var(--backgroundColor);
+		border: none;
+		padding: 0.3rem 0.7rem;
+		border: 1px solid var(--backgroundColor);
+		border-radius: 2px;
+		cursor: pointer;
+		font: inherit;
+		font-size: 85%;
+	}
+
+		.PrimaryTheme button.href {
+			border: 0;
+			background: unset;
+			color: var(--hrefColor);
+			padding: 0;
+			font-size: 100%;
+		}
+
+			.PrimaryTheme button.href:hover {
+				text-decoration: underline;
+			}
+
+	.PrimaryTheme p, .PrimaryTheme h1, .PrimaryTheme h2, .PrimaryTheme h3, .PrimaryTheme h4, .PrimaryTheme h5, .PrimaryTheme h6 {
+		margin-top: 0;
+		margin-bottom: var(--uniformBottomMargin);
+	}
+
+	.PrimaryTheme ul {
+		padding: 0.3rem;
+		margin: 0;
+		margin-bottom: var(--uniformBottomMargin);
+		background-color: var(--foregroundColor);
+		color: var(--backgroundColor);
+		list-style-position: inside;
+	}
+
+
+
+	/***************************
+	*	    Contrast Variant     *
+	***************************/
+
+	.PrimaryTheme .ThemeVariant--Contrast {
+		--backgroundColor: #eaeaea;
+		--foregroundColor: #444444;
+		--hrefColor: #0065be;
+	}