fixed color schema

src/components/IntegratedStrategy.tsx

@@ -14,6 +14,7 @@ interface Category {
   name: string
   count: number
   color: string
+  highlight: string
   items: TaskItem[]
 }
 
@@ -33,7 +34,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 4,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "1",
@@ -68,7 +70,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 2,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "5",
@@ -89,7 +92,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 3,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "7",
@@ -117,7 +121,8 @@ const IntegratedStrategy = () => {
         {
           name: "Multimedia",
           count: 1,
-          color: "bg-yellow-100",
+          color: "bg-[rgba(255,197,30,0.27)]",
+          highlight: "bg-[#FBBC05]",
           items: [
             {
               id: "10",
@@ -138,7 +143,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 3,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "11",
@@ -163,7 +169,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "14",
@@ -200,7 +207,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 5,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "19",
@@ -232,7 +240,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "22",
@@ -269,7 +278,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "27",
@@ -306,7 +316,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 2,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "32",
@@ -324,7 +335,8 @@ const IntegratedStrategy = () => {
     <div className="mb-4">
       <div className={`${category.color} px-3 py-2  border-blue-500`}>
         <div className="flex items-center gap-2">
-          <div className="w-2 h-5 bg-blue-500 rounded"></div>
+          <div className={`w-2 h-5 ${category.highlight} rounded`}></div>
+
           <span className="font-medium text-lg text-[#2B2D3B]">{category.name}</span>
           <span className="text-[#2B2D3B] text-lg font-bold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
         </div>
@@ -335,7 +347,7 @@ const IntegratedStrategy = () => {
             <div className="flex items-center gap-2">
               <span className="text-xl mt-0.5">{item.icon}</span>
               <span
-                className={`text-md font-semibold text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
+                className={`text-md font-normal text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
               >
                 {item.title}
               </span>