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

style: tailwind classname sorting (#1169)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 13:37:38 +05:30
committed by GitHub
parent 15ca2d358b
commit ee5b6627da
159 changed files with 565 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/cache/prettier-plugin-tailwindcss-npm-0.1.11-09d87a10a6-b06a81a222.zip vendored Normal file
View File

Binary file not shown.

20
packages/toast/src/Toast.tsx
View File

@@ -23,12 +23,12 @@ const colorForToastType = (type: ToastType) => {
const iconForToastType = (type: ToastType) => { const iconForToastType = (type: ToastType) => {
switch (type) { switch (type) {
case ToastType.Success: case ToastType.Success:
return <CheckCircleFilledIcon className={`w-5 h-5 ${colorForToastType(type)}`} /> return <CheckCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
case ToastType.Error: case ToastType.Error:
return <ClearCircleFilledIcon className={`w-5 h-5 ${colorForToastType(type)}`} /> return <ClearCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
case ToastType.Progress: case ToastType.Progress:
case ToastType.Loading: case ToastType.Loading:
return <div className="animate-spin border border-solid border-info border-r-transparent rounded-full w-4 h-4" /> return <div className="border-info h-4 w-4 animate-spin rounded-full border border-solid border-r-transparent" />
default: default:
return null return null
} }
@@ -77,7 +77,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
<div <div
data-index={index} data-index={index}
role="status" role="status"
className={`flex flex-col bg-passive-5 rounded opacity-0 animation-fill-forwards select-none min-w-max relative mt-3 ${currentAnimation}`} className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-max select-none flex-col rounded opacity-0 ${currentAnimation}`}
style={{ style={{
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)', boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)',
transition: shouldReduceMotion ? undefined : 'all 0.2s ease', transition: shouldReduceMotion ? undefined : 'all 0.2s ease',
@@ -90,9 +90,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
}} }}
ref={ref} ref={ref}
> >
<div className={`flex items-center w-full ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}> <div className={`flex w-full items-center ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
{icon ? <div className="flex flex-shrink-0 items-center justify-center sn-icon mr-2">{icon}</div> : null} {icon ? <div className="sn-icon mr-2 flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
<div className="text-sm text-text">{toast.message}</div> <div className="text-text text-sm">{toast.message}</div>
{hasActions && ( {hasActions && (
<div className="ml-4"> <div className="ml-4">
{toast.actions?.map((action, index) => ( {toast.actions?.map((action, index) => (
@@ -101,7 +101,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
paddingLeft: '0.45rem', paddingLeft: '0.45rem',
paddingRight: '0.45rem', paddingRight: '0.45rem',
}} }}
className={`py-1 border-0 bg-transparent cursor-pointer font-semibold text-sm hover:bg-passive-3 rounded ${colorForToastType( className={`hover:bg-passive-3 cursor-pointer rounded border-0 bg-transparent py-1 text-sm font-semibold ${colorForToastType(
toast.type, toast.type,
)} ${index !== 0 ? 'ml-2' : ''}`} )} ${index !== 0 ? 'ml-2' : ''}`}
onClick={() => { onClick={() => {
@@ -116,9 +116,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
)} )}
</div> </div>
{hasProgress && ( {hasProgress && (
<div className="rounded w-full bg-default overflow-hidden rounded-tl-none rounded-tr-none"> <div className="bg-default w-full overflow-hidden rounded rounded-tl-none rounded-tr-none">
<div <div
className="rounded h-2 bg-info rounded-tl-none transition-[width] duration-100" className="bg-info h-2 rounded rounded-tl-none transition-[width] duration-100"
role="progressbar" role="progressbar"
style={{ style={{
width: `${toast.progress}%`, width: `${toast.progress}%`,

2
packages/toast/src/ToastContainer.tsx
View File

@@ -11,7 +11,7 @@ export const ToastContainer: FunctionComponent = () => {
} }
return ( return (
<div className="flex flex-col items-end fixed z-toast bottom-6 right-6"> <div className="z-toast fixed bottom-6 right-6 flex flex-col items-end">
{toasts.map((toast, index) => ( {toasts.map((toast, index) => (
<ToastTimer toast={toast} index={index} key={toast.id} /> <ToastTimer toast={toast} index={index} key={toast.id} />
))} ))}

1
packages/web/package.json
View File

@@ -47,6 +47,7 @@
"postcss": "^8.4.14", "postcss": "^8.4.14",
"postcss-loader": "^7.0.0", "postcss-loader": "^7.0.0",
"prettier": "*", "prettier": "*",
"prettier-plugin-tailwindcss": "^0.1.11",
"sass-loader": "*", "sass-loader": "*",
"svg-jest": "^1.0.1", "svg-jest": "^1.0.1",
"tailwindcss": "^3.1.4", "tailwindcss": "^3.1.4",

7
packages/web/prettier.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
singleQuote: true,
trailingComma: 'all',
printWidth: 120,
semi: false,
plugins: [require('prettier-plugin-tailwindcss')],
}

6
packages/web/src/javascripts/Components/AccountMenu/AccountMenu.tsx
View File

@@ -58,9 +58,9 @@ const AccountMenu: FunctionComponent<Props> = ({
return ( return (
<div ref={ref} id="account-menu" className="sn-component"> <div ref={ref} id="account-menu" className="sn-component">
<div <div
className={`z-footer-bar-item-panel bottom-full left-0 cursor-auto bg-default rounded shadow-main ${ className={`max-h-120 absolute bottom-full left-0 z-footer-bar-item-panel flex min-w-80 max-w-xs cursor-auto flex-col overflow-y-auto rounded bg-default py-2 shadow-main ${
shouldAnimateCloseMenu ? 'slide-up-animation' : 'transition-transform duration-150 slide-down-animation' shouldAnimateCloseMenu ? 'slide-up-animation' : 'slide-down-animation transition-transform duration-150'
} min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`} }`}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<MenuPaneSelector <MenuPaneSelector

10
packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View File

@@ -98,19 +98,19 @@ const AdvancedOptions: FunctionComponent<Props> = ({
return ( return (
<> <>
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full text-sm focus:bg-info-backdrop focus:shadow-none font-bold" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm font-bold text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={toggleShowAdvanced} onClick={toggleShowAdvanced}
> >
<div className="flex items-center"> <div className="flex items-center">
Advanced options Advanced options
<Icon type="chevron-down" className="text-passive-1 ml-1" /> <Icon type="chevron-down" className="ml-1 text-passive-1" />
</div> </div>
</button> </button>
{showAdvanced ? ( {showAdvanced ? (
<div className="px-3 my-2"> <div className="my-2 px-3">
{children} {children}
<div className="flex justify-between items-center mb-1"> <div className="mb-1 flex items-center justify-between">
<Checkbox <Checkbox
name="private-workspace" name="private-workspace"
label="Private workspace" label="Private workspace"
@@ -147,7 +147,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
)} )}
{onStrictSignInChange && ( {onStrictSignInChange && (
<div className="flex justify-between items-center mb-1"> <div className="mb-1 flex items-center justify-between">
<Checkbox <Checkbox
name="use-strict-signin" name="use-strict-signin"
label="Use strict sign-in" label="Use strict sign-in"

12
packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -101,23 +101,23 @@ const ConfirmPassword: FunctionComponent<Props> = ({
return ( return (
<> <>
<div className="flex items-center px-3 mt-1 mb-3"> <div className="mt-1 mb-3 flex items-center px-3">
<IconButton <IconButton
icon="arrow-left" icon="arrow-left"
title="Go back" title="Go back"
className="flex mr-2 text-neutral p-0" className="mr-2 flex p-0 text-neutral"
onClick={handleGoBack} onClick={handleGoBack}
focusable={true} focusable={true}
disabled={isRegistering} disabled={isRegistering}
/> />
<div className="font-bold text-base">Confirm password</div> <div className="text-base font-bold">Confirm password</div>
</div> </div>
<div className="px-3 mb-3 text-sm"> <div className="mb-3 px-3 text-sm">
Because your notes are encrypted using your password,{' '} Because your notes are encrypted using your password,{' '}
<span className="text-danger">Standard Notes does not have a password reset option</span>. If you forget your <span className="text-danger">Standard Notes does not have a password reset option</span>. If you forget your
password, you will permanently lose access to your data. password, you will permanently lose access to your data.
</div> </div>
<form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1"> <form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
<DecoratedPasswordInput <DecoratedPasswordInput
className="mb-2" className="mb-2"
disabled={isRegistering} disabled={isRegistering}
@@ -128,7 +128,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
ref={passwordInputRef} ref={passwordInputRef}
value={confirmPassword} value={confirmPassword}
/> />
{error ? <div className="text-danger my-2">{error}</div> : null} {error ? <div className="my-2 text-danger">{error}</div> : null}
<Button <Button
primary primary
fullWidth fullWidth

8
packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
View File

@@ -102,17 +102,17 @@ const CreateAccount: FunctionComponent<Props> = ({
return ( return (
<> <>
<div className="flex items-center px-3 mt-1 mb-3"> <div className="mt-1 mb-3 flex items-center px-3">
<IconButton <IconButton
icon="arrow-left" icon="arrow-left"
title="Go back" title="Go back"
className="flex mr-2 text-neutral p-0" className="mr-2 flex p-0 text-neutral"
onClick={handleClose} onClick={handleClose}
focusable={true} focusable={true}
/> />
<div className="font-bold text-base">Create account</div> <div className="text-base font-bold">Create account</div>
</div> </div>
<form onSubmit={handleRegisterFormSubmit} className="px-3 mb-1"> <form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
<DecoratedInput <DecoratedInput
className="mb-2" className="mb-2"
disabled={isPrivateWorkspace} disabled={isPrivateWorkspace}

24
packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
View File

@@ -89,31 +89,31 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
return ( return (
<> <>
<div className="flex items-center justify-between px-3 mt-1 mb-1"> <div className="mt-1 mb-1 flex items-center justify-between px-3">
<div className="font-bold text-base">Account</div> <div className="text-base font-bold">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}> <div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="text-neutral" /> <Icon type="close" className="text-neutral" />
</div> </div>
</div> </div>
{user ? ( {user ? (
<> <>
<div className="px-3 mb-3 text-foreground text-sm"> <div className="mb-3 px-3 text-sm text-foreground">
<div>You're signed in as:</div> <div>You're signed in as:</div>
<div className="my-0.5 font-bold wrap">{user.email}</div> <div className="wrap my-0.5 font-bold">{user.email}</div>
<span className="text-neutral">{application.getHost()}</span> <span className="text-neutral">{application.getHost()}</span>
</div> </div>
<div className="flex items-start justify-between px-3 mb-2"> <div className="mb-2 flex items-start justify-between px-3">
{isSyncingInProgress ? ( {isSyncingInProgress ? (
<div className="flex items-center text-info text-sm font-semibold"> <div className="flex items-center text-sm font-semibold text-info">
<Spinner className="w-5 h-5 mr-2" /> <Spinner className="mr-2 h-5 w-5" />
Syncing... Syncing...
</div> </div>
) : ( ) : (
<div className="flex items-start"> <div className="flex items-start">
<Icon type="check-circle" className="mr-2 text-success" /> <Icon type="check-circle" className="mr-2 text-success" />
<div> <div>
<div className="font-semibold text-success text-sm">Last synced:</div> <div className="text-sm font-semibold text-success">Last synced:</div>
<div className="text-text text-sm">{lastSyncDate}</div> <div className="text-sm text-text">{lastSyncDate}</div>
</div> </div>
</div> </div>
)} )}
@@ -124,14 +124,14 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
</> </>
) : ( ) : (
<> <>
<div className="px-3 mb-1"> <div className="mb-1 px-3">
<div className="mb-3 text-foreground text-sm"> <div className="mb-3 text-sm text-foreground">
You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
encryption. encryption.
</div> </div>
<div className="flex items-center text-passive-1"> <div className="flex items-center text-passive-1">
<Icon type="cloud-off" className="mr-2" /> <Icon type="cloud-off" className="mr-2" />
<span className="font-semibold text-sm">Offline</span> <span className="text-sm font-semibold">Offline</span>
</div> </div>
</div> </div>
</> </>

10
packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -140,18 +140,18 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
return ( return (
<> <>
<div className="flex items-center px-3 mt-1 mb-3"> <div className="mt-1 mb-3 flex items-center px-3">
<IconButton <IconButton
icon="arrow-left" icon="arrow-left"
title="Go back" title="Go back"
className="flex mr-2 text-neutral p-0" className="mr-2 flex p-0 text-neutral"
onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)} onClick={() => setMenuPane(AccountMenuPane.GeneralMenu)}
focusable={true} focusable={true}
disabled={isSigningIn} disabled={isSigningIn}
/> />
<div className="font-bold text-base">Sign in</div> <div className="text-base font-bold">Sign in</div>
</div> </div>
<div className="px-3 mb-1"> <div className="mb-1 px-3">
<DecoratedInput <DecoratedInput
className={`mb-2 ${error ? 'border-danger' : null}`} className={`mb-2 ${error ? 'border-danger' : null}`}
left={[<Icon type="email" className="text-neutral" />]} left={[<Icon type="email" className="text-neutral" />]}
@@ -175,7 +175,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
ref={passwordInputRef} ref={passwordInputRef}
value={password} value={password}
/> />
{error ? <div className="text-danger my-2">{error}</div> : null} {error ? <div className="my-2 text-danger">{error}</div> : null}
<Button <Button
className="mt-1 mb-3" className="mt-1 mb-3"
label={isSigningIn ? 'Signing in...' : 'Sign in'} label={isSigningIn ? 'Signing in...' : 'Sign in'}

8
packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
View File

@@ -58,11 +58,11 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
return ( return (
<MenuItem <MenuItem
type={MenuItemType.RadioButton} type={MenuItemType.RadioButton}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onClick} onClick={onClick}
checked={descriptor.primary} checked={descriptor.primary}
> >
<div className="flex items-center justify-between w-full ml-2"> <div className="ml-2 flex w-full items-center justify-between">
{isRenaming ? ( {isRenaming ? (
<input <input
ref={inputRef} ref={inputRef}
@@ -79,7 +79,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
<div className="flex items-center"> <div className="flex items-center">
<a <a
role="button" role="button"
className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer" className="mr-3 h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
setIsRenaming((isRenaming) => !isRenaming) setIsRenaming((isRenaming) => !isRenaming)
@@ -89,7 +89,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
</a> </a>
<a <a
role="button" role="button"
className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer" className="h-5 w-5 cursor-pointer border-0 bg-transparent p-0 hover:bg-contrast"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
onDelete() onDelete()

4
packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
View File

@@ -78,13 +78,13 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor() void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
}} }}
> >
<Icon type="user-add" className="text-neutral mr-2" /> <Icon type="user-add" className="mr-2 text-neutral" />
Add another workspace Add another workspace
</MenuItem> </MenuItem>
{!hideWorkspaceOptions && ( {!hideWorkspaceOptions && (
<MenuItem type={MenuItemType.IconButton} onClick={signoutAll}> <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
<Icon type="signOut" className="text-neutral mr-2" /> <Icon type="signOut" className="mr-2 text-neutral" />
Sign out all workspaces Sign out all workspaces
</MenuItem> </MenuItem>
)} )}

4
packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
View File

@@ -53,7 +53,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
className="justify-between" className="justify-between"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="user-switch" className="text-neutral mr-2" /> <Icon type="user-switch" className="mr-2 text-neutral" />
Switch workspace Switch workspace
</div> </div>
<Icon type="chevron-right" className="text-neutral" /> <Icon type="chevron-right" className="text-neutral" />
@@ -61,7 +61,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
{isOpen && ( {isOpen && (
<div <div
ref={menuRef} ref={menuRef}
className="bg-default rounded shadow-main max-h-120 min-w-68 py-2 fixed overflow-y-auto" className="max-h-120 fixed min-w-68 overflow-y-auto rounded bg-default py-2 shadow-main"
style={menuStyle} style={menuStyle}
> >
<WorkspaceSwitcherMenu <WorkspaceSwitcherMenu

2
packages/web/src/javascripts/Components/ApplicationGroupView/ApplicationGroupView.tsx
View File

@@ -84,7 +84,7 @@ class ApplicationGroupView extends Component<Props, State> {
<DialogContent <DialogContent
aria-label="Switching workspace" aria-label="Switching workspace"
className={ className={
'challenge-modal flex flex-col items-center bg-default p-8 rounded relative shadow-overlay-light border border-solid border-border' 'challenge-modal shadow-overlay-light relative flex flex-col items-center rounded border border-solid border-border bg-default p-8'
} }
> >
{message} {message}

6
packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
View File

@@ -270,14 +270,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
} }
}} }}
ref={buttonRef} ref={buttonRef}
className={`flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer ${ className={`bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast ${
attachedFilesCount > 0 ? 'py-1 px-3' : '' attachedFilesCount > 0 ? 'py-1 px-3' : ''
}`} }`}
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >
<VisuallyHidden>Attached files</VisuallyHidden> <VisuallyHidden>Attached files</VisuallyHidden>
<Icon type="attachment-file" className="block" /> <Icon type="attachment-file" className="block" />
{attachedFilesCount > 0 && <span className="text-sm ml-2">{attachedFilesCount}</span>} {attachedFilesCount > 0 && <span className="ml-2 text-sm">{attachedFilesCount}</span>}
</DisclosureButton> </DisclosureButton>
<DisclosurePanel <DisclosurePanel
onKeyDown={(event) => { onKeyDown={(event) => {
@@ -291,7 +291,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
...position, ...position,
maxHeight, maxHeight,
}} }}
className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" className="slide-down-animation max-h-120 fixed flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default shadow-main transition-transform duration-150"
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >
{open && ( {open && (

28
packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View File

@@ -81,9 +81,9 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
<div className="flex border-b border-solid border-border"> <div className="flex border-b border-solid border-border">
<button <button
id={PopoverTabs.AttachedFiles} id={PopoverTabs.AttachedFiles}
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom text-sm ${ className={`relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AttachedFiles ? 'text-info font-medium shadow-bottom' : 'text-text' currentTab === PopoverTabs.AttachedFiles ? 'font-medium text-info shadow-bottom' : 'text-text'
} ${attachedTabDisabled ? 'text-neutral cursor-not-allowed' : ''}`} } ${attachedTabDisabled ? 'cursor-not-allowed text-neutral' : ''}`}
onClick={() => { onClick={() => {
setCurrentTab(PopoverTabs.AttachedFiles) setCurrentTab(PopoverTabs.AttachedFiles)
}} }}
@@ -94,8 +94,8 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
</button> </button>
<button <button
id={PopoverTabs.AllFiles} id={PopoverTabs.AllFiles}
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom text-sm ${ className={`relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AllFiles ? 'text-info font-medium shadow-bottom' : 'text-text' currentTab === PopoverTabs.AllFiles ? 'font-medium text-info shadow-bottom' : 'text-text'
}`} }`}
onClick={() => { onClick={() => {
setCurrentTab(PopoverTabs.AllFiles) setCurrentTab(PopoverTabs.AllFiles)
@@ -105,13 +105,13 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
All files All files
</button> </button>
</div> </div>
<div className="min-h-0 max-h-110 overflow-y-auto"> <div className="max-h-110 min-h-0 overflow-y-auto">
{filteredList.length > 0 || searchQuery.length > 0 ? ( {filteredList.length > 0 || searchQuery.length > 0 ? (
<div className="sticky top-0 left-0 p-3 bg-default border-b border-solid border-border"> <div className="sticky top-0 left-0 border-b border-solid border-border bg-default p-3">
<div className="relative"> <div className="relative">
<input <input
type="text" type="text"
className="text-text w-full rounded py-1.5 px-3 text-sm bg-default border-solid border border-border" className="w-full rounded border border-solid border-border bg-default py-1.5 px-3 text-sm text-text"
placeholder="Search files..." placeholder="Search files..."
value={searchQuery} value={searchQuery}
onInput={(e) => { onInput={(e) => {
@@ -122,7 +122,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
/> />
{searchQuery.length > 0 && ( {searchQuery.length > 0 && (
<button <button
className="flex absolute right-2 p-0 bg-transparent border-0 top-1/2 -translate-y-1/2 cursor-pointer" className="absolute right-2 top-1/2 flex -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0"
onClick={() => { onClick={() => {
setSearchQuery('') setSearchQuery('')
searchInputRef.current?.focus() searchInputRef.current?.focus()
@@ -150,11 +150,11 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
) )
}) })
) : ( ) : (
<div className="flex flex-col items-center justify-center w-full py-8"> <div className="flex w-full flex-col items-center justify-center py-8">
<div className="w-18 h-18 mb-2"> <div className="mb-2 h-18 w-18">
<FilesIllustration /> <FilesIllustration />
</div> </div>
<div className="text-sm font-medium mb-3"> <div className="mb-3 text-sm font-medium">
{searchQuery.length > 0 {searchQuery.length > 0
? 'No result found' ? 'No result found'
: currentTab === PopoverTabs.AttachedFiles : currentTab === PopoverTabs.AttachedFiles
@@ -164,13 +164,13 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
<Button onClick={handleAttachFilesClick} onBlur={closeOnBlur}> <Button onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</Button> </Button>
<div className="text-xs text-passive-0 mt-3">Or drop your files here</div> <div className="mt-3 text-xs text-passive-0">Or drop your files here</div>
</div> </div>
)} )}
</div> </div>
{filteredList.length > 0 && ( {filteredList.length > 0 && (
<button <button
className="flex items-center cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-3 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm border-0 border-t border-solid border-border" className="flex w-full cursor-pointer items-center border-0 border-t border-solid border-border bg-transparent px-3 py-3 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={handleAttachFilesClick} onClick={handleAttachFilesClick}
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >

10
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -85,13 +85,13 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
className="flex items-center justify-between p-3 focus:shadow-none" className="flex items-center justify-between p-3 focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
> >
<div onClick={handleClick} className="flex items-center cursor-pointer"> <div onClick={handleClick} className="flex cursor-pointer items-center">
{getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')} {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
<div className="flex flex-col mx-4"> <div className="mx-4 flex flex-col">
{isRenamingFile ? ( {isRenamingFile ? (
<input <input
type="text" type="text"
className="text-input px-1.5 py-1 mb-1 border border-solid border-border bg-transparent text-foreground" className="text-input mb-1 border border-solid border-border bg-transparent px-1.5 py-1 text-foreground"
value={fileName} value={fileName}
ref={fileNameInputRef} ref={fileNameInputRef}
onInput={handleFileNameInput} onInput={handleFileNameInput}
@@ -99,10 +99,10 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
onBlur={handleFileNameInputBlur} onBlur={handleFileNameInputBlur}
/> />
) : ( ) : (
<div className="text-sm mb-1 break-word"> <div className="break-word mb-1 text-sm">
<span className="align-middle">{file.name}</span> <span className="align-middle">{file.name}</span>
{file.protected && ( {file.protected && (
<Icon type="lock-filled" className="ml-2 text-neutral inline align-middle" size="small" /> <Icon type="lock-filled" className="ml-2 inline align-middle text-neutral" size="small" />
)} )}
</div> </div>
)} )}

22
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View File

@@ -66,7 +66,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<DisclosureButton <DisclosureButton
ref={menuButtonRef} ref={menuButtonRef}
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="w-7 h-7 p-1 rounded-full border-0 bg-transparent hover:bg-contrast cursor-pointer" className="h-7 w-7 cursor-pointer rounded-full border-0 bg-transparent p-1 hover:bg-contrast"
> >
<Icon type="more" className="text-neutral" /> <Icon type="more" className="text-neutral" />
</DisclosureButton> </DisclosureButton>
@@ -78,13 +78,13 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
}} }}
className={`${ className={`${
isMenuOpen ? 'flex' : 'hidden' isMenuOpen ? 'flex' : 'hidden'
} flex-col bg-default rounded shadow-main max-h-120 min-w-60 py-1 fixed overflow-y-auto`} } max-h-120 fixed min-w-60 flex-col overflow-y-auto rounded bg-default py-1 shadow-main`}
> >
{isMenuOpen && ( {isMenuOpen && (
<> <>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
previewHandler(file) previewHandler(file)
closeMenu() closeMenu()
@@ -96,7 +96,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
{isAttachedToNote ? ( {isAttachedToNote ? (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote, type: PopoverFileItemActionType.DetachFileToNote,
@@ -111,7 +111,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
) : ( ) : (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote, type: PopoverFileItemActionType.AttachFileToNote,
@@ -126,7 +126,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
)} )}
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm justify-between focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.ToggleFileProtection, type: PopoverFileItemActionType.ToggleFileProtection,
@@ -143,7 +143,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
Password protection Password protection
</span> </span>
<Switch <Switch
className="px-0 pointer-events-none" className="pointer-events-none px-0"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
checked={isFileProtected} checked={isFileProtected}
/> />
@@ -151,7 +151,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DownloadFile, type: PopoverFileItemActionType.DownloadFile,
@@ -165,7 +165,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
setIsRenamingFile(true) setIsRenamingFile(true)
}} }}
@@ -175,7 +175,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button> </button>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:shadow-none text-sm focus:bg-info-backdrop" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
handleFileAction({ handleFileAction({
type: PopoverFileItemActionType.DeleteFile, type: PopoverFileItemActionType.DeleteFile,
@@ -187,7 +187,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<Icon type="trash" className="mr-2 text-danger" /> <Icon type="trash" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span> <span className="text-danger">Delete permanently</span>
</button> </button>
<div className="px-3 py-1 text-xs text-neutral font-medium"> <div className="px-3 py-1 text-xs font-medium text-neutral">
<div> <div>
<span className="font-semibold">File ID:</span> {file.uuid} <span className="font-semibold">File ID:</span> {file.uuid}
</div> </div>

2
packages/web/src/javascripts/Components/Button/IconButton.tsx
View File

@@ -30,7 +30,7 @@ const IconButton: FunctionComponent<Props> = ({
<button <button
type="button" type="button"
title={title} title={title}
className={`no-border cursor-pointer bg-transparent flex flex-row items-center ${focusableClass} ${className}`} className={`no-border flex cursor-pointer flex-row items-center bg-transparent ${focusableClass} ${className}`}
onClick={click} onClick={click}
disabled={disabled} disabled={disabled}
aria-label={title} aria-label={title}

2
packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
View File

@@ -19,7 +19,7 @@ const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, i
const classes = type === 'primary' ? 'info ' : '' const classes = type === 'primary' ? 'info ' : ''
return ( return (
<button <button
className={`text-neutral min-w-8 h-8 flex justify-center items-center border-solid border border-border bg-clip-padding m-0 bg-transparent cursor-pointer rounded-full hover:text-text focus:text-text hover:bg-contrast focus:bg-contrast focus:outline-none focus:ring-info ${classes} ${ className={`m-0 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-transparent bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast focus:text-text focus:outline-none focus:ring-info ${classes} ${
className ?? '' className ?? ''
}`} }`}
onClick={click} onClick={click}

16
packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
View File

@@ -184,7 +184,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
> >
<DialogContent <DialogContent
aria-label="Challenge modal" aria-label="Challenge modal"
className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${ className={`challenge-modal relative flex flex-col items-center rounded bg-default p-8 ${
challenge.reason !== ChallengeReason.ApplicationUnlock challenge.reason !== ChallengeReason.ApplicationUnlock
? 'shadow-overlay-light border border-solid border-border' ? 'shadow-overlay-light border border-solid border-border'
: 'focus:shadow-none' : 'focus:shadow-none'
@@ -194,20 +194,20 @@ const ChallengeModal: FunctionComponent<Props> = ({
<button <button
onClick={cancelChallenge} onClick={cancelChallenge}
aria-label="Close modal" aria-label="Close modal"
className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4" className="absolute top-4 right-4 flex cursor-pointer border-0 bg-transparent p-1"
> >
<Icon type="close" className="text-neutral" /> <Icon type="close" className="text-neutral" />
</button> </button>
)} )}
<ProtectedIllustration className="w-30 h-30 mb-4" /> <ProtectedIllustration className="mb-4 h-30 w-30" />
<div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div> <div className="mb-3 max-w-76 text-center text-lg font-bold">{challenge.heading}</div>
{challenge.subheading && ( {challenge.subheading && (
<div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div> <div className="break-word mb-4 max-w-76 text-center text-sm">{challenge.subheading}</div>
)} )}
<form <form
className="flex flex-col items-center min-w-76" className="flex min-w-76 flex-col items-center"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault() e.preventDefault()
submit() submit()
@@ -224,12 +224,12 @@ const ChallengeModal: FunctionComponent<Props> = ({
/> />
))} ))}
</form> </form>
<Button primary disabled={isProcessing} className="min-w-76 mt-1 mb-3.5" onClick={submit}> <Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
{isProcessing ? 'Generating Keys...' : 'Submit'} {isProcessing ? 'Generating Keys...' : 'Submit'}
</Button> </Button>
{shouldShowForgotPasscode && ( {shouldShowForgotPasscode && (
<Button <Button
className="flex items-center justify-center min-w-76" className="flex min-w-76 items-center justify-center"
onClick={() => { onClick={() => {
setBypassModalFocusLock(true) setBypassModalFocusLock(true)
application.alertService application.alertService

14
packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View File

@@ -28,24 +28,24 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
}, [isInvalid]) }, [isInvalid])
return ( return (
<div key={prompt.id} className="w-full mb-3"> <div key={prompt.id} className="mb-3 w-full">
{prompt.validation === ChallengeValidation.ProtectionSessionDuration ? ( {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
<div className="min-w-76"> <div className="min-w-76">
<div className="text-sm font-medium mb-2">Allow protected access for</div> <div className="mb-2 text-sm font-medium">Allow protected access for</div>
<div className="flex items-center justify-between bg-passive-4 rounded p-1"> <div className="flex items-center justify-between rounded bg-passive-4 p-1">
{ProtectionSessionDurations.map((option) => { {ProtectionSessionDurations.map((option) => {
const selected = option.valueInSeconds === values[prompt.id].value const selected = option.valueInSeconds === values[prompt.id].value
return ( return (
<label <label
key={option.label} key={option.label}
className={`cursor-pointer px-2 py-1.5 rounded focus-within:ring-2 focus-within:ring-info ${ className={`cursor-pointer rounded px-2 py-1.5 focus-within:ring-2 focus-within:ring-info ${
selected ? 'bg-default text-foreground font-semibold' : 'text-passive-0 hover:bg-passive-3' selected ? 'bg-default font-semibold text-foreground' : 'text-passive-0 hover:bg-passive-3'
}`} }`}
> >
<input <input
type="radio" type="radio"
name={`session-duration-${prompt.id}`} name={`session-duration-${prompt.id}`}
className={'appearance-none m-0 focus:shadow-none focus:outline-none'} className={'m-0 appearance-none focus:shadow-none focus:outline-none'}
style={{ style={{
marginRight: 0, marginRight: 0,
}} }}
@@ -76,7 +76,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
onChange={(value) => onValueChange(value, prompt)} onChange={(value) => onValueChange(value, prompt)}
/> />
)} )}
{isInvalid && <div className="text-sm text-danger mt-2">Invalid authentication, please try again.</div>} {isInvalid && <div className="mt-2 text-sm text-danger">Invalid authentication, please try again.</div>}
</div> </div>
) )
} }

6
packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
View File

@@ -47,14 +47,14 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
return ( return (
<div ref={containerRef}> <div ref={containerRef}>
<Button ref={buttonRef} onClick={toggleMenu} className="flex items-center justify-center min-w-76 mt-2"> <Button ref={buttonRef} onClick={toggleMenu} className="mt-2 flex min-w-76 items-center justify-center">
<Icon type="user-switch" className="text-neutral mr-2" /> <Icon type="user-switch" className="mr-2 text-neutral" />
Switch workspace Switch workspace
</Button> </Button>
{isOpen && ( {isOpen && (
<div <div
ref={menuRef} ref={menuRef}
className="bg-default rounded-md shadow-main max-h-120 min-w-68 py-2 fixed overflow-y-auto" className="max-h-120 fixed min-w-68 overflow-y-auto rounded-md bg-default py-2 shadow-main"
style={menuStyle} style={menuStyle}
> >
<WorkspaceSwitcherMenu <WorkspaceSwitcherMenu

4
packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
View File

@@ -72,7 +72,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
}} }}
onBlur={closeOnBlur} onBlur={closeOnBlur}
ref={buttonRef} ref={buttonRef}
className="flex justify-center items-center min-w-8 h-8 hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer" className="flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
> >
<VisuallyHidden>Change note type</VisuallyHidden> <VisuallyHidden>Change note type</VisuallyHidden>
<Icon type="dashboard" className="block" /> <Icon type="dashboard" className="block" />
@@ -89,7 +89,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
...position, ...position,
maxHeight, maxHeight,
}} }}
className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed" className="slide-down-animation max-h-120 fixed flex min-w-68 max-w-xs flex-col overflow-y-auto rounded bg-default shadow-main transition-transform duration-150"
onBlur={closeOnBlur} onBlur={closeOnBlur}
> >
{isOpen && ( {isOpen && (

4
packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View File

@@ -183,7 +183,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
return ( return (
<Fragment key={groupId}> <Fragment key={groupId}>
<div className={`py-1 border-0 border-t border-solid border-border ${index === 0 ? 'border-t-0' : ''}`}> <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
{group.items.map((item) => { {group.items.map((item) => {
const onClickEditorItem = () => { const onClickEditorItem = () => {
selectEditor(item).catch(console.error) selectEditor(item).catch(console.error)
@@ -193,7 +193,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
key={item.name} key={item.name}
type={MenuItemType.RadioButton} type={MenuItemType.RadioButton}
onClick={onClickEditorItem} onClick={onClickEditorItem}
className={'py-2 flex-row-reverse'} className={'flex-row-reverse py-2'}
onBlur={closeOnBlur} onBlur={closeOnBlur}
checked={item.isEntitled ? isSelectedEditor(item) : undefined} checked={item.isEntitled ? isSelectedEditor(item) : undefined}
> >

2
packages/web/src/javascripts/Components/Checkbox/Checkbox.tsx
View File

@@ -10,7 +10,7 @@ type CheckboxProps = {
const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => { const Checkbox: FunctionComponent<CheckboxProps> = ({ name, checked, onChange, disabled, label }) => {
return ( return (
<label htmlFor={name} className="flex items-center fit-content mb-2 text-sm"> <label htmlFor={name} className="fit-content mb-2 flex items-center text-sm">
<input <input
className="mr-2" className="mr-2"
type="checkbox" type="checkbox"

4
packages/web/src/javascripts/Components/ComponentView/IsDeprecated.tsx
View File

@@ -9,10 +9,10 @@ type Props = {
const IsDeprecated: FunctionComponent<Props> = ({ deprecationMessage, dismissDeprecationMessage }) => { const IsDeprecated: FunctionComponent<Props> = ({ deprecationMessage, dismissDeprecationMessage }) => {
return ( return (
<div className={'sn-component'}> <div className={'sn-component'}>
<div className="flex justify-between items-center w-full min-h-[1.625rem] py-2.5 px-2 bg-contrast text-text border-b border-border select-none"> <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
<div className={'left'}> <div className={'left'}>
<div className={'sk-app-bar-item'}> <div className={'sk-app-bar-item'}>
<div className="font-bold text-xs text-warning"> <div className="text-xs font-bold text-warning">
{deprecationMessage || 'This extension is deprecated.'} {deprecationMessage || 'This extension is deprecated.'}
</div> </div>
</div> </div>

2
packages/web/src/javascripts/Components/ComponentView/IsExpired.tsx
View File

@@ -26,7 +26,7 @@ const statusString = (featureStatus: FeatureStatus, expiredDate: string, compone
const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => { const IsExpired: FunctionComponent<Props> = ({ expiredDate, featureStatus, componentName, manageSubscription }) => {
return ( return (
<div className={'sn-component'}> <div className={'sn-component'}>
<div className="flex justify-between items-center w-full min-h-[1.625rem] py-2.5 px-2 bg-contrast text-text border-b border-border select-none"> <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
<div className={'left'}> <div className={'left'}>
<div className="flex items-center"> <div className="flex items-center">
<IndicatorCircle style="danger" /> <IndicatorCircle style="danger" />

2
packages/web/src/javascripts/Components/ComponentView/IssueOnLoading.tsx
View File

@@ -9,7 +9,7 @@ type Props = {
const IssueOnLoading: FunctionComponent<Props> = ({ componentName, reloadIframe }) => { const IssueOnLoading: FunctionComponent<Props> = ({ componentName, reloadIframe }) => {
return ( return (
<div className={'sn-component'}> <div className={'sn-component'}>
<div className="flex justify-between items-center w-full min-h-[1.625rem] py-2.5 px-2 bg-contrast text-text border-b border-border select-none"> <div className="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast py-2.5 px-2 text-text">
<div className={'left'}> <div className={'left'}>
<div className={'sk-app-bar-item'}> <div className={'sk-app-bar-item'}>
<div className={'sk-label.warning'}>There was an issue loading {componentName}.</div> <div className={'sk-label.warning'}>There was an issue loading {componentName}.</div>

4
packages/web/src/javascripts/Components/ComponentView/OfflineRestricted.tsx
View File

@@ -7,13 +7,13 @@ const OfflineRestricted: FunctionComponent = () => {
<div className={'sk-panel-content'}> <div className={'sk-panel-content'}>
<div className={'sk-panel-section stretch'}> <div className={'sk-panel-section stretch'}>
<div className={'sk-panel-column'} /> <div className={'sk-panel-column'} />
<div className="font-bold text-base">You have restricted this component to not use a hosted version.</div> <div className="text-base font-bold">You have restricted this component to not use a hosted version.</div>
<div className={'sk-subtitle'}>Locally-installed components are not available in the web application.</div> <div className={'sk-subtitle'}>Locally-installed components are not available in the web application.</div>
<div className={'sk-panel-row'} /> <div className={'sk-panel-row'} />
<div className={'sk-panel-row'}> <div className={'sk-panel-row'}>
<div className={'sk-panel-column'}> <div className={'sk-panel-column'}>
<div className={'sk-p'}>To continue, choose from the following options:</div> <div className={'sk-p'}>To continue, choose from the following options:</div>
<ul className="list-disc pl-8 mt-3"> <ul className="mt-3 list-disc pl-8">
<li className="sk-p mb-1"> <li className="sk-p mb-1">
Enable the Hosted option for this component by opening the Preferences {'>'} General {'>'} Advanced Enable the Hosted option for this component by opening the Preferences {'>'} General {'>'} Advanced
Settings menu and toggling 'Use hosted when local is unavailable' under this component's options. Settings menu and toggling 'Use hosted when local is unavailable' under this component's options.

6
packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
View File

@@ -32,7 +32,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication() const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication()
return ( return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="p-0 max-w-[600px]"> <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content"> <div className="sk-modal-content">
<div className="sn-component"> <div className="sn-component">
<div className="sk-panel"> <div className="sk-panel">
@@ -73,7 +73,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
</span> </span>
</label> </label>
<button <button
className="capitalize sk-a ml-1.5 p-0 rounded cursor-pointer" className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
onClick={() => { onClick={() => {
application.desktopDevice?.viewlocalBackups() application.desktopDevice?.viewlocalBackups()
}} }}
@@ -83,7 +83,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
</div> </div>
)} )}
<div className="flex my-1 mt-4 gap-2"> <div className="my-1 mt-4 flex gap-2">
<Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}> <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
Cancel Cancel
</Button> </Button>

2
packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
View File

@@ -66,7 +66,7 @@ const ContentList: FunctionComponent<Props> = ({
return ( return (
<div <div
className="infinite-scroll border-solid border-t border-border focus:shadow-none focus:outline-none" className="infinite-scroll border-t border-solid border-border focus:shadow-none focus:outline-none"
id={ElementIds.ContentList} id={ElementIds.ContentList}
onScroll={onScroll} onScroll={onScroll}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}

8
packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
View File

@@ -53,7 +53,7 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
return ( return (
<div <div
className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${ className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
selected && 'selected border-l-2px border-solid border-info' selected && 'selected border-l-2px border-solid border-info'
}`} }`}
id={item.uuid} id={item.uuid}
@@ -64,14 +64,14 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
}} }}
> >
{!hideIcon ? ( {!hideIcon ? (
<div className="flex flex-col items-center justify-between p-4.5 pr-3 mr-0"> <div className="mr-0 flex flex-col items-center justify-between p-4.5 pr-3">
<IconComponent /> <IconComponent />
</div> </div>
) : ( ) : (
<div className="pr-4" /> <div className="pr-4" />
)} )}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border"> <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden"> <div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{item.title}</div> <div className="break-word mr-2">{item.title}</div>
</div> </div>
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} /> <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />

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

@@ -46,7 +46,7 @@ const ContentListHeader = ({
return ( return (
<div className="section-title-bar-header gap-1"> <div className="section-title-bar-header gap-1">
<div className="flex flex-col flex-grow"> <div className="flex flex-grow flex-col">
<div className="text-lg font-semibold text-text">{panelTitle}</div> <div className="text-lg font-semibold text-text">{panelTitle}</div>
{optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>} {optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
</div> </div>
@@ -72,7 +72,7 @@ const ContentListHeader = ({
</Disclosure> </Disclosure>
</div> </div>
<button <button
className="flex justify-center items-center min-w-8 h-8 ml-3 bg-info hover:brightness-125 text-info-contrast border border-solid border-transparent rounded-full cursor-pointer" className="ml-3 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125"
title={addButtonLabel} title={addButtonLabel}
aria-label={addButtonLabel} aria-label={addButtonLabel}
onClick={addNewItem} onClick={addNewItem}

18
packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
View File

@@ -99,22 +99,20 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
return ( return (
<Menu <Menu
className={ className={
'py-1 bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-70 overflow-y-auto \ 'slide-down-animation z-index-dropdown-menu flex min-w-70 flex-col overflow-y-auto rounded border border-solid border-border bg-default py-1 text-sm shadow-main transition-transform duration-150'
border border-solid border-border text-sm z-index-dropdown-menu \
flex flex-col'
} }
a11yLabel="Notes list options menu" a11yLabel="Notes list options menu"
closeMenu={closeDisplayOptionsMenu} closeMenu={closeDisplayOptionsMenu}
isOpen={isOpen} isOpen={isOpen}
> >
<div className="px-3 my-1 text-xs font-semibold text-text uppercase">Sort by</div> <div className="my-1 px-3 text-xs font-semibold uppercase text-text">Sort by</div>
<MenuItem <MenuItem
className="py-2" className="py-2"
type={MenuItemType.RadioButton} type={MenuItemType.RadioButton}
onClick={toggleSortByDateModified} onClick={toggleSortByDateModified}
checked={sortBy === CollectionSort.UpdatedAt} checked={sortBy === CollectionSort.UpdatedAt}
> >
<div className="flex flex-grow items-center justify-between ml-2"> <div className="ml-2 flex flex-grow items-center justify-between">
<span>Date modified</span> <span>Date modified</span>
{sortBy === CollectionSort.UpdatedAt ? ( {sortBy === CollectionSort.UpdatedAt ? (
sortReverse ? ( sortReverse ? (
@@ -131,7 +129,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByCreationDate} onClick={toggleSortByCreationDate}
checked={sortBy === CollectionSort.CreatedAt} checked={sortBy === CollectionSort.CreatedAt}
> >
<div className="flex flex-grow items-center justify-between ml-2"> <div className="ml-2 flex flex-grow items-center justify-between">
<span>Creation date</span> <span>Creation date</span>
{sortBy === CollectionSort.CreatedAt ? ( {sortBy === CollectionSort.CreatedAt ? (
sortReverse ? ( sortReverse ? (
@@ -148,7 +146,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByTitle} onClick={toggleSortByTitle}
checked={sortBy === CollectionSort.Title} checked={sortBy === CollectionSort.Title}
> >
<div className="flex flex-grow items-center justify-between ml-2"> <div className="ml-2 flex flex-grow items-center justify-between">
<span>Title</span> <span>Title</span>
{sortBy === CollectionSort.Title ? ( {sortBy === CollectionSort.Title ? (
sortReverse ? ( sortReverse ? (
@@ -160,7 +158,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
</div> </div>
</MenuItem> </MenuItem>
<MenuItemSeparator /> <MenuItemSeparator />
<div className="px-3 py-1 text-xs font-semibold text-text uppercase">View</div> <div className="px-3 py-1 text-xs font-semibold uppercase text-text">View</div>
{!isFilesSmartView && ( {!isFilesSmartView && (
<MenuItem <MenuItem
type={MenuItemType.SwitchButton} type={MenuItemType.SwitchButton}
@@ -168,7 +166,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
checked={!hidePreview} checked={!hidePreview}
onChange={toggleHidePreview} onChange={toggleHidePreview}
> >
<div className="flex flex-col max-w-3/4">Show note preview</div> <div className="max-w-3/4 flex flex-col">Show note preview</div>
</MenuItem> </MenuItem>
)} )}
<MenuItem <MenuItem
@@ -196,7 +194,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
Show icon Show icon
</MenuItem> </MenuItem>
<MenuItemSeparator /> <MenuItemSeparator />
<div className="px-3 py-1 text-xs font-semibold text-text uppercase">Other</div> <div className="px-3 py-1 text-xs font-semibold uppercase text-text">Other</div>
<MenuItem <MenuItem
type={MenuItemType.SwitchButton} type={MenuItemType.SwitchButton}
className="py-1 hover:bg-contrast focus:bg-info-backdrop" className="py-1 hover:bg-contrast focus:bg-info-backdrop"

6
packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx
View File

@@ -9,9 +9,9 @@ type Props = {
const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => { const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
return item.conflictOf ? ( return item.conflictOf ? (
<div className="flex flex-wrap items-center mt-0.5"> <div className="mt-0.5 flex flex-wrap items-center">
<div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger text-danger-contrast'}> <div className={'mr-1 mt-2 rounded bg-danger py-1 px-1.5 text-danger-contrast'}>
<div className="text-xs font-bold text-center">Conflicted Copy</div> <div className="text-center text-xs font-bold">Conflicted Copy</div>
</div> </div>
</div> </div>
) : null ) : null

10
packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
View File

@@ -14,29 +14,29 @@ type Props = {
const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => { const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
return ( return (
<div className="flex items-start p-4 pl-0 border-b border-solid border-border"> <div className="flex items-start border-b border-solid border-border p-4 pl-0">
{item.locked && ( {item.locked && (
<span className="flex items-center" title="Editing Disabled"> <span className="flex items-center" title="Editing Disabled">
<Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" /> <Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" />
</span> </span>
)} )}
{item.trashed && ( {item.trashed && (
<span className="flex items-center ml-1.5" title="Trashed"> <span className="ml-1.5 flex items-center" title="Trashed">
<Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="small" /> <Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="small" />
</span> </span>
)} )}
{item.archived && ( {item.archived && (
<span className="flex items-center ml-1.5" title="Archived"> <span className="ml-1.5 flex items-center" title="Archived">
<Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" /> <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
</span> </span>
)} )}
{item.pinned && ( {item.pinned && (
<span className="flex items-center ml-1.5" title="Pinned"> <span className="ml-1.5 flex items-center" title="Pinned">
<Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="small" /> <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="small" />
</span> </span>
)} )}
{hasFiles && ( {hasFiles && (
<span className="flex items-center ml-1.5" title="Files"> <span className="ml-1.5 flex items-center" title="Files">
<Icon ariaLabel="Files" type="attachment-file" className="text-info" size="small" /> <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="small" />
</span> </span>
)} )}

2
packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx
View File

@@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy })
} }
return ( return (
<div className="text-xs leading-1.4 mt-1 opacity-50"> <div className="leading-1.4 mt-1 text-xs opacity-50">
{item.protected && <span>Protected {hideDate ? '' : ' • '}</span>} {item.protected && <span>Protected {hideDate ? '' : ' • '}</span>}
{!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || 'Now'}</span>} {!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || 'Now'}</span>}
{!hideDate && !showModifiedDate && <span>{item.createdAtString || 'Now'}</span>} {!hideDate && !showModifiedDate && <span>{item.createdAtString || 'Now'}</span>}

6
packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
View File

@@ -13,13 +13,13 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
} }
return ( return (
<div className="flex flex-wrap mt-1.5 text-xs gap-2"> <div className="mt-1.5 flex flex-wrap gap-2 text-xs">
{tags.map((tag) => ( {tags.map((tag) => (
<span <span
className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant text-foreground rounded-sm" className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant py-1 px-1.5 text-foreground"
key={tag.uuid} key={tag.uuid}
> >
<Icon type="hashtag" className="text-passive-1 mr-1" size="small" /> <Icon type="hashtag" className="mr-1 text-passive-1" size="small" />
<span>{tag.title}</span> <span>{tag.title}</span>
</span> </span>
))} ))}

12
packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
View File

@@ -45,7 +45,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
return ( return (
<div <div
className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${ className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
selected && 'selected border-l-2 border-solid border-info' selected && 'selected border-l-2 border-solid border-info'
}`} }`}
id={item.uuid} id={item.uuid}
@@ -58,14 +58,14 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
}} }}
> >
{!hideIcon ? ( {!hideIcon ? (
<div className="flex flex-col items-center justify-between p-4 pr-4 mr-0"> <div className="mr-0 flex flex-col items-center justify-between p-4 pr-4">
<Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`text-accessory-tint-${tint}`} /> <Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`text-accessory-tint-${tint}`} />
</div> </div>
) : ( ) : (
<div className="pr-4" /> <div className="pr-4" />
)} )}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border"> <div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden"> <div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{item.title}</div> <div className="break-word mr-2">{item.title}</div>
</div> </div>
{!hidePreview && !item.hidePreview && !item.protected && ( {!hidePreview && !item.hidePreview && !item.protected && (
@@ -79,10 +79,10 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
></div> ></div>
)} )}
{!item.preview_html && item.preview_plain && ( {!item.preview_html && item.preview_plain && (
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.preview_plain}</div> <div className="leading-1.3 line-clamp-1 mt-1 overflow-hidden">{item.preview_plain}</div>
)} )}
{!item.preview_html && !item.preview_plain && item.text && ( {!item.preview_html && !item.preview_plain && item.text && (
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.text}</div> <div className="leading-1.3 line-clamp-1 mt-1 overflow-hidden">{item.text}</div>
)} )}
</div> </div>
)} )}

4
packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
View File

@@ -29,7 +29,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
<> <>
<div className="flex items-center"> <div className="flex items-center">
{icon ? ( {icon ? (
<div className="flex mr-2"> <div className="mr-2 flex">
<Icon type={icon} className={iconClassName} size="small" /> <Icon type={icon} className={iconClassName} size="small" />
</div> </div>
) : null} ) : null}
@@ -74,7 +74,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
{items.map((item) => ( {items.map((item) => (
<StyledListboxOption key={item.value} value={item.value} label={item.label} disabled={item.disabled}> <StyledListboxOption key={item.value} value={item.value} label={item.label} disabled={item.disabled}>
{item.icon ? ( {item.icon ? (
<div className="flex mr-3"> <div className="mr-3 flex">
<Icon type={item.icon} className={item.iconClassName ?? ''} size="small" /> <Icon type={item.icon} className={item.iconClassName ?? ''} size="small" />
</div> </div>
) : null} ) : null}

2
packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
View File

@@ -86,7 +86,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, s
return ( return (
<div <div
ref={contextMenuRef} ref={contextMenuRef}
className="bg-default rounded shadow-main min-w-60 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto fixed" className="max-h-120 fixed flex min-w-60 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main"
style={{ style={{
...contextMenuStyle, ...contextMenuStyle,
maxHeight: contextMenuMaxHeight, maxHeight: contextMenuMaxHeight,

18
packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
View File

@@ -67,7 +67,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<> <>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onPreview} onClick={onPreview}
> >
<Icon type="file" className="mr-2 text-neutral" /> <Icon type="file" className="mr-2 text-neutral" />
@@ -78,7 +78,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
{isFileAttachedToNote ? ( {isFileAttachedToNote ? (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onDetach} onClick={onDetach}
> >
<Icon type="link-off" className="mr-2 text-neutral" /> <Icon type="link-off" className="mr-2 text-neutral" />
@@ -87,7 +87,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
) : shouldShowAttachOption ? ( ) : shouldShowAttachOption ? (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onAttach} onClick={onAttach}
> >
<Icon type="link" className="mr-2 text-neutral" /> <Icon type="link" className="mr-2 text-neutral" />
@@ -98,7 +98,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
)} )}
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles) void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
}} }}
@@ -109,7 +109,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
Password protection Password protection
</span> </span>
<Switch <Switch
className="px-0 pointer-events-none" className="pointer-events-none px-0"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
checked={hasProtectedFiles} checked={hasProtectedFiles}
/> />
@@ -117,7 +117,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<HorizontalSeparator classes="my-1" /> <HorizontalSeparator classes="my-1" />
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
void filesController.downloadFiles(selectionController.selectedFiles) void filesController.downloadFiles(selectionController.selectedFiles)
}} }}
@@ -128,7 +128,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
{shouldShowRenameOption && ( {shouldShowRenameOption && (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
renameToggleCallback?.(true) renameToggleCallback?.(true)
}} }}
@@ -139,7 +139,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
)} )}
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
void filesController.deleteFilesPermanently(selectionController.selectedFiles) void filesController.deleteFilesPermanently(selectionController.selectedFiles)
}} }}
@@ -148,7 +148,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<span className="text-danger">Delete permanently</span> <span className="text-danger">Delete permanently</span>
</button> </button>
{selectedFiles.length === 1 && ( {selectedFiles.length === 1 && (
<div className="px-3 pt-1.5 pb-0.5 text-xs text-neutral font-medium"> <div className="px-3 pt-1.5 pb-0.5 text-xs font-medium text-neutral">
<div> <div>
<span className="font-semibold">File ID:</span> {selectedFiles[0].uuid} <span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
</div> </div>

4
packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
View File

@@ -52,7 +52,7 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
}} }}
onBlur={closeOnBlur} onBlur={closeOnBlur}
ref={buttonRef} ref={buttonRef}
className="flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer" className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
> >
<VisuallyHidden>Actions</VisuallyHidden> <VisuallyHidden>Actions</VisuallyHidden>
<Icon type="more" className="block" /> <Icon type="more" className="block" />
@@ -71,7 +71,7 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
}} }}
className={`${ className={`${
open ? 'flex' : 'hidden' open ? 'flex' : 'hidden'
} flex-col min-w-80 max-h-120 max-w-xs py-2 fixed bg-default rounded shadow-main transition-transform duration-150 slide-down-animation overflow-y-auto`} } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main transition-transform duration-150`}
onBlur={closeOnBlur} onBlur={closeOnBlur}
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
> >

4
packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx
View File

@@ -58,9 +58,9 @@ const FilePreview = ({ file, application }: Props) => {
}, [application.files, downloadedBytes, file, isFilePreviewable]) }, [application.files, downloadedBytes, file, isFilePreviewable])
return isDownloading ? ( return isDownloading ? (
<div className="flex flex-col justify-center items-center flex-grow"> <div className="flex flex-grow flex-col items-center justify-center">
<div className="flex items-center"> <div className="flex items-center">
<Spinner className="w-5 h-5 mr-3" /> <Spinner className="mr-3 h-5 w-5" />
<div className="text-base font-semibold">{downloadProgress}%</div> <div className="text-base font-semibold">{downloadProgress}%</div>
</div> </div>
<span className="mt-3">Loading file...</span> <span className="mt-3">Loading file...</span>

10
packages/web/src/javascripts/Components/FilePreview/FilePreviewError.tsx
View File

@@ -12,12 +12,12 @@ type Props = {
const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCallback }: Props) => { const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCallback }: Props) => {
return ( return (
<div className="flex flex-col justify-center items-center flex-grow"> <div className="flex flex-grow flex-col items-center justify-center">
<NoPreviewIllustration className="w-30 h-30 mb-4" /> <NoPreviewIllustration className="mb-4 h-30 w-30" />
<div className="font-bold text-base mb-2">This file can't be previewed.</div> <div className="mb-2 text-base font-bold">This file can't be previewed.</div>
{isFilePreviewable ? ( {isFilePreviewable ? (
<> <>
<div className="text-sm text-center text-passive-0 mb-4 max-w-35ch"> <div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
There was an error loading the file. Try again, or download the file and open it using another application. There was an error loading the file. Try again, or download the file and open it using another application.
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
@@ -41,7 +41,7 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
</> </>
) : ( ) : (
<> <>
<div className="text-sm text-center text-passive-0 mb-4 max-w-35ch"> <div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
To view this file, download it and open it using another application. To view this file, download it and open it using another application.
</div> </div>
<Button <Button

4
packages/web/src/javascripts/Components/FilePreview/FilePreviewInfoPanel.tsx
View File

@@ -9,8 +9,8 @@ type Props = {
const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => { const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
return ( return (
<div className="flex flex-col min-w-70 p-4 border-0 border-l border-solid border-border"> <div className="flex min-w-70 flex-col border-0 border-l border-solid border-border p-4">
<div className="flex items-center mb-4"> <div className="mb-4 flex items-center">
<Icon type="info" className="mr-2" /> <Icon type="info" className="mr-2" />
<div className="font-semibold">File information</div> <div className="font-semibold">File information</div>
</div> </div>

14
packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
View File

@@ -78,20 +78,20 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
> >
<DialogContent <DialogContent
aria-label="File preview modal" aria-label="File preview modal"
className="flex flex-col rounded shadow-main p-0 min-w-[90%] min-h-[90%] bg-[color:var(--modal-background-color)] " className="flex min-h-[90%] min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main "
> >
<div <div
className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b border-solid border-border focus:shadow-none" className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
onKeyDown={keyDownHandler} onKeyDown={keyDownHandler}
> >
<div className="flex items-center"> <div className="flex items-center">
<div className="w-6 h-6">{IconComponent}</div> <div className="h-6 w-6">{IconComponent}</div>
<span className="ml-3 font-medium">{currentFile.name}</span> <span className="ml-3 font-medium">{currentFile.name}</span>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<button <button
className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-border border cursor-pointer rounded" className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
onClick={() => setShowFileInfoPanel((show) => !show)} onClick={() => setShowFileInfoPanel((show) => !show)}
> >
<Icon type="info" className="text-neutral" /> <Icon type="info" className="text-neutral" />
@@ -100,14 +100,14 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
ref={closeButtonRef} ref={closeButtonRef}
onClick={dismiss} onClick={dismiss}
aria-label="Close modal" aria-label="Close modal"
className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded" className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
> >
<Icon type="close" className="text-neutral" /> <Icon type="close" className="text-neutral" />
</button> </button>
</div> </div>
</div> </div>
<div className="flex flex-grow min-h-0"> <div className="flex min-h-0 flex-grow">
<div className="flex flex-grow items-center justify-center relative max-w-full"> <div className="relative flex max-w-full flex-grow items-center justify-center">
<FilePreview file={currentFile} application={application} key={currentFile.uuid} /> <FilePreview file={currentFile} application={application} key={currentFile.uuid} />
</div> </div>
{showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />} {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}

10
packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
View File

@@ -12,8 +12,8 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
const [imageZoomPercent, setImageZoomPercent] = useState(100) const [imageZoomPercent, setImageZoomPercent] = useState(100)
return ( return (
<div className="flex items-center justify-center w-full h-full min-h-0"> <div className="flex h-full min-h-0 w-full items-center justify-center">
<div className="flex items-center justify-center w-full h-full relative overflow-auto"> <div className="relative flex h-full w-full items-center justify-center overflow-auto">
<img <img
src={objectUrl} src={objectUrl}
style={{ style={{
@@ -37,10 +37,10 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
}} }}
/> />
</div> </div>
<div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border border-solid border-border rounded"> <div className="absolute left-1/2 bottom-6 flex -translate-x-1/2 items-center rounded border border-solid border-border bg-default py-1 px-3">
<span className="mr-1.5">Zoom:</span> <span className="mr-1.5">Zoom:</span>
<IconButton <IconButton
className="hover:bg-contrast p-1 rounded" className="rounded p-1 hover:bg-contrast"
icon={'subtract' as IconType} icon={'subtract' as IconType}
title="Zoom Out" title="Zoom Out"
focusable={true} focusable={true}
@@ -57,7 +57,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
/> />
<span className="mx-2">{imageZoomPercent}%</span> <span className="mx-2">{imageZoomPercent}%</span>
<IconButton <IconButton
className="hover:bg-contrast p-1 rounded" className="rounded p-1 hover:bg-contrast"
icon="add" icon="add"
title="Zoom In" title="Zoom In"
focusable={true} focusable={true}

6
packages/web/src/javascripts/Components/FilePreview/PreviewComponent.tsx
View File

@@ -33,12 +33,12 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
} }
if (file.mimeType.startsWith('video/')) { if (file.mimeType.startsWith('video/')) {
return <video className="w-full h-full" src={objectUrl} controls autoPlay /> return <video className="h-full w-full" src={objectUrl} controls autoPlay />
} }
if (file.mimeType.startsWith('audio/')) { if (file.mimeType.startsWith('audio/')) {
return ( return (
<div className="w-full h-full flex items-center justify-center"> <div className="flex h-full w-full items-center justify-center">
<audio src={objectUrl} controls /> <audio src={objectUrl} controls />
</div> </div>
) )
@@ -48,7 +48,7 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
return <TextPreview bytes={bytes} /> return <TextPreview bytes={bytes} />
} }
return <object className="w-full h-full" data={objectUrl} /> return <object className="h-full w-full" data={objectUrl} />
} }
export default PreviewComponent export default PreviewComponent

2
packages/web/src/javascripts/Components/FilePreview/TextPreview.tsx
View File

@@ -14,7 +14,7 @@ const TextPreview = ({ bytes }: Props) => {
return ( return (
<textarea <textarea
autoComplete="off" autoComplete="off"
className="w-full h-full flex-grow font-editor focus:shadow-none focus:outline-none" className="font-editor h-full w-full flex-grow focus:shadow-none focus:outline-none"
dir="auto" dir="auto"
id={ElementIds.FileTextPreview} id={ElementIds.FileTextPreview}
defaultValue={text} defaultValue={text}

2
packages/web/src/javascripts/Components/FileView/FileView.tsx
View File

@@ -19,7 +19,7 @@ const FileView = ({ application, viewControllerManager, file }: FileViewProps) =
return shouldShowProtectedOverlay ? ( return shouldShowProtectedOverlay ? (
<div aria-label="Note" className="section editor sn-component"> <div aria-label="Note" className="section editor sn-component">
<div className="h-full flex justify-center items-center"> <div className="flex h-full items-center justify-center">
<ProtectedItemOverlay <ProtectedItemOverlay
viewControllerManager={viewControllerManager} viewControllerManager={viewControllerManager}
hasProtectionSources={application.hasProtectionSources()} hasProtectionSources={application.hasProtectionSources()}

4
packages/web/src/javascripts/Components/FileView/FileViewWithoutProtection.tsx
View File

@@ -32,10 +32,10 @@ const FileViewWithoutProtection = ({ application, viewControllerManager, file }:
<div className="sn-component section editor" aria-label="File"> <div className="sn-component section editor" aria-label="File">
<div className="flex flex-col"> <div className="flex flex-col">
<div <div
className="content-title-bar section-title-bar z-editor-title-bar section-title-bar w-full" className="content-title-bar section-title-bar section-title-bar z-editor-title-bar w-full"
id="file-title-bar" id="file-title-bar"
> >
<div className="flex items-center justify-between h-8"> <div className="flex h-8 items-center justify-between">
<div className="flex-grow"> <div className="flex-grow">
<form onSubmit={onFormSubmit} className="title overflow-auto"> <form onSubmit={onFormSubmit} className="title overflow-auto">
<input <input

34
packages/web/src/javascripts/Components/Footer/Footer.tsx
View File

@@ -344,23 +344,23 @@ class Footer extends PureComponent<Props, State> {
<div className="sn-component"> <div className="sn-component">
<div <div
id="footer-bar" id="footer-bar"
className="flex justify-between items-center w-full h-6 px-3 bg-contrast text-text z-footer-bar border-t border-border select-none" className="z-footer-bar flex h-6 w-full select-none items-center justify-between border-t border-border bg-contrast px-3 text-text"
> >
<div className="left flex h-full"> <div className="left flex h-full">
<div className="sk-app-bar-item z-footer-bar-item relative select-none ml-0"> <div className="sk-app-bar-item relative z-footer-bar-item ml-0 select-none">
<div <div
onClick={this.accountMenuClickHandler} onClick={this.accountMenuClickHandler}
className={ className={
(this.state.showAccountMenu ? 'bg-border' : '') + (this.state.showAccountMenu ? 'bg-border' : '') +
' w-8 h-full flex items-center justify-center cursor-pointer rounded-full' ' flex h-full w-8 cursor-pointer items-center justify-center rounded-full'
} }
> >
<div <div
className={ className={
this.state.hasError ? 'text-danger' : (this.user ? 'text-info' : 'text-neutral') + ' w-5 h-5' this.state.hasError ? 'text-danger' : (this.user ? 'text-info' : 'text-neutral') + ' h-5 w-5'
} }
> >
<Icon type="account-circle" className="hover:text-info max-h-5" /> <Icon type="account-circle" className="max-h-5 hover:text-info" />
</div> </div>
</div> </div>
{this.state.showAccountMenu && ( {this.state.showAccountMenu && (
@@ -372,10 +372,10 @@ class Footer extends PureComponent<Props, State> {
/> />
)} )}
</div> </div>
<div className="sk-app-bar-item z-footer-bar-item relative select-none ml-0-important"> <div className="sk-app-bar-item ml-0-important relative z-footer-bar-item select-none">
<div <div
onClick={this.quickSettingsClickHandler} onClick={this.quickSettingsClickHandler}
className="w-8 h-full flex items-center justify-center cursor-pointer" className="flex h-full w-8 cursor-pointer items-center justify-center"
> >
<div className="h-5"> <div className="h-5">
<Icon <Icon
@@ -394,8 +394,8 @@ class Footer extends PureComponent<Props, State> {
</div> </div>
{this.state.showBetaWarning && ( {this.state.showBetaWarning && (
<Fragment> <Fragment>
<div className="flex items-center z-footer-bar-item pl-3 ml-3 relative select-none border-l border-solid border-border"> <div className="relative z-footer-bar-item ml-3 flex select-none items-center border-l border-solid border-border pl-3">
<a onClick={this.betaMessageClickHandler} className="no-decoration text-xs font-bold title"> <a onClick={this.betaMessageClickHandler} className="no-decoration title text-xs font-bold">
You are using a beta version of the app You are using a beta version of the app
</a> </a>
</div> </div>
@@ -404,7 +404,7 @@ class Footer extends PureComponent<Props, State> {
</div> </div>
<div className="center"> <div className="center">
{this.state.arbitraryStatusMessage && ( {this.state.arbitraryStatusMessage && (
<div className="flex items-center z-footer-bar-item relative select-none text-xs text-neutral font-bold"> <div className="relative z-footer-bar-item flex select-none items-center text-xs font-bold text-neutral">
{this.state.arbitraryStatusMessage} {this.state.arbitraryStatusMessage}
</div> </div>
)} )}
@@ -413,7 +413,7 @@ class Footer extends PureComponent<Props, State> {
{this.state.dataUpgradeAvailable && ( {this.state.dataUpgradeAvailable && (
<div <div
onClick={this.securityUpdateClickHandler} onClick={this.securityUpdateClickHandler}
className="flex items-center text-xs text-success font-bold z-footer-bar-item relative select-none" className="relative z-footer-bar-item flex select-none items-center text-xs font-bold text-success"
> >
Encryption upgrade available. Encryption upgrade available.
</div> </div>
@@ -421,15 +421,15 @@ class Footer extends PureComponent<Props, State> {
{this.state.newUpdateAvailable && ( {this.state.newUpdateAvailable && (
<div <div
onClick={this.newUpdateClickHandler} onClick={this.newUpdateClickHandler}
className="flex items-center ml-3 text-xs text-info font-bold z-footer-bar-item relative select-none" className="relative z-footer-bar-item ml-3 flex select-none items-center text-xs font-bold text-info"
> >
New update available. New update available.
</div> </div>
)} )}
{(this.state.outOfSync || this.state.showSyncResolution) && ( {(this.state.outOfSync || this.state.showSyncResolution) && (
<div className="flex items-center ml-3 z-footer-bar-item relative select-none"> <div className="relative z-footer-bar-item ml-3 flex select-none items-center">
{this.state.outOfSync && ( {this.state.outOfSync && (
<div onClick={this.syncResolutionClickHandler} className="font-bold text-xs text-warning"> <div onClick={this.syncResolutionClickHandler} className="text-xs font-bold text-warning">
Potentially Out of Sync Potentially Out of Sync
</div> </div>
)} )}
@@ -439,7 +439,7 @@ class Footer extends PureComponent<Props, State> {
</div> </div>
)} )}
{this.state.offline && ( {this.state.offline && (
<div className="flex items-center ml-3 text-xs font-bold z-footer-bar-item relative select-none"> <div className="relative z-footer-bar-item ml-3 flex select-none items-center text-xs font-bold">
Offline Offline
</div> </div>
)} )}
@@ -448,9 +448,9 @@ class Footer extends PureComponent<Props, State> {
id="lock-item" id="lock-item"
onClick={this.lockClickHandler} onClick={this.lockClickHandler}
title="Locks application and wipes unencrypted data from memory." title="Locks application and wipes unencrypted data from memory."
className="flex items-center z-footer-bar-item relative select-none pl-2 ml-3 hover:text-info border-l border-solid border-border cursor-pointer" className="relative z-footer-bar-item ml-3 flex cursor-pointer select-none items-center border-l border-solid border-border pl-2 hover:text-info"
> >
<Icon type="lock-filled" size="custom" className="w-4.5 h-4.5" /> <Icon type="lock-filled" size="custom" className="h-4.5 w-4.5" />
</div> </div>
)} )}
</div> </div>

6
packages/web/src/javascripts/Components/IndicatorCircle/IndicatorCircle.tsx
View File

@@ -7,11 +7,11 @@ const baseClassNames = 'border border-solid w-3 h-3 p-0 rounded-full flex-shrink
const IndicatorCircle = ({ style }: Props) => { const IndicatorCircle = ({ style }: Props) => {
switch (style) { switch (style) {
case 'neutral': case 'neutral':
return <div className={`${baseClassNames} bg-neutral border-neutral`} /> return <div className={`${baseClassNames} border-neutral bg-neutral`} />
case 'info': case 'info':
return <div className={`${baseClassNames} bg-info border-info`} /> return <div className={`${baseClassNames} border-info bg-info`} />
case 'danger': case 'danger':
return <div className={`${baseClassNames} bg-danger border-danger`} /> return <div className={`${baseClassNames} border-danger bg-danger`} />
} }
} }

2
packages/web/src/javascripts/Components/Input/DecoratedPasswordInput.tsx
View File

@@ -8,7 +8,7 @@ const Toggle: FunctionComponent<{
setIsToggled: Dispatch<SetStateAction<boolean>> setIsToggled: Dispatch<SetStateAction<boolean>>
}> = ({ isToggled, setIsToggled }) => ( }> = ({ isToggled, setIsToggled }) => (
<IconButton <IconButton
className="w-5 h-5 p-0 justify-center rounded-full hover:bg-passive-4 text-neutral" className="h-5 w-5 justify-center rounded-full p-0 text-neutral hover:bg-passive-4"
icon={isToggled ? 'eye-off' : 'eye'} icon={isToggled ? 'eye-off' : 'eye'}
iconClassName="w-3.5 h-3.5" iconClassName="w-3.5 h-3.5"
title="Show/hide password" title="Show/hide password"

2
packages/web/src/javascripts/Components/Menu/Menu.tsx
View File

@@ -53,7 +53,7 @@ const Menu: FunctionComponent<MenuProps> = ({
return ( return (
<menu <menu
className={`m-0 pl-0 list-none focus:shadow-none ${className}`} className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
ref={menuElementRef} ref={menuElementRef}
style={style} style={style}

4
packages/web/src/javascripts/Components/Menu/MenuItem.tsx
View File

@@ -40,7 +40,7 @@ const MenuItem = forwardRef(
<li className="list-none" role="none"> <li className="list-none" role="none">
<button <button
ref={ref} ref={ref}
className="flex items-center justify-between border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
onChange(!checked) onChange(!checked)
}} }}
@@ -59,7 +59,7 @@ const MenuItem = forwardRef(
ref={ref} ref={ref}
role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'} role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
className={`flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item ${className}`} className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none ${className}`}
onClick={onClick} onClick={onClick}
onBlur={onBlur} onBlur={onBlur}
{...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})} {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}

2
packages/web/src/javascripts/Components/Menu/MenuItemSeparator.tsx
View File

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
const MenuItemSeparator: FunctionComponent = () => ( const MenuItemSeparator: FunctionComponent = () => (
<li className="list-none" role="none"> <li className="list-none" role="none">
<div role="separator" className="h-[1px] my-2 bg-border" /> <div role="separator" className="my-2 h-[1px] bg-border" />
</li> </li>
) )

12
packages/web/src/javascripts/Components/MultipleSelectedFiles/MultipleSelectedFiles.tsx
View File

@@ -38,9 +38,9 @@ const MultipleSelectedFiles = ({
}, [selectionController]) }, [selectionController])
return ( return (
<div className="flex flex-col h-full items-center"> <div className="flex h-full flex-col items-center">
<div className="flex items-center justify-between p-4 w-full"> <div className="flex w-full items-center justify-between p-4">
<h1 className="text-lg font-bold m-0">{count} selected files</h1> <h1 className="m-0 text-lg font-bold">{count} selected files</h1>
<div className="flex"> <div className="flex">
<div className="mr-3"> <div className="mr-3">
<AttachedFilesButton <AttachedFilesButton
@@ -56,10 +56,10 @@ const MultipleSelectedFiles = ({
<FileOptionsPanel filesController={filesController} selectionController={selectionController} /> <FileOptionsPanel filesController={filesController} selectionController={selectionController} />
</div> </div>
</div> </div>
<div className="flex-grow flex flex-col justify-center items-center w-full max-w-md"> <div className="flex w-full max-w-md flex-grow flex-col items-center justify-center">
<IlNotesIcon className="block" /> <IlNotesIcon className="block" />
<h2 className="font-bold text-lg m-0 text-center mt-4">{count} selected files</h2> <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected files</h2>
<p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected files.</p> <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected files.</p>
<Button className="mt-2.5" onClick={cancelMultipleSelection}> <Button className="mt-2.5" onClick={cancelMultipleSelection}>
Cancel multiple selection Cancel multiple selection
</Button> </Button>

12
packages/web/src/javascripts/Components/MultipleSelectedNotes/MultipleSelectedNotes.tsx
View File

@@ -45,9 +45,9 @@ const MultipleSelectedNotes = ({
}, [selectionController]) }, [selectionController])
return ( return (
<div className="flex flex-col h-full items-center"> <div className="flex h-full flex-col items-center">
<div className="flex items-center justify-between p-4 w-full"> <div className="flex w-full items-center justify-between p-4">
<h1 className="text-lg font-bold m-0">{count} selected notes</h1> <h1 className="m-0 text-lg font-bold">{count} selected notes</h1>
<div className="flex"> <div className="flex">
<div className="mr-3"> <div className="mr-3">
<AttachedFilesButton <AttachedFilesButton
@@ -72,10 +72,10 @@ const MultipleSelectedNotes = ({
/> />
</div> </div>
</div> </div>
<div className="flex-grow flex flex-col justify-center items-center w-full max-w-md"> <div className="flex w-full max-w-md flex-grow flex-col items-center justify-center">
<IlNotesIcon className="block" /> <IlNotesIcon className="block" />
<h2 className="font-bold text-lg m-0 text-center mt-4">{count} selected notes</h2> <h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected notes</h2>
<p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected notes.</p> <p className="max-w-60 mt-2 text-center text-sm">Actions will be performed on all selected notes.</p>
<Button className="mt-2.5" onClick={cancelMultipleSelection}> <Button className="mt-2.5" onClick={cancelMultipleSelection}>
Cancel multiple selection Cancel multiple selection
</Button> </Button>

2
packages/web/src/javascripts/Components/Navigation/Navigation.tsx
View File

@@ -52,7 +52,7 @@ const Navigation: FunctionComponent<Props> = ({ application }) => {
<div id="navigation-content" className="content"> <div id="navigation-content" className="content">
<div className="section-title-bar"> <div className="section-title-bar">
<div className="section-title-bar-header"> <div className="section-title-bar-header">
<div className="text-sm title"> <div className="title text-sm">
<span className="font-bold">Views</span> <span className="font-bold">Views</span>
</div> </div>
</div> </div>

10
packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx
View File

@@ -24,10 +24,10 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
}, [noAccountWarningController]) }, [noAccountWarningController])
return ( return (
<div className="mt-4 p-4 rounded-md shadow grid grid-cols-1"> <div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow">
<h1 className="sk-h3 m-0 font-semibold text-sm">Data not backed up</h1> <h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
<p className="m-0 mt-1 col-start-1 col-end-3 text-sm">Sign in or register to back up your notes.</p> <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
<Button primary small className="mt-3 col-start-1 col-end-3 justify-self-start" onClick={showAccountMenu}> <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>
Open Account menu Open Account menu
</Button> </Button>
<button <button
@@ -35,7 +35,7 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
title="Ignore warning" title="Ignore warning"
aria-label="Ignore warning" aria-label="Ignore warning"
style={{ height: '20px' }} style={{ height: '20px' }}
className="border-0 m-0 p-0 bg-transparent cursor-pointer rounded-md col-start-2 row-start-1 text-neutral hover:text-info" className="col-start-2 row-start-1 m-0 cursor-pointer rounded-md border-0 bg-transparent p-0 text-neutral hover:text-info"
> >
<Icon type="close" className="block" /> <Icon type="close" className="block" />
</button> </button>

2
packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -81,7 +81,7 @@ class NoteGroupView extends PureComponent<Props, State> {
!this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles !this.state.showMultipleSelectedNotes && !this.state.showMultipleSelectedFiles
return ( return (
<div id={ElementIds.EditorColumn} className="h-full app-column app-column-third"> <div id={ElementIds.EditorColumn} className="app-column app-column-third h-full">
{this.state.showMultipleSelectedNotes && ( {this.state.showMultipleSelectedNotes && (
<MultipleSelectedNotes <MultipleSelectedNotes
application={this.application} application={this.application}

8
packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
View File

@@ -116,7 +116,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
return ( return (
<button <button
ref={tagRef} ref={tagRef}
className="h-6 bg-contrast border-0 rounded text-xs text-text flex items-center mt-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast py-2 pl-1 pr-2 mr-2" className="hover:bg-secondary-contrast focus:bg-secondary-contrast mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-contrast py-2 pl-1 pr-2 text-xs text-text"
onClick={onTagClick} onClick={onTagClick}
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
onFocus={onFocus} onFocus={onFocus}
@@ -124,8 +124,8 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
tabIndex={getTabIndex()} tabIndex={getTabIndex()}
title={longTitle} title={longTitle}
> >
<Icon type="hashtag" className="text-info mr-1" size="small" /> <Icon type="hashtag" className="mr-1 text-info" size="small" />
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px"> <span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
{prefixTitle && <span className="text-passive-1">{prefixTitle}</span>} {prefixTitle && <span className="text-passive-1">{prefixTitle}</span>}
{title} {title}
</span> </span>
@@ -133,7 +133,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
<a <a
ref={deleteTagRef} ref={deleteTagRef}
type="button" type="button"
className="ml-2 -mr-1 border-0 p-0 bg-transparent cursor-pointer flex" className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
onBlur={onBlur} onBlur={onBlur}
onClick={onDeleteTagClick} onClick={onDeleteTagClick}
tabIndex={-1} tabIndex={-1}

2
packages/web/src/javascripts/Components/NoteTags/NoteTagsContainer.tsx
View File

@@ -17,7 +17,7 @@ const NoteTagsContainer = ({ viewControllerManager }: Props) => {
return ( return (
<div <div
className="bg-transparent flex flex-wrap min-w-80 -mt-1 -mr-2" className="-mt-1 -mr-2 flex min-w-80 flex-wrap bg-transparent"
style={{ style={{
maxWidth: tagsContainerMaxWidth, maxWidth: tagsContainerMaxWidth,
}} }}

6
packages/web/src/javascripts/Components/NoteView/EditingDisabledBanner.tsx
View File

@@ -22,15 +22,15 @@ const EditingDisabledBanner: FunctionComponent<Props> = ({
return ( return (
<div <div
className={`flex items-center relative ${background} px-3.5 py-2 cursor-pointer text-sm`} className={`relative flex items-center ${background} cursor-pointer px-3.5 py-2 text-sm`}
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
onMouseOver={onMouseOver} onMouseOver={onMouseOver}
onClick={onClick} onClick={onClick}
> >
{showLockedIcon ? ( {showLockedIcon ? (
<Icon type="pencil-off" className={`${iconColor} flex fill-current mr-3`} /> <Icon type="pencil-off" className={`${iconColor} mr-3 flex fill-current`} />
) : ( ) : (
<Icon type="pencil" className={`${iconColor} flex fill-current mr-3`} /> <Icon type="pencil" className={`${iconColor} mr-3 flex fill-current`} />
)} )}
<span className={textColor}>{lockText}</span> <span className={textColor}>{lockText}</span>
</div> </div>

26
packages/web/src/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -871,7 +871,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
return ( return (
<div aria-label="Note" className="section editor sn-component"> <div aria-label="Note" className="section editor sn-component">
{this.state.showProtectedWarning && ( {this.state.showProtectedWarning && (
<div className="h-full flex justify-center items-center"> <div className="flex h-full items-center justify-center">
<ProtectedItemOverlay <ProtectedItemOverlay
viewControllerManager={this.viewControllerManager} viewControllerManager={this.viewControllerManager}
hasProtectionSources={this.application.hasProtectionSources()} hasProtectionSources={this.application.hasProtectionSources()}
@@ -886,7 +886,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
return ( return (
<div aria-label="Note" className="section editor sn-component"> <div aria-label="Note" className="section editor sn-component">
<div className="flex-grow flex flex-col"> <div className="flex flex-grow flex-col">
{this.state.noteLocked && ( {this.state.noteLocked && (
<EditingDisabledBanner <EditingDisabledBanner
onMouseLeave={() => { onMouseLeave={() => {
@@ -910,9 +910,9 @@ class NoteView extends PureComponent<NoteViewProps, State> {
{this.note && ( {this.note && (
<div <div
id="editor-title-bar" id="editor-title-bar"
className="content-title-bar section-title-bar z-editor-title-bar section-title-bar w-full" className="content-title-bar section-title-bar section-title-bar z-editor-title-bar w-full"
> >
<div className="flex items-center justify-between h-8"> <div className="flex h-8 items-center justify-between">
<div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}> <div className={(this.state.noteLocked ? 'locked' : '') + ' flex-grow'}>
<div className="title overflow-auto"> <div className="title overflow-auto">
<input <input
@@ -935,14 +935,14 @@ class NoteView extends PureComponent<NoteViewProps, State> {
<div id="save-status"> <div id="save-status">
<div <div
className={ className={
(this.state.syncTakingTooLong ? 'text-warning font-bold ' : '') + (this.state.syncTakingTooLong ? 'font-bold text-warning ' : '') +
(this.state.saveError ? 'text-danger font-bold ' : '') + (this.state.saveError ? 'font-bold text-danger ' : '') +
'text-xs message' 'message text-xs'
} }
> >
{this.state.noteStatus?.message} {this.state.noteStatus?.message}
</div> </div>
{this.state.noteStatus?.desc && <div className="text-xs desc">{this.state.noteStatus.desc}</div>} {this.state.noteStatus?.desc && <div className="desc text-xs">{this.state.noteStatus.desc}</div>}
</div> </div>
</div> </div>
<div className="mr-3"> <div className="mr-3">
@@ -1049,7 +1049,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
{this.state.availableStackComponents.length > 0 && ( {this.state.availableStackComponents.length > 0 && (
<div <div
id="component-stack-menu-bar" id="component-stack-menu-bar"
className="flex justify-between items-center w-full h-6 px-2 py-0 bg-contrast text-text border-t border-solid border-border" className="flex h-6 w-full items-center justify-between border-t border-solid border-border bg-contrast px-2 py-0 text-text"
> >
<div className="flex h-full"> <div className="flex h-full">
{this.state.availableStackComponents.map((component) => { {this.state.availableStackComponents.map((component) => {
@@ -1059,16 +1059,16 @@ class NoteView extends PureComponent<NoteViewProps, State> {
onClick={() => { onClick={() => {
this.toggleStackComponent(component).catch(console.error) this.toggleStackComponent(component).catch(console.error)
}} }}
className="flex justify-center items-center flex-grow [&:not(:first-child)]:ml-3 cursor-pointer" className="flex flex-grow cursor-pointer items-center justify-center [&:not(:first-child)]:ml-3"
> >
<div className="flex items-center h-full [&:not(:first-child)]:ml-2"> <div className="flex h-full items-center [&:not(:first-child)]:ml-2">
{this.stackComponentExpanded(component) && component.active && ( {this.stackComponentExpanded(component) && component.active && (
<IndicatorCircle style="info" /> <IndicatorCircle style="info" />
)} )}
{!this.stackComponentExpanded(component) && <IndicatorCircle style="neutral" />} {!this.stackComponentExpanded(component) && <IndicatorCircle style="neutral" />}
</div> </div>
<div className="flex items-center h-full [&:not(:first-child)]:ml-2"> <div className="flex h-full items-center [&:not(:first-child)]:ml-2">
<div className="font-bold whitespace-nowrap text-xs">{component.name}</div> <div className="whitespace-nowrap text-xs font-bold">{component.name}</div>
</div> </div>
</div> </div>
) )

2
packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
View File

@@ -45,7 +45,7 @@ const NotesContextMenu = ({
return contextMenuOpen ? ( return contextMenuOpen ? (
<div <div
ref={contextMenuRef} ref={contextMenuRef}
className="bg-default rounded shadow-main min-w-80 max-h-120 max-w-xs flex flex-col pt-2 overflow-y-auto fixed z-dropdown-menu" className="max-h-120 fixed z-dropdown-menu flex min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default pt-2 shadow-main"
style={{ style={{
...contextMenuPosition, ...contextMenuPosition,
maxHeight: contextMenuMaxHeight, maxHeight: contextMenuMaxHeight,

8
packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
View File

@@ -66,7 +66,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
}} }}
onBlur={closeOnBlur} onBlur={closeOnBlur}
ref={menuButtonRef} ref={menuButtonRef}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="hashtag" className="mr-2 text-neutral" /> <Icon type="hashtag" className="mr-2 text-neutral" />
@@ -88,12 +88,12 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
}} }}
className={`${ className={`${
isMenuOpen ? 'flex' : 'hidden' isMenuOpen ? 'flex' : 'hidden'
} flex-col py-2 bg-default rounded shadow-main min-w-80 max-h-120 max-w-xs fixed overflow-y-auto`} } max-h-120 fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default py-2 shadow-main`}
> >
{navigationController.tags.map((tag) => ( {navigationController.tags.map((tag) => (
<button <button
key={tag.uuid} key={tag.uuid}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item max-w-80" className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onBlur={closeOnBlur} onBlur={closeOnBlur}
onClick={() => { onClick={() => {
notesController.isTagInSelectedNotes(tag) notesController.isTagInSelectedNotes(tag)
@@ -102,7 +102,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
}} }}
> >
<span <span
className={`whitespace-nowrap overflow-hidden overflow-ellipsis className={`overflow-hidden overflow-ellipsis whitespace-nowrap
${notesController.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`} ${notesController.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`}
> >
{noteTagsController.getLongTitle(tag)} {noteTagsController.getLongTitle(tag)}

6
packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
View File

@@ -65,10 +65,10 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
}} }}
onBlur={closeOnBlur} onBlur={closeOnBlur}
ref={buttonRef} ref={buttonRef}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="dashboard" className="text-neutral mr-2" /> <Icon type="dashboard" className="mr-2 text-neutral" />
Change note type Change note type
</div> </div>
<Icon type="chevron-right" className="text-neutral" /> <Icon type="chevron-right" className="text-neutral" />
@@ -85,7 +85,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
...menuStyle, ...menuStyle,
position: 'fixed', position: 'fixed',
}} }}
className="bg-default rounded shadow-main flex flex-col max-h-120 min-w-68 fixed overflow-y-auto" className="max-h-120 fixed flex min-w-68 flex-col overflow-y-auto rounded bg-default shadow-main"
> >
{isOpen && ( {isOpen && (
<ChangeEditorMenu <ChangeEditorMenu

14
packages/web/src/javascripts/Components/NotesOptions/ListedActionsMenu.tsx
View File

@@ -100,8 +100,8 @@ const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedAc
return ( return (
<> <>
{isFetchingAccounts && ( {isFetchingAccounts && (
<div className="w-full flex items-center justify-center p-4"> <div className="flex w-full items-center justify-center p-4">
<Spinner className="w-5 h-5" /> <Spinner className="h-5 w-5" />
</div> </div>
)} )}
{!isFetchingAccounts && menuGroups.length ? ( {!isFetchingAccounts && menuGroups.length ? (
@@ -109,8 +109,8 @@ const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedAc
{menuGroups.map((group, index) => ( {menuGroups.map((group, index) => (
<Fragment key={group.account.authorId}> <Fragment key={group.account.authorId}>
<div <div
className={`w-full flex items-center px-2.5 py-2 text-input font-semibold text-text border-y border-solid border-border ${ className={`text-input flex w-full items-center border-y border-solid border-border px-2.5 py-2 font-semibold text-text ${
index === 0 ? 'border-t-0 mb-1' : 'my-1' index === 0 ? 'mb-1 border-t-0' : 'my-1'
}`} }`}
> >
<Icon type="notes" className="mr-2 text-info" /> {group.name} <Icon type="notes" className="mr-2 text-info" /> {group.name}
@@ -127,15 +127,15 @@ const ListedActionsMenu = ({ application, note, recalculateMenuStyle }: ListedAc
/> />
)) ))
) : ( ) : (
<div className="px-3 py-2 text-sm text-passive-0 select-none">No actions available</div> <div className="select-none px-3 py-2 text-sm text-passive-0">No actions available</div>
)} )}
</Fragment> </Fragment>
))} ))}
</> </>
) : null} ) : null}
{!isFetchingAccounts && !menuGroups.length ? ( {!isFetchingAccounts && !menuGroups.length ? (
<div className="w-full flex items-center justify-center px-4 py-6"> <div className="flex w-full items-center justify-center px-4 py-6">
<div className="text-sm text-passive-0 select-none">No Listed accounts found</div> <div className="select-none text-sm text-passive-0">No Listed accounts found</div>
</div> </div>
) : null} ) : null}
</> </>

6
packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
View File

@@ -59,10 +59,10 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
<DisclosureButton <DisclosureButton
ref={menuButtonRef} ref={menuButtonRef}
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
> >
<div className="flex items-center"> <div className="flex items-center">
<Icon type="listed" className="text-neutral mr-2" /> <Icon type="listed" className="mr-2 text-neutral" />
Listed actions Listed actions
</div> </div>
<Icon type="chevron-right" className="text-neutral" /> <Icon type="chevron-right" className="text-neutral" />
@@ -75,7 +75,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
}} }}
className={`${ className={`${
isMenuOpen ? 'flex' : 'hidden' isMenuOpen ? 'flex' : 'hidden'
} flex-col bg-default rounded shadow-main max-h-120 min-w-68 pb-1 fixed overflow-y-auto`} } max-h-120 fixed min-w-68 flex-col overflow-y-auto rounded bg-default pb-1 shadow-main`}
> >
{isMenuOpen && ( {isMenuOpen && (
<ListedActionsMenu application={application} note={note} recalculateMenuStyle={recalculateMenuStyle} /> <ListedActionsMenu application={application} note={note} recalculateMenuStyle={recalculateMenuStyle} />

6
packages/web/src/javascripts/Components/NotesOptions/ListedMenuItem.tsx
View File

@@ -39,19 +39,19 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
<button <button
key={action.url} key={action.url}
onClick={handleClick} onClick={handleClick}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-2 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
> >
<div className="flex flex-col"> <div className="flex flex-col">
<div className="font-semibold">{action.label}</div> <div className="font-semibold">{action.label}</div>
{action.access_type && ( {action.access_type && (
<div className="text-xs mt-0.5 text-passive-0"> <div className="mt-0.5 text-xs text-passive-0">
{'Uses '} {'Uses '}
<strong>{action.access_type}</strong> <strong>{action.access_type}</strong>
{' access to this note.'} {' access to this note.'}
</div> </div>
)} )}
</div> </div>
{isRunning && <Spinner className="w-3 h-3" />} {isRunning && <Spinner className="h-3 w-3" />}
</button> </button>
) )
} }

44
packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -21,10 +21,10 @@ type DeletePermanentlyButtonProps = {
const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => ( const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={onClick} onClick={onClick}
> >
<Icon type="close" className="text-danger mr-2" /> <Icon type="close" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span> <span className="text-danger">Delete permanently</span>
</button> </button>
) )
@@ -101,7 +101,7 @@ const NoteAttributes: FunctionComponent<{
const format = editor?.package_info?.file_type || 'txt' const format = editor?.package_info?.file_type || 'txt'
return ( return (
<div className="px-3 pt-1.5 pb-2.5 text-xs text-neutral font-medium"> <div className="px-3 pt-1.5 pb-2.5 text-xs font-medium text-neutral">
{typeof words === 'number' && (format === 'txt' || format === 'md') ? ( {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
<> <>
<div className="mb-1"> <div className="mb-1">
@@ -140,7 +140,7 @@ const SpellcheckOptions: FunctionComponent<{
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.toggleGlobalSpellcheckForNote(note).catch(console.error) notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
}} }}
@@ -153,7 +153,7 @@ const SpellcheckOptions: FunctionComponent<{
<Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} /> <Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} />
</button> </button>
{!spellcheckControllable && ( {!spellcheckControllable && (
<p className="text-xs px-3 py-1.5">Spellcheck cannot be controlled for this editor.</p> <p className="px-3 py-1.5 text-xs">Spellcheck cannot be controlled for this editor.</p>
)} )}
</div> </div>
) )
@@ -165,9 +165,9 @@ const NoteSizeWarning: FunctionComponent<{
note: SNNote note: SNNote
}> = ({ note }) => { }> = ({ note }) => {
return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? ( return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
<div className="flex items-center px-3 py-3.5 relative bg-warning-faded"> <div className="bg-warning-faded relative flex items-center px-3 py-3.5">
<Icon type="warning" className="text-accessory-tint-3 flex-shrink-0 mr-3" /> <Icon type="warning" className="mr-3 flex-shrink-0 text-accessory-tint-3" />
<div className="text-warning select-none leading-140% max-w-80%"> <div className="leading-140% max-w-80% select-none text-warning">
This note may have trouble syncing to the mobile application due to its size. This note may have trouble syncing to the mobile application due to its size.
</div> </div>
</div> </div>
@@ -274,7 +274,7 @@ const NotesOptions = ({
<> <>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={openRevisionHistoryModal} onClick={openRevisionHistoryModal}
> >
<Icon type="history" className={iconClass} /> <Icon type="history" className={iconClass} />
@@ -284,7 +284,7 @@ const NotesOptions = ({
</> </>
)} )}
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setLockSelectedNotes(!locked) notesController.setLockSelectedNotes(!locked)
}} }}
@@ -297,7 +297,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={locked} /> <Switch className="px-0" checked={locked} />
</button> </button>
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setHideSelectedNotePreviews(!hidePreviews) notesController.setHideSelectedNotePreviews(!hidePreviews)
}} }}
@@ -310,7 +310,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={!hidePreviews} /> <Switch className="px-0" checked={!hidePreviews} />
</button> </button>
<button <button
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item justify-between" className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setProtectSelectedNotes(!protect).catch(console.error) notesController.setProtectSelectedNotes(!protect).catch(console.error)
}} }}
@@ -339,7 +339,7 @@ const NotesOptions = ({
{unpinned && ( {unpinned && (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setPinSelectedNotes(true) notesController.setPinSelectedNotes(true)
}} }}
@@ -351,7 +351,7 @@ const NotesOptions = ({
{pinned && ( {pinned && (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setPinSelectedNotes(false) notesController.setPinSelectedNotes(false)
}} }}
@@ -362,7 +362,7 @@ const NotesOptions = ({
)} )}
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={downloadSelectedItems} onClick={downloadSelectedItems}
> >
<Icon type="download" className={iconClass} /> <Icon type="download" className={iconClass} />
@@ -370,7 +370,7 @@ const NotesOptions = ({
</button> </button>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={duplicateSelectedItems} onClick={duplicateSelectedItems}
> >
<Icon type="copy" className={iconClass} /> <Icon type="copy" className={iconClass} />
@@ -379,7 +379,7 @@ const NotesOptions = ({
{unarchived && ( {unarchived && (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setArchiveSelectedNotes(true).catch(console.error) notesController.setArchiveSelectedNotes(true).catch(console.error)
}} }}
@@ -391,7 +391,7 @@ const NotesOptions = ({
{archived && ( {archived && (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={() => { onClick={() => {
notesController.setArchiveSelectedNotes(false).catch(console.error) notesController.setArchiveSelectedNotes(false).catch(console.error)
}} }}
@@ -411,7 +411,7 @@ const NotesOptions = ({
) : ( ) : (
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={async () => { onClick={async () => {
await notesController.setTrashSelectedNotes(true) await notesController.setTrashSelectedNotes(true)
}} }}
@@ -424,7 +424,7 @@ const NotesOptions = ({
<> <>
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={async () => { onClick={async () => {
await notesController.setTrashSelectedNotes(false) await notesController.setTrashSelectedNotes(false)
}} }}
@@ -440,13 +440,13 @@ const NotesOptions = ({
/> />
<button <button
onBlur={closeOnBlur} onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-menu-item" className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
onClick={async () => { onClick={async () => {
await notesController.emptyTrash() await notesController.emptyTrash()
}} }}
> >
<div className="flex items-start"> <div className="flex items-start">
<Icon type="trash-sweep" className="text-danger mr-2" /> <Icon type="trash-sweep" className="mr-2 text-danger" />
<div className="flex-row"> <div className="flex-row">
<div className="text-danger">Empty Trash</div> <div className="text-danger">Empty Trash</div>
<div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div> <div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div>

4
packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
View File

@@ -71,7 +71,7 @@ const NotesOptionsPanel = ({
}} }}
onBlur={closeOnBlur} onBlur={closeOnBlur}
ref={buttonRef} ref={buttonRef}
className="flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer" className="bg-text-padding flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast"
> >
<VisuallyHidden>Actions</VisuallyHidden> <VisuallyHidden>Actions</VisuallyHidden>
<Icon type="more" className="block" /> <Icon type="more" className="block" />
@@ -90,7 +90,7 @@ const NotesOptionsPanel = ({
}} }}
className={`${ className={`${
open ? 'flex' : 'hidden' open ? 'flex' : 'hidden'
} flex-col min-w-80 max-h-120 max-w-xs pt-2 fixed bg-default rounded shadow-main transition-transform duration-150 slide-down-animation overflow-y-auto`} } max-h-120 slide-down-animation fixed min-w-80 max-w-xs flex-col overflow-y-auto rounded bg-default pt-2 shadow-main transition-transform duration-150`}
onBlur={closeOnBlur} onBlur={closeOnBlur}
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
> >

4
packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
View File

@@ -18,7 +18,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
}, [viewControllerManager]) }, [viewControllerManager])
return ( return (
<AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="p-0 max-w-[600px]"> <AlertDialog onDismiss={closeDialog} leastDestructiveRef={cancelRef} className="max-w-[600px] p-0">
<div className="sk-modal-content"> <div className="sk-modal-content">
<div className="sn-component"> <div className="sn-component">
<div className="sk-panel"> <div className="sk-panel">
@@ -34,7 +34,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
devices at any time. devices at any time.
</p> </p>
</AlertDialogDescription> </AlertDialogDescription>
<div className="flex my-1 mt-4 gap-2"> <div className="my-1 mt-4 flex gap-2">
<Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}> <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
Cancel Cancel
</Button> </Button>

8
packages/web/src/javascripts/Components/PasswordWizard/PasswordWizard.tsx
View File

@@ -242,7 +242,7 @@ class PasswordWizard extends PureComponent<Props, State> {
<div className="sk-panel-row"> <div className="sk-panel-row">
<div className="sk-panel-column stretch"> <div className="sk-panel-column stretch">
<form className="sk-panel-form"> <form className="sk-panel-form">
<label htmlFor="password-wiz-current-password" className="block mb-1"> <label htmlFor="password-wiz-current-password" className="mb-1 block">
Current Password Current Password
</label> </label>
@@ -256,7 +256,7 @@ class PasswordWizard extends PureComponent<Props, State> {
<div className="sk-panel-row" /> <div className="sk-panel-row" />
<label htmlFor="password-wiz-new-password" className="block mb-1"> <label htmlFor="password-wiz-new-password" className="mb-1 block">
New Password New Password
</label> </label>
@@ -268,7 +268,7 @@ class PasswordWizard extends PureComponent<Props, State> {
/> />
<div className="sk-panel-row" /> <div className="sk-panel-row" />
<label htmlFor="password-wiz-confirm-new-password" className="block mb-1"> <label htmlFor="password-wiz-confirm-new-password" className="mb-1 block">
Confirm New Password Confirm New Password
</label> </label>
@@ -285,7 +285,7 @@ class PasswordWizard extends PureComponent<Props, State> {
)} )}
{this.state.step === Steps.FinishStep && ( {this.state.step === Steps.FinishStep && (
<div className="sk-panel-section"> <div className="sk-panel-section">
<div className="font-bold text-info mb-1">Your password has been successfully changed.</div> <div className="mb-1 font-bold text-info">Your password has been successfully changed.</div>
<p className="sk-p"> <p className="sk-p">
Please ensure you are running the latest version of Standard Notes on all platforms to ensure Please ensure you are running the latest version of Standard Notes on all platforms to ensure
maximum compatibility. maximum compatibility.

2
packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
View File

@@ -27,7 +27,7 @@ const PinNoteButton: FunctionComponent<Props> = ({ className = '', notesControll
return ( return (
<button <button
className={`sn-icon-button flex justify-center items-center min-w-8 h-8 hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer ${ className={`sn-icon-button flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border text-neutral hover:bg-contrast focus:bg-contrast ${
pinned ? 'toggled' : '' pinned ? 'toggled' : ''
} ${className}`} } ${className}`}
onClick={togglePinned} onClick={togglePinned}

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/Advanced.tsx
View File

@@ -21,7 +21,7 @@ const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager
<PreferencesSegment> <PreferencesSegment>
<AccordionItem title={'Advanced Settings'}> <AccordionItem title={'Advanced Settings'}>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="flex-grow flex flex-col"> <div className="flex flex-grow flex-col">
<OfflineSubscription application={application} viewControllerManager={viewControllerManager} /> <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
<Extensions <Extensions
className={'mt-3'} className={'mt-3'}

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

@@ -33,13 +33,13 @@ const Authentication: FunctionComponent<Props> = ({ viewControllerManager }) =>
<div className="flex flex-col items-center px-12"> <div className="flex flex-col items-center px-12">
<AccountIllustration className="mb-3" /> <AccountIllustration className="mb-3" />
<Title>You're not signed in</Title> <Title>You're not signed in</Title>
<Text className="text-center mb-3"> <Text className="mb-3 text-center">
Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption. Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
</Text> </Text>
<Button primary label="Create free account" onClick={clickRegister} className="mb-3" /> <Button primary label="Create free account" onClick={clickRegister} className="mb-3" />
<div className="text-sm"> <div className="text-sm">
Already have an account?{' '} Already have an account?{' '}
<button className="border-0 p-0 bg-default text-info underline cursor-pointer" onClick={clickSignIn}> <button className="cursor-pointer border-0 bg-default p-0 text-info underline" onClick={clickSignIn}>
Sign in Sign in
</button> </button>
</div> </div>

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmail.tsx
View File

@@ -142,7 +142,7 @@ const ChangeEmail: FunctionComponent<Props> = ({ onCloseDialog, application }) =
<div> <div>
<ModalDialog> <ModalDialog>
<ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel> <ModalDialogLabel closeDialog={handleDialogClose}>Change Email</ModalDialogLabel>
<ModalDialogDescription className="px-4.5 flex flex-row items-center"> <ModalDialogDescription className="flex flex-row items-center px-4.5">
{currentStep === Steps.InitialStep && ( {currentStep === Steps.InitialStep && (
<ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} /> <ChangeEmailForm setNewEmail={setNewEmail} setCurrentPassword={setCurrentPassword} />
)} )}

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx
View File

@@ -11,7 +11,7 @@ const labelClassName = 'block mb-1'
const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => { const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
return ( return (
<div className="w-full flex flex-col"> <div className="flex w-full flex-col">
<div className="mt-2 mb-3"> <div className="mt-2 mb-3">
<label className={labelClassName} htmlFor="change-email-email-input"> <label className={labelClassName} htmlFor="change-email-email-input">
New Email: New Email:

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailSuccess.tsx
View File

@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react'
const ChangeEmailSuccess: FunctionComponent = () => { const ChangeEmailSuccess: FunctionComponent = () => {
return ( return (
<div> <div>
<div className={'font-bold text-info mb-2'}>Your email has been successfully changed.</div> <div className={'mb-2 font-bold text-info'}>Your email has been successfully changed.</div>
<p> <p>
Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
compatibility. compatibility.

6
packages/web/src/javascripts/Components/Preferences/Panes/Account/Credentials.tsx
View File

@@ -40,10 +40,10 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
<Title>Credentials</Title> <Title>Credentials</Title>
<Subtitle>Email</Subtitle> <Subtitle>Email</Subtitle>
<Text> <Text>
You're signed in as <span className="font-bold wrap">{user?.email}</span> You're signed in as <span className="wrap font-bold">{user?.email}</span>
</Text> </Text>
<Button <Button
className="min-w-20 mt-3" className="mt-3 min-w-20"
label="Change email" label="Change email"
onClick={() => { onClick={() => {
setIsChangeEmailDialogOpen(true) setIsChangeEmailDialogOpen(true)
@@ -54,7 +54,7 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
<Text> <Text>
Current password was set on <span className="font-bold">{passwordCreatedOn}</span> Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
</Text> </Text>
<Button className="min-w-20 mt-3" label="Change password" onClick={presentPasswordWizard} /> <Button className="mt-3 min-w-20" label="Change password" onClick={presentPasswordWizard} />
{isChangeEmailDialogOpen && ( {isChangeEmailDialogOpen && (
<ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} /> <ChangeEmail onCloseDialog={() => setIsChangeEmailDialogOpen(false)} application={application} />
)} )}

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

@@ -45,7 +45,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<Subtitle>Storage Quota</Subtitle> <Subtitle>Storage Quota</Subtitle>
{isLoading ? ( {isLoading ? (
<div className="mt-2"> <div className="mt-2">
<Spinner className="w-3 h-3" /> <Spinner className="h-3 w-3" />
</div> </div>
) : ( ) : (
<> <>
@@ -54,7 +54,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<span>{formatSizeToReadableString(filesQuotaTotal)}</span> used <span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
</div> </div>
<progress <progress
className="w-full progress-bar" className="progress-bar w-full"
aria-label="Files storage used" aria-label="Files storage used"
value={filesQuotaUsed} value={filesQuotaUsed}
max={filesQuotaTotal} max={filesQuotaTotal}

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

@@ -79,7 +79,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
return ( return (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-col mt-3 w-full"> <div className="mt-3 flex w-full flex-col">
<Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle> <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
<form onSubmit={handleSubscriptionCodeSubmit}> <form onSubmit={handleSubscriptionCodeSubmit}>
<div className={'mt-2'}> <div className={'mt-2'}>
@@ -94,7 +94,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
)} )}
</div> </div>
{(isSuccessfullyActivated || isSuccessfullyRemoved) && ( {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
<div className={'mt-3 mb-3 info'}> <div className={'info mt-3 mb-3'}>
Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'} Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}
. .
</div> </div>

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/SignOutView.tsx
View File

@@ -23,7 +23,7 @@ const SignOutView: FunctionComponent<Props> = observer(({ application, viewContr
<Title>Sign out</Title> <Title>Sign out</Title>
<Subtitle>Other devices</Subtitle> <Subtitle>Other devices</Subtitle>
<Text>Want to sign out on all devices except this one?</Text> <Text>Want to sign out on all devices except this one?</Text>
<div className="flex flex-row mt-3"> <div className="mt-3 flex flex-row">
<Button <Button
className="mr-3" className="mr-3"
label="Sign out other sessions" label="Sign out other sessions"

4
packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/NoSubscription.tsx
View File

@@ -32,9 +32,9 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
{isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>} {isLoadingPurchaseFlow && <Text>Redirecting you to the subscription page...</Text>}
{purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>} {purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
<div className="flex"> <div className="flex">
<LinkButton className="min-w-20 mt-3 mr-3" label="Learn More" link={window.plansUrl as string} /> <LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
{application.hasAccount() && ( {application.hasAccount() && (
<Button className="min-w-20 mt-3" primary label="Subscribe" onClick={onPurchaseClick} /> <Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />
)} )}
</div> </div>
</> </>

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx
View File

@@ -23,7 +23,7 @@ const Subscription: FunctionComponent<Props> = ({ application, viewControllerMan
<PreferencesGroup> <PreferencesGroup>
<PreferencesSegment> <PreferencesSegment>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="flex-grow flex flex-col"> <div className="flex flex-grow flex-col">
<Title>Subscription</Title> <Title>Subscription</Title>
{userSubscription && userSubscription.endsAt > now ? ( {userSubscription && userSubscription.endsAt > now ? (
<SubscriptionInformation subscriptionState={subscriptionState} application={application} /> <SubscriptionInformation subscriptionState={subscriptionState} application={application} />

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/Subscription/SubscriptionInformation.tsx
View File

@@ -18,7 +18,7 @@ const SubscriptionInformation = ({ subscriptionState, application }: Props) => {
return ( return (
<> <>
<StatusText subscriptionState={subscriptionState} /> <StatusText subscriptionState={subscriptionState} />
<Button className="min-w-20 mt-3 mr-3" label="Manage subscription" onClick={manageSubscription} /> <Button className="mt-3 mr-3 min-w-20" label="Manage subscription" onClick={manageSubscription} />
</> </>
) )
} }

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

@@ -36,13 +36,13 @@ const Sync: FunctionComponent<Props> = ({ application }: Props) => {
<PreferencesGroup> <PreferencesGroup>
<PreferencesSegment> <PreferencesSegment>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="flex-grow flex flex-col"> <div className="flex flex-grow flex-col">
<Title>Sync</Title> <Title>Sync</Title>
<Text> <Text>
Last synced <span className="font-bold">on {lastSyncDate}</span> Last synced <span className="font-bold">on {lastSyncDate}</span>
</Text> </Text>
<Button <Button
className="min-w-20 mt-3" className="mt-3 min-w-20"
label="Sync now" label="Sync now"
disabled={isSyncingInProgress} disabled={isSyncingInProgress}
onClick={doSynchronization} onClick={doSynchronization}

6
packages/web/src/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx
View File

@@ -171,7 +171,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
return ( return (
<div <div
className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${ className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
shouldShowEnableButton || backupFrequency ? 'flex justify-between items-center' : '' shouldShowEnableButton || backupFrequency ? 'flex items-center justify-between' : ''
}`} }`}
> >
<div> <div>
@@ -200,7 +200,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
<div> <div>
<Button <Button
label="Enable" label="Enable"
className={`px-1 text-xs min-w-40 ${additionalClass}`} className={`min-w-40 px-1 text-xs ${additionalClass}`}
onClick={installIntegration} onClick={installIntegration}
disabled={!isEntitledToCloudBackups} disabled={!isEntitledToCloudBackups}
/> />
@@ -209,7 +209,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
{backupFrequency && ( {backupFrequency && (
<div className={'flex flex-col items-end'}> <div className={'flex flex-col items-end'}>
<Button className={`min-w-40 mb-2 ${additionalClass}`} label="Perform Backup" onClick={performBackupNow} /> <Button className={`mb-2 min-w-40 ${additionalClass}`} label="Perform Backup" onClick={performBackupNow} />
<Button className="min-w-40" label="Disable" onClick={disable} /> <Button className="min-w-40" label="Disable" onClick={disable} />
</div> </div>
)} )}

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

@@ -131,12 +131,12 @@ const CloudLink: FunctionComponent<Props> = ({ application }) => {
<div className={additionalClass}> <div className={additionalClass}>
<Subtitle>Email preferences</Subtitle> <Subtitle>Email preferences</Subtitle>
<div className="flex items-center justify-between mt-1"> <div className="mt-1 flex items-center justify-between">
<div className="flex flex-col"> <div className="flex flex-col">
<Text>Receive a notification email if a cloud backup fails.</Text> <Text>Receive a notification email if a cloud backup fails.</Text>
</div> </div>
{isLoading ? ( {isLoading ? (
<Spinner className="w-4 h-4" /> <Spinner className="h-4 w-4" />
) : ( ) : (
<Switch <Switch
onChange={toggleMuteFailedCloudBackupEmails} onChange={toggleMuteFailedCloudBackupEmails}

6
packages/web/src/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx
View File

@@ -167,11 +167,11 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} /> <input type="radio" onChange={() => setIsBackupEncrypted(true)} checked={isBackupEncrypted} />
<span className="font-medium text-sm">Encrypted</span> <span className="text-sm font-medium">Encrypted</span>
</label> </label>
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} /> <input type="radio" onChange={() => setIsBackupEncrypted(false)} checked={!isBackupEncrypted} />
<span className="font-medium text-sm">Decrypted</span> <span className="text-sm font-medium">Decrypted</span>
</label> </label>
</div> </div>
</form> </form>
@@ -183,7 +183,7 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
<PreferencesSegment> <PreferencesSegment>
<Subtitle>Import a previously saved backup file</Subtitle> <Subtitle>Import a previously saved backup file</Subtitle>
<div className="flex flex-row items-center mt-3"> <div className="mt-3 flex flex-row items-center">
<Button label="Import backup" onClick={handleImportFile} /> <Button label="Import backup" onClick={handleImportFile} />
<input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" /> <input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
{isImportDataLoading && <Spinner className="ml-4" />} {isImportDataLoading && <Spinner className="ml-4" />}

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

@@ -114,7 +114,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>How often to receive backups.</Text> <Text>How often to receive backups.</Text>
<div className="mt-2"> <div className="mt-2">
{isLoading ? ( {isLoading ? (
<Spinner className="w-4 h-4" /> <Spinner className="h-4 w-4" />
) : ( ) : (
<Dropdown <Dropdown
id="def-editor-dropdown" id="def-editor-dropdown"
@@ -132,7 +132,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>Receive a notification email if an email backup fails.</Text> <Text>Receive a notification email if an email backup fails.</Text>
</div> </div>
{isLoading ? ( {isLoading ? (
<Spinner className="w-4 h-4" /> <Spinner className="h-4 w-4" />
) : ( ) : (
<Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} /> <Switch onChange={toggleMuteFailedBackupEmails} checked={!isFailedBackupEmailMuted} />
)} )}

16
packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/BackupsDropZone.tsx
View File

@@ -149,23 +149,23 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<EncryptionStatusItem <EncryptionStatusItem
status={decryptedFileItem.name} status={decryptedFileItem.name}
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />} icon={<Icon type="attachment-file" className="min-h-5 min-w-5" />}
checkmark={true} checkmark={true}
/> />
<HorizontalSeparator classes={'mt-3 mb-3'} /> <HorizontalSeparator classes={'mt-3 mb-3'} />
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<div> <div>
<Subtitle>1. Choose related data file</Subtitle> <Subtitle>1. Choose related data file</Subtitle>
<Text className={`text-xs mr-3 em ${binaryFile ? 'font-bold success' : ''}`}> <Text className={`em mr-3 text-xs ${binaryFile ? 'success font-bold' : ''}`}>
{droppedFile.file.uuid}/{FileBackupsConstantsV1.BinaryFileName} {droppedFile.file.uuid}/{FileBackupsConstantsV1.BinaryFileName}
</Text> </Text>
</div> </div>
<div> <div>
<Button <Button
label="Choose" label="Choose"
className={'px-1 text-xs min-w-40'} className={'min-w-40 px-1 text-xs'}
onClick={chooseRelatedBinaryFile} onClick={chooseRelatedBinaryFile}
disabled={!!binaryFile} disabled={!!binaryFile}
/> />
@@ -174,19 +174,19 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<HorizontalSeparator classes={'mt-3 mb-3'} /> <HorizontalSeparator classes={'mt-3 mb-3'} />
<div className="flex justify-between items-center"> <div className="flex items-center justify-between">
<Subtitle>2. Decrypt and save file to your computer</Subtitle> <Subtitle>2. Decrypt and save file to your computer</Subtitle>
<div> <div>
<Button <Button
label={isSavingAsDecrypted ? undefined : 'Save'} label={isSavingAsDecrypted ? undefined : 'Save'}
className={'px-1 text-xs min-w-40'} className={'min-w-40 px-1 text-xs'}
onClick={downloadBinaryFileAsDecrypted} onClick={downloadBinaryFileAsDecrypted}
disabled={isSavingAsDecrypted || !binaryFile} disabled={isSavingAsDecrypted || !binaryFile}
> >
{isSavingAsDecrypted && ( {isSavingAsDecrypted && (
<div className="flex justify-center w-full"> <div className="flex w-full justify-center">
<Spinner className="w-5 h-5" /> <Spinner className="h-5 w-5" />
</div> </div>
)} )}
</Button> </Button>

6
packages/web/src/javascripts/Components/Preferences/Panes/Backups/Files/FileBackupsDesktop.tsx
View File

@@ -57,7 +57,7 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
<Title>File Backups</Title> <Title>File Backups</Title>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-col mr-10"> <div className="mr-10 flex flex-col">
<Subtitle> <Subtitle>
Automatically save encrypted backups of files uploaded on any device to this computer. Automatically save encrypted backups of files uploaded on any device to this computer.
</Subtitle> </Subtitle>
@@ -86,11 +86,11 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
<EncryptionStatusItem <EncryptionStatusItem
status={backupsLocation} status={backupsLocation}
icon={<Icon type="attachment-file" className="min-w-5 min-h-5" />} icon={<Icon type="attachment-file" className="min-h-5 min-w-5" />}
checkmark={false} checkmark={false}
/> />
<div className="flex flex-row mt-2.5"> <div className="mt-2.5 flex flex-row">
<Button label="Open Backups Location" className={'mr-3 text-xs'} onClick={openBackupsLocation} /> <Button label="Open Backups Location" className={'mr-3 text-xs'} onClick={openBackupsLocation} />
<Button label="Change Backups Location" className={'mr-3 text-xs'} onClick={changeBackupsLocation} /> <Button label="Change Backups Location" className={'mr-3 text-xs'} onClick={changeBackupsLocation} />
</div> </div>

10
packages/web/src/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx
View File

@@ -39,12 +39,12 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
} }
return ( return (
<div className="flex flex-row mr-3 items-center"> <div className="mr-3 flex flex-row items-center">
<input <input
ref={inputRef} ref={inputRef}
disabled={!isRenaming || !renameable} disabled={!isRenaming || !renameable}
autoComplete="off" autoComplete="off"
className="flex-grow text-base font-bold no-border bg-default px-0 text-text" className="no-border flex-grow bg-default px-0 text-base font-bold text-text"
type="text" type="text"
value={newExtensionName} value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)} onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
@@ -54,18 +54,18 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
{isRenaming && ( {isRenaming && (
<> <>
<a className="pt-1 cursor-pointer" onClick={confirmRename}> <a className="cursor-pointer pt-1" onClick={confirmRename}>
Confirm Confirm
</a> </a>
<div className="min-w-3" /> <div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}> <a className="cursor-pointer pt-1" onClick={cancelRename}>
Cancel Cancel
</a> </a>
</> </>
)} )}
{renameable && !isRenaming && ( {renameable && !isRenaming && (
<a className="pt-1 cursor-pointer" onClick={startRenaming}> <a className="cursor-pointer pt-1" onClick={startRenaming}>
Rename Rename
</a> </a>
)} )}

Some files were not shown because too many files have changed in this diff Show More