From a21850d506e948108749d41eb9a21dafece61bbb Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Tue, 1 Feb 2022 00:02:14 -0800
Subject: [PATCH] Use WinampButton for some EQ buttons

---
 packages/webamp/css/base-skin.css                         | 8 ++++----
 .../js/components/EqualizerWindow/EqTitleButtons.tsx      | 5 +++--
 packages/webamp/js/skinSelectors.ts                       | 8 ++++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/webamp/css/base-skin.css b/packages/webamp/css/base-skin.css
index cc9e3e40..b404fb8d 100644
--- a/packages/webamp/css/base-skin.css
+++ b/packages/webamp/css/base-skin.css
@@ -137,12 +137,12 @@
 #webamp #equalizer-balance.center::-moz-range-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAHCAYAAADNufepAAAAIklEQVQYV2NcPCXrv6eVAMP2Yx8YGN+cq/rPAAVkcZBNAwAdshtHcq1eDAAAAABJRU5ErkJggg==)}
 #webamp #equalizer-balance.right::-webkit-slider-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAHCAYAAADNufepAAAAL0lEQVQYV2O0dPD9v7lPl2H7sQ8MjMlx1v87C+wZQIBx8ZSs/55WAoQ4KHqQTQMABjYbR2VeyxUAAAAASUVORK5CYII=)}
 #webamp #equalizer-balance.right::-moz-range-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAHCAYAAADNufepAAAAL0lEQVQYV2O0dPD9v7lPl2H7sQ8MjMlx1v87C+wZQIBx8ZSs/55WAoQ4KHqQTQMABjYbR2VeyxUAAAAASUVORK5CYII=)}
-#webamp #equalizer-shade:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbUlEQVQoU2PcMjH5PwMBwAhTxK0hjaH0642nYDGwImwKYDpACsGKdpx5gNNCDxMFiKJ5O28xSAmzYSh89vYXQ5K7GkIRSAWyQpACEIArmrbhNgMHJ6Ynf3xnZMgKUIWYBNIBUogOQArgviMUTgAGRzXpGfAzIgAAAABJRU5ErkJggg==)}
-#webamp #equalizer-window.shade #equalizer-shade:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbklEQVQoU2PcMjH5PwMBwAhTNG3DbQylWQGqYDGwIpACDs7/DLn5jigKuzsOMIAUghXN23kLLImuaPLE/QxJ7moIRQXpKgx/OWRRTMKqCFnFhJl3wFy4SSA3VRQoo5gCUvTjOyPCTSBZgr4jFE4A2kg/6aCuM1IAAAAASUVORK5CYII=)}
+#webamp #equalizer-shade.winamp-active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbUlEQVQoU2PcMjH5PwMBwAhTxK0hjaH0642nYDGwImwKYDpACsGKdpx5gNNCDxMFiKJ5O28xSAmzYSh89vYXQ5K7GkIRSAWyQpACEIArmrbhNgMHJ6Ynf3xnZMgKUIWYBNIBUogOQArgviMUTgAGRzXpGfAzIgAAAABJRU5ErkJggg==)}
+#webamp #equalizer-window.shade #equalizer-shade.winamp-active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAbklEQVQoU2PcMjH5PwMBwAhTNG3DbQylWQGqYDGwIpACDs7/DLn5jigKuzsOMIAUghXN23kLLImuaPLE/QxJ7moIRQXpKgx/OWRRTMKqCFnFhJl3wFy4SSA3VRQoo5gCUvTjOyPCTSBZgr4jFE4A2kg/6aCuM1IAAAAASUVORK5CYII=)}
 #webamp #equalizer-window.selected #eq-buttons.clicked #equalizer-close {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVQoU2PU1HT6z0AAMIIUWRsxMXz9/YPhzs1rcOUq6loM3KwcDEfP/WMAKzLQ/cUQ4KTJsPvwfbBikKSrrSLDhn3XGS5cZoMo4mG7wKCvYwSWuHf/OYOSoiRYw8Ur5xi+/DJAKAIZr6cowFDUvpmhr9KX4dL9D2DrURQRNIkoNxHlO0LhBADl2Vw1H4GXqQAAAABJRU5ErkJggg==)}
-#webamp #equalizer-window.selected #eq-buttons.clicked #equalizer-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2NcOSP1PwMBwAhStPvwfYavv38w3Lj1Ea5cQ42fgZuVg8HVVpEBrGjDvutgBcba4mDFIMmzV18ygBQGOGlCFHXMOAFWAJIIc5dnWLXzIZxfkWGBUATSpacowFDUvpmhr9KX4dL9D2DTURQRNIkoNxHlO0LhBAD8HGXXJ+lJqwAAAABJRU5ErkJggg==)}
+#webamp #equalizer-window.selected #eq-buttons.clicked #equalizer-close.winamp-active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2NcOSP1PwMBwAhStPvwfYavv38w3Lj1Ea5cQ42fgZuVg8HVVpEBrGjDvutgBcba4mDFIMmzV18ygBQGOGlCFHXMOAFWAJIIc5dnWLXzIZxfkWGBUATSpacowFDUvpmhr9KX4dL9D2DTURQRNIkoNxHlO0LhBAD8HGXXJ+lJqwAAAABJRU5ErkJggg==)}
 #webamp #equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAA2UlEQVQoU2PU1nb5////fwYGEAYDCP0fSoPYjCBFjkb/Gb4z/mC4fvkdVCEDg6auEAPnfw6GPaf/MDBqaTn/tzT5wRCoqcGw49oDsGKQpIeJAsP6szcYjp5igSgSYH/GYKQjBZa4e/c5g7KyJMOOMw8Yzl15xvDuuxhCEch4PQF+hryJWxkm5XszXPrwEWz9u2+iDIxamk7/BTieo5hk6CzOsGrNI1STwG4y1gBbAXNTWIgcw8K1txiOnmSGmORkwojbd6d+QxTBwgcWNqBwY2RkZPj/7x9YCgBOq24Dw83jIwAAAABJRU5ErkJggg==)}
-#webamp #equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close:active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2PcMjH5PwMBwAhStOPMA4bvjD8Yrl9+B1euqSvEwPmfg8HDRIEBrGj92RtgBUY6UmDFIMlzV54xgBQGGmtAFLUtOAZWAJIIt1VkWHn4PpxflWCFUATSpSfAz5A3cSvDpHxvhksfPoJNR1FE0CSi3ESU7wiFEwDes2XpVzKmTwAAAABJRU5ErkJggg==)}
+#webamp #equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close.winamp-active {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAfElEQVQoU2PcMjH5PwMBwAhStOPMA4bvjD8Yrl9+B1euqSvEwPmfg8HDRIEBrGj92RtgBUY6UmDFIMlzV54xgBQGGmtAFLUtOAZWAJIIt1VkWHn4PpxflWCFUATSpSfAz5A3cSvDpHxvhksfPoJNR1FE0CSi3ESU7wiFEwDes2XpVzKmTwAAAABJRU5ErkJggg==)}
 #webamp #position {background-image: url(data:image/png;base64,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)}
 #webamp #position::-webkit-slider-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAArUlEQVQ4T2NMTSv+X5aqzUAvsGnVHAbG1NTi/2Vp2gwr5k2iqb1FPUcZZjS4MtT0nkC11MnTj0HfwpPqljNy6zHsWpzDcO/uTUxLCxunM4AUUBv8/3qJYfe6WbgtbSyMpradDPX9S/FbCnIRtYFrUBpuS0GRDQoKaoMVM5oZhMXEMYNXSiuc4efbYwwHty2jtp1g844dPsggISWBmpBA+YceAJ5llsztp4d9cDsA1L90sv7RoxcAAAAASUVORK5CYII=)}
 #webamp #position::-moz-range-thumb {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKCAYAAABIQFUsAAAArUlEQVQ4T2NMTSv+X5aqzUAvsGnVHAbG1NTi/2Vp2gwr5k2iqb1FPUcZZjS4MtT0nkC11MnTj0HfwpPqljNy6zHsWpzDcO/uTUxLCxunM4AUUBv8/3qJYfe6WbgtbSyMpradDPX9S/FbCnIRtYFrUBpuS0GRDQoKaoMVM5oZhMXEMYNXSiuc4efbYwwHty2jtp1g844dPsggISWBmpBA+YceAJ5llsztp4d9cDsA1L90sv7RoxcAAAAASUVORK5CYII=)}
diff --git a/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx b/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx
index 6fb719bb..b7aa971d 100644
--- a/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx
+++ b/packages/webamp/js/components/EqualizerWindow/EqTitleButtons.tsx
@@ -3,6 +3,7 @@ import { useTypedSelector, useActionCreator } from "../../hooks";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
 import { WINDOWS } from "../../constants";
+import WinampButton from "../WinampButton";
 
 export default function EqTitleButtons() {
   const focusedWindow = useTypedSelector(Selectors.getFocusedWindow);
@@ -14,8 +15,8 @@ export default function EqTitleButtons() {
   );
   return (
     <ClickedDiv id="eq-buttons" key={selected ? "selected" : "unselected"}>
-      <div id="equalizer-shade" onClick={toggleEqualizerShadeMode} />
-      <div
+      <WinampButton id="equalizer-shade" onClick={toggleEqualizerShadeMode} />
+      <WinampButton
         id="equalizer-close"
         onClick={() => closeWindow(WINDOWS.EQUALIZER)}
       />
diff --git a/packages/webamp/js/skinSelectors.ts b/packages/webamp/js/skinSelectors.ts
index d23ff5f3..ce25471b 100644
--- a/packages/webamp/js/skinSelectors.ts
+++ b/packages/webamp/js/skinSelectors.ts
@@ -197,21 +197,21 @@ export const imageSelectors: Selectors = {
     "#equalizer-balance.right::-webkit-slider-thumb",
     "#equalizer-balance.right::-moz-range-thumb",
   ],
-  EQ_MAXIMIZE_BUTTON_ACTIVE: ["#equalizer-shade:active"],
+  EQ_MAXIMIZE_BUTTON_ACTIVE: ["#equalizer-shade.winamp-active"],
   EQ_MINIMIZE_BUTTON_ACTIVE: [
-    "#equalizer-window.shade #equalizer-shade:active",
+    "#equalizer-window.shade #equalizer-shade.winamp-active",
   ],
   EQ_CLOSE_BUTTON: [
     "#equalizer-window.selected #eq-buttons.clicked #equalizer-close",
   ],
   EQ_CLOSE_BUTTON_ACTIVE: [
-    "#equalizer-window.selected #eq-buttons.clicked #equalizer-close:active",
+    "#equalizer-window.selected #eq-buttons.clicked #equalizer-close.winamp-active",
   ],
   EQ_SHADE_CLOSE_BUTTON: [
     "#equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close",
   ],
   EQ_SHADE_CLOSE_BUTTON_ACTIVE: [
-    "#equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close:active",
+    "#equalizer-window.shade.selected #eq-buttons.clicked #equalizer-close.winamp-active",
   ],
   MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
   MAIN_POSITION_SLIDER_THUMB: [