score colors changedation

src/components/header/index.jsx

-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useNavigate, Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import clearStore from '../../utils/clearStore';
 
-function Header() {
+function Header({isOpen}) {
     const dispatch = useDispatch();
     const navigate = useNavigate();
     const user = useSelector((state) => state.userDetails.user);
@@ -13,9 +13,14 @@ function Header() {
         navigate('/');
         clearStore(dispatch)
     }
+    useEffect(()=>{
+        if(open!==false)
+        setOpen(isOpen)
+
+    },[isOpen])
 
     return (
-        <div className="flex items-center justify-between py-5 px-10">
+        <div className="flex items-center justify-between py-5 px-10" onClick={() => setOpen(!open)}>
             <img src="/logo.png"/>
             <div className="flex items-center relative">
                 <button className=" -mt-1 text-2xl flex" onClick={() => setOpen(!open)}>

src/components/leftSidebar/index.jsx

@@ -27,9 +27,9 @@ function LeftSidebar() {
                 <img src="/man.png" width="18px" height="18px" />
                 <p className="w-[80%] text-left">{empName}</p>
                 <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center 
-      ${score === 0 ? 'bg-red-500 ' : ''}
-      ${score >= 1 && score < 2 ? 'bg-red-500' : ''}
-      ${score >= 2 && score < 3 ? 'bg-yellow-500' : ''}
+      ${score === 0 && score<1 ? 'bg-red-400 ' : ''}
+      ${score >= 1 && score < 2 ? 'bg-red-300' : ''}
+      ${score >= 2 && score < 3 ? 'bg-green-400' : ''}
       ${score >= 3 && score < 4 ? 'bg-green-500 ' : ''}
       ${score >= 4 && score < 5 ? 'bg-green-600 ' : ''}
       ${score >= 5 ? 'bg-green-600 ' : ''}`}>

src/pages/dashboard/index.jsx

@@ -75,10 +75,10 @@ function Dashboard() {
       title: "score",
       id: "score",
       render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center 
-      ${value === 0 ? 'bg-red-500 ' : ''}
-      ${value >= 1 && value < 2 ? 'bg-red-500' : ''}
-      ${value >= 2 && value < 3 ? 'bg-yellow-500' : ''}
-      ${value >= 3 && value < 4 ? 'bg-green-400 ' : ''}
+      ${value === 0 && value<1 ? 'bg-red-400 ' : ''}
+      ${value >= 1 && value < 2 ? 'bg-red-300' : ''}
+      ${value >= 2 && value < 3 ? 'bg-green-400' : ''}
+      ${value >= 3 && value < 4 ? 'bg-green-500 ' : ''}
       ${value >= 4 && value < 5 ? 'bg-green-600 ' : ''}
       ${value >= 5 ? 'bg-green-600 ' : ''}
 `}>{value}</span>

src/pages/layout/index.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import Header from '../../components/header';
 import Sidebar from '../../components/sidebar';
 import LeftSidebar from '../../components/leftSidebar';
 
 function Layout({children}) {
+    const  [isOpen, setIsOpen] = useState(false)
+    const handleLogoutOpen=()=>{
+       setIsOpen(false)
+    }
     const url = window.location.href;
     return (
-        <div className='max-h-[84vh]'>
-            <Header/>
+        <div className='max-h-[84vh]' onClick={handleLogoutOpen}>
+            <Header isOpen={isOpen} />
             <div className="flex">
                 <Sidebar/>
                 <div className="bg-[#E9EDEE] w-full" style={{height:"88vh"}}>

src/pages/reports/index.jsx

@@ -140,9 +140,9 @@ function Reports() {
             </div>
             <div className="flex flex-col justify-center items-center">
               <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center 
-                ${empDetails?.score === 0 ? 'bg-red-500 ' : ''}
-                ${empDetails?.score >= 1 && empDetails?.score < 2 ? 'bg-red-500' : ''}
-                ${empDetails?.score >= 2 && empDetails?.score < 3 ? 'bg-yellow-500' : ''}
+                ${empDetails?.score ===  0 && empDetails?.score<1 ? 'bg-red-400 ' : ''}
+                ${empDetails?.score >= 1 && empDetails?.score < 2 ? 'bg-red-300' : ''}
+                ${empDetails?.score >= 2 && empDetails?.score < 3 ? 'bg-green-400' : ''}
                 ${empDetails?.score >= 3 && empDetails?.score < 4 ? 'bg-green-500 ' : ''}
                 ${empDetails?.score >= 4 && empDetails?.score < 5 ? 'bg-green-600 ' : ''}
                 ${empDetails?.score >= 5 ? 'bg-green-600 ' : ''}

src/utils/constants.js

 // export const base_url = 'http://localhost:4000'
-export const base_url = 'https://nisumscorecardserverdev.netlify.app/.netlify/functions/api'
-// export const base_url = 'https://nisumscorecardservertesting.netlify.app/.netlify/functions/api'
\ No newline at end of file
+// export const base_url = 'https://nisumscorecardserverdev.netlify.app/.netlify/functions/api'
+export const base_url = 'https://nisumscorecardservertesting.netlify.app/.netlify/functions/api'
\ No newline at end of file