From 55c22eec8bbbe255198b5d9b2957dfc1cf9caf9c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Jun 2022 10:51:45 +0900
Subject: chore(client): tweak ui

---
 packages/client/src/components/mini-chart.vue | 32 +++++++++++++++------------
 1 file changed, 18 insertions(+), 14 deletions(-)

(limited to 'packages/client/src/components')

diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue
index 345b6a0b01..34acb766af 100644
--- a/packages/client/src/components/mini-chart.vue
+++ b/packages/client/src/components/mini-chart.vue
@@ -2,8 +2,8 @@
 <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
 	<defs>
 		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
-			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+			<stop offset="0%" :stop-color="color"></stop>
+			<stop offset="100%" :stop-color="colorAlpha"></stop>
 		</linearGradient>
 		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
 			<polygon
@@ -11,18 +11,6 @@
 				fill="#fff"
 				fill-opacity="0.5"
 			/>
-			<polyline
-				:points="polylinePoints"
-				fill="none"
-				stroke="#fff"
-				stroke-width="2"
-			/>
-			<circle
-				:cx="headX"
-				:cy="headY"
-				r="3"
-				fill="#fff"
-			/>
 		</mask>
 	</defs>
 	<rect
@@ -30,12 +18,25 @@
 		:width="viewBoxX + 20" :height="viewBoxY + 20"
 		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"
 	/>
+	<polyline
+		:points="polylinePoints"
+		fill="none"
+		:stroke="color"
+		stroke-width="2"
+	/>
+	<circle
+		:cx="headX"
+		:cy="headY"
+		r="3"
+		:fill="color"
+	/>
 </svg>
 </template>
 
 <script lang="ts" setup>
 import { onUnmounted, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
+import tinycolor from 'tinycolor2';
 
 const props = defineProps<{
 	src: number[];
@@ -50,6 +51,9 @@ let polygonPoints = $ref('');
 let headX = $ref<number | null>(null);
 let headY = $ref<number | null>(null);
 let clock = $ref<number | null>(null);
+const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+const color = accent.toRgbString();
+const colorAlpha = accent.clone().setAlpha(1).toRgbString();
 
 function draw(): void {
 	const stats = props.src.slice().reverse();
-- 
cgit v1.2.3-freya