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

chore: improve vault ui element sizing

Browse Source
This commit is contained in:
Aman Harwara
2023-09-08 20:00:32 +05:30
parent dfa994ee8d
commit 0447b450d7
4 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
View File

@@ -30,23 +30,23 @@ const ContactItem = ({ contact }: Props) => {
<EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
</ModalOverlay>
<div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
<div className="flex flex-col gap-1 py-1.5 overflow-hidden">
<div className="flex flex-col gap-1 overflow-hidden py-1.5">
<span
className={classNames(
'mr-auto overflow-hidden text-ellipsis text-base font-bold w-full',
'w-full overflow-hidden text-ellipsis text-base font-bold',
contact.isMe ? 'text-info' : '',
)}
>
{contact.name}
</span>
<span className="mr-auto overflow-hidden text-ellipsis text-sm w-full">{collaborationID}</span>
<span className="w-full overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
<div className="mt-2.5 flex flex-row">
<Button label="Edit" className={'mr-3 text-xs'} onClick={() => setIsContactModalOpen(true)} />
{!contact.isMe && <Button label="Delete" className={'mr-3 text-xs'} onClick={deleteContact} />}
<div className="mt-1.5 flex flex-row">
<Button label="Edit" className="mr-3" onClick={() => setIsContactModalOpen(true)} />
{!contact.isMe && <Button label="Delete" className="mr-3" onClick={deleteContact} />}
</div>
</div>
</div>

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

@@ -154,7 +154,7 @@ const Vaults = () => {
</div>
)}
<div className="mt-2.5 flex flex-row">
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
<Button label="Add New Contact" className="mr-3" onClick={createNewContact} />
</div>
</PreferencesSegment>
</PreferencesGroup>
@@ -172,7 +172,7 @@ const Vaults = () => {
)}
{canCreateMoreVaults ? (
<div className="mt-2.5 flex flex-row">
<Button label="Create New Vault" className={'mr-3 text-xs'} onClick={createNewVault} />
<Button label="Create New Vault" className="mr-3" onClick={createNewVault} />
</div>
) : (
<div className="mt-3.5">

33
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
View File

@@ -141,36 +141,23 @@ const VaultItem = ({ vault }: Props) => {
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-1.5 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
{vault.description && (
<span className="mr-auto overflow-hidden text-ellipsis text-sm">{vault.description}</span>
)}
<span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
<span className="overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
{vault.description && <span className="overflow-hidden text-ellipsis text-sm">{vault.description}</span>}
<span className="overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
{!!vault.sharing?.fileBytesUsed && (
<span className="mr-auto overflow-hidden text-ellipsis text-sm">
<span className="overflow-hidden text-ellipsis text-sm">
File storage used: {formatSizeToReadableString(vault.sharing?.fileBytesUsed ?? 0)}
</span>
)}
<div className="mt-2 flex w-full flex-wrap gap-3">
<Button label="Edit" className="text-xs" onClick={openEditModal} />
{isVaultLockable && (
<Button label={isVaultLocked ? 'Unlock' : 'Lock'} className="text-xs" onClick={toggleLock} />
)}
{isAdmin && <Button colorStyle="danger" label="Delete" className="text-xs" onClick={deleteVault} />}
{!isAdmin && vault.isSharedVaultListing() && (
<Button label="Leave Vault" className="text-xs" onClick={leaveVault} />
)}
<Button label="Edit" onClick={openEditModal} />
{isVaultLockable && <Button label={isVaultLocked ? 'Unlock' : 'Lock'} onClick={toggleLock} />}
{isAdmin && <Button colorStyle="danger" label="Delete" onClick={deleteVault} />}
{!isAdmin && vault.isSharedVaultListing() && <Button label="Leave Vault" onClick={leaveVault} />}
{vault.isSharedVaultListing() ? (
<Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
<Button colorStyle="info" label="Invite Contacts" onClick={openInviteModal} />
) : application.hasAccount() ? (
<Button
colorStyle="info"
label="Enable Collaboration"
className="text-xs"
onClick={convertToSharedVault}
/>
<Button colorStyle="info" label="Enable Collaboration" onClick={convertToSharedVault} />
) : null}
</div>
</div>