chore: edit vault modal ui fixes

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

@@ -221,84 +221,81 @@ 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="mb-3">
-            <div className="text-lg">Vault Info</div>
-            <div className="mt-1">The vault name and description are end-to-end encrypted.</div>
-
-            <div className="flex items-center mt-4 gap-4">
-              <StyledTooltip className="!z-modal" label="Choose icon">
-                <Button className="!px-1.5" ref={iconPickerButtonRef} onClick={toggleIconPicker}>
-                  <Icon type={iconString} />
-                </Button>
-              </StyledTooltip>
-              <Popover
-                title="Choose icon"
-                open={shouldShowIconPicker}
-                anchorElement={iconPickerButtonRef.current}
-                togglePopover={toggleIconPicker}
-                align="start"
-                overrideZIndex="z-modal"
-                hideOnClickInModal
-              >
-                <div className="p-2">
-                  <IconPicker
-                    selectedValue={iconString || 'safe-square'}
-                    onIconChange={(value?: VectorIconNameOrEmoji) => {
-                      setIconString(value ?? 'safe-square')
-                      toggleIconPicker()
-                    }}
-                    platform={application.platform}
-                    useIconGrid={true}
-                  />
-                </div>
-              </Popover>
-              <DecoratedInput
-                className={{
-                  container: 'flex-grow',
-                }}
-                ref={nameInputRef}
-                value={name}
-                placeholder="Vault Name"
-                onChange={(value) => {
-                  setName(value)
-                }}
-              />
-            </div>
+      <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>
 
+          <div className="flex items-center mt-4 gap-4">
+            <StyledTooltip className="!z-modal" label="Choose icon">
+              <Button className="!px-1.5" ref={iconPickerButtonRef} onClick={toggleIconPicker}>
+                <Icon type={iconString} />
+              </Button>
+            </StyledTooltip>
+            <Popover
+              title="Choose icon"
+              open={shouldShowIconPicker}
+              anchorElement={iconPickerButtonRef.current}
+              togglePopover={toggleIconPicker}
+              align="start"
+              overrideZIndex="z-modal"
+              hideOnClickInModal
+            >
+              <div className="p-2">
+                <IconPicker
+                  selectedValue={iconString || 'safe-square'}
+                  onIconChange={(value?: VectorIconNameOrEmoji) => {
+                    setIconString(value ?? 'safe-square')
+                    toggleIconPicker()
+                  }}
+                  platform={application.platform}
+                  useIconGrid={true}
+                />
+              </div>
+            </Popover>
             <DecoratedInput
-              className={{ container: 'mt-4' }}
-              value={description}
-              placeholder="Vault description"
+              className={{
+                container: 'flex-grow',
+              }}
+              ref={nameInputRef}
+              value={name}
+              placeholder="Vault Name"
               onChange={(value) => {
-                setDescription(value)
+                setName(value)
               }}
             />
           </div>
 
-          {existingVault && (
-            <VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} />
-          )}
-
-          {existingVault && invites.length > 0 && (
-            <VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
-          )}
-
-          <PasswordTypePreference
-            value={passwordType}
-            onChange={setPasswordType}
-            onCustomKeyChange={setCustomPassword}
+          <DecoratedInput
+            className={{ container: 'mt-4' }}
+            value={description}
+            placeholder="Vault description"
+            onChange={(value) => {
+              setDescription(value)
+            }}
           />
-
-          <KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
         </div>
+
+        {existingVault && canShowMembers && (
+          <VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} />
+        )}
+
+        {existingVault && invites.length > 0 && (
+          <VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
+        )}
+
+        <PasswordTypePreference value={passwordType} onChange={setPasswordType} onCustomKeyChange={setCustomPassword} />
+
+        <KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
       </div>
     </Modal>
   )

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

@@ -26,34 +26,35 @@ export const VaultModalInvites = ({
   return (
     <div className="mb-3">
       <div className="mb-3 text-lg">Pending Invites</div>
-      {invites.map((invite) => {
-        const contact = application.contacts.findContactForInvite(invite)
-        return (
-          <div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
-            <Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
-            <div className="flex flex-col gap-2 py-1.5">
-              <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
-                <span>{contact?.name || invite.user_uuid}</span>
-                {contact ? (
-                  <div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5">
-                    <Icon type="check-circle" size="small" />
-                    Trusted
-                  </div>
-                ) : (
-                  <div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5">
-                    <Icon type="clear-circle-filled" size="small" />
-                    Untrusted
-                  </div>
+      <div className="flex flex-col gap-3">
+        {invites.map((invite) => {
+          const contact = application.contacts.findContactForInvite(invite)
+          return (
+            <div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+              <Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
+              <div className="flex flex-col gap-2 py-1.5">
+                <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
+                  <span>{contact?.name || invite.user_uuid}</span>
+                  {contact ? (
+                    <div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5">
+                      <Icon type="check-circle" size="small" />
+                      Trusted
+                    </div>
+                  ) : (
+                    <div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5">
+                      <Icon type="clear-circle-filled" size="small" />
+                      Untrusted
+                    </div>
+                  )}
+                </div>
+                {isAdmin && (
+                  <Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
                 )}
               </div>
-
-              {isAdmin && (
-                <Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
-              )}
             </div>
-          </div>
-        )
-      })}
+          )
+        })}
+      </div>
     </div>
   )
 }