add small detail to group button

diyhue · May 11, 2024 · 04eed2d · 04eed2d
1 parent 07c5d5a
commit 04eed2d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/Group/ButtonRow.jsx b/src/components/Group/ButtonRow.jsx
@@ -35,7 +35,7 @@ const ButtonRow = ({
           >
             {lightsCapabilities.includes("xy") && (
               <motion.div
-                className={"btn"}
+                className={`btn ${showContainer === "colorPicker" ? "active" : ""}`}
                 whileHover={{ scale: 1.2 }}
                 whileTap={{ scale: 0.9 }}
               >
@@ -45,7 +45,7 @@ const ButtonRow = ({
 
             {lightsCapabilities.includes("ct") && (
               <motion.div
-                className={"btn"}
+                className={`btn ${showContainer === "colorTempPicker" ? "active" : ""}`}
                 whileHover={{ scale: 1.2 }}
                 whileTap={{ scale: 0.9 }}
               >
@@ -64,7 +64,7 @@ const ButtonRow = ({
             </motion.div>
 
             <motion.div
-              className={"btn"}
+              className={`btn ${showContainer === "lights" ? "active" : ""}`}
               whileHover={{ scale: 1.2 }}
               whileTap={{ scale: 0.9 }}
             >

diff --git a/src/components/Group/group.scss b/src/components/Group/group.scss
@@ -69,19 +69,19 @@
 
       .btn {
         text-align: center;
-        color: rgba(255, 255, 255, 0.6);
+        color: rgb(170, 170, 170);
         margin-right: 10px;
         margin-left: 10px;
         font-size: 20px;
         padding: 5px;
         transition: color 0.1s ease;
 
         &.active {
-          color: rgba(4, 154, 255, 0.8);
+          color: rgb(255, 255, 255);
         }
 
         &:hover {
-          color: rgba(255, 255, 255, 0.9);
+          color: rgb(255, 255, 255);
           cursor: pointer;
           transition: color 0.2s ease;
         }