From b4fb80c750a9117a6eecda051b5fca91f189faf9 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 3 Mar 2026 11:58:17 +0800
Subject: [PATCH] fixed

---
 frontend/src/app/components/checkbox/styles.module.css | 5 +----
 frontend/src/app/components/select/SelectField.jsx     | 2 +-
 frontend/src/app/components/select/styles.module.css   | 6 +++++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/checkbox/styles.module.css b/frontend/src/app/components/checkbox/styles.module.css
index e1d38db..dbe7766 100644
--- a/frontend/src/app/components/checkbox/styles.module.css
+++ b/frontend/src/app/components/checkbox/styles.module.css
@@ -1,7 +1,6 @@
 .switch {
   display: flex;
   width: 53px;
-
   height: 33px;
   align-items: center;
   background-color: white;
@@ -16,8 +15,6 @@
 .check {
   display: none;
 }
-
-/* The knob (replaces ::before) */
 .knob {
   width: 25px;
   height: 25px;
@@ -29,7 +26,7 @@
 
   transition: all 0.15s ease-in-out;
 }
-.knob:hover {
+.switch:hover > .knob {
   box-shadow: 0 0 0px 5px #33333327;
   background-color: #333;
 }
diff --git a/frontend/src/app/components/select/SelectField.jsx b/frontend/src/app/components/select/SelectField.jsx
index 72a99c6..287475e 100644
--- a/frontend/src/app/components/select/SelectField.jsx
+++ b/frontend/src/app/components/select/SelectField.jsx
@@ -30,7 +30,7 @@ const SelectField = ({ label, options, ...props }) => {
   return (
     <div
       ref={selectRef}
-      className={styles.select}
+      className={`${styles.select} ${showOptions ? styles.isFocused : ""}`}
       onClick={() => setShowOptions(!showOptions)}
       {...props}
     >
diff --git a/frontend/src/app/components/select/styles.module.css b/frontend/src/app/components/select/styles.module.css
index 750fdb0..b6f7b39 100644
--- a/frontend/src/app/components/select/styles.module.css
+++ b/frontend/src/app/components/select/styles.module.css
@@ -32,12 +32,16 @@
   width: 100%;
   left: 0;
   border-radius: 6px;
-  border: 1px solid #353a4c;
+  border: 1px solid #4e5474;
   background: #282b39;
   animation-name: showDD;
   animation-duration: 200ms;
   z-index: 20;
 }
+.isFocused {
+  border: 1px solid #969af9;
+  background: #282b39;
+}
 
 @keyframes showDD {
   0% {