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

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

Browse Source
This commit is contained in:
Aman Harwara
2023-09-08 17:49:30 +05:30
committed by GitHub
parent 25c0d655ab
commit 7c5f5c82a1
9 changed files with 77 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { TrustedContactInterface } from '@standardnotes/models'
import Icon from '../Icon/Icon'
const LastEditedByBadge = ({ contact }: { contact: TrustedContactInterface }) => {
return (
<div
title="Last edited by"
className="flex select-none items-center rounded bg-info px-1.5 py-1 text-info-contrast"
>
<Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
<span className="mr-auto overflow-hidden text-ellipsis text-sm font-semibold lg:text-xs">{contact.name}</span>
</div>
)
}
export default LastEditedByBadge

13
packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { TrustedContactInterface } from '@standardnotes/models'
import Icon from '../Icon/Icon'
const SharedByContactBadge = ({ contact }: { contact: TrustedContactInterface }) => {
return (
<div title="Shared by contact" className="flex items-center rounded bg-info px-1.5 py-1 text-neutral-contrast">
<Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
<div className="text-center text-sm font-semibold lg:text-xs">{contact.name}</div>
</div>
)
}
export default SharedByContactBadge

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

@@ -10,7 +10,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
return (
<div
title="Vault name"
className="flex items-center rounded bg-success px-1.5 py-1 text-success-contrast select-none"
className="flex select-none items-center rounded bg-success px-1.5 py-1 text-success-contrast"
>
<Icon
ariaLabel="Shared in vault"
@@ -19,7 +19,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
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-sm font-semibold lg:text-xs">{vault.name}</span>
</div>
)
}