From 4bbdc1e507ae33f156212d2ecfb8801616ee0212 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Thu, 8 Jun 2023 04:59:45 -0400
Subject: [PATCH] feat: add hover animations to eww modules in waybar

---
 eww/actions/actions.yuck         |  1 +
 eww/closer/closer.yuck           |  2 +-
 eww/date/date.yuck               |  1 +
 eww/powermenu/powermenu.yuck     |  2 +-
 eww/traybuttons/traybuttons.scss | 36 ++++++++++++++------------------
 eww/traybuttons/traybuttons.yuck | 21 ++++++++++---------
 waybar/style.css                 |  5 +++--
 7 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/eww/actions/actions.yuck b/eww/actions/actions.yuck
index dac9c6d2..9bfe2672 100644
--- a/eww/actions/actions.yuck
+++ b/eww/actions/actions.yuck
@@ -201,6 +201,7 @@
 
 (defwindow actions-reveal
   :monitor "0"
+  :stacking "overlay"
   :geometry (geometry :x "10px"
                       :y "4px"
                       :width "320px" ; this isn't respected btw, so it's auto-adjusted by eww lol.
diff --git a/eww/closer/closer.yuck b/eww/closer/closer.yuck
index ac0b9fbd..b2616269 100644
--- a/eww/closer/closer.yuck
+++ b/eww/closer/closer.yuck
@@ -4,6 +4,6 @@
 (defwindow closer
   :monitor 0
   :geometry (geometry :width "100%" :height "100%")
-  :stacking "fg"
+  :stacking "overlay"
   :focusable false
   (closer :window ""))
diff --git a/eww/date/date.yuck b/eww/date/date.yuck
index 208873ad..f02c4e75 100644
--- a/eww/date/date.yuck
+++ b/eww/date/date.yuck
@@ -50,6 +50,7 @@
 
 (defwindow date-reveal
   :monitor 0
+  :stacking "overlay"
   :geometry (geometry :x "70px"
                       :y "4px"
                       :width "0px" ; automatically generated
diff --git a/eww/powermenu/powermenu.yuck b/eww/powermenu/powermenu.yuck
index 912b693a..13e550cc 100644
--- a/eww/powermenu/powermenu.yuck
+++ b/eww/powermenu/powermenu.yuck
@@ -40,7 +40,7 @@
 
 (defwindow powermenu-reveal
   :monitor 0
-  :stacking "fg"
+  :stacking "overlay"
   :geometry (geometry :x "0px"
                       :y "0px"
                       :width "500px"
diff --git a/eww/traybuttons/traybuttons.scss b/eww/traybuttons/traybuttons.scss
index df39cbf5..34662e74 100644
--- a/eww/traybuttons/traybuttons.scss
+++ b/eww/traybuttons/traybuttons.scss
@@ -1,11 +1,14 @@
-/*.tablet-toggle {
-  background-color: $bg;
-  color: $fg;
-  font-family: Product Sans;
-  border-radius: 30px;
-  border: 5px solid $contrastbg;
-  padding: 10px 18px;
-}*/
+.notif-panel {
+/*  min-width: 110px;
+  min-height: 34px; */
+  font-size: 20px;
+  padding: 2px 25px 2px 35px;
+}
+
+.tablet-toggle {
+  font-size: 26px;
+  padding: 2px 10px 2px 16px;
+}
 
 .toggle-off {
   background-color: $bg;
@@ -13,26 +16,19 @@
   color: #CBA6F7;
   border-radius: 80px;
   border: 3px solid $contrastbg;
-  padding: 0px 6px 0px 12px;
   /* Add any other styles for the "off" state */
 }
 
+.toggle-off:hover {
+  background-color: rgba(127, 132, 156, 0.2);
+  transition: background-color 0.5s ease-in-out;
+}
+
 .toggle-on {
   background-color: $bg;
   transition: border-color 0.5s ease-in-out;
   color: #CBA6F7;
   border-radius: 80px;
   border: 3px solid #CBA6F7;
-  padding: 0px 6px 0px 12px;
   /* Add any other styles for the "on" state */
 }
-
-.notif-panel {
-  min-width: 110px;
-  min-height: 38px;
-  font-size: 20px;
-}
-
-.tablet-toggle {
-  font-size: 26px;
-}
diff --git a/eww/traybuttons/traybuttons.yuck b/eww/traybuttons/traybuttons.yuck
index b634970a..b9b19efc 100644
--- a/eww/traybuttons/traybuttons.yuck
+++ b/eww/traybuttons/traybuttons.yuck
@@ -1,13 +1,13 @@
 (defvar toggle-state false)
 
 (defwidget tablet-toggle []
-  (button :class "tablet-toggle"
-          :onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" : 
-                                   "$HOME/.config/hypr/scripts/tablet/tablet-mode.sh &"}
-    (box   :class {toggle-state ? "toggle-on" : "toggle-off"}
-            :space-evenly true
-            :spacing 6
-            :orientation "h"
+  (eventbox :class {toggle-state ? "toggle-on" : "toggle-off"}
+            :onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" : 
+                                     "$HOME/.config/hypr/scripts/tablet/tablet-mode.sh &"}
+    (box   :class "tablet-toggle"
+           :space-evenly true
+           :spacing 6
+           :orientation "h"
       (label :text " 󰦧 ")
     )
   )
@@ -15,6 +15,7 @@
 
 (defwindow tablet-toggle
   :monitor 0
+  :stacking "overlay"
   :exclusive "ignore"
   :geometry (geometry :x "78px"
                       :y "8px"
@@ -28,10 +29,10 @@
 (defvar notif-panel-state false)
 
 (defwidget notif-panel []
-  (button :class "notif-panel"
+  (button :class {notif-panel-state ? "toggle-on" : "toggle-off"}
           :onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" : 
                                         "swaync-client -op; eww update notif-panel-state=true"}
-    (box :class {notif-panel-state ? "toggle-on" : "toggle-off"}
+    (box :class "notif-panel"
          :space-evenly true
          :spacing 6
          :orientation "h"
@@ -45,7 +46,7 @@
   :stacking "overlay"
   :exclusive "ignore"
   :geometry (geometry :x "60px"
-                      :y "9px"
+                      :y "10px"
                       :width "0px"
                       :height "0px"
                       :anchor "top right"
diff --git a/waybar/style.css b/waybar/style.css
index 606a5c0f..efefccdd 100644
--- a/waybar/style.css
+++ b/waybar/style.css
@@ -126,6 +126,7 @@
     border: 6px solid rgba(0, 0, 0, 0);
     border-radius: 80px;
     background-clip: padding-box;
+    color: rgba(0, 0, 0, 0);
   }
   
   #custom-quicksettings {
@@ -136,6 +137,6 @@
 
   #custom-notif {
     min-width: 110px;
-    color: #CBA6F7;
-    font-size: 26px;
+    color: rgba(0, 0, 0, 0);
+    font-size: 20px;
   }