chore: improve note view vault info style (#2488)

packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx

@@ -17,7 +17,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
     <div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden text-sm lg:text-xs">
       {tags.map((tag) => (
         <span
-          className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
+          className="inline-flex items-center rounded bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
           key={tag.uuid}
         >
           <Icon type={tag.iconString} className="mr-1 text-passive-1" size="small" />

packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react'
 import { useApplication } from '../ApplicationProvider'
-import Icon from '../Icon/Icon'
 import { DecryptedItemInterface, classNames } from '@standardnotes/snjs'
 import VaultNameBadge from '../Vaults/VaultNameBadge'
+import SharedByContactBadge from '../Vaults/SharedByContactBadge'
 
 type Props = {
   item: DecryptedItemInterface
@@ -30,15 +30,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item, className }) => {
   return (
     <div className={classNames('flex flex-wrap items-center gap-2', className)}>
       <VaultNameBadge vault={vault} />
-
-      {sharedByContact && (
-        <div title="Shared by contact" className="rounded bg-info px-1.5 py-1 text-neutral-contrast">
-          <span className="flex items-center" title="Shared by contact">
-            <Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
-            <div className="text-center text-xs font-bold">{sharedByContact?.name}</div>
-          </span>
-        </div>
-      )}
+      {sharedByContact && <SharedByContactBadge contact={sharedByContact} />}
     </div>
   )
 }