From dfaaecd24b782ba943c4fa6c7925d9cbb843d621 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 12 Sep 2024 16:06:24 +0200
Subject: [PATCH] fix(waybar-widget): click zone too small

---
 src/components/Waybar/WaybarWidget.tsx              | 2 ++
 src/components/Waybar/Widgets/WaybarLockWidget.tsx  | 8 ++++++--
 src/components/Waybar/Widgets/WaybarPowerWidget.tsx | 8 ++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Waybar/WaybarWidget.tsx b/src/components/Waybar/WaybarWidget.tsx
index 44e4db1..ff31448 100644
--- a/src/components/Waybar/WaybarWidget.tsx
+++ b/src/components/Waybar/WaybarWidget.tsx
@@ -6,6 +6,7 @@ export const WaybarWidget = (props: {
   tooltip?: ReactNode;
   interactable?: boolean;
   children: ReactNode;
+  onClick?: () => void;
 }) => {
   const [tooltipPosition, setTooltipPosition] = useState<{
     x: number;
@@ -42,6 +43,7 @@ export const WaybarWidget = (props: {
       onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouveMove}
       onMouseLeave={handleMouseLeave}
+      onClick={props.onClick}
     >
       {props.children}
       {props.tooltip && tooltipPosition && tooltipVisible && (
diff --git a/src/components/Waybar/Widgets/WaybarLockWidget.tsx b/src/components/Waybar/Widgets/WaybarLockWidget.tsx
index f00341b..723174e 100644
--- a/src/components/Waybar/Widgets/WaybarLockWidget.tsx
+++ b/src/components/Waybar/Widgets/WaybarLockWidget.tsx
@@ -5,8 +5,12 @@ export const WaybarLockWidget = () => {
   const { setState } = useApp();
 
   return (
-    <WaybarWidget className="pl-3 pr-[0.625rem]" interactable>
-      <button onClick={() => setState("login")}></button>
+    <WaybarWidget
+      className="pl-3 pr-[0.625rem]"
+      onClick={() => setState("login")}
+      interactable
+    >
+      <button></button>
     </WaybarWidget>
   );
 };
diff --git a/src/components/Waybar/Widgets/WaybarPowerWidget.tsx b/src/components/Waybar/Widgets/WaybarPowerWidget.tsx
index 6cf2b84..8cbc8a2 100644
--- a/src/components/Waybar/Widgets/WaybarPowerWidget.tsx
+++ b/src/components/Waybar/Widgets/WaybarPowerWidget.tsx
@@ -5,8 +5,12 @@ export const WaybarPowerWidget = () => {
   const { setState } = useApp();
 
   return (
-    <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
-      <button onClick={() => setState("off")}></button>
+    <WaybarWidget
+      className="pl-[0.625rem] pr-3"
+      onClick={() => setState("off")}
+      interactable
+    >
+      <button></button>
     </WaybarWidget>
   );
 };