chore: improve vault ui element sizing

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx

@@ -30,23 +30,23 @@ const ContactItem = ({ contact }: Props) => {
         <EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
       </ModalOverlay>
 
-      <div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+      <div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
         <Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
-        <div className="flex flex-col gap-1 py-1.5 overflow-hidden">
+        <div className="flex flex-col gap-1 overflow-hidden py-1.5">
           <span
             className={classNames(
-              'mr-auto overflow-hidden text-ellipsis text-base font-bold w-full',
+              'w-full overflow-hidden text-ellipsis text-base font-bold',
               contact.isMe ? 'text-info' : '',
             )}
           >
             {contact.name}
           </span>
 
-          <span className="mr-auto overflow-hidden text-ellipsis text-sm w-full">{collaborationID}</span>
+          <span className="w-full overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
 
-          <div className="mt-2.5 flex flex-row">
+          <div className="mt-1.5 flex flex-row">
-            <Button label="Edit" className={'mr-3 text-xs'} onClick={() => setIsContactModalOpen(true)} />
+            <Button label="Edit" className="mr-3" onClick={() => setIsContactModalOpen(true)} />
-            {!contact.isMe && <Button label="Delete" className={'mr-3 text-xs'} onClick={deleteContact} />}
+            {!contact.isMe && <Button label="Delete" className="mr-3" onClick={deleteContact} />}
           </div>
         </div>
       </div>

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

@@ -154,7 +154,7 @@ const Vaults = () => {
               </div>
             )}
             <div className="mt-2.5 flex flex-row">
-              <Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
+              <Button label="Add New Contact" className="mr-3" onClick={createNewContact} />
             </div>
           </PreferencesSegment>
         </PreferencesGroup>
@@ -172,7 +172,7 @@ const Vaults = () => {
           )}
           {canCreateMoreVaults ? (
             <div className="mt-2.5 flex flex-row">
-              <Button label="Create New Vault" className={'mr-3 text-xs'} onClick={createNewVault} />
+              <Button label="Create New Vault" className="mr-3" onClick={createNewVault} />
             </div>
           ) : (
             <div className="mt-3.5">

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx

@@ -141,36 +141,23 @@ const VaultItem = ({ vault }: Props) => {
       <div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
         <Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-1.5 py-1.5">
-          <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
+          <span className="overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
-          {vault.description && (
+          {vault.description && <span className="overflow-hidden text-ellipsis text-sm">{vault.description}</span>}
-            <span className="mr-auto overflow-hidden text-ellipsis text-sm">{vault.description}</span>
+          <span className="overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
-          )}
-          <span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
-
           {!!vault.sharing?.fileBytesUsed && (
-            <span className="mr-auto overflow-hidden text-ellipsis text-sm">
+            <span className="overflow-hidden text-ellipsis text-sm">
               File storage used: {formatSizeToReadableString(vault.sharing?.fileBytesUsed ?? 0)}
             </span>
           )}
-
           <div className="mt-2 flex w-full flex-wrap gap-3">
-            <Button label="Edit" className="text-xs" onClick={openEditModal} />
+            <Button label="Edit" onClick={openEditModal} />
-            {isVaultLockable && (
+            {isVaultLockable && <Button label={isVaultLocked ? 'Unlock' : 'Lock'} onClick={toggleLock} />}
-              <Button label={isVaultLocked ? 'Unlock' : 'Lock'} className="text-xs" onClick={toggleLock} />
+            {isAdmin && <Button colorStyle="danger" label="Delete" onClick={deleteVault} />}
-            )}
+            {!isAdmin && vault.isSharedVaultListing() && <Button label="Leave Vault" onClick={leaveVault} />}
-            {isAdmin && <Button colorStyle="danger" label="Delete" className="text-xs" onClick={deleteVault} />}
-            {!isAdmin && vault.isSharedVaultListing() && (
-              <Button label="Leave Vault" className="text-xs" onClick={leaveVault} />
-            )}
             {vault.isSharedVaultListing() ? (
-              <Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
+              <Button colorStyle="info" label="Invite Contacts" onClick={openInviteModal} />
             ) : application.hasAccount() ? (
-              <Button
+              <Button colorStyle="info" label="Enable Collaboration" onClick={convertToSharedVault} />
-                colorStyle="info"
-                label="Enable Collaboration"
-                className="text-xs"
-                onClick={convertToSharedVault}
-              />
             ) : null}
           </div>
         </div>

packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx

@@ -61,12 +61,8 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
             void removeItemsFromVault()
           }}
         >
-          <span className="flex overflow-hidden overflow-ellipsis whitespace-nowrap">
+          <Icon type="close" className="mr-2 text-neutral" />
-            <Icon type="close" className="mr-2 text-neutral" />
+          Move out of {singleItemVault ? singleItemVault.name : 'vaults'}
-            <div className="flex w-full items-center gap-1">
-              Move out of {singleItemVault ? singleItemVault.name : 'vaults'}
-            </div>
-          </span>
         </MenuItem>
       )}
       {!vaults.length && <div className="flex flex-col items-center justify-center py-1">No vaults found</div>}
@@ -81,23 +77,20 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
             onClick={() => {
               doesVaultContainItems(vault) ? void removeItemsFromVault() : void addItemsToVault(vault)
             }}
+            className={doesVaultContainItems(vault) ? 'font-bold' : ''}
           >
-            <span
+            <Icon
+              type={vault.iconString}
+              size="custom"
               className={classNames(
-                'flex overflow-ellipsis whitespace-nowrap',
+                'mr-2 h-6 w-6 text-neutral md:h-5 md:w-5',
-                doesVaultContainItems(vault) ? 'font-bold' : '',
+                doesVaultContainItems(vault) ? 'text-info' : '',
               )}
-            >
+            />
-              <Icon
+            <div className="flex w-full items-center">
-                type={vault.iconString}
+              {vault.name}
-                size="large"
+              {application.vaultLocks.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
-                className={classNames('mr-2 text-neutral', doesVaultContainItems(vault) ? 'text-info' : '')}
+            </div>
-              />
-              <div className="flex w-full items-center">
-                {vault.name}
-                {application.vaultLocks.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
-              </div>
-            </span>
           </MenuItem>
         )
       })}