chore: improve list item vault info spacing

This commit is contained in:
Aman Harwara
2023-09-05 23:40:11 +05:30
parent 5e661c95da
commit 9430bf4507
3 changed files with 6 additions and 5 deletions

View File

@@ -104,7 +104,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
<ListItemMetadata item={file} hideDate={hideDate} sortBy={sortBy} />
<ListItemTags hideTags={hideTags} tags={tags} />
<ListItemConflictIndicator item={file} />
<ListItemVaultInfo item={file} />
<ListItemVaultInfo item={file} className="mt-1.5" />
</div>
<ListItemFlagIcons className="p-4" item={file} isFileBackedUp={!!backupInfo} />
</div>

View File

@@ -1,15 +1,16 @@
import { FunctionComponent } from 'react'
import { useApplication } from '../ApplicationProvider'
import Icon from '../Icon/Icon'
import { DecryptedItemInterface } from '@standardnotes/snjs'
import { DecryptedItemInterface, classNames } from '@standardnotes/snjs'
import VaultNameBadge from '../Vaults/VaultNameBadge'
import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
type Props = {
item: DecryptedItemInterface
className?: string
}
const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
const ListItemVaultInfo: FunctionComponent<Props> = ({ item, className }) => {
const application = useApplication()
if (!featureTrunkVaultsEnabled()) {
@@ -28,7 +29,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
const sharedByContact = application.sharedVaults.getItemSharedBy(item)
return (
<div className="flex flex-wrap items-center gap-2">
<div className={classNames('flex flex-wrap items-center gap-2', className)}>
<VaultNameBadge vault={vault} />
{sharedByContact && (

View File

@@ -146,7 +146,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
<ListItemTags hideTags={hideTags} tags={tags} />
<ListItemConflictIndicator item={item} />
<ListItemVaultInfo item={item} />
<ListItemVaultInfo item={item} className="mt-1.5" />
</div>
<ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
</div>