rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix vault badge styling

Browse Source
This commit is contained in:
Aman Harwara
2023-08-08 22:26:52 +05:30
parent 02dda6d0fe
commit 9b66c2f9f7
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
View File

@@ -28,11 +28,11 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
const sharedByContact = application.sharedVaults.getItemSharedBy(item) const sharedByContact = application.sharedVaults.getItemSharedBy(item)
return ( 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} /> <VaultNameBadge vault={vault} />
{sharedByContact && ( {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"> <span className="flex items-center" title="Shared by contact">
<Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" /> <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> <div className="text-center text-xs font-bold">{sharedByContact?.name}</div>

13
packages/web/src/javascripts/Components/Icon/Icon.tsx
View File

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

13
packages/web/src/javascripts/Components/Vaults/VaultNameBadge.tsx
View File

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