assign job rounded select tag

src/components/Contexts/SocketIOContext.js

@@ -1,12 +1,14 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import io from "socket.io-client";
 
 let SocketIOContext = createContext({})
 
 export default function SocketIOContextProvider({children}) {
+    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active
+
     const dispatch = useDispatch()
 
     const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
@@ -53,8 +55,11 @@ export default function SocketIOContextProvider({children}) {
         });
         socket.on("family_actions", (data) => {
             // setSocketMsgReceived(data.message);
-            dispatch(tableReload({type:'FAMILYOFFERLIST'}))
-            console.log('working')
+            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid')
+            let {message} = data
+            if(message.action == "REFRESH_OFFER" && message.family_uid == user_uid && message.audience == "MEMBER"){
+                dispatch(tableReload({type:'FAMILYOFFERLIST'}))
+            }
         });
     }, [socket]);
 

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -242,17 +242,17 @@ const AssignTaskPopout = ({
               ) : familyDetailsData ? (
                 ` Assign ${familyDetailsData.firstname}'s Task`
               ) : (
-                <div className="flex items-center">
+                <div className="flex items-center gap-2">
                   <span className="text-black">Assign task to{" "}</span>
-                  <div className="w-[270px] h-[40px] ml-2">
+                  <div className="w-[270px] h-[40px] flex items-center relative after:absolute after:content-['▼'] active:after:rotate-180 after:transition-all after:duration-300 after:z-20 after:right-2 after:top-1/2 after:-translate-y-1/2 after:text-white after:text-lg">
                     <select
                       name=""
                       id=""
-                      className="text-white px-2 transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
+                      className="relative z-10 appearance-none text-lg text-white px-2 tracking-wide font-semibold transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-full w-full h-full"
                       onChange={handleFamChange}
                       value={selectedFamilyUid}
                     >
-                      <option value="">
+                      <option value="" className="">
                         Select a kid
                       </option>
                       {familyList}