chore: edit vault modal ui fixes

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx

@@ -221,14 +221,16 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
     setShouldShowIconPicker((shouldShow) => !shouldShow)
   }, [])
 
+  const canShowMembers =
+    members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
+
   if (existingVault && application.vaultLocks.isVaultLocked(existingVault)) {
     return <div>Vault is locked.</div>
   }
 
   return (
     <Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
-      <div className="px-4.5 pb-1.5 pt-4">
-        <div className="flex w-full flex-col">
+      <div className="px-4.5 pb-1.5 pt-4 flex w-full flex-col">
         <div className="mb-3">
           <div className="text-lg">Vault Info</div>
           <div className="mt-1">The vault name and description are end-to-end encrypted.</div>
@@ -283,7 +285,7 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
           />
         </div>
 
-          {existingVault && (
+        {existingVault && canShowMembers && (
           <VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} />
         )}
 
@@ -291,15 +293,10 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
           <VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
         )}
 
-          <PasswordTypePreference
-            value={passwordType}
-            onChange={setPasswordType}
-            onCustomKeyChange={setCustomPassword}
-          />
+        <PasswordTypePreference value={passwordType} onChange={setPasswordType} onCustomKeyChange={setCustomPassword} />
 
         <KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
       </div>
-      </div>
     </Modal>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx

@@ -26,6 +26,7 @@ export const VaultModalInvites = ({
   return (
     <div className="mb-3">
       <div className="mb-3 text-lg">Pending Invites</div>
+      <div className="flex flex-col gap-3">
         {invites.map((invite) => {
           const contact = application.contacts.findContactForInvite(invite)
           return (
@@ -46,7 +47,6 @@ export const VaultModalInvites = ({
                     </div>
                   )}
                 </div>
-
                 {isAdmin && (
                   <Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
                 )}
@@ -55,5 +55,6 @@ export const VaultModalInvites = ({
           )
         })}
       </div>
+    </div>
   )
 }