Added custom Activity changes

src/App.css

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/assets/icons/rightIcon.js

+import React from "react";
+
+function RightIcon() {
+  return (
+    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
+         viewBox="0 0 330 330">
+    <path id="XMLID_27_" style={{fill: 'white'}} d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
+        s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
+        c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"/>
+    </svg>
+  );
+}
+
+export default RightIcon;

src/components/leftSidebar/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import scoreColor from '../../utils/scoreColor';
 import Loading from "../loading Component/Loading";
 
 function LeftSidebar() {
@@ -20,19 +21,13 @@ function LeftSidebar() {
             {reportees?.map(({ empName, score, empId }) => (
               <Link
                 to={`/viewreportee/${empId}`}
-                className={`flex items-center bg-${Number(id) === empId ? "blue-200" : "white"
+                className={`flex items-center hover:bg-indigo-500 hover:text bg-${Number(id) == empId ? "indigo-200" : "white"
                   } p-2 justify-between mb-1 w-full`}
                 key={empId}
               >
                 <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 || 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 ' : ''}`}>
+                <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(score)}`}>
                   {score}
                 </p>
               </Link>

src/components/table/index.jsx

@@ -5,7 +5,7 @@ function Table({headers, data,loading, maxHeight}) {
   if(loading) return <Loading/>
 
   return (
-    <div className={` overflow-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh] bg-gray-100`}>
+    <div className={` overflow-auto sm:rounded-lg p-4 bg-gray-100`}>
       <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-transparent justify-center border-separate border-spacing-y-2">
         <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700  dark:text-white">
           <tr className="mb-2">

src/index.css

@@ -2,15 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/pages/dashboard/index.jsx

@@ -3,6 +3,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
+import RightIcon from '../../assets/icons/rightIcon';
+import scoreColor from '../../utils/scoreColor';
 import PaginationComponent from "../../components/Pagenation/Pagenation";
 
 function Dashboard() {
@@ -76,14 +78,7 @@ 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 || 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>
+      render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(value)}`}>{value}</span>
     },
     {
       title: "Email",
@@ -92,12 +87,16 @@ function Dashboard() {
     {
       title: "Action",
       id: "empId",
-      render: (value) => <Link to={`/viewreportee/${value}`}><button className="bg-blue-400 text-white rounded-md px-3 py-1">View</button></Link>
+      render: (value) => <Link to={`/viewreportee/${value}`}>
+        <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]">
+          <RightIcon />
+          </button>
+        </Link>
     },
   ]
 
   return (
-    <div className="">
+    <div>
       <div className="mb-2">
          <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
          

src/pages/reports/index.jsx

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { fetchReports } from "../../redux/reducers/reportSlice";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Accordion from "../../components/accordion";
+import scoreColor from '../../utils/scoreColor';
 import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
 function Reports() {
@@ -139,14 +140,7 @@ 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 || 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 ' : ''}
-  `}>
+              <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(empDetails?.score)}`}>
                 <span className="text-lg font-bold">{empDetails?.score}</span>
               </div>
               <div className="">

src/utils/scoreColor.js

+const scoreColor = (value) => {
+    if (value >= 0 && value < 1) {
+      return 'bg-red-400';
+    } else if (value >= 1 && value < 2) {
+      return 'bg-red-300';
+    } else if (value >= 2 && value < 3) {
+      return 'bg-green-400';
+    } else if (value >= 3 && value < 4) {
+      return 'bg-green-500';
+    } else if (value >= 4 && value < 5) {
+      return 'bg-green-600';
+    } else if (value >= 5) {
+      return 'bg-green-600';
+    } else {
+      return '';
+    }
+};
+
+export default scoreColor;
\ No newline at end of file