[Client] Improve admin panel

src/client/app/admin/views/ap-log.vue

@@ -67,7 +67,7 @@ export default Vue.extend({
 	height 250px
 	overflow auto
 	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
-	background var(--face)
+	background var(--adminDashboardCardBg)
 	border-radius 8px
 
 	> table
@@ -76,10 +76,11 @@ export default Vue.extend({
 		overflow auto
 		border-spacing 0
 		border-collapse collapse
-		color #555
+		color var(--adminDashboardCardFg)
+		font-size 15px
 
 		thead
-			border-bottom solid 2px #eee
+			border-bottom solid 2px var(--adminDashboardCardDivider)
 
 			tr
 				th
@@ -89,7 +90,7 @@ export default Vue.extend({
 		tbody
 			tr
 				&:nth-child(odd)
-					background #fbfbfb
+					background rgba(0, 0, 0, 0.025)
 
 		th, td
 			padding 8px 16px

src/client/app/admin/views/charts.vue

@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import * as tinycolor from 'tinycolor2';
 import * as ApexCharts from 'apexcharts';
 
 const limit = 90;
@@ -147,7 +148,7 @@ export default Vue.extend({
 				this.chartInstance.destroy();
 			}
 
-			this.chartInstance = new ApexCharts(this.$refs.chart, Object.assign({
+			this.chartInstance = new ApexCharts(this.$refs.chart, {
 				chart: {
 					type: 'area',
 					height: 300,
@@ -168,17 +169,41 @@ export default Vue.extend({
 				},
 				grid: {
 					clipMarkers: false,
+					borderColor: 'rgba(0, 0, 0, 0.1)'
 				},
 				stroke: {
 					curve: 'straight',
 					width: 2
 				},
+				legend: {
+					labels: {
+						color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+					},
+				},
 				xaxis: {
-					type: 'datetime'
+					type: 'datetime',
+					labels: {
+						style: {
+							colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+						}
+					},
+					axisBorder: {
+						color: 'rgba(0, 0, 0, 0.1)'
+					},
+					axisTicks: {
+						color: 'rgba(0, 0, 0, 0.1)'
+					},
 				},
 				yaxis: {
+					labels: {
+						formatter: this.data.bytes ? v => Vue.filter('bytes')(v, 0) : v => Vue.filter('number')(v),
+						style: {
+							color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
 						}
-			}, this.data));
+					}
+				},
+				series: this.data.series
+			});
 
 			this.chartInstance.render();
 		},
@@ -286,6 +311,7 @@ export default Vue.extend({
 
 		driveChart(): any {
 			return {
+				bytes: true,
 				series: [{
 					name: 'All',
 					data: this.format(
@@ -314,6 +340,7 @@ export default Vue.extend({
 
 		driveTotalChart(): any {
 			return {
+				bytes: true,
 				series: [{
 					name: 'Combined',
 					data: this.format(sum(this.stats.drive.local.totalSize, this.stats.drive.remote.totalSize))
@@ -396,6 +423,7 @@ export default Vue.extend({
 
 		networkUsageChart(): any {
 			return {
+				bytes: true,
 				series: [{
 					name: 'Incoming',
 					data: this.format(this.stats.network.incomingBytes)
@@ -424,8 +452,8 @@ export default Vue.extend({
 		margin 0 8px
 		padding 0 0 8px 0
 		font-size 1em
-		color #555
+		color var(--adminDashboardCardFg)
-		border-bottom solid 1px #eee
+		border-bottom solid 1px var(--adminDashboardCardDivider)
 
 		> b
 			margin-right 8px

src/client/app/admin/views/cpu-memory.vue

@@ -79,6 +79,7 @@ export default Vue.extend({
 			},
 			grid: {
 				clipMarkers: false,
+				borderColor: 'rgba(0, 0, 0, 0.1)'
 			},
 			stroke: {
 				curve: 'straight',
@@ -153,7 +154,7 @@ export default Vue.extend({
 			display flex
 			padding 0 8px
 			margin-bottom -16px
-			color #555
+			color var(--adminDashboardCardFg)
 			font-size 14px
 
 			> span

src/client/app/admin/views/dashboard.vue

@@ -128,8 +128,8 @@ export default Vue.extend({
 		display flex
 		margin-bottom 16px
 		padding-bottom 16px
-		border-bottom solid 1px #ccc
+		border-bottom solid 1px var(--adminDashboardHeaderBorder)
-		color #777
+		color var(--adminDashboardHeaderFg)
 		font-size 14px
 
 		> p
@@ -154,9 +154,9 @@ export default Vue.extend({
 			flex 1
 			max-width 300px
 			margin-right 16px
-			color var(--text)
+			color var(--adminDashboardCardFg)
 			box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
-			background var(--face)
+			background var(--adminDashboardCardBg)
 			border-radius 8px
 
 			&:last-child
@@ -192,7 +192,7 @@ export default Vue.extend({
 			> div:last-child
 				display flex
 				padding 6px 16px
-				border-top solid 1px #eee
+				border-top solid 1px var(--adminDashboardCardDivider)
 
 				> span
 					font-size 70%

src/client/theme/dark.json5

@@ -215,5 +215,11 @@
 		reversiGameEmptyCell: ':lighten<2<$secondary',
 		reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
 		reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
+
+		adminDashboardHeaderFg: ':alpha<0.9<$text',
+		adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.3)',
+		adminDashboardCardBg: '$secondary',
+		adminDashboardCardFg: '$text',
+		adminDashboardCardDivider: 'rgba(0, 0, 0, 0.3)',
 	},
 }

src/client/theme/light.json5

@@ -215,5 +215,11 @@
 		reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
 		reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
 		reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)',
+
+		adminDashboardHeaderFg: ':alpha<0.9<$text',
+		adminDashboardHeaderBorder: 'rgba(0, 0, 0, 0.1)',
+		adminDashboardCardBg: '$secondary',
+		adminDashboardCardFg: '$text',
+		adminDashboardCardDivider: 'rgba(0, 0, 0, 0.082)',
 	},
 }