From f2f4983df400c654fa40db9e37b5894ca713e77f Mon Sep 17 00:00:00 2001
From: kriptonian1 <shymal.sawan@gmail.com>
Date: Sat, 25 Jan 2025 10:02:15 +0530
Subject: [PATCH] feat(platform): Enhance secret card table styling and
 interactivity

---
 .../dashboard/secret/secretCard/index.tsx     | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/platform/src/components/dashboard/secret/secretCard/index.tsx b/apps/platform/src/components/dashboard/secret/secretCard/index.tsx
index e9cfe824..9e1adc8a 100644
--- a/apps/platform/src/components/dashboard/secret/secretCard/index.tsx
+++ b/apps/platform/src/components/dashboard/secret/secretCard/index.tsx
@@ -67,22 +67,31 @@ export default function SecretCard({
         </div>
       </AccordionTrigger>
       <AccordionContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Environment</TableHead>
-              <TableHead>Value</TableHead>
+        <Table className="h-full w-full">
+          <TableHeader className="h-[3.125rem] w-full">
+            <TableRow className="h-[3.125rem] w-full hover:bg-[#232424]">
+              <TableHead className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
+                Environment
+              </TableHead>
+              <TableHead className="h-full border-2 border-white/30 text-base font-normal text-white">
+                Value
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {values.map((value) => {
               return (
-                <TableRow key={value.environment.id}>
-                  <TableCell>
-                    {value.environment.name} ({value.environment.slug})
+                <TableRow
+                  className="h-[3.125rem] w-full hover:cursor-pointer hover:bg-[#232424]"
+                  key={value.environment.id}
+                >
+                  <TableCell className="h-full w-[10.25rem] border-2 border-white/30 text-base font-bold text-white">
+                    {value.environment.name}
                   </TableCell>
-                  <TableCell className="max-w-40 overflow-auto">
-                    {isDecrypted ? value.value : 'Hidden'}
+                  <TableCell className="h-full border-2 border-white/30 text-base font-normal text-white">
+                    {isDecrypted
+                      ? value.value
+                      : value.value.replace(/./g, '*').substring(0, 20)}
                   </TableCell>
                 </TableRow>
               )