feat: useing card instead of wrapper, and some minor cleanups

Author: dahal

src/app/(authenticated)/(dashboard)/[publicId]/stakeholders/page.tsx

@@ -1,7 +1,7 @@
-import BorderWrapper from "@/components/shared/BorderWrapper";
 import MemberModal from "@/components/stakeholder/member-modal";
 import MemberTable from "@/components/stakeholder/member-table";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 
 import { api } from "@/trpc/server";
 import { RiAddLine } from "@remixicon/react";
@@ -38,9 +38,9 @@ const StakeholdersPage = async () => {
         </div>
       </div>
 
-      <BorderWrapper className="mt-3">
+      <Card className="mt-3">
         <MemberTable members={members.data} />
-      </BorderWrapper>
+      </Card>
     </div>
   );
 };

src/components/dashboard/overview/activities-card.tsx

@@ -110,11 +110,11 @@ const DonutCard = ({ title, className }: Props) => {
                     </div>
                     <div className="min-w-0 flex-1 py-1.5">
                       <div className="text-sm text-gray-500">
-                        <span className="font-medium text-gray-900">
+                        <span className="font-medium text-primary/80">
                           {activityItem.summary}
                         </span>{" "}
                         <br />
-                        <span className="whitespace-nowrap">
+                        <span className="whitespace-nowrap text-xs">
                           {activityItem.date}
                         </span>
                       </div>
@@ -129,7 +129,7 @@ const DonutCard = ({ title, className }: Props) => {
         <div className="mt-6">
           <button
             type="button"
-            className="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white py-1 text-sm text-gray-700 hover:bg-gray-50"
+            className="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white py-1 text-sm text-primary/85 hover:bg-gray-50"
           >
             View all activity
           </button>

src/components/dashboard/overview/donut-card.tsx

@@ -91,15 +91,15 @@ const DonutCard = () => {
 
           <CardContent>
             <div className="grid grid-cols-2 gap-4">
-              <ScrollArea className="h-60 w-full py-4">
+              <ScrollArea className="h-60 w-full py-4 pr-8">
                 <ul className="space-y-3 text-sm">
                   {selected === "stakeholder"
                     ? stakeholders.map((stakeholder) => (
                         <li
                           key={stakeholder.key}
                           className="flex justify-between"
                         >
-                          <span>{stakeholder.key}</span>
+                          <span className="font-medium">{stakeholder.key}</span>
                           <span>{stakeholder.value}%</span>
                         </li>
                       ))
@@ -108,7 +108,7 @@ const DonutCard = () => {
                           key={stakeholder.key}
                           className="flex justify-between"
                         >
-                          <span>{stakeholder.key}</span>
+                          <span className="font-medium">{stakeholder.key}</span>
                           <span>{stakeholder.value}%</span>
                         </li>
                       ))}

src/components/shared/BorderWrapper.tsx

@@ -328,8 +328,8 @@ const MemberTable = ({ members }: MembersType) => {
   });
 
   return (
-    <div className="w-full">
-      <div className="flex items-center py-4">
+    <div className="w-full p-6">
+      <div className="flex items-center">
         <Input
           placeholder="Search by name..."
           value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
@@ -365,7 +365,8 @@ const MemberTable = ({ members }: MembersType) => {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+
+      <div className="mt-6 rounded-md border">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (