trello borders

src/components/IntegratedStrategy.tsx

@@ -34,7 +34,7 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 4,
-          color: "bg-[rgba(60,135,255,0.17)]",
+          color: "bg-[rgba(0,30,226,0.11)]",
           highlight: "bg-[#4C60E5]",
           items: [
             {
@@ -70,7 +70,7 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 2,
-          color: "bg-[rgba(0,30,226,0.11)]",
+          color: "bg-[rgba(60,135,255,0.17)]",
           highlight: "bg-[#4285F4]",
           items: [
             {
@@ -143,7 +143,7 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 3,
-          color: "bg-[rgba(60,135,255,0.17)]",
+          color: "bg-[rgba(0,30,226,0.11)]",
           highlight: "bg-[#4C60E5]",
           items: [
             {
@@ -169,7 +169,7 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-[rgba(0,30,226,0.11)]",
+          color: "bg-[rgba(60,135,255,0.17)]",
           highlight: "bg-[#4285F4]",
           items: [
             {
@@ -240,7 +240,7 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 5,
-          color: "bg-[rgba(60,135,255,0.17)]",
+          color: "bg-[rgba(0,30,226,0.11)]",
           highlight: "bg-[#4C60E5]",
           items: [
             {
@@ -278,7 +278,7 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-[rgba(0,30,226,0.11)]",
+          color: "bg-[rgba(60,135,255,0.17)]",
           highlight: "bg-[#4285F4]",
           items: [
             {
@@ -332,8 +332,8 @@ const IntegratedStrategy = () => {
   ]
 
   const CategorySection = ({ category }: { category: Category }) => (
-    <div className="mb-4">
-      <div className={`${category.color} px-3 py-2  border-blue-500`}>
+    <div className="mb-4 ">
+      <div className={`${category.color} px-3 py-2 mt-2  mb-2 ml-2 mr-2 rounded-xl border-blue-500`}>
         <div className="flex items-center gap-2">
           <div className={`w-2 h-5 ${category.highlight} rounded`}></div>
 
@@ -341,7 +341,7 @@ const IntegratedStrategy = () => {
           <span className="text-[#2B2D3B] text-lg font-semibold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
         </div>
       </div>
-      <div className="bg-white border border-t-0 rounded-b-md">
+      <div className="bg-white border border-l-0 border-r-0 rounded-b-md">
         {category.items.map((item) => (
           <div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
             <div className="flex items-center gap-2">
@@ -366,7 +366,7 @@ const IntegratedStrategy = () => {
             <div className="border-b border-gray-200 bg-[#f6f6fa] p-4 rounded-t-lg">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-[#2B2D3B]">{column.title}</h2>
+                  <h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
                   <span className="text-[#2B2D3B] bg-[#e9eaf1] px-2 py-1 rounded-full text-md  font-semibold">
                     {column.count}
                   </span>