minor frontend UX fixes

frontend/src/views/DashboardPage/DashboardPage.tsx

@@ -950,6 +950,7 @@ export const DashboardPage = () => {
                       secrets={secrets?.secrets}
                       importedSecrets={importedSecrets}
                       items={items}
+                      searchTerm={searchFilter}
                     />
                     <FolderSection
                       onFolderOpen={handleFolderOpen}

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

@@ -18,6 +18,7 @@ type Props = {
   importedEnv: string;
   importedSecPath: string;
   importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
+  searchTerm: string;
 };
 
 // to show the environment and folder icon
@@ -37,7 +38,8 @@ export const SecretImportItem = ({
   importedEnv,
   importedSecPath,
   onDelete,
-  importedSecrets = []
+  importedSecrets = [],
+  searchTerm = ""
 }: Props) => {
   const [isExpanded, setIsExpanded] = useToggle();
   const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
@@ -46,6 +48,17 @@ export const SecretImportItem = ({
   const { currentWorkspace } = useWorkspace();
   const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
 
+  useEffect(() => {
+    const filteredSecrets = importedSecrets.filter(secret => secret.key.toUpperCase().includes(searchTerm.toUpperCase()))
+
+    if (filteredSecrets.length > 0 && searchTerm) {
+      setIsExpanded.on();
+    } else {
+      setIsExpanded.off();
+    }
+  }, [searchTerm]);
+
+
   useEffect(() => {
     if (isDragging) {
       setIsExpanded.off();
@@ -65,8 +78,10 @@ export const SecretImportItem = ({
         className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
         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-green-700" />
+        <td className={`ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4 ${isExpanded && "border-t-2 border-mineshaft-500"}`}>
+          <Tooltip content="Secret Import" className="capitalize">
+            <FontAwesomeIcon icon={faFileImport} className="text-green-700" />
+          </Tooltip>
         </td>
         <td
           colSpan={2}
@@ -112,9 +127,8 @@ export const SecretImportItem = ({
       </tr>
       <tr>
         {isExpanded && !isDragging && (
-          <td colSpan={3}>
-            <div className="rounded-md bg-bunker-700 p-4 pb-6">
-              <div className="mb-2 text-lg font-medium">Secrets Imported</div>
+          <td colSpan={3} className={`bg-bunker-800 ${isExpanded && "border-b-2 border-mineshaft-500"}`}>
+            <div className="rounded-md bg-bunker-700 p-1">
               <TableContainer>
                 <table className="secret-table">
                   <thead>
@@ -132,7 +146,7 @@ export const SecretImportItem = ({
                         </td>
                       </tr>
                     )}
-                    {importedSecrets.map(({ key, value, overriden }, index) => (
+                    {importedSecrets.filter(secret => secret.key.toUpperCase().includes(searchTerm.toUpperCase())).map(({ key, value, overriden }, index) => (
                       <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           {key}

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

@@ -61,10 +61,11 @@ type Props = {
   importedSecrets?: TImportedSecrets;
   onSecretImportDelete: (env: string, secPath: string) => void;
   items: { id: string; environment: string; secretPath: string }[];
+  searchTerm: string;
 };
 
 export const SecretImportSection = memo(
-  ({ secrets = [], importedSecrets = [], onSecretImportDelete, items = [] }: Props) => {
+  ({ secrets = [], importedSecrets = [], onSecretImportDelete, items = [], searchTerm = "" }: Props) => {
     const { currentWorkspace } = useWorkspace();
     const environments = currentWorkspace?.environments || [];
 
@@ -83,6 +84,7 @@ export const SecretImportSection = memo(
             )}
             onDelete={onSecretImportDelete}
             importedSecPath={impSecPath}
+            searchTerm={searchTerm}
           />
         ))}
       </SortableContext>

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

@@ -219,7 +219,7 @@ export const SecretInputRow = memo(
     }
 
     return (
-      <tr className="group flex flex-row" key={index}>
+      <tr className="group flex flex-row hover:bg-mineshaft-700" key={index}>
         <td className="flex h-10 w-10 items-center justify-center border-none px-4">
           <div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
         </td>

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -288,8 +288,14 @@ export const SecretOverviewPage = () => {
                       className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
                       key={`secret-overview-${name}-${index + 1}`}
                     >
-                      <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-4 pb-3.5">
-                        {name}
+                      <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-3">
+                        <button
+                          type="button"
+                          className="font-medium hover:text-mineshaft-100 duration-100 text-sm"
+                          onClick={() => handleExploreEnvClick(slug)}
+                        >
+                          {name}
+                        </button>
                         {missingKeyCount > 0 && (
                           <Tooltip
                             className="max-w-none lowercase"

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -17,7 +17,7 @@ const tabs = [
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex h-full w-full justify-center bg-bunker-800 px-6 text-white">
+    <div className="flex w-full justify-center bg-bunker-800 px-6 text-white">
       <div className="w-full max-w-screen-lg">
         <div className="relative right-5 ml-4">
           <NavHeader pageName={t("settings.project.title")} isProjectRelated />