From c30d428780c43ca40ae0aa2543955960cbda5eaa Mon Sep 17 00:00:00 2001
From: vran <vran_dev@foxmail.com>
Date: Thu, 15 Feb 2024 09:07:59 +0800
Subject: [PATCH] feat: support reset background color to default

---
 src/view/form/ColorPicker.tsx | 18 +++++++++++++++++-
 src/view/form/GraphForm.tsx   | 10 ++++++++++
 styles.css                    | 19 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/view/form/ColorPicker.tsx b/src/view/form/ColorPicker.tsx
index 3e85cff..f266cab 100644
--- a/src/view/form/ColorPicker.tsx
+++ b/src/view/form/ColorPicker.tsx
@@ -13,7 +13,9 @@ import { useState } from "react";
 
 export function ColorPicker(props: {
 	color?: string;
-	onChange: (color: string) => void;
+	defaultColor?: string;
+	onChange: (color?: string) => void;
+	onReset?: (color?: string) => void;
 }): JSX.Element {
 	const [showColorPicker, setShowColorPicker] = useState(false);
 	const { refs, floatingStyles, context } = useFloating({
@@ -35,6 +37,20 @@ export function ColorPicker(props: {
 				}}
 				onClick={() => setShowColorPicker(!showColorPicker)}
 			></span>
+			{props.color && (
+				<div className="color-label">
+					<span>{props.color ?? ""}</span>
+					<span className="color-reset-button" onClick={() => {
+						if (props.onReset) {
+							props.onReset(props.defaultColor);
+						} else {
+							props.onChange(props.defaultColor);
+						}
+					}}>
+						x
+					</span>
+				</div>
+			)}
 			{showColorPicker ? (
 				<div
 					ref={refs.setFloating}
diff --git a/src/view/form/GraphForm.tsx b/src/view/form/GraphForm.tsx
index 51e683d..fbfd33b 100644
--- a/src/view/form/GraphForm.tsx
+++ b/src/view/form/GraphForm.tsx
@@ -440,6 +440,16 @@ export function GraphForm(props: {
 														}
 													);
 												}}
+												onReset={(color) => {
+													changeFormData(
+														"mainContainerStyle",
+														{
+															...formData.mainContainerStyle,
+															backgroundColor:
+																color,
+														}
+													);
+												}}
 											/>
 										</div>
 									</div>
diff --git a/styles.css b/styles.css
index 5b4a3d6..303175f 100644
--- a/styles.css
+++ b/styles.css
@@ -288,6 +288,25 @@
 	opacity: 0.6;
 }
 
+.color-label {
+	display: flex;
+	gap: 6px;
+	background-color: hsl(var(--interactive-accent-hsl), 0.2);
+	color: hsl(var(--interactive-accent-hsl), 0.8);
+	align-items: center;
+	border-radius: 6px;
+	padding: 4px 8px;
+}
+
+.color-label:hover {
+	background-color: hsl(var(--interactive-accent-hsl), 0.8);
+	color: var(--text-on-accent);
+}
+
+.color-reset-button:hover {
+	color: var(--text-normal);
+}
+
 /* default cell rule indicator */
 .contribution-graph .cell-rule-indicator-container {
 	position: relative;