fixing style and solving merge conflicts

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -340,7 +340,10 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
     }
   };
 
-  const onAppendSecret = () => append(DEFAULT_SECRET_VALUE);
+  const onAppendSecret = () => { 
+    setSearchFilter("");
+    append(DEFAULT_SECRET_VALUE)
+  };
 
   const onSaveSecret = async ({ secrets: userSec = [], isSnapshotMode }: FormData) => {
     if (isSnapshotMode) {
@@ -700,6 +703,7 @@ export const DashboardPage = ({ envFromTop }: { envFromTop: string }) => {
                           });
                         }
                         prepend(DEFAULT_SECRET_VALUE, { shouldFocus: false });
+                        setSearchFilter("");
                       }}
                       isDisabled={isReadOnly || isRollbackMode}
                       variant="outline_bg"

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

@@ -4,8 +4,7 @@ import { faEye, faEyeSlash, faKey, faMinus } from "@fortawesome/free-solid-svg-i
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useSyntaxHighlight } from "@app/hooks";
-
-import { useToggle } from "~/hooks/useToggle";
+import { useToggle } from "@app/hooks/useToggle";
 
 type Props = {
   secrets: any[] | undefined;
@@ -71,6 +70,8 @@ const DashboardInput = ({
             ref={ref}
             className={`absolute top-1.5 left-3.5 z-10 overflow-auto font-mono text-sm transition-all no-scrollbar ${
               isOverridden && "text-primary-300"
+            } ${
+              (value || "") === "" && "text-mineshaft-400"
             }`}
             style={{ height: `${maxMultilineHeight}px`, width: "calc(100% - 12px)" }}
           >

frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx

@@ -94,6 +94,8 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
           ref={ref}
           className={`absolute top-1.5 left-3.5 z-10 w-full overflow-auto font-mono text-sm transition-all no-scrollbar ${
             isOverridden && "text-primary-300"
+          } ${
+            (value || "") === "" && "text-mineshaft-400"
           }`}
           style={{ height: `${maxMultilineHeight}px`, width: "calc(100% - 12px)" }}
         >