From c948ab1e6cf597ec9c950a030ae39f0626930efe Mon Sep 17 00:00:00 2001
From: Petter Hancock <pettor@gmail.com>
Date: Tue, 27 Feb 2024 22:16:46 +0100
Subject: [PATCH] feat: reset button for filters

---
 .../editor/drawer/FilterDrawer.stories.tsx    |  3 +++
 .../library/editor/drawer/FilterDrawer.tsx    | 25 ++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/library/editor/drawer/FilterDrawer.stories.tsx b/src/components/library/editor/drawer/FilterDrawer.stories.tsx
index 4d8594b..49667d4 100644
--- a/src/components/library/editor/drawer/FilterDrawer.stories.tsx
+++ b/src/components/library/editor/drawer/FilterDrawer.stories.tsx
@@ -18,6 +18,9 @@ const commonProps = {
   contrast: 1,
   saturation: 1,
   pixelate: 0,
+  red: 0,
+  green: 0,
+  blue: 0,
   onFilterChange: () => console.log("onFilterChange"),
   onClose: () => console.log("onClose"),
 } satisfies ComponentProps;
diff --git a/src/components/library/editor/drawer/FilterDrawer.tsx b/src/components/library/editor/drawer/FilterDrawer.tsx
index aa14938..8cb0257 100644
--- a/src/components/library/editor/drawer/FilterDrawer.tsx
+++ b/src/components/library/editor/drawer/FilterDrawer.tsx
@@ -54,10 +54,10 @@ export function FilterDrawer({
           </div>
           <div className="divider divider-vertical h-1/2" />
           <li className="flex gap-2">
-            <span className="menu-title text-base font-bold my-2 flex flex-row gap-2">
+            <button className="text-base font-bold my-2" onClick={() => onFilterChange({ brightness: 1 })}>
               <SunHighIcon />
               Brightness
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -65,13 +65,12 @@ export function FilterDrawer({
               step="0.1"
               value={brightness}
               onChange={(e) => onFilterChange({ brightness: Number(e.target.value) })}
-              onDoubleClick={() => onFilterChange({ brightness: 1 })}
               className="range range-primary"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ contrast: 1 })}>
               <ContrastIcon />
               Contrast
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -81,10 +80,10 @@ export function FilterDrawer({
               onChange={(e) => onFilterChange({ contrast: Number(e.target.value) })}
               className="range range-secondary"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ saturation: 1 })}>
               <DropletIcon />
               Saturation
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -97,7 +96,9 @@ export function FilterDrawer({
           </li>
           <li className="divider divider-vertical h-1/2 mt-8" />
           <li className="flex gap-4">
-            <span className="menu-title text-base font-bold flex flex-row gap-2">RGB</span>
+            <button className="text-base font-bold" onClick={() => onFilterChange({ red: 1, green: 1, blue: 1 })}>
+              RGB
+            </button>
             <input
               type="range"
               min="0"
@@ -128,10 +129,10 @@ export function FilterDrawer({
           </li>
           <li className="divider divider-vertical h-1/2 mt-8" />
           <li className="flex gap-2">
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ blur: 0 })}>
               <BlurIcon />
               Blur
-            </span>
+            </button>
             <input
               type="range"
               min="0"
@@ -141,10 +142,10 @@ export function FilterDrawer({
               onChange={(e) => onFilterChange({ blur: Number(e.target.value) })}
               className="range range-warning"
             />
-            <span className="menu-title text-base font-bold flex flex-row gap-2">
+            <button className="text-base font-bold" onClick={() => onFilterChange({ pixelate: 0 })}>
               <PixelateIcon />
               Pixelate
-            </span>
+            </button>
             <input
               type="range"
               min="0"