rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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) => {
switch (type) {
case ToastType.Success:
return <CheckCircleFilledIcon className={`w-5 h-5 ${colorForToastType(type)}`} />
return <CheckCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
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.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:
return null
}
@@ -77,7 +77,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
<div
data-index={index}
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={{
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)',
transition: shouldReduceMotion ? undefined : 'all 0.2s ease',
@@ -90,9 +90,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
}}
ref={ref}
>
<div className={`flex items-center w-full ${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}
<div className="text-sm text-text">{toast.message}</div>
<div className={`flex w-full items-center ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
{icon ? <div className="sn-icon mr-2 flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
<div className="text-text text-sm">{toast.message}</div>
{hasActions && (
<div className="ml-4">
{toast.actions?.map((action, index) => (
@@ -101,7 +101,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
paddingLeft: '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,
)} ${index !== 0 ? 'ml-2' : ''}`}
onClick={() => {
@@ -116,9 +116,9 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
)}
</div>
{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
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"
style={{
width: `${toast.progress}%`,

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

@@ -11,7 +11,7 @@ export const ToastContainer: FunctionComponent = () => {
}
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) => (
<ToastTimer toast={toast} index={index} key={toast.id} />
))}

1
packages/web/package.json
View File

@@ -47,6 +47,7 @@
"postcss": "^8.4.14",
"postcss-loader": "^7.0.0",
"prettier": "*",
"prettier-plugin-tailwindcss": "^0.1.11",
"sass-loader": "*",
"svg-jest": "^1.0.1",
"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 (
<div ref={ref} id="account-menu" className="sn-component">
<div
className={`z-footer-bar-item-panel bottom-full left-0 cursor-auto bg-default rounded shadow-main ${
shouldAnimateCloseMenu ? 'slide-up-animation' : 'transition-transform duration-150 slide-down-animation'
} min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto absolute`}
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' : 'slide-down-animation transition-transform duration-150'
}`}
onKeyDown={handleKeyDown}
>
<MenuPaneSelector

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

@@ -98,19 +98,19 @@ const AdvancedOptions: FunctionComponent<Props> = ({
return (
<>
<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}
>
<div className="flex items-center">
Advanced options
<Icon type="chevron-down" className="text-passive-1 ml-1" />
<Icon type="chevron-down" className="ml-1 text-passive-1" />
</div>
</button>
{showAdvanced ? (
<div className="px-3 my-2">
<div className="my-2 px-3">
{children}
<div className="flex justify-between items-center mb-1">
<div className="mb-1 flex items-center justify-between">
<Checkbox
name="private-workspace"
label="Private workspace"
@@ -147,7 +147,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
)}
{onStrictSignInChange && (
<div className="flex justify-between items-center mb-1">
<div className="mb-1 flex items-center justify-between">
<Checkbox
name="use-strict-signin"
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 (
<>
<div className="flex items-center px-3 mt-1 mb-3">
<div className="mt-1 mb-3 flex items-center px-3">
<IconButton
icon="arrow-left"
title="Go back"
className="flex mr-2 text-neutral p-0"
className="mr-2 flex p-0 text-neutral"
onClick={handleGoBack}
focusable={true}
disabled={isRegistering}
/>
<div className="font-bold text-base">Confirm password</div>
<div className="text-base font-bold">Confirm password</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,{' '}
<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.
</div>
<form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
<form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
<DecoratedPasswordInput
className="mb-2"
disabled={isRegistering}
@@ -128,7 +128,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
ref={passwordInputRef}
value={confirmPassword}
/>
{error ? <div className="text-danger my-2">{error}</div> : null}
{error ? <div className="my-2 text-danger">{error}</div> : null}
<Button
primary
fullWidth

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

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

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

@@ -89,31 +89,31 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
return (
<>
<div className="flex items-center justify-between px-3 mt-1 mb-1">
<div className="font-bold text-base">Account</div>
<div className="mt-1 mb-1 flex items-center justify-between px-3">
<div className="text-base font-bold">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="text-neutral" />
</div>
</div>
{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 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>
</div>
<div className="flex items-start justify-between px-3 mb-2">
<div className="mb-2 flex items-start justify-between px-3">
{isSyncingInProgress ? (
<div className="flex items-center text-info text-sm font-semibold">
<Spinner className="w-5 h-5 mr-2" />
<div className="flex items-center text-sm font-semibold text-info">
<Spinner className="mr-2 h-5 w-5" />
Syncing...
</div>
) : (
<div className="flex items-start">
<Icon type="check-circle" className="mr-2 text-success" />
<div>
<div className="font-semibold text-success text-sm">Last synced:</div>
<div className="text-text text-sm">{lastSyncDate}</div>
<div className="text-sm font-semibold text-success">Last synced:</div>
<div className="text-sm text-text">{lastSyncDate}</div>
</div>
</div>
)}
@@ -124,14 +124,14 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
</>
) : (
<>
<div className="px-3 mb-1">
<div className="mb-3 text-foreground text-sm">
<div className="mb-1 px-3">
<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
encryption.
</div>
<div className="flex items-center text-passive-1">
<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>
</>

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

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

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

@@ -78,13 +78,13 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
}}
>
<Icon type="user-add" className="text-neutral mr-2" />
<Icon type="user-add" className="mr-2 text-neutral" />
Add another workspace
</MenuItem>
{!hideWorkspaceOptions && (
<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
</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"
>
<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
</div>
<Icon type="chevron-right" className="text-neutral" />
@@ -61,7 +61,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
{isOpen && (
<div
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}
>
<WorkspaceSwitcherMenu

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

@@ -84,7 +84,7 @@ class ApplicationGroupView extends Component<Props, State> {
<DialogContent
aria-label="Switching workspace"
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}

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

@@ -270,14 +270,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
}
}}
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' : ''
}`}
onBlur={closeOnBlur}
>
<VisuallyHidden>Attached files</VisuallyHidden>
<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>
<DisclosurePanel
onKeyDown={(event) => {
@@ -291,7 +291,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
...position,
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}
>
{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">
<button
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 ${
currentTab === PopoverTabs.AttachedFiles ? 'text-info font-medium shadow-bottom' : 'text-text'
} ${attachedTabDisabled ? 'text-neutral cursor-not-allowed' : ''}`}
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 ? 'font-medium text-info shadow-bottom' : 'text-text'
} ${attachedTabDisabled ? 'cursor-not-allowed text-neutral' : ''}`}
onClick={() => {
setCurrentTab(PopoverTabs.AttachedFiles)
}}
@@ -94,8 +94,8 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
</button>
<button
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 ${
currentTab === PopoverTabs.AllFiles ? 'text-info font-medium shadow-bottom' : 'text-text'
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 ? 'font-medium text-info shadow-bottom' : 'text-text'
}`}
onClick={() => {
setCurrentTab(PopoverTabs.AllFiles)
@@ -105,13 +105,13 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
All files
</button>
</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 ? (
<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">
<input
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..."
value={searchQuery}
onInput={(e) => {
@@ -122,7 +122,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
/>
{searchQuery.length > 0 && (
<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={() => {
setSearchQuery('')
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="w-18 h-18 mb-2">
<div className="flex w-full flex-col items-center justify-center py-8">
<div className="mb-2 h-18 w-18">
<FilesIllustration />
</div>
<div className="text-sm font-medium mb-3">
<div className="mb-3 text-sm font-medium">
{searchQuery.length > 0
? 'No result found'
: currentTab === PopoverTabs.AttachedFiles
@@ -164,13 +164,13 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
<Button onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</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>
{filteredList.length > 0 && (
<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}
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"
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')}
<div className="flex flex-col mx-4">
<div className="mx-4 flex flex-col">
{isRenamingFile ? (
<input
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}
ref={fileNameInputRef}
onInput={handleFileNameInput}
@@ -99,10 +99,10 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
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>
{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>
)}

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

@@ -66,7 +66,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<DisclosureButton
ref={menuButtonRef}
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" />
</DisclosureButton>
@@ -78,13 +78,13 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
}}
className={`${
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 && (
<>
<button
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={() => {
previewHandler(file)
closeMenu()
@@ -96,7 +96,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
{isAttachedToNote ? (
<button
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={() => {
handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote,
@@ -111,7 +111,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
) : (
<button
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={() => {
handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
@@ -126,7 +126,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
)}
<HorizontalSeparator classes="my-1" />
<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={() => {
handleFileAction({
type: PopoverFileItemActionType.ToggleFileProtection,
@@ -143,7 +143,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
Password protection
</span>
<Switch
className="px-0 pointer-events-none"
className="pointer-events-none px-0"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
checked={isFileProtected}
/>
@@ -151,7 +151,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<HorizontalSeparator classes="my-1" />
<button
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={() => {
handleFileAction({
type: PopoverFileItemActionType.DownloadFile,
@@ -165,7 +165,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button>
<button
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={() => {
setIsRenamingFile(true)
}}
@@ -175,7 +175,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
</button>
<button
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={() => {
handleFileAction({
type: PopoverFileItemActionType.DeleteFile,
@@ -187,7 +187,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
<Icon type="trash" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span>
</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>
<span className="font-semibold">File ID:</span> {file.uuid}
</div>

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

@@ -30,7 +30,7 @@ const IconButton: FunctionComponent<Props> = ({
<button
type="button"
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}
disabled={disabled}
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 ' : ''
return (
<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 ?? ''
}`}
onClick={click}

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

@@ -184,7 +184,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
>
<DialogContent
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
? 'shadow-overlay-light border border-solid border-border'
: 'focus:shadow-none'
@@ -194,20 +194,20 @@ const ChallengeModal: FunctionComponent<Props> = ({
<button
onClick={cancelChallenge}
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" />
</button>
)}
<ProtectedIllustration className="w-30 h-30 mb-4" />
<div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
<ProtectedIllustration className="mb-4 h-30 w-30" />
<div className="mb-3 max-w-76 text-center text-lg font-bold">{challenge.heading}</div>
{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
className="flex flex-col items-center min-w-76"
className="flex min-w-76 flex-col items-center"
onSubmit={(e) => {
e.preventDefault()
submit()
@@ -224,12 +224,12 @@ const ChallengeModal: FunctionComponent<Props> = ({
/>
))}
</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'}
</Button>
{shouldShowForgotPasscode && (
<Button
className="flex items-center justify-center min-w-76"
className="flex min-w-76 items-center justify-center"
onClick={() => {
setBypassModalFocusLock(true)
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])
return (
<div key={prompt.id} className="w-full mb-3">
<div key={prompt.id} className="mb-3 w-full">
{prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
<div className="min-w-76">
<div className="text-sm font-medium mb-2">Allow protected access for</div>
<div className="flex items-center justify-between bg-passive-4 rounded p-1">
<div className="mb-2 text-sm font-medium">Allow protected access for</div>
<div className="flex items-center justify-between rounded bg-passive-4 p-1">
{ProtectionSessionDurations.map((option) => {
const selected = option.valueInSeconds === values[prompt.id].value
return (
<label
key={option.label}
className={`cursor-pointer px-2 py-1.5 rounded focus-within:ring-2 focus-within:ring-info ${
selected ? 'bg-default text-foreground font-semibold' : 'text-passive-0 hover:bg-passive-3'
className={`cursor-pointer rounded px-2 py-1.5 focus-within:ring-2 focus-within:ring-info ${
selected ? 'bg-default font-semibold text-foreground' : 'text-passive-0 hover:bg-passive-3'
}`}
>
<input
type="radio"
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={{
marginRight: 0,
}}
@@ -76,7 +76,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
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>
)
}

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

@@ -47,14 +47,14 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
return (
<div ref={containerRef}>
<Button ref={buttonRef} onClick={toggleMenu} className="flex items-center justify-center min-w-76 mt-2">
<Icon type="user-switch" className="text-neutral mr-2" />
<Button ref={buttonRef} onClick={toggleMenu} className="mt-2 flex min-w-76 items-center justify-center">
<Icon type="user-switch" className="mr-2 text-neutral" />
Switch workspace
</Button>
{isOpen && (
<div
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}
>
<WorkspaceSwitcherMenu

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

@@ -72,7 +72,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
}}
onBlur={closeOnBlur}
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>
<Icon type="dashboard" className="block" />
@@ -89,7 +89,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({
...position,
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}
>
{isOpen && (

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

@@ -183,7 +183,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
return (
<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) => {
const onClickEditorItem = () => {
selectEditor(item).catch(console.error)
@@ -193,7 +193,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
key={item.name}
type={MenuItemType.RadioButton}
onClick={onClickEditorItem}
className={'py-2 flex-row-reverse'}
className={'flex-row-reverse py-2'}
onBlur={closeOnBlur}
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 }) => {
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
className="mr-2"
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 }) => {
return (
<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={'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.'}
</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 }) => {
return (
<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="flex items-center">
<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 }) => {
return (
<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={'sk-app-bar-item'}>
<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-section stretch'}>
<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-panel-row'} />
<div className={'sk-panel-row'}>
<div className={'sk-panel-column'}>
<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">
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.

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()
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="sn-component">
<div className="sk-panel">
@@ -73,7 +73,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
</span>
</label>
<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={() => {
application.desktopDevice?.viewlocalBackups()
}}
@@ -83,7 +83,7 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
</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}>
Cancel
</Button>

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

@@ -66,7 +66,7 @@ const ContentList: FunctionComponent<Props> = ({
return (
<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}
onScroll={onScroll}
onKeyDown={onKeyDown}

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

@@ -53,7 +53,7 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
return (
<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'
}`}
id={item.uuid}
@@ -64,14 +64,14 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
}}
>
{!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 />
</div>
) : (
<div className="pr-4" />
)}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<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>
<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 (
<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>
{optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
</div>
@@ -72,7 +72,7 @@ const ContentListHeader = ({
</Disclosure>
</div>
<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}
aria-label={addButtonLabel}
onClick={addNewItem}

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

@@ -99,22 +99,20 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
return (
<Menu
className={
'py-1 bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-70 overflow-y-auto \
border border-solid border-border text-sm z-index-dropdown-menu \
flex flex-col'
'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'
}
a11yLabel="Notes list options menu"
closeMenu={closeDisplayOptionsMenu}
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
className="py-2"
type={MenuItemType.RadioButton}
onClick={toggleSortByDateModified}
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>
{sortBy === CollectionSort.UpdatedAt ? (
sortReverse ? (
@@ -131,7 +129,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByCreationDate}
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>
{sortBy === CollectionSort.CreatedAt ? (
sortReverse ? (
@@ -148,7 +146,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByTitle}
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>
{sortBy === CollectionSort.Title ? (
sortReverse ? (
@@ -160,7 +158,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
</div>
</MenuItem>
<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 && (
<MenuItem
type={MenuItemType.SwitchButton}
@@ -168,7 +166,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
checked={!hidePreview}
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
@@ -196,7 +194,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
Show icon
</MenuItem>
<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
type={MenuItemType.SwitchButton}
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 }) => {
return item.conflictOf ? (
<div className="flex flex-wrap items-center mt-0.5">
<div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger text-danger-contrast'}>
<div className="text-xs font-bold text-center">Conflicted Copy</div>
<div className="mt-0.5 flex flex-wrap items-center">
<div className={'mr-1 mt-2 rounded bg-danger py-1 px-1.5 text-danger-contrast'}>
<div className="text-center text-xs font-bold">Conflicted Copy</div>
</div>
</div>
) : 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 }) => {
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 && (
<span className="flex items-center" title="Editing Disabled">
<Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" />
</span>
)}
{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" />
</span>
)}
{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" />
</span>
)}
{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" />
</span>
)}
{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" />
</span>
)}

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

@@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy })
}
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>}
{!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || '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 (
<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) => (
<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}
>
<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>
))}

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

@@ -45,7 +45,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
return (
<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'
}`}
id={item.uuid}
@@ -58,14 +58,14 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
}}
>
{!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}`} />
</div>
) : (
<div className="pr-4" />
)}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<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>
{!hidePreview && !item.hidePreview && !item.protected && (
@@ -79,10 +79,10 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
></div>
)}
{!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 && (
<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>
)}

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

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

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

@@ -86,7 +86,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, s
return (
<div
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={{
...contextMenuStyle,
maxHeight: contextMenuMaxHeight,

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

@@ -67,7 +67,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<>
<button
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}
>
<Icon type="file" className="mr-2 text-neutral" />
@@ -78,7 +78,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
{isFileAttachedToNote ? (
<button
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}
>
<Icon type="link-off" className="mr-2 text-neutral" />
@@ -87,7 +87,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
) : shouldShowAttachOption ? (
<button
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}
>
<Icon type="link" className="mr-2 text-neutral" />
@@ -98,7 +98,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
)}
<HorizontalSeparator classes="my-1" />
<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={() => {
void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
}}
@@ -109,7 +109,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
Password protection
</span>
<Switch
className="px-0 pointer-events-none"
className="pointer-events-none px-0"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
checked={hasProtectedFiles}
/>
@@ -117,7 +117,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<HorizontalSeparator classes="my-1" />
<button
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={() => {
void filesController.downloadFiles(selectionController.selectedFiles)
}}
@@ -128,7 +128,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
{shouldShowRenameOption && (
<button
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={() => {
renameToggleCallback?.(true)
}}
@@ -139,7 +139,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
)}
<button
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={() => {
void filesController.deleteFilesPermanently(selectionController.selectedFiles)
}}
@@ -148,7 +148,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<span className="text-danger">Delete permanently</span>
</button>
{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>
<span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
</div>

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

@@ -52,7 +52,7 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
}}
onBlur={closeOnBlur}
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>
<Icon type="more" className="block" />
@@ -71,7 +71,7 @@ const FilesOptionsPanel = ({ filesController, selectionController }: Props) => {
}}
className={`${
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}
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])
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">
<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>
<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) => {
return (
<div className="flex flex-col justify-center items-center flex-grow">
<NoPreviewIllustration className="w-30 h-30 mb-4" />
<div className="font-bold text-base mb-2">This file can't be previewed.</div>
<div className="flex flex-grow flex-col items-center justify-center">
<NoPreviewIllustration className="mb-4 h-30 w-30" />
<div className="mb-2 text-base font-bold">This file can't be previewed.</div>
{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.
</div>
<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.
</div>
<Button

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

@@ -9,8 +9,8 @@ type Props = {
const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
return (
<div className="flex flex-col min-w-70 p-4 border-0 border-l border-solid border-border">
<div className="flex items-center mb-4">
<div className="flex min-w-70 flex-col border-0 border-l border-solid border-border p-4">
<div className="mb-4 flex items-center">
<Icon type="info" className="mr-2" />
<div className="font-semibold">File information</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
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
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}
onKeyDown={keyDownHandler}
>
<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>
</div>
<div className="flex items-center">
<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)}
>
<Icon type="info" className="text-neutral" />
@@ -100,14 +100,14 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
ref={closeButtonRef}
onClick={dismiss}
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" />
</button>
</div>
</div>
<div className="flex flex-grow min-h-0">
<div className="flex flex-grow items-center justify-center relative max-w-full">
<div className="flex min-h-0 flex-grow">
<div className="relative flex max-w-full flex-grow items-center justify-center">
<FilePreview file={currentFile} application={application} key={currentFile.uuid} />
</div>
{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)
return (
<div className="flex items-center justify-center w-full h-full min-h-0">
<div className="flex items-center justify-center w-full h-full relative overflow-auto">
<div className="flex h-full min-h-0 w-full items-center justify-center">
<div className="relative flex h-full w-full items-center justify-center overflow-auto">
<img
src={objectUrl}
style={{
@@ -37,10 +37,10 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
}}
/>
</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>
<IconButton
className="hover:bg-contrast p-1 rounded"
className="rounded p-1 hover:bg-contrast"
icon={'subtract' as IconType}
title="Zoom Out"
focusable={true}
@@ -57,7 +57,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
/>
<span className="mx-2">{imageZoomPercent}%</span>
<IconButton
className="hover:bg-contrast p-1 rounded"
className="rounded p-1 hover:bg-contrast"
icon="add"
title="Zoom In"
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/')) {
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/')) {
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 />
</div>
)
@@ -48,7 +48,7 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, 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

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

@@ -14,7 +14,7 @@ const TextPreview = ({ bytes }: Props) => {
return (
<textarea
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"
id={ElementIds.FileTextPreview}
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 ? (
<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
viewControllerManager={viewControllerManager}
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="flex flex-col">
<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"
>
<div className="flex items-center justify-between h-8">
<div className="flex h-8 items-center justify-between">
<div className="flex-grow">
<form onSubmit={onFormSubmit} className="title overflow-auto">
<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
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="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
onClick={this.accountMenuClickHandler}
className={
(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
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>
{this.state.showAccountMenu && (
@@ -372,10 +372,10 @@ class Footer extends PureComponent<Props, State> {
/>
)}
</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
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">
<Icon
@@ -394,8 +394,8 @@ class Footer extends PureComponent<Props, State> {
</div>
{this.state.showBetaWarning && (
<Fragment>
<div className="flex items-center z-footer-bar-item pl-3 ml-3 relative select-none border-l border-solid border-border">
<a onClick={this.betaMessageClickHandler} className="no-decoration text-xs font-bold title">
<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 title text-xs font-bold">
You are using a beta version of the app
</a>
</div>
@@ -404,7 +404,7 @@ class Footer extends PureComponent<Props, State> {
</div>
<div className="center">
{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}
</div>
)}
@@ -413,7 +413,7 @@ class Footer extends PureComponent<Props, State> {
{this.state.dataUpgradeAvailable && (
<div
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.
</div>
@@ -421,15 +421,15 @@ class Footer extends PureComponent<Props, State> {
{this.state.newUpdateAvailable && (
<div
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.
</div>
)}
{(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 && (
<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
</div>
)}
@@ -439,7 +439,7 @@ class Footer extends PureComponent<Props, State> {
</div>
)}
{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
</div>
)}
@@ -448,9 +448,9 @@ class Footer extends PureComponent<Props, State> {
id="lock-item"
onClick={this.lockClickHandler}
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>

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) => {
switch (style) {
case 'neutral':
return <div className={`${baseClassNames} bg-neutral border-neutral`} />
return <div className={`${baseClassNames} border-neutral bg-neutral`} />
case 'info':
return <div className={`${baseClassNames} bg-info border-info`} />
return <div className={`${baseClassNames} border-info bg-info`} />
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>>
}> = ({ isToggled, setIsToggled }) => (
<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'}
iconClassName="w-3.5 h-3.5"
title="Show/hide password"

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

@@ -53,7 +53,7 @@ const Menu: FunctionComponent<MenuProps> = ({
return (
<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}
ref={menuElementRef}
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">
<button
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={() => {
onChange(!checked)
}}
@@ -59,7 +59,7 @@ const MenuItem = forwardRef(
ref={ref}
role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
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}
onBlur={onBlur}
{...(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 = () => (
<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>
)

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

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

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

@@ -45,9 +45,9 @@ const MultipleSelectedNotes = ({
}, [selectionController])
return (
<div className="flex flex-col h-full items-center">
<div className="flex items-center justify-between p-4 w-full">
<h1 className="text-lg font-bold m-0">{count} selected notes</h1>
<div className="flex h-full flex-col items-center">
<div className="flex w-full items-center justify-between p-4">
<h1 className="m-0 text-lg font-bold">{count} selected notes</h1>
<div className="flex">
<div className="mr-3">
<AttachedFilesButton
@@ -72,10 +72,10 @@ const MultipleSelectedNotes = ({
/>
</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" />
<h2 className="font-bold text-lg m-0 text-center mt-4">{count} selected notes</h2>
<p className="text-sm mt-2 text-center max-w-60">Actions will be performed on all selected notes.</p>
<h2 className="m-0 mt-4 text-center text-lg font-bold">{count} selected notes</h2>
<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}>
Cancel multiple selection
</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 className="section-title-bar">
<div className="section-title-bar-header">
<div className="text-sm title">
<div className="title text-sm">
<span className="font-bold">Views</span>
</div>
</div>

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

@@ -24,10 +24,10 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
}, [noAccountWarningController])
return (
<div className="mt-4 p-4 rounded-md shadow grid grid-cols-1">
<h1 className="sk-h3 m-0 font-semibold text-sm">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>
<Button primary small className="mt-3 col-start-1 col-end-3 justify-self-start" onClick={showAccountMenu}>
<div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow">
<h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
<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="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>
Open Account menu
</Button>
<button
@@ -35,7 +35,7 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
title="Ignore warning"
aria-label="Ignore warning"
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" />
</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
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 && (
<MultipleSelectedNotes
application={this.application}

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

@@ -116,7 +116,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
return (
<button
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}
onKeyDown={onKeyDown}
onFocus={onFocus}
@@ -124,8 +124,8 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
tabIndex={getTabIndex()}
title={longTitle}
>
<Icon type="hashtag" className="text-info mr-1" size="small" />
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
<Icon type="hashtag" className="mr-1 text-info" size="small" />
<span className="max-w-290px overflow-hidden overflow-ellipsis whitespace-nowrap">
{prefixTitle && <span className="text-passive-1">{prefixTitle}</span>}
{title}
</span>
@@ -133,7 +133,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
<a
ref={deleteTagRef}
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}
onClick={onDeleteTagClick}
tabIndex={-1}

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

@@ -17,7 +17,7 @@ const NoteTagsContainer = ({ viewControllerManager }: Props) => {
return (
<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={{
maxWidth: tagsContainerMaxWidth,
}}

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

@@ -22,15 +22,15 @@ const EditingDisabledBanner: FunctionComponent<Props> = ({
return (
<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}
onMouseOver={onMouseOver}
onClick={onClick}
>
{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>
</div>

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

@@ -871,7 +871,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
return (
<div aria-label="Note" className="section editor sn-component">
{this.state.showProtectedWarning && (
<div className="h-full flex justify-center items-center">
<div className="flex h-full items-center justify-center">
<ProtectedItemOverlay
viewControllerManager={this.viewControllerManager}
hasProtectionSources={this.application.hasProtectionSources()}
@@ -886,7 +886,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
return (
<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 && (
<EditingDisabledBanner
onMouseLeave={() => {
@@ -910,9 +910,9 @@ class NoteView extends PureComponent<NoteViewProps, State> {
{this.note && (
<div
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="title overflow-auto">
<input
@@ -935,14 +935,14 @@ class NoteView extends PureComponent<NoteViewProps, State> {
<div id="save-status">
<div
className={
(this.state.syncTakingTooLong ? 'text-warning font-bold ' : '') +
(this.state.saveError ? 'text-danger font-bold ' : '') +
'text-xs message'
(this.state.syncTakingTooLong ? 'font-bold text-warning ' : '') +
(this.state.saveError ? 'font-bold text-danger ' : '') +
'message text-xs'
}
>
{this.state.noteStatus?.message}
</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 className="mr-3">
@@ -1049,7 +1049,7 @@ class NoteView extends PureComponent<NoteViewProps, State> {
{this.state.availableStackComponents.length > 0 && (
<div
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">
{this.state.availableStackComponents.map((component) => {
@@ -1059,16 +1059,16 @@ class NoteView extends PureComponent<NoteViewProps, State> {
onClick={() => {
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 && (
<IndicatorCircle style="info" />
)}
{!this.stackComponentExpanded(component) && <IndicatorCircle style="neutral" />}
</div>
<div className="flex items-center h-full [&:not(:first-child)]:ml-2">
<div className="font-bold whitespace-nowrap text-xs">{component.name}</div>
<div className="flex h-full items-center [&:not(:first-child)]:ml-2">
<div className="whitespace-nowrap text-xs font-bold">{component.name}</div>
</div>
</div>
)

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

@@ -45,7 +45,7 @@ const NotesContextMenu = ({
return contextMenuOpen ? (
<div
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={{
...contextMenuPosition,
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}
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">
<Icon type="hashtag" className="mr-2 text-neutral" />
@@ -88,12 +88,12 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
}}
className={`${
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) => (
<button
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}
onClick={() => {
notesController.isTagInSelectedNotes(tag)
@@ -102,7 +102,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
}}
>
<span
className={`whitespace-nowrap overflow-hidden overflow-ellipsis
className={`overflow-hidden overflow-ellipsis whitespace-nowrap
${notesController.isTagInSelectedNotes(tag) ? 'font-bold' : ''}`}
>
{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}
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">
<Icon type="dashboard" className="text-neutral mr-2" />
<Icon type="dashboard" className="mr-2 text-neutral" />
Change note type
</div>
<Icon type="chevron-right" className="text-neutral" />
@@ -85,7 +85,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
...menuStyle,
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 && (
<ChangeEditorMenu

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

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

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

@@ -59,10 +59,10 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
<DisclosureButton
ref={menuButtonRef}
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">
<Icon type="listed" className="text-neutral mr-2" />
<Icon type="listed" className="mr-2 text-neutral" />
Listed actions
</div>
<Icon type="chevron-right" className="text-neutral" />
@@ -75,7 +75,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
}}
className={`${
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 && (
<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
key={action.url}
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="font-semibold">{action.label}</div>
{action.access_type && (
<div className="text-xs mt-0.5 text-passive-0">
<div className="mt-0.5 text-xs text-passive-0">
{'Uses '}
<strong>{action.access_type}</strong>
{' access to this note.'}
</div>
)}
</div>
{isRunning && <Spinner className="w-3 h-3" />}
{isRunning && <Spinner className="h-3 w-3" />}
</button>
)
}

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

@@ -21,10 +21,10 @@ type DeletePermanentlyButtonProps = {
const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
<button
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}
>
<Icon type="close" className="text-danger mr-2" />
<Icon type="close" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span>
</button>
)
@@ -101,7 +101,7 @@ const NoteAttributes: FunctionComponent<{
const format = editor?.package_info?.file_type || 'txt'
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') ? (
<>
<div className="mb-1">
@@ -140,7 +140,7 @@ const SpellcheckOptions: FunctionComponent<{
return (
<div className="flex flex-col">
<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={() => {
notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
}}
@@ -153,7 +153,7 @@ const SpellcheckOptions: FunctionComponent<{
<Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} />
</button>
{!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>
)
@@ -165,9 +165,9 @@ const NoteSizeWarning: FunctionComponent<{
note: SNNote
}> = ({ note }) => {
return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
<div className="flex items-center px-3 py-3.5 relative bg-warning-faded">
<Icon type="warning" className="text-accessory-tint-3 flex-shrink-0 mr-3" />
<div className="text-warning select-none leading-140% max-w-80%">
<div className="bg-warning-faded relative flex items-center px-3 py-3.5">
<Icon type="warning" className="mr-3 flex-shrink-0 text-accessory-tint-3" />
<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.
</div>
</div>
@@ -274,7 +274,7 @@ const NotesOptions = ({
<>
<button
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}
>
<Icon type="history" className={iconClass} />
@@ -284,7 +284,7 @@ const NotesOptions = ({
</>
)}
<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={() => {
notesController.setLockSelectedNotes(!locked)
}}
@@ -297,7 +297,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={locked} />
</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={() => {
notesController.setHideSelectedNotePreviews(!hidePreviews)
}}
@@ -310,7 +310,7 @@ const NotesOptions = ({
<Switch className="px-0" checked={!hidePreviews} />
</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={() => {
notesController.setProtectSelectedNotes(!protect).catch(console.error)
}}
@@ -339,7 +339,7 @@ const NotesOptions = ({
{unpinned && (
<button
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={() => {
notesController.setPinSelectedNotes(true)
}}
@@ -351,7 +351,7 @@ const NotesOptions = ({
{pinned && (
<button
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={() => {
notesController.setPinSelectedNotes(false)
}}
@@ -362,7 +362,7 @@ const NotesOptions = ({
)}
<button
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}
>
<Icon type="download" className={iconClass} />
@@ -370,7 +370,7 @@ const NotesOptions = ({
</button>
<button
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}
>
<Icon type="copy" className={iconClass} />
@@ -379,7 +379,7 @@ const NotesOptions = ({
{unarchived && (
<button
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={() => {
notesController.setArchiveSelectedNotes(true).catch(console.error)
}}
@@ -391,7 +391,7 @@ const NotesOptions = ({
{archived && (
<button
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={() => {
notesController.setArchiveSelectedNotes(false).catch(console.error)
}}
@@ -411,7 +411,7 @@ const NotesOptions = ({
) : (
<button
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 () => {
await notesController.setTrashSelectedNotes(true)
}}
@@ -424,7 +424,7 @@ const NotesOptions = ({
<>
<button
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 () => {
await notesController.setTrashSelectedNotes(false)
}}
@@ -440,13 +440,13 @@ const NotesOptions = ({
/>
<button
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 () => {
await notesController.emptyTrash()
}}
>
<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="text-danger">Empty 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}
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>
<Icon type="more" className="block" />
@@ -90,7 +90,7 @@ const NotesOptionsPanel = ({
}}
className={`${
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}
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])
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="sn-component">
<div className="sk-panel">
@@ -34,7 +34,7 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
devices at any time.
</p>
</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}>
Cancel
</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-column stretch">
<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
</label>
@@ -256,7 +256,7 @@ class PasswordWizard extends PureComponent<Props, State> {
<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
</label>
@@ -268,7 +268,7 @@ class PasswordWizard extends PureComponent<Props, State> {
/>
<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
</label>
@@ -285,7 +285,7 @@ class PasswordWizard extends PureComponent<Props, State> {
)}
{this.state.step === Steps.FinishStep && (
<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">
Please ensure you are running the latest version of Standard Notes on all platforms to ensure
maximum compatibility.

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

@@ -27,7 +27,7 @@ const PinNoteButton: FunctionComponent<Props> = ({ className = '', notesControll
return (
<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' : ''
} ${className}`}
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>
<AccordionItem title={'Advanced Settings'}>
<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} />
<Extensions
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">
<AccountIllustration className="mb-3" />
<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.
</Text>
<Button primary label="Create free account" onClick={clickRegister} className="mb-3" />
<div className="text-sm">
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
</button>
</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>
<ModalDialog>
<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 && (
<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 }) => {
return (
<div className="w-full flex flex-col">
<div className="flex w-full flex-col">
<div className="mt-2 mb-3">
<label className={labelClassName} htmlFor="change-email-email-input">
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 = () => {
return (
<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>
Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum
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>
<Subtitle>Email</Subtitle>
<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>
<Button
className="min-w-20 mt-3"
className="mt-3 min-w-20"
label="Change email"
onClick={() => {
setIsChangeEmailDialogOpen(true)
@@ -54,7 +54,7 @@ const Credentials: FunctionComponent<Props> = ({ application }: Props) => {
<Text>
Current password was set on <span className="font-bold">{passwordCreatedOn}</span>
</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 && (
<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>
{isLoading ? (
<div className="mt-2">
<Spinner className="w-3 h-3" />
<Spinner className="h-3 w-3" />
</div>
) : (
<>
@@ -54,7 +54,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
<span>{formatSizeToReadableString(filesQuotaTotal)}</span> used
</div>
<progress
className="w-full progress-bar"
className="progress-bar w-full"
aria-label="Files storage used"
value={filesQuotaUsed}
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 (
<>
<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>
<form onSubmit={handleSubscriptionCodeSubmit}>
<div className={'mt-2'}>
@@ -94,7 +94,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
)}
</div>
{(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'}
.
</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>
<Subtitle>Other devices</Subtitle>
<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
className="mr-3"
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>}
{purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
<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() && (
<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>
</>

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>
<PreferencesSegment>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<Title>Subscription</Title>
{userSubscription && userSubscription.endsAt > now ? (
<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 (
<>
<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>
<PreferencesSegment>
<div className="flex flex-row items-center">
<div className="flex-grow flex flex-col">
<div className="flex flex-grow flex-col">
<Title>Sync</Title>
<Text>
Last synced <span className="font-bold">on {lastSyncDate}</span>
</Text>
<Button
className="min-w-20 mt-3"
className="mt-3 min-w-20"
label="Sync now"
disabled={isSyncingInProgress}
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 (
<div
className={`mr-1 ${isExpanded ? 'expanded' : ' '} ${
shouldShowEnableButton || backupFrequency ? 'flex justify-between items-center' : ''
shouldShowEnableButton || backupFrequency ? 'flex items-center justify-between' : ''
}`}
>
<div>
@@ -200,7 +200,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
<div>
<Button
label="Enable"
className={`px-1 text-xs min-w-40 ${additionalClass}`}
className={`min-w-40 px-1 text-xs ${additionalClass}`}
onClick={installIntegration}
disabled={!isEntitledToCloudBackups}
/>
@@ -209,7 +209,7 @@ const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerNa
{backupFrequency && (
<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} />
</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}>
<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">
<Text>Receive a notification email if a cloud backup fails.</Text>
</div>
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<Switch
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">
<label className="flex items-center gap-2">
<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 className="flex items-center gap-2">
<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>
</div>
</form>
@@ -183,7 +183,7 @@ const DataBackups = ({ application, viewControllerManager }: Props) => {
<PreferencesSegment>
<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} />
<input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
{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>
<div className="mt-2">
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<Dropdown
id="def-editor-dropdown"
@@ -132,7 +132,7 @@ const EmailBackups = ({ application }: Props) => {
<Text>Receive a notification email if an email backup fails.</Text>
</div>
{isLoading ? (
<Spinner className="w-4 h-4" />
<Spinner className="h-4 w-4" />
) : (
<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
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}
/>
<HorizontalSeparator classes={'mt-3 mb-3'} />
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div>
<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}
</Text>
</div>
<div>
<Button
label="Choose"
className={'px-1 text-xs min-w-40'}
className={'min-w-40 px-1 text-xs'}
onClick={chooseRelatedBinaryFile}
disabled={!!binaryFile}
/>
@@ -174,19 +174,19 @@ const BackupsDropZone: FunctionComponent<Props> = ({ application }) => {
<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>
<div>
<Button
label={isSavingAsDecrypted ? undefined : 'Save'}
className={'px-1 text-xs min-w-40'}
className={'min-w-40 px-1 text-xs'}
onClick={downloadBinaryFileAsDecrypted}
disabled={isSavingAsDecrypted || !binaryFile}
>
{isSavingAsDecrypted && (
<div className="flex justify-center w-full">
<Spinner className="w-5 h-5" />
<div className="flex w-full justify-center">
<Spinner className="h-5 w-5" />
</div>
)}
</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>
<div className="flex items-center justify-between">
<div className="flex flex-col mr-10">
<div className="mr-10 flex flex-col">
<Subtitle>
Automatically save encrypted backups of files uploaded on any device to this computer.
</Subtitle>
@@ -86,11 +86,11 @@ const FileBackupsDesktop = ({ application, backupsService }: Props) => {
<EncryptionStatusItem
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}
/>
<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="Change Backups Location" className={'mr-3 text-xs'} onClick={changeBackupsLocation} />
</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 (
<div className="flex flex-row mr-3 items-center">
<div className="mr-3 flex flex-row items-center">
<input
ref={inputRef}
disabled={!isRenaming || !renameable}
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"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
@@ -54,18 +54,18 @@ const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName
{isRenaming && (
<>
<a className="pt-1 cursor-pointer" onClick={confirmRename}>
<a className="cursor-pointer pt-1" onClick={confirmRename}>
Confirm
</a>
<div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}>
<a className="cursor-pointer pt-1" onClick={cancelRename}>
Cancel
</a>
</>
)}
{renameable && !isRenaming && (
<a className="pt-1 cursor-pointer" onClick={startRenaming}>
<a className="cursor-pointer pt-1" onClick={startRenaming}>
Rename
</a>
)}

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