feat(platform): Enhance secret card table styling and interactivity

keyshade-xyz · Jan 25, 2025 · f2f4983 · f2f4983
1 parent 75b3150
commit f2f4983
Showing 1 changed file with 19 additions and 10 deletions.
diff --git 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>
               )