chore: fix issue where vault admin wouldn't show up in members list and improve styles

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

@@ -225,9 +225,6 @@ const EditVaultModalContent: FunctionComponent<{
     setShouldShowIconPicker((shouldShow) => !shouldShow)
   }, [])
 
-  const canShowMembers =
-    members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
-
   const advancedOptionsDisclosure = useDisclosureStore()
   const isShowingAdvancedOptions = advancedOptionsDisclosure.useState('open')
 
@@ -299,12 +296,12 @@ const EditVaultModalContent: FunctionComponent<{
             </div>
           ) : (
             <>
-              {canShowMembers && (
+              {members.length > 0 && (
                 <VaultModalMembers
                   vault={existingVault}
                   members={members}
                   onChange={reloadVaultInfo}
-                  isAdmin={isAdmin}
+                  isCurrentUserAdmin={isAdmin}
                 />
               )}
               {invites.length > 0 && (

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

@@ -24,34 +24,40 @@ export const VaultModalInvites = ({
   )
 
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Pending Invites</div>
-      <div className="flex flex-col gap-3">
+      <div className="space-y-3.5">
         {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">
+            <div
-              <Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
+              key={invite.uuid}
-              <div className="flex flex-col gap-2 py-1.5">
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
+            >
+              <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
               <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">
+                  <div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
                     <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">
+                  <div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
                     <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)} />
+                <Button
+                  label="Cancel Invite"
+                  className="col-start-2 row-start-2"
+                  onClick={() => deleteInvite(invite)}
+                  small
+                />
               )}
             </div>
-            </div>
           )
         })}
       </div>

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

@@ -6,13 +6,13 @@ import Button from '@/Components/Button/Button'
 
 export const VaultModalMembers = ({
   members,
-  isAdmin,
+  isCurrentUserAdmin,
   vault,
   onChange,
 }: {
   members: SharedVaultUserServerHash[]
   vault: VaultListingInterface
-  isAdmin: boolean
+  isCurrentUserAdmin: boolean
   onChange: () => void
 }) => {
   const application = useApplication()
@@ -28,44 +28,44 @@ export const VaultModalMembers = ({
   )
 
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Vault Members</div>
+      <div className="space-y-3.5">
         {members.map((member) => {
-        if (application.vaultUsers.isVaultUserOwner(member)) {
+          const isMemberVaultOwner = application.vaultUsers.isVaultUserOwner(member)
-          return null
-        }
-
           const contact = application.contacts.findContactForServerUser(member)
           return (
             <div
               key={contact?.uuid || member.user_uuid}
-            className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md"
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
             >
-            <Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
+              <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
-            <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 className="mr-auto overflow-hidden text-ellipsis text-base font-bold">
+                <span>{contact?.name || member.user_uuid}</span>
-                {contact?.name || member.user_uuid}
+                {contact ? (
-              </span>
+                  <div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
-              {contact && <span className="text-info">Trusted</span>}
+                    <Icon type="check-circle" size="small" />
-              {!contact && (
+                    Trusted
-                <div>
+                  </div>
-                  <span className="text-base">Untrusted</span>
+                ) : (
+                  <div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
+                    <Icon type="clear-circle-filled" size="small" />
+                    Untrusted
                   </div>
                 )}
-
+              </div>
-              {isAdmin && (
+              {isCurrentUserAdmin && !isMemberVaultOwner && (
-                <div className="mt-2.5 flex flex-row">
                 <Button
+                  className="col-start-2 row-start-2"
                   label="Remove From Vault"
-                    className={'mr-3 text-xs'}
                   onClick={() => removeMemberFromVault(member)}
+                  small
                 />
-                </div>
               )}
             </div>
-          </div>
           )
         })}
       </div>
+    </div>
   )
 }