Minor styling updates

frontend/src/components/dashboard/CompareSecretsModal.tsx

@@ -1,6 +1,7 @@
 import { SetStateAction, useEffect, useState } from 'react';
+import Image from 'next/image';
 
-import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+import { WorkspaceEnv } from '@app/hooks/api/types';
 
 import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
 import { Modal, ModalContent } from '../v2';
@@ -33,9 +34,10 @@ const CompareSecretsModal = ({
   const [secrets, setSecrets] = useState<Secrets[]>([]);
 
   const getEnvSecrets = async () => {
-    const workspaceEnvironments = workspaceEnvs.filter((env) => env !== selectedEnv);
+    const workspaceEnvironments = workspaceEnvs?.filter((env) => env !== selectedEnv);
     const newSecrets = await Promise.all(
       workspaceEnvironments.map(async (env) => {
+        // #TODO: optimize this query somehow...
         const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
         const secret =
           allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
@@ -57,16 +59,27 @@ const CompareSecretsModal = ({
     <Modal isOpen={compareModal} onOpenChange={setCompareModal}>
       <ModalContent title={currentSecret?.key} onOpenAutoFocus={(e) => e.preventDefault()}>
         <div className="space-y-4">
-          {secrets.map((item) => (
-            <div key={`${currentSecret.key}${item.label}`} className="space-y-1">
-              <p className="text-sm text-bunker-300">{item.label}</p>
-              <input
-                defaultValue={item.secret}
-                className="h-no-capture text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
-                readOnly
+          {secrets.length === 0 ? (
+            <div className="flex items-center bg-bunker-900 justify-center h-full py-4 rounded-md">
+              <Image
+                src="/images/loading/loading.gif"
+                height={60}
+                width={100}
+                alt="infisical loading indicator"
               />
             </div>
-          ))}
+          ) : (
+            secrets.map((item) => (
+              <div key={`${currentSecret.key}${item.label}`} className="space-y-0.5">
+                <p className="text-sm text-bunker-300">{item.label}</p>
+                <input
+                  defaultValue={item.secret}
+                  className="h-no-capture border border-mineshaft-500 text-md min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full rounded-md bg-bunker-800 px-2 py-1.5 font-mono text-gray-400 caret-white outline-none duration-200 no-scrollbar focus:ring-2 focus:ring-primary/50 "
+                  readOnly
+                />
+              </div>
+            ))
+          )}
         </div>
       </ModalContent>
     </Modal>

frontend/src/components/dashboard/SideBar.tsx

@@ -6,8 +6,7 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import SecretVersionList from '@app/ee/components/SecretVersionList';
-
-import { WorkspaceEnv } from '~/pages/dashboard/[id]';
+import { WorkspaceEnv } from '@app/hooks/api/types';
 
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
@@ -181,7 +180,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="mt-full mt-4 mb-[4.7rem] flex max-w-sm flex-col justify-start space-y-2 px-4">
+      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
         <div>
           <Button
             text="Compare secret across environments"

frontend/src/components/v2/Modal/Modal.tsx

@@ -25,7 +25,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-md',
+            'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-50',
             className
           )}
         >

frontend/src/pages/dashboard/[id].tsx

@@ -539,6 +539,9 @@ export default function Dashboard() {
             modifyValueOverride={listenChangeValueOverride}
             modifyComment={listenChangeComment}
             buttonReady={buttonReady}
+            workspaceEnvs={workspaceEnvs}
+            selectedEnv={selectedEnv}
+            workspaceId={workspaceId}
             savePush={savePush}
             sharedToHide={sharedToHide}
             setSharedToHide={setSharedToHide}
@@ -870,7 +873,6 @@ export default function Dashboard() {
     </div>
   ) : (
     <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full" />
       <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
     </div>
   );

frontend/src/pages/users/[id].tsx

@@ -207,7 +207,6 @@ export default function Users() {
     </div>
   ) : (
     <div className="relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center">
-      <div className="absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full" />
       <Image src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
     </div>
   );