fix styling issues with secret rows

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -26,7 +26,8 @@ const replaceContentWithDot = (str: string) => {
 };
 
 const syntaxHighlight = (orgContent?: string | null, isVisible?: boolean) => {
-  if (!orgContent) return "";
+  if (orgContent === "") return "EMPTY";
+  if (!orgContent) return "missing";
   if (!isVisible) return replaceContentWithDot(orgContent);
   const content = stripSpanTags(orgContent);
   const newContent = content.replace(
@@ -69,7 +70,7 @@ export const SecretInput = ({
         dangerouslySetInnerHTML={{
           __html: syntaxHighlight(value, isVisible || isSecretFocused)
         }}
-        className="absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all"
+        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${!value && value !== "" && "text-red-600 italic"}`}
       />
       <ContentEditable
         className="relative z-10 h-full w-full text-ellipsis whitespace-pre-line  break-all text-transparent caret-white outline-none"

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -23,7 +23,7 @@ export const Tooltip = ({
   ...props
 }: TooltipProps) => (
   <TooltipPrimitive.Root
-    delayDuration={150}
+    delayDuration={50}
     open={isOpen}
     defaultOpen={defaultOpen}
     onOpenChange={onOpenChange}

frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx

@@ -30,7 +30,7 @@ export const FolderSection = memo(
               className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
             >
               <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
-                <FontAwesomeIcon icon={faFolder} className="text-primary-700" />
+                <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
               </td>
               <td
                 colSpan={2}

frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportItem.tsx

@@ -26,7 +26,7 @@ export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: st
     <div style={{ minWidth: "96px" }}>{env || "-"}</div>
     {secretPath && (
       <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
-        <FontAwesomeIcon icon={faFolder} size="lg" className="text-primary-700" />
+        <FontAwesomeIcon icon={faFolder} className="text-green-700 text-md" />
         <span>{secretPath}</span>
       </div>
     )}
@@ -66,7 +66,7 @@ export const SecretImportItem = ({
         onClick={() => setIsExpanded.toggle()}
       >
         <td className="ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4">
-          <FontAwesomeIcon icon={faFileImport} className="text-primary-700" />
+          <FontAwesomeIcon icon={faFileImport} className="text-green-700" />
         </td>
         <td
           colSpan={2}

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -261,7 +261,7 @@ export const SecretOverviewPage = () => {
         </div>
       </div>
       <div className="thin-scrollbar mt-4 max-h-[calc(100vh-250px)] overflow-y-auto" ref={parentTableRef}>
-        <TableContainer>
+        <TableContainer className="sticky top-0">
           <Table>
             <THead className="sticky top-0">
               <Tr>

frontend/src/views/SecretOverviewPage/components/FolderBreadCrumbs/FolderBreadCrumbs.tsx

@@ -33,7 +33,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) =>
         role="button"
         tabIndex={0}
       >
-        <FontAwesomeIcon icon={faFolderOpen} className="text-primary" />
+        <FontAwesomeIcon icon={faFolderOpen} className="text-primary-700" />
       </div>
       {(secretPath || "")
         .split("/")

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -63,7 +63,7 @@ export const SecretEditRow = ({
   };
 
   const handleFormSubmit = async ({ value }: { value?: string | null }) => {
-    if (value && secretName) {
+    if ((value || value === "") && secretName) {
       if (isCreatable) {
         await onSecretCreate(environment, secretName, value);
       } else {

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -1,9 +1,9 @@
 import { faCircle } from "@fortawesome/free-regular-svg-icons";
-import { faCheck, faEye, faEyeSlash, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faCheck, faEye, faEyeSlash, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, TableContainer, Td, Tr } from "@app/components/v2";
+import { Button, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 
@@ -35,12 +35,14 @@ export const SecretOverviewTableRow = ({
   return (
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
-        <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
-          <div className="flex items-center space-x-5">
-            <div className="text-blue-300/70">
-              <FontAwesomeIcon icon={faKey} />
+        <Td className={`sticky left-0 py-0 px-0 z-10 bg-mineshaft-800 bg-clip-padding group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"}`}>
+          <div className="w-full h-full border-x border-mineshaft-700 py-2.5 px-5">
+            <div className="flex items-center space-x-5">
+              <div className="text-blue-300/70">
+                <FontAwesomeIcon icon={isFormExpanded ? faAngleDown : faKey} />
+              </div>
+              <div>{secretKey}</div>
             </div>
-            <div>{secretKey}</div>
           </div>
         </Td>
         {environments.map(({ slug }, i) => {
@@ -51,15 +53,20 @@ export const SecretOverviewTableRow = ({
             <Td
               key={`sec-overview-${slug}-${i + 1}-value`}
               className={twMerge(
-                "border-x border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+                "py-0 px-0 group-hover:bg-mineshaft-700",
+                isFormExpanded && "border-t-2 border-mineshaft-500",
                 isSecretPresent && !isSecretEmpty ? "text-green-600" : "",
                 isSecretPresent && isSecretEmpty ? "text-yellow" : "",
                 !isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
               )}
             >
-              <div className="flex justify-center">
-                {!isSecretEmpty && <FontAwesomeIcon icon={!isSecretPresent ? faCheck : faXmark} />}
-                {isSecretEmpty && <FontAwesomeIcon icon={faCircle} />}
+              <div className="w-full h-full py-[0.85rem] px-5 border-r border-mineshaft-600">
+                <div className="flex justify-center">
+                  {!isSecretEmpty && <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />}
+                  {isSecretEmpty && <Tooltip content="Empty value">
+                    <FontAwesomeIcon icon={faCircle} />
+                  </Tooltip>}
+                </div>
               </div>
             </Td>
           );
@@ -67,14 +74,14 @@ export const SecretOverviewTableRow = ({
       </Tr>
       {isFormExpanded && (
         <Tr>
-          <Td colSpan={totalCols}>
+          <Td colSpan={totalCols} className={`px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"}`}>
             <div
-              className="rounded-md bg-bunker-700 p-2"
+              className="rounded-md bg-bunker-600 p-2"
               style={{
                 width: `calc(${expandableColWidth}px - 2rem)`,
-                position: "sticky",
-                left: "1.25rem",
-                right: "1.25rem"
+                // position: "sticky",
+                // left: "1.25rem",
+                // right: "1.25rem"
               }}
             >
               <TableContainer>