add hover effect to buttons for improved UI interaction

AOSSIE-Org · Jan 25, 2025 · 82e4c7f · 82e4c7f
1 parent 21c07b2
commit 82e4c7f
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/eduaid_web/src/pages/Question_Type.jsx b/eduaid_web/src/pages/Question_Type.jsx
@@ -40,7 +40,7 @@ const Question_Type = () => {
         <div className="flex flex-col items-center mt-8">
           <div
             onClick={() => handleOptionClick("get_shortq")}
-            className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
+            className={`flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838] hover:bg-[#2a3349]`}
           >
             <div
               className={`w-10 h-10 rounded-full ${
@@ -55,7 +55,7 @@ const Question_Type = () => {
           </div>
           <div
             onClick={() => handleOptionClick("get_mcq")}
-            className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
+            className={`flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838] hover:bg-[#2a3349]`}
           >
             <div
               className={`w-10 h-10 rounded-full ${
@@ -70,7 +70,7 @@ const Question_Type = () => {
           </div>
           <div
             onClick={() => handleOptionClick("get_boolq")}
-            className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
+            className={`flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838] hover:bg-[#2a3349]`}
           >
             <div
               className={`w-10 h-10 rounded-full ${
@@ -85,7 +85,7 @@ const Question_Type = () => {
           </div>
           <div
             onClick={() => handleOptionClick("get_problems")}
-            className="flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838]"
+            className={`flex my-3 items-center w-full max-w-lg cursor-pointer rounded-xl gap-6 px-6 py-6 bg-opacity-50 bg-[#202838] hover:bg-[#2a3349]`}
           >
             <div
               className={`w-10 h-10 rounded-full ${