chore: fix vault badge styling

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

@@ -28,11 +28,11 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
   const sharedByContact = application.sharedVaults.getItemSharedBy(item)
 
   return (
-    <div className="mt-1 flex flex-wrap items-center gap-2">
+    <div className="mt-2.5 flex flex-wrap items-center gap-2">
       <VaultNameBadge vault={vault} />
 
       {sharedByContact && (
-        <div title="Shared by contact" className={'mt-2 rounded bg-info px-1.5 py-1 text-neutral-contrast'}>
+        <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>

packages/web/src/javascripts/Components/Icon/Icon.tsx

@@ -4,11 +4,14 @@ import { IconNameToSvgMapping } from './IconNameToSvgMapping'
 import { classNames } from '@standardnotes/utils'
 import { LexicalIconName, LexicalIconNameToSvgMapping } from './LexicalIcons'
 
+type Size = 'small' | 'medium' | 'normal' | 'large' | 'custom'
+
 type Props = {
   type: VectorIconNameOrEmoji | LexicalIconName
   className?: string
   ariaLabel?: string
-  size?: 'small' | 'medium' | 'normal' | 'large' | 'custom'
+  size?: Size
+  emojiSize?: Size
 }
 
 const ContainerDimensions = {
@@ -54,7 +57,7 @@ export const isIconEmoji = (type: VectorIconNameOrEmoji): boolean => {
   return getIconComponent(type) == undefined
 }
 
-const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel, size = 'normal' }) => {
+const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel, size = 'normal', emojiSize }) => {
   const IconComponent = getIconComponent(type)
   if (!IconComponent) {
     return (
@@ -62,9 +65,9 @@ const Icon: FunctionComponent<Props> = ({ type, className = '', ariaLabel, size
         className={classNames(
           'fill-current',
           'text-center',
-          EmojiSize[size],
-          EmojiContainerDimensions[size],
-          EmojiOffset[size],
+          EmojiSize[emojiSize || size],
+          EmojiContainerDimensions[emojiSize || size],
+          EmojiOffset[emojiSize || size],
           className,
         )}
       >

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

@@ -8,8 +8,17 @@ type Props = {
 
 const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
   return (
-    <div title="Vault name" className="flex rounded bg-success px-1.5 py-1 text-success-contrast select-none">
-      <Icon ariaLabel="Shared in vault" type={vault.iconString} className="mr-1 text-info-contrast" size="medium" />
+    <div
+      title="Vault name"
+      className="flex items-center rounded bg-success px-1.5 py-1 text-success-contrast select-none"
+    >
+      <Icon
+        ariaLabel="Shared in vault"
+        type={vault.iconString}
+        className="mr-1 text-info-contrast"
+        size="medium"
+        emojiSize="small"
+      />
       <span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
     </div>
   )