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

chore: lint

Browse Source
This commit is contained in:
Aman Harwara
2023-07-12 23:59:58 +05:30
parent 139e8789a4
commit 3f796b48eb
104 changed files with 169 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -109,7 +109,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
return (
<>
<div className="mt-1 mb-3 flex items-center px-3">
<div className="mb-3 mt-1 flex items-center px-3">
<IconButton
icon="arrow-left"
title="Go back"
@@ -140,7 +140,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
<Button
primary
fullWidth
className="mt-1 mb-3"
className="mb-3 mt-1"
label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
onClick={handleConfirmFormSubmit}
disabled={isRegistering}

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

@@ -110,7 +110,7 @@ const CreateAccount: FunctionComponent<Props> = ({
return (
<>
<div className="mt-1 mb-3 flex items-center px-3">
<div className="mb-3 mt-1 flex items-center px-3">
<IconButton
icon="arrow-left"
title="Go back"

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

@@ -89,7 +89,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({
return (
<>
<div className="mt-1 mb-1 hidden items-center justify-between px-3 md:flex">
<div className="mb-1 mt-1 hidden items-center justify-between px-3 md:flex">
<div className="text-lg font-bold lg:text-base">Account</div>
<div className="flex cursor-pointer" onClick={closeMenu}>
<Icon type="close" className="text-neutral" />

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

@@ -187,7 +187,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
return (
<>
<div className="mt-1 mb-3 flex items-center px-3">
<div className="mb-3 mt-1 flex items-center px-3">
<IconButton
icon="arrow-left"
title="Go back"
@@ -225,7 +225,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
/>
{error ? <div className="my-2 text-danger">{error}</div> : null}
<Button
className="mt-1 mb-3"
className="mb-3 mt-1"
label={isSigningIn ? 'Signing in...' : 'Sign in'}
primary
onClick={handleSignInFormSubmit}

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

@@ -96,7 +96,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
onKeyDown={handleInputKeyDown}
onBlur={handleInputBlur}
onClick={(e) => e.stopPropagation()}
className="absolute top-1/2 left-11 -translate-y-1/2 bg-default"
className="absolute left-11 top-1/2 -translate-y-1/2 bg-default"
/>
)}
</div>

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

@@ -17,7 +17,7 @@ const AlertDialog = ({
<Dialog
store={dialog}
role="alertdialog"
className="fixed top-0 left-0 z-modal h-full w-full"
className="fixed left-0 top-0 z-modal h-full w-full"
modal={false}
portal={true}
preventBodyScroll={true}
@@ -29,7 +29,7 @@ const AlertDialog = ({
/>
<div
className={classNames(
'absolute top-1/2 left-1/2 z-[1] w-[95vw] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
'absolute left-1/2 top-1/2 z-[1] w-[95vw] -translate-x-1/2 -translate-y-1/2 rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
!className?.includes('max-w-') && 'max-w-[600px]',
className,
)}

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

@@ -276,7 +276,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
<button
onClick={cancelChallenge}
aria-label="Close modal"
className="absolute top-4 right-4 hidden cursor-pointer border-0 bg-transparent p-1 md:flex"
className="absolute right-4 top-4 hidden cursor-pointer border-0 bg-transparent p-1 md:flex"
>
<Icon type="close" className="text-neutral" />
</button>
@@ -314,7 +314,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
))}
</form>
{shouldShowSubmitButton && (
<Button primary disabled={isProcessing} className="mt-1 mb-3.5 min-w-76" onClick={submit}>
<Button primary disabled={isProcessing} className="mb-3.5 mt-1 min-w-76" onClick={submit}>
{isProcessing ? 'Generating Keys...' : 'Submit'}
</Button>
)}

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

@@ -117,7 +117,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({
type="radio"
name={`session-duration-${prompt.id}`}
className={
'absolute top-0 left-0 m-0 h-px w-px appearance-none focus:shadow-none focus:outline-none'
'absolute left-0 top-0 m-0 h-px w-px appearance-none focus:shadow-none focus:outline-none'
}
style={{
marginRight: 0,

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

@@ -198,7 +198,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
return (
<>
<Menu className="pt-0.5 pb-1" a11yLabel="Change note type menu" isOpen={isVisible}>
<Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
{groups
.filter((group) => group.items && group.items.length)
.map((group, index) => {
@@ -225,7 +225,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
{group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
{menuItem.uiFeature.displayName}
{menuItem.isLabs && (
<Pill className="py-0.5 px-1.5" style="success">
<Pill className="px-1.5 py-0.5" style="success">
Labs
</Pill>
)}

2
packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
View File

@@ -153,7 +153,7 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }
{group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
{item.uiFeature.displayName}
{item.isLabs && (
<Pill className="py-0.5 px-1.5" style="success">
<Pill className="px-1.5 py-0.5" style="success">
Labs
</Pill>
)}

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

@@ -15,7 +15,7 @@ const CheckIndicator = ({ checked, className, ...props }: { checked: boolean } &
{checked && (
<Icon
type="check"
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-info-contrast"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-info-contrast"
size="small"
/>
)}

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

@@ -414,7 +414,7 @@ const ClipperView = ({
<Icon type="user" className="mx-2" />
<div className="flex-grow py-2 text-sm font-semibold">{user.email}</div>
<button
className="flex-shrink-0 border-l border-border py-2 px-2 hover:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:outline-none"
className="flex-shrink-0 border-l border-border px-2 py-2 hover:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:outline-none"
onClick={showSignOutConfirmation}
>
<Icon type="signOut" className="text-neutral" />

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

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

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 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="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast px-2 py-2.5 text-text">
<div className={'left'}>
<div className={'sk-app-bar-item'}>
<div className={'sk-label.warning'}>There was an issue loading {componentName}.</div>

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

@@ -38,7 +38,7 @@ const NotEntitledBanner: FunctionComponent<Props> = ({ featureStatus, feature })
return (
<div className={'sn-component'}>
<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="flex min-h-[1.625rem] w-full select-none items-center justify-between border-b border-border bg-contrast px-2 py-2.5 text-text">
<div className={'left'}>
<div className="flex items-start">
<div className="mt-1">

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

@@ -34,7 +34,7 @@ const Calendar: FunctionComponent<Props> = ({ activities, startDate, onDateSelec
return (
<div className={`w-300 ${className} min-h-[210px]`}>
<div className="mr-auto ml-auto w-70">
<div className="ml-auto mr-auto w-70">
<div className="flex w-full flex-wrap">
{CalendarDaysOfTheWeek.map((d) => (
<div className={'flex h-8 w-[14.2%] items-center justify-center'} key={d}>

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

@@ -184,7 +184,7 @@ const InfiniteCalendar = forwardRef<InfiniteCalendarInterface, Props>(
<div
onClick={toggleVisibility}
className={classNames(
'text-md flex cursor-pointer items-center justify-center py-2 px-4',
'text-md flex cursor-pointer items-center justify-center px-4 py-2',
'text-center font-bold hover:bg-contrast',
)}
>

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

@@ -56,7 +56,7 @@ export const DailyItemCell = forwardRef(
}`}
id={section.id}
>
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-4">
<div className="min-w-0 flex-grow border-b border-solid border-border px-4 py-4">
<div className="flex items-start overflow-hidden text-base">
<DaySquare weekday={section.weekday} hasActivity={item != undefined} day={section.day} />

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

@@ -9,7 +9,7 @@ const EmptyFilesView = ({ addNewItem }: Props) => {
return (
<div className="flex h-full w-full flex-col items-center justify-center">
<FilesIllustration className="h-32 w-32" />
<div className="mt-4 mb-2 text-lg font-bold">You don't have any files yet</div>
<div className="mb-2 mt-4 text-lg font-bold">You don't have any files yet</div>
<div className="mb-4 max-w-[35ch] text-center text-sm text-passive-0">
Files attached to your notes appear here. You can also upload files directly from this page.
</div>

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

@@ -97,7 +97,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
) : (
<div className="pr-4" />
)}
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<div className="min-w-0 flex-grow border-b border-solid border-border px-0 py-4">
<div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{file.title}</div>
</div>

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

@@ -100,9 +100,9 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
) : (
<div className="pr-4" />
)}
<div className="min-w-0 flex-grow py-4 px-0">
<div className="min-w-0 flex-grow px-0 py-4">
<div className="line-clamp-2 overflow-hidden text-editor font-semibold">
<div className="break-word line-clamp-2 mr-2 overflow-hidden">{file.title}</div>
<div className="break-word mr-2 line-clamp-2 overflow-hidden">{file.title}</div>
</div>
<ListItemMetadata item={file} hideDate={hideDate} sortBy={sortBy} />
<ListItemTags hideTags={hideTags} tags={tags} />

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

@@ -54,7 +54,7 @@ const TabButton: FunctionComponent<{
return (
<button
className={classNames(
'relative cursor-pointer rounded-full border-2 border-solid border-transparent py-1 px-2 text-mobile-menu-item focus:shadow-none md:py-0 lg:text-sm',
'relative cursor-pointer rounded-full border-2 border-solid border-transparent px-2 py-1 text-mobile-menu-item focus:shadow-none md:py-0 lg:text-sm',
isSelected
? 'bg-info text-info-contrast'
: 'bg-transparent text-text hover:bg-info-backdrop focus:bg-info-backdrop',
@@ -305,7 +305,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
{controlsDisabled && (
<NoSubscriptionBanner
className="m-2 mt-2 mb-3"
className="m-2 mb-3 mt-2"
application={application}
title="Upgrade for per-tag preferences"
message={
@@ -441,7 +441,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
<div className="flex flex-col pr-5">
<div className="flex flex-row items-center">
<div className="text-base font-semibold uppercase text-text lg:text-xs">Daily Notebook</div>
<Pill className="py-0 px-1.5" style="success">
<Pill className="px-1.5 py-0" style="success">
Labs
</Pill>
</div>
@@ -463,7 +463,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
<div className="flex flex-col pr-5">
<div className="flex flex-row items-center">
<div className="text-base font-semibold uppercase text-text lg:text-xs">Table view</div>
<Pill className="py-0 px-1.5" style="success">
<Pill className="px-1.5 py-0" style="success">
Labs
</Pill>
</div>

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

@@ -10,7 +10,7 @@ type Props = {
const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
return item.conflictOf ? (
<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={'mr-1 mt-2 rounded bg-danger px-1.5 py-1 text-danger-contrast'}>
<div className="text-center text-xs font-bold">Conflicted Copy</div>
</div>
</div>

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

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

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

@@ -32,7 +32,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
<VaultNameBadge vault={vault} />
{sharedByContact && (
<div title="Shared by contact" className={'mt-2 rounded bg-info py-1 px-1.5 text-neutral-contrast'}>
<div title="Shared by contact" className={'mt-2 rounded bg-info px-1.5 py-1 text-neutral-contrast'}>
<span className="flex items-center" title="Shared by contact">
<Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
<div className="text-center text-xs font-bold">{sharedByContact?.name}</div>

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

@@ -142,7 +142,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
) : (
<div className="pr-4" />
)}
<div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} py-4 px-0`}>
<div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} px-0 py-4`}>
<ListItemTitle item={item} />
<ListItemNotePreviewText item={item} hidePreview={hidePreview} />
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />

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

@@ -62,7 +62,7 @@ const Dropdown = ({
</VisuallyHidden>
<Select
className={classNames(
'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-sm text-foreground',
'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-sm text-foreground',
disabled && 'opacity-50',
classNameOverride.button,
!fullWidth && 'md:w-fit',
@@ -90,7 +90,7 @@ const Dropdown = ({
>
{items.map((item) => (
<SelectItem
className="flex cursor-pointer items-center bg-transparent py-1.5 px-3 text-sm text-text hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info [&[data-active-item]]:text-info-contrast"
className="flex cursor-pointer items-center bg-transparent px-3 py-1.5 text-sm text-text hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info [&[data-active-item]]:text-info-contrast"
key={item.value}
value={item.value}
disabled={item.disabled}

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

@@ -17,8 +17,8 @@ const DoubleSidedArrow = ({ className }: { className?: string }) => {
<div
className={classNames(
'relative h-[2px] w-full bg-current',
'before:absolute before:-left-px before:top-1/2 before:h-0 before:w-0 before:-translate-y-1/2 before:border-r-[6px] before:border-t-[6px] before:border-b-[6px] before:border-current before:border-b-transparent before:border-t-transparent',
'after:absolute after:-right-px after:top-1/2 after:h-0 after:w-0 after:-translate-y-1/2 after:border-l-[6px] after:border-t-[6px] after:border-b-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
'before:absolute before:-left-px before:top-1/2 before:h-0 before:w-0 before:-translate-y-1/2 before:border-b-[6px] before:border-r-[6px] before:border-t-[6px] before:border-current before:border-b-transparent before:border-t-transparent',
'after:absolute after:-right-px after:top-1/2 after:h-0 after:w-0 after:-translate-y-1/2 after:border-b-[6px] after:border-l-[6px] after:border-t-[6px] after:border-current after:border-b-transparent after:border-t-transparent',
className,
)}
/>

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

@@ -142,7 +142,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
<FileContextMenuBackupOption file={selectedFiles[0]} />
<HorizontalSeparator classes="my-2" />
<div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
<div className="px-3 pb-0.5 pt-1 text-xs font-medium text-neutral">
{!hasSelectedMultipleFiles && (
<div className="mb-1">
<span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}

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

@@ -259,7 +259,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
</div>
</div>
{showLinkedBubblesContainer && (
<div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border py-1.5 px-3.5">
<div className="-mt-1 min-h-0 flex-shrink-0 border-b border-border px-3.5 py-1.5">
<LinkedItemBubblesContainer
linkingController={viewControllerManager.linkingController}
item={currentFile}

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

@@ -81,7 +81,7 @@ const ImagePreview: FunctionComponent<Props> = ({
<div
className={classNames(
isEmbeddedInSuper ? 'hidden focus-within:flex group-hover:flex' : '',
'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',
'absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center rounded border border-solid border-border bg-default px-3 py-1',
)}
>
<span className="mr-1.5">{isEmbeddedInSuper ? 'Size' : 'Zoom'}:</span>
@@ -127,7 +127,7 @@ const ImagePreview: FunctionComponent<Props> = ({
</div>
) : (
<button
className="mx-1 rounded py-1 px-1.5 hover:bg-contrast"
className="mx-1 rounded px-1.5 py-1 hover:bg-contrast"
onClick={() => setIsZoomInputVisible((visible) => !visible)}
>
{imageZoomPercent}%

2
packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
View File

@@ -42,7 +42,7 @@ const PreferencesButton = ({ openPreferences }: Props) => {
<div className="h-5">
<Icon type="tune" className="rounded hover:text-info" />
</div>
{isChangelogUnread && <div className="absolute top-0.5 right-0.5 h-2 w-2 rounded-full bg-info" />}
{isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
</button>
</StyledTooltip>
)

2
packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx
View File

@@ -30,7 +30,7 @@ const UpgradeNow = ({ application, featuresController, subscriptionContoller }:
return (
<div className="flex h-full items-center px-2">
<button
className="rounded bg-info py-0.5 px-1.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
className="rounded bg-info px-1.5 py-0.5 text-sm font-bold uppercase text-info-contrast hover:brightness-125 lg:text-xs"
onClick={onClick}
>
{!hasAccount ? 'Sign up to sync' : 'Unlock features'}

2
packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx
View File

@@ -78,7 +78,7 @@ const ImportModalFileItem = ({
return (
<div
className={classNames(
'flex gap-2 py-2 px-2',
'flex gap-2 px-2 py-2',
file.service == null ? 'flex-col items-start md:flex-row md:items-center' : 'items-center',
)}
>

4
packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
View File

@@ -36,9 +36,9 @@ const ImportModalInitialPage = ({ setFiles }: Props) => {
<div className="text-lg font-semibold">Drag and drop files to auto-detect and import</div>
<div className="text-sm">Or click to open file picker</div>
</button>
<div className="relative mt-6 mb-6 w-full">
<div className="relative mb-6 mt-6 w-full">
<hr className="w-full border-border" />
<div className="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-default p-1">
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-default p-1">
or import from:
</div>
</div>

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

@@ -69,7 +69,7 @@ const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection, combobo
items.map((item) => (
<ComboboxItem
key={item.uuid}
className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
hideOnClick
onClick={() => {
combobox.setValue('')

2
packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
View File

@@ -113,7 +113,7 @@ const ItemLinkAutocompleteInput = forwardRef(
return (
<ComboboxItem
key={result.uuid}
className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
className="flex w-full cursor-pointer items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground [&[data-active-item]]:bg-info-backdrop"
hideOnClick
onClick={() => {
linkItems(item, result).catch(console.error)

2
packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
View File

@@ -130,7 +130,7 @@ const LinkedItemBubble = ({
<a
ref={unlinkButtonRef}
role="button"
className="ml-2 -mr-1 flex cursor-pointer border-0 bg-transparent p-0"
className="-mr-1 ml-2 flex cursor-pointer border-0 bg-transparent p-0"
onClick={onUnlinkClick}
>
<Icon type="close" className="text-neutral hover:text-info" size="small" />

2
packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx
View File

@@ -44,7 +44,7 @@ const LinkedItemSearchResults = ({
return (
<button
key={result.uuid}
className="flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
className="flex w-full items-center justify-between gap-4 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
onClick={() => {
void linkItems(item, result)
onClickCallback?.()

2
packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
View File

@@ -13,7 +13,7 @@ export const LinkedItemSearchResultsAddTagOption = forwardRef(
return (
<button
className={classNames(
'group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
'group flex w-full items-center gap-2 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground',
'focus:bg-info-backdrop [&[data-active-item]]:bg-info-backdrop',
isFocused ? 'bg-info-backdrop text-foreground' : '',
)}

16
packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
View File

@@ -70,7 +70,7 @@ const LinkedItemsPanel = ({
>
<DecoratedInput
type="text"
className={{ container: !isSearching ? 'py-1.5 px-0.5' : 'py-0', input: 'placeholder:text-passive-0' }}
className={{ container: !isSearching ? 'px-0.5 py-1.5' : 'py-0', input: 'placeholder:text-passive-0' }}
placeholder="Search items to link..."
value={searchQuery}
onChange={setSearchQuery}
@@ -92,7 +92,7 @@ const LinkedItemsPanel = ({
<>
{(!!unlinkedItems.length || shouldShowCreateTag) && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Unlinked</div>
<LinkedItemSearchResults
createAndAddNewTag={createAndAddNewTag}
linkItems={linkItems}
@@ -110,7 +110,7 @@ const LinkedItemsPanel = ({
)}
{!!linkedResults.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked</div>
<div className="my-1">
{linkedResults.map((link) => (
<LinkedItemsSectionItem
@@ -130,7 +130,7 @@ const LinkedItemsPanel = ({
<>
{!!tagsLinkedToItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Tags</div>
<div className="my-1">
{tagsLinkedToItem.map((link) => (
<LinkedItemsSectionItem
@@ -147,7 +147,7 @@ const LinkedItemsPanel = ({
)}
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Files</div>
<div className="my-1">
<button
className="flex w-full cursor-pointer items-center gap-3 bg-transparent px-3 py-2 text-left text-base text-text hover:bg-info-backdrop hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
@@ -171,7 +171,7 @@ const LinkedItemsPanel = ({
{!!filesLinkingToItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">
Files Linking To Current File
</div>
<div className="my-1">
@@ -190,7 +190,7 @@ const LinkedItemsPanel = ({
)}
{!!notesLinkedToItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">Linked Notes</div>
<div className="my-1">
{notesLinkedToItem.map((link) => (
<LinkedItemsSectionItem
@@ -207,7 +207,7 @@ const LinkedItemsPanel = ({
)}
{!!notesLinkingToItem.length && (
<div>
<div className="mt-3 mb-1 px-3 text-menu-item font-semibold uppercase text-passive-0">
<div className="mb-1 mt-3 px-3 text-menu-item font-semibold uppercase text-passive-0">
Notes Linking To This Note
</div>
<div className="my-1">

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

@@ -47,7 +47,7 @@ const Tooltip = ({ text }: { text: string }) => {
disableMobileFullscreenTakeover
className={classNames(
'w-60 translate-x-2 translate-y-1 select-none rounded border border-border shadow-main',
'z-modal bg-default py-1.5 px-3 text-left',
'z-modal bg-default px-3 py-1.5 text-left',
)}
>
{text}

2
packages/web/src/javascripts/Components/Modal/MobileModalAction.tsx
View File

@@ -14,7 +14,7 @@ const MobileModalAction = forwardRef(
<button
ref={ref}
className={classNames(
'flex select-none whitespace-nowrap py-1 px-1 text-base font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
'flex select-none whitespace-nowrap px-1 py-1 text-base font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
slot === 'left' ? 'justify-start text-left' : 'justify-end text-right',
type === 'cancel' || type === 'destructive' ? 'text-danger' : 'text-info',
className,

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

@@ -115,7 +115,7 @@ const Modal = ({
<div
className={classNames(
'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3',
hasTopInset ? 'pt-safe-top pb-1.5' : 'py-1.5',
hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
)}
>
<MobileModalHeader className="flex-row items-center justify-between md:flex md:gap-0">
@@ -201,7 +201,7 @@ const Modal = ({
: sortedActions.length > 0 && (
<div
className={classNames(
'hidden items-center justify-start gap-3 border-t border-border py-2 px-2.5 md:flex md:px-4 md:py-4',
'hidden items-center justify-start gap-3 border-t border-border px-2.5 py-2 md:flex md:px-4 md:py-4',
hasBottomInset && 'pb-safe-bottom',
)}
>

2
packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx
View File

@@ -43,7 +43,7 @@ const ModalOverlay = forwardRef(
return (
<Dialog
tabIndex={0}
className="fixed top-0 left-0 z-modal h-full w-full"
className="fixed left-0 top-0 z-modal h-full w-full"
ref={mergeRefs([setElement, addCloseMethod, ref])}
store={dialog}
modal={false}

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

@@ -26,7 +26,7 @@ const NoSubscriptionBanner = ({
return (
<div className={classNames('grid grid-cols-1 rounded-md border border-border p-4', className)}>
<div className="flex items-center">
<Icon className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
<Icon className={classNames('-ml-1 mr-1 h-5 w-5', PremiumFeatureIconClass)} type={PremiumFeatureIconName} />
<h1 className="sk-h3 m-0 text-sm font-semibold">{title}</h1>
</div>
<p className="col-start-1 col-end-3 m-0 mt-1 text-sm">{message}</p>

4
packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
View File

@@ -28,13 +28,13 @@ const CollaborationInfoHUD: FunctionComponent<Props> = ({ item }) => {
return (
<div className="flex flex-wrap items-start gap-2">
<div title="Vault name" className={'flex rounded bg-success py-1 px-1.5 text-success-contrast'}>
<div title="Vault name" className={'flex rounded bg-success px-1.5 py-1 text-success-contrast'}>
<Icon ariaLabel="Shared in vault" type="safe-square" className="mr-1 text-info-contrast" size="medium" />
<span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
</div>
{lastEditedBy && (
<div title="Last edited by" className={'flex rounded bg-info py-1 px-1.5 text-info-contrast'}>
<div title="Last edited by" className={'flex rounded bg-info px-1.5 py-1 text-info-contrast'}>
<Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
<span className="mr-auto overflow-hidden text-ellipsis text-xs">{lastEditedBy?.name}</span>
</div>

2
packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx
View File

@@ -121,7 +121,7 @@ export const DiffView = ({
))}
</pre>
{hasOverflow && (
<div className="absolute top-0 right-0 z-[-1] h-full w-[19px] border-l border-border" ref={setDiffVisualizer} />
<div className="absolute right-0 top-0 z-[-1] h-full w-[19px] border-l border-border" ref={setDiffVisualizer} />
)}
</div>
)

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

@@ -194,11 +194,11 @@ const NoteConflictResolutionModal = ({
ref={setSelectAnchor}
render={
<ToolbarItem
className="relative rounded rounded-l-none bg-info py-1.5 px-3 ring-info hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-default focus-visible:brightness-110"
className="relative rounded rounded-l-none bg-info px-3 py-1.5 ring-info hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-default focus-visible:brightness-110"
disabled={isPerformingAction}
>
<SelectArrow className="block rotate-180" />
<div className="absolute top-0 left-0 h-full w-[2px] bg-info brightness-[.85]" />
<div className="absolute left-0 top-0 h-full w-[2px] bg-info brightness-[.85]" />
</ToolbarItem>
}
store={selectStore}
@@ -342,7 +342,7 @@ const NoteConflictResolutionModal = ({
<div className="relative rounded-full p-1 hover:bg-contrast">
<Icon type={shouldSyncComparisonScroll ? 'link' : 'link-off'} className="text-neutral" />
<Checkbox
className="absolute top-0 left-0 right-0 bottom-0 cursor-pointer opacity-0"
className="absolute bottom-0 left-0 right-0 top-0 cursor-pointer opacity-0"
checked={shouldSyncComparisonScroll}
onChange={() => setShouldSyncComparisonScroll((shouldSync) => !shouldSync)}
/>

4
packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
View File

@@ -42,8 +42,8 @@ const IndicatorWithTooltip = ({
id={ElementIds.NoteStatusTooltip}
className={classNames(
isTooltipVisible ? '' : 'hidden',
'absolute top-full right-0 min-w-[90vw] translate-x-2 translate-y-1 select-none rounded border border-border',
'bg-default py-1.5 px-3 text-left peer-hover:block peer-focus:block md:min-w-max',
'absolute right-0 top-full min-w-[90vw] translate-x-2 translate-y-1 select-none rounded border border-border',
'bg-default px-3 py-1.5 text-left peer-hover:block peer-focus:block md:min-w-max',
)}
>
{children}

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

@@ -979,7 +979,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
>
{editorMode === 'component' && this.state.editorComponentViewer && (
<div className="component-view relative flex-grow">
{this.state.paneGestureEnabled && <div className="absolute top-0 left-0 h-full w-[20px] md:hidden" />}
{this.state.paneGestureEnabled && <div className="absolute left-0 top-0 h-full w-[20px] md:hidden" />}
<IframeFeatureView
key={this.state.editorComponentViewer.identifier}
componentViewer={this.state.editorComponentViewer}

2
packages/web/src/javascripts/Components/NoteView/NoteViewFileDropTarget.tsx
View File

@@ -41,7 +41,7 @@ const NoteViewFileDropTarget = ({ note, linkingController, noteViewElement, file
return isDraggingFiles ? (
// Required to block drag events to editor iframe
<div id="file-drag-iframe-overlay" className="absolute top-0 left-0 z-dropdown-menu h-full w-full" />
<div id="file-drag-iframe-overlay" className="absolute left-0 top-0 z-dropdown-menu h-full w-full" />
) : null
}

2
packages/web/src/javascripts/Components/NoteView/ReadonlyNoteContent.tsx
View File

@@ -115,7 +115,7 @@ export const ReadonlyNoteContent = ({
onScroll={onScroll}
/>
) : (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-passive-0">
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-passive-0">
Empty note.
</div>
)}

4
packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
View File

@@ -50,11 +50,11 @@ const MobilePopoverContent = ({
<DisableScroll />
<div
ref={mergeRefs([setPopoverElement, addCloseMethod])}
className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
className="fixed left-0 top-0 z-modal flex h-full w-full flex-col bg-default pb-safe-bottom pt-safe-top"
data-popover={id}
data-mobile-popover
>
<MobileModalHeader className="border-b border-border py-1.5 px-2 text-base">
<MobileModalHeader className="border-b border-border px-2 py-1.5 text-base">
<div />
<div className="flex items-center justify-center font-semibold">{title}</div>
<MobileModalAction type="primary" slot="right" action={requestClose}>

4
packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
View File

@@ -86,11 +86,11 @@ const PositionedPopoverContent = ({
<Portal disabled={!portal}>
<div
className={classNames(
'absolute top-0 left-0 flex w-full min-w-80 cursor-auto flex-col',
'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
!disableMobileFullscreenTakeover && 'h-full',
overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
!isDesktopScreen && !disableMobileFullscreenTakeover ? 'pt-safe-top pb-safe-bottom' : '',
!isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
isDesktopScreen || disableMobileFullscreenTakeover ? 'invisible' : '',
className,
)}

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

@@ -52,7 +52,7 @@ const FilesSection: FunctionComponent<Props> = ({ application }) => {
</div>
) : (
<>
<div className="mt-1 mb-1">
<div className="mb-1 mt-1">
<span className="font-semibold">{formatSizeToReadableString(filesQuotaUsed)}</span> of{' '}
<span>{application.isThirdPartyHostUsed() ? '∞' : formatSizeToReadableString(filesQuotaTotal)}</span> used
</div>

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

@@ -36,7 +36,7 @@ const NoProSubscription: FunctionComponent<Props> = ({ application, text }) => {
<div className="flex">
{!application.hideOutboundSubscriptionLinks && (
<LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
<LinkButton className="mr-3 mt-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
)}
{application.hasAccount() && (
<Button className="mt-3 min-w-20" primary label="Upgrade" onClick={onPurchaseClick} />

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

@@ -34,7 +34,7 @@ const NoSubscription: FunctionComponent<Props> = ({ application }) => {
{purchaseFlowError && <Text className="text-danger">{purchaseFlowError}</Text>}
<div className="flex">
{!application.hideOutboundSubscriptionLinks && (
<LinkButton className="mt-3 mr-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
<LinkButton className="mr-3 mt-3 min-w-20" label="Learn More" link={window.plansUrl as string} />
)}
{application.hasAccount() && (
<Button className="mt-3 min-w-20" primary label="Subscribe" onClick={onPurchaseClick} />

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

@@ -14,7 +14,7 @@ const SubscriptionInformation = () => {
return (
<>
<SubscriptionStatusText />
<Button className="mt-3 mr-3 min-w-20" label="Manage subscription" onClick={manageSubscription} />
<Button className="mr-3 mt-3 min-w-20" label="Manage subscription" onClick={manageSubscription} />
</>
)
}

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

@@ -43,14 +43,14 @@ const InvitationsList = ({ subscriptionState, application }: Props) => {
}
if (usedInvitationsCount === 0) {
return <Text className="mt-1 mb-3">Make your first subscription invite below.</Text>
return <Text className="mb-3 mt-1">Make your first subscription invite below.</Text>
}
return (
<div>
<SubtitleLight className="mb-2 text-info">Active Invites</SubtitleLight>
{activeSubscriptions?.map((invitation) => (
<div key={invitation.uuid} className="mt-1 mb-4">
<div key={invitation.uuid} className="mb-4 mt-1">
<Text>
{invitation.inviteeIdentifier} <span className="text-info">({invitation.status})</span>
</Text>

2
packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
View File

@@ -125,7 +125,7 @@ const EditorDefaults = ({ application }: Props) => {
<Text>Sets the max editor width for all notes</Text>
<div className="mt-2">
<button
className="flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-left text-base text-foreground md:w-fit lg:text-sm"
className="flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-left text-base text-foreground md:w-fit lg:text-sm"
onClick={toggleEditorWidthModal}
>
{editorWidth === EditorLineWidth.FullWidth ? 'Full width' : editorWidth}

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

@@ -125,7 +125,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application, onSuccess
)}
</div>
{(isSuccessfullyActivated || isSuccessfullyRemoved) && (
<div className={'info mt-3 mb-3'}>
<div className={'info mb-3 mt-3'}>
Your offline subscription code has been successfully {isSuccessfullyActivated ? 'activated' : 'removed'}
.
</div>

4
packages/web/src/javascripts/Components/Preferences/Panes/General/SmartViews/EditSmartViewModal.tsx
View File

@@ -96,7 +96,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
<div className="flex items-center gap-2.5">
<div className="text-sm font-semibold">Title:</div>
<input
className="rounded border border-border bg-default py-1 px-2"
className="rounded border border-border bg-default px-2 py-1"
value={title}
onChange={(event) => {
setTitle(event.target.value)
@@ -139,7 +139,7 @@ const EditSmartViewModal = ({ controller, platform }: Props) => {
<div className="text-sm font-semibold">Predicate:</div>
<div className="flex flex-grow flex-col overflow-hidden rounded-md border border-border">
<textarea
className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default px-2.5 py-1.5 font-mono text-sm"
value={predicateJson}
onChange={(event) => {
setPredicateJson(event.target.value)

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

@@ -44,7 +44,7 @@ const HomeServer = () => {
<PreferencesGroup>
<Title>Remote access</Title>
<Subtitle>Accessing your home server while on the go is easy and secure with Tailscale.</Subtitle>
<ol className="mt-3 ml-3 list-outside list-decimal">
<ol className="ml-3 mt-3 list-outside list-decimal">
<li>
Register on{' '}
<a className="text-info" href="https://tailscale.com/">
@@ -73,7 +73,7 @@ const HomeServer = () => {
For automatic backups, you can place your server's data inside of a synced cloud folder, like Dropbox,
Tresorit, or iCloud Drive.
</Subtitle>
<ol className="mt-3 ml-3 list-outside list-decimal">
<ol className="ml-3 mt-3 list-outside list-decimal">
<li>Change your server's data location by selecting "Change Location" in the Home Server section above.</li>
<li className="mt-2">Select a cloud drive to store your server's data in.</li>
<li className="mt-2">Restart your home server.</li>

2
packages/web/src/javascripts/Components/Preferences/Panes/HomeServer/HomeServerSettings.tsx
View File

@@ -369,7 +369,7 @@ const HomeServerSettings = () => {
<div className={'mt-2 grid grid-cols-1 rounded-md border border-border p-4'}>
<div className="flex items-center">
<Icon
className={classNames('mr-1 -ml-1 h-5 w-5', PremiumFeatureIconClass)}
className={classNames('-ml-1 mr-1 h-5 w-5', PremiumFeatureIconClass)}
type={PremiumFeatureIconName}
/>
<h1 className="sk-h3 m-0 text-sm font-semibold">Activate Premium Features</h1>

2
packages/web/src/javascripts/Components/Preferences/Panes/Security/EncryptionStatusItem.tsx
View File

@@ -8,7 +8,7 @@ type Props = {
}
const EncryptionStatusItem: FunctionComponent<Props> = ({ icon, status, checkmark = true }) => (
<div className="text-input min-h-8 no-border my-1 flex w-full flex-row items-center rounded bg-contrast py-1.5 px-3 focus-within:ring-info">
<div className="text-input min-h-8 no-border my-1 flex w-full flex-row items-center rounded bg-contrast px-3 py-1.5 focus-within:ring-info">
{icon}
<div className="min-h-1 min-w-3" />
<div className="flex-grow text-sm text-text">{status}</div>

10
packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
View File

@@ -80,14 +80,14 @@ const ErroredItems: FunctionComponent = () => {
<Text>{`${erroredItems.length} items are errored and could not be decrypted.`}</Text>
<div className="flex">
<Button
className="mt-3 mr-2 min-w-20"
className="mr-2 mt-3 min-w-20"
label="Export all"
onClick={() => {
void application.getArchiveService().downloadEncryptedItems(erroredItems)
}}
/>
<Button
className="mt-3 mr-2 min-w-20"
className="mr-2 mt-3 min-w-20"
colorStyle="danger"
label="Delete all"
onClick={() => {
@@ -107,21 +107,21 @@ const ErroredItems: FunctionComponent = () => {
<Text>Last Modified: {item.updatedAtString}</Text>
<div className="flex">
<Button
className="mt-3 mr-2 min-w-20"
className="mr-2 mt-3 min-w-20"
label="Attempt decryption"
onClick={() => {
attemptDecryption(item)
}}
/>
<Button
className="mt-3 mr-2 min-w-20"
className="mr-2 mt-3 min-w-20"
label="Export"
onClick={() => {
void application.getArchiveService().downloadEncryptedItem(item)
}}
/>
<Button
className="mt-3 mr-2 min-w-20"
className="mr-2 mt-3 min-w-20"
colorStyle="danger"
label="Delete"
onClick={() => {

2
packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/AuthAppInfoPopup.tsx
View File

@@ -11,7 +11,7 @@ const AuthAppInfoTooltip = () => {
<HovercardAnchor store={infoHovercard}>
<Icon type="info" />
</HovercardAnchor>
<Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default py-2 px-3 text-sm">
<Hovercard store={infoHovercard} className=" max-w-76 rounded border border-border bg-default px-3 py-2 text-sm">
Some apps, like Google Authenticator, do not back up and restore your secret keys if you lose your device or get
a new one.
</Hovercard>

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

@@ -28,7 +28,7 @@ const ContactItem = ({ contact }: Props) => {
<EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
</ModalOverlay>
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
<Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<span

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx
View File

@@ -88,7 +88,7 @@ const EditContactModal: FunctionComponent<Props> = ({ onCloseDialog, fromInvite,
close={handleDialogClose}
actions={modalActions}
>
<div className="px-4.5 pt-4 pb-1.5">
<div className="px-4.5 pb-1.5 pt-4">
<div className="flex w-full flex-col">
<div className="mb-3">
<DecoratedInput

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/InviteItem.tsx
View File

@@ -37,7 +37,7 @@ const InviteItem = ({ inviteRecord }: Props) => {
<EditContactModal fromInvite={inviteRecord} onCloseDialog={closeAddContactModal} />
</ModalOverlay>
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
<Icon type={'archive'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault Name: {inviteData.metadata.name}</span>

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

@@ -107,7 +107,7 @@ const VaultItem = ({ vault }: Props) => {
<EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
</ModalOverlay>
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
<Icon type={'safe-square'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
View File

@@ -175,7 +175,7 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
return (
<Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
<div className="px-4.5 pt-4 pb-1.5">
<div className="px-4.5 pb-1.5 pt-4">
<div className="flex w-full flex-col">
<div className="mb-3">
<div className="text-lg">Vault Info</div>

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
View File

@@ -29,7 +29,7 @@ export const VaultModalInvites = ({
{invites.map((invite) => {
const contact = application.contacts.findTrustedContactForInvite(invite)
return (
<div key={invite.uuid} className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md">
<div key={invite.uuid} className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
<Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
View File

@@ -39,7 +39,7 @@ export const VaultModalMembers = ({
return (
<div
key={contact?.uuid || member.user_uuid}
className="bg-gray-100 flex flex-row gap-3.5 rounded-lg py-2.5 px-3.5 shadow-md"
className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md"
>
<Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">

2
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
View File

@@ -13,7 +13,7 @@ interface Props {
const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
<div
className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid py-2 px-4 text-sm hover:border-border hover:bg-default ${
className={`preferences-menu-item box-border flex h-auto w-auto min-w-42 cursor-pointer select-none flex-row items-center justify-start rounded border border-solid px-4 py-2 text-sm hover:border-border hover:bg-default ${
selected ? 'selected border-info font-bold text-info' : 'border-transparent'
}`}
onClick={(e) => {

12
packages/web/src/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
View File

@@ -100,16 +100,16 @@ const CreateAccount: FunctionComponent<Props> = ({ viewControllerManager, applic
return (
<div className="flex items-center">
<CircleIcon className="absolute top-[40%] -left-28 h-8 w-8" />
<BlueDotIcon className="absolute top-[35%] -left-10 h-4 w-4" />
<CircleIcon className="absolute -left-28 top-[40%] h-8 w-8" />
<BlueDotIcon className="absolute -left-10 top-[35%] h-4 w-4" />
<DiamondIcon className="absolute -bottom-5 left-0 -z-[1] h-26 w-26 -translate-x-1/2" />
<CircleIcon className="absolute bottom-[35%] -right-20 h-8 w-8" />
<BlueDotIcon className="absolute bottom-[25%] -right-10 h-4 w-4" />
<DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
<CircleIcon className="absolute -right-20 bottom-[35%] h-8 w-8" />
<BlueDotIcon className="absolute -right-10 bottom-[25%] h-4 w-4" />
<DiamondIcon className="absolute -right-2 top-0 -z-[1] h-18 w-18 translate-x-1/2" />
<div className="mr-0 lg:mr-12">
<h1 className="mt-0 mb-2 text-2xl font-bold">Create your free account</h1>
<h1 className="mb-2 mt-0 text-2xl font-bold">Create your free account</h1>
<div className="mb-4 text-sm font-medium">to continue to Standard Notes.</div>
<form onSubmit={handleCreateAccount}>
<div className="flex flex-col">

12
packages/web/src/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
View File

@@ -93,16 +93,16 @@ const SignIn: FunctionComponent<Props> = ({ viewControllerManager, application }
return (
<div className="flex items-center">
<CircleIcon className="absolute top-[35%] -left-56 h-8 w-8" />
<BlueDotIcon className="absolute top-[30%] -left-40 h-4 w-4" />
<CircleIcon className="absolute -left-56 top-[35%] h-8 w-8" />
<BlueDotIcon className="absolute -left-40 top-[30%] h-4 w-4" />
<DiamondIcon className="absolute -bottom-5 left-0 -z-[1] h-26 w-26 -translate-x-1/2" />
<CircleIcon className="absolute bottom-[30%] -right-56 h-8 w-8" />
<BlueDotIcon className="absolute bottom-[20%] -right-44 h-4 w-4" />
<DiamondIcon className="absolute top-0 -right-2 -z-[1] h-18 w-18 translate-x-1/2" />
<CircleIcon className="absolute -right-56 bottom-[30%] h-8 w-8" />
<BlueDotIcon className="absolute -right-44 bottom-[20%] h-4 w-4" />
<DiamondIcon className="absolute -right-2 top-0 -z-[1] h-18 w-18 translate-x-1/2" />
<div>
<h1 className="mt-0 mb-2 text-2xl font-bold">Sign in</h1>
<h1 className="mb-2 mt-0 text-2xl font-bold">Sign in</h1>
<div className="mb-4 text-sm font-medium">to continue to Standard Notes.</div>
<form onSubmit={handleSignIn}>
<div className="flex flex-col">

4
packages/web/src/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
View File

@@ -34,11 +34,11 @@ const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = ({ viewContro
const { currentPane } = viewControllerManager.purchaseFlowController
return (
<div className="absolute top-0 left-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
<div className="absolute left-0 top-0 z-purchase-flow flex h-full w-full items-center justify-center overflow-hidden bg-passive-super-light">
<div className="relative w-fit">
<div className="rounded-0 relative mb-4 w-full border border-solid border-border bg-default px-8 py-8 md:rounded md:p-12">
<button
className="absolute top-4 right-4 rounded-full p-1 hover:bg-info-backdrop"
className="absolute right-4 top-4 rounded-full p-1 hover:bg-info-backdrop"
onClick={() => {
viewControllerManager.purchaseFlowController.closePurchaseFlow()
}}

2
packages/web/src/javascripts/Components/Radio/RadioIndicator.tsx
View File

@@ -8,7 +8,7 @@ const RadioIndicator = ({ checked, className, disabled }: Props) => (
<div
className={`relative h-5 w-5 rounded-full border-2 border-solid md:h-4 md:w-4 ${disabled ? 'opacity-50' : ''} ${
checked
? 'border-info after:absolute after:top-1/2 after:left-1/2 after:h-3 after:w-3 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info md:after:h-2 md:after:w-2'
? 'border-info after:absolute after:left-1/2 after:top-1/2 after:h-3 after:w-3 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:bg-info md:after:h-2 md:after:w-2'
: 'border-passive-1'
} ${className}`}
></div>

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

@@ -22,8 +22,8 @@ const RadioButtonGroup = ({ value, items, onChange, className }: Props) => {
{items.map(({ label, value: itemValue }) => (
<label
className={classNames(
'flex-grow select-none py-1.5 px-3.5 text-center',
'first:rounded-tl first:rounded-bl last:rounded-tr last:rounded-br',
'flex-grow select-none px-3.5 py-1.5 text-center',
'first:rounded-bl first:rounded-tl last:rounded-br last:rounded-tr',
itemValue === value &&
'bg-info-backdrop font-medium text-info ring-1 ring-inset ring-info focus-within:ring-2',
)}

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

@@ -28,7 +28,7 @@ const RecoveryCodeBanner = ({ application }: { application: WebApplication }) =>
return (
<div className="grid grid-cols-1 rounded-md border border-border p-4">
<div className="flex items-center">
<Icon className="mr-1 -ml-1 h-5 w-5 text-info group-disabled:text-passive-2" type="asterisk" />
<Icon className="-ml-1 mr-1 h-5 w-5 text-info group-disabled:text-passive-2" type="asterisk" />
<h1 className="sk-h3 m-0 text-sm font-semibold">Save your recovery code</h1>
</div>
<p className="col-start-1 col-end-3 m-0 mt-1 text-sm">
@@ -42,10 +42,10 @@ const RecoveryCodeBanner = ({ application }: { application: WebApplication }) =>
</Button>
)}
{recoveryCode && (
<div className="group relative mt-2 rounded border border-border py-2 px-3 text-sm font-semibold">
<div className="group relative mt-2 rounded border border-border px-3 py-2 text-sm font-semibold">
<StyledTooltip label="Copy to clipboard" className="!z-modal">
<button
className="absolute top-2 right-2 flex rounded border border-border bg-default p-1 opacity-0 hover:bg-contrast focus:opacity-100 group-hover:opacity-100"
className="absolute right-2 top-2 flex rounded border border-border bg-default p-1 opacity-0 hover:bg-contrast focus:opacity-100 group-hover:opacity-100"
onClick={() => {
void navigator.clipboard.writeText(recoveryCode)
}}

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalContentPane.tsx
View File

@@ -16,12 +16,12 @@ const HistoryModalContentPane = ({ noteHistoryController, note }: Props) => {
switch (contentState) {
case RevisionContentState.Idle:
return (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none text-sm text-passive-0">
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 select-none text-sm text-passive-0">
No revision selected
</div>
)
case RevisionContentState.Loading:
return <Spinner className="absolute top-1/2 left-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
return <Spinner className="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2" />
case RevisionContentState.Loaded:
if (!selectedRevision) {
return null

4
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -18,7 +18,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
store={dialog}
aria-label="Note revision history"
ref={ref}
className="fixed top-0 left-0 z-modal h-full w-full"
className="fixed left-0 top-0 z-modal h-full w-full"
>
<div
className="absolute z-0 h-full w-full bg-passive-5 opacity-0 md:opacity-75"
@@ -28,7 +28,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
<div
className={classNames(
'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
'p-0 pt-safe-top pb-safe-bottom shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
'p-0 pb-safe-bottom pt-safe-top shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
getPlatformString(),
)}

2
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
View File

@@ -27,7 +27,7 @@ const HistoryModalDialogContent = ({
return (
<>
<MobileModalHeader className="items-center border-b border-border py-1 px-2 md:hidden">
<MobileModalHeader className="items-center border-b border-border px-2 py-1 md:hidden">
<MobileModalAction type="secondary" action={toggleTabMenu} slot="left" ref={tabOptionRef}>
<div className="rounded-full border border-border p-0.5">
<Icon type="more" />

2
packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
View File

@@ -40,7 +40,7 @@ const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
<div className="mb-1 mt-2.5 select-none px-3 text-sm font-semibold uppercase text-passive-0">
{group.title}
</div>
{group.entries.map((entry) => (

2
packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
View File

@@ -33,7 +33,7 @@ const RevisionContentLocked: FunctionComponent = () => {
<div className="flex h-full w-full items-center justify-center">
<div className="max-w-40% flex flex-col items-center px-8 text-center">
<HistoryLockedIllustration />
<div className="mt-2 mb-1 text-lg font-bold">Can't access this version</div>
<div className="mb-1 mt-2 text-lg font-bold">Can't access this version</div>
<div className="leading-140% mb-4 text-passive-0">
{getPremiumContentCopy(planName)}. Learn more about our other plans to upgrade your history capacity.
</div>

2
packages/web/src/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
View File

@@ -32,7 +32,7 @@ const SessionHistoryList: FunctionComponent<Props> = ({ noteHistoryController, o
if (group.entries && group.entries.length) {
return (
<Fragment key={group.title}>
<div className="mt-2.5 mb-1 select-none px-3 text-sm font-semibold uppercase text-passive-0">
<div className="mb-1 mt-2.5 select-none px-3 text-sm font-semibold uppercase text-passive-0">
{group.title}
</div>
{group.entries.map((entry, index) => (

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

@@ -47,7 +47,7 @@ const SearchBar = ({ itemListController, searchOptionsController, hideOptions =
}, [clearFilterText])
return (
<div className="pt-3 pb-0.5" role="search">
<div className="pb-0.5 pt-3" role="search">
<DecoratedInput
autocomplete={false}
id={ElementIds.SearchBar}

4
packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
View File

@@ -19,7 +19,7 @@ const CopyableCodeBlock = ({ code }: Props) => {
onMouseLeave={() => setIsCopyButtonVisible(false)}
>
<pre className="overflow-auto rounded-md bg-default px-2.5 py-1.5">{code}</pre>
<div className="absolute top-1.5 right-1.5">
<div className="absolute right-1.5 top-1.5">
<button
ref={buttonRef}
className={classNames(
@@ -50,7 +50,7 @@ const CopyableCodeBlock = ({ code }: Props) => {
<div
className={classNames(
didCopy && isCopyButtonVisible ? '' : 'hidden',
'absolute top-full right-0 min-w-max translate-x-2 translate-y-1 select-none rounded border border-border bg-default py-1.5 px-3 text-left md:peer-hover:block',
'absolute right-0 top-full min-w-max translate-x-2 translate-y-1 select-none rounded border border-border bg-default px-3 py-1.5 text-left md:peer-hover:block',
)}
>
{didCopy ? 'Copied!' : 'Copy example to clipboard'}

6
packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
View File

@@ -147,7 +147,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
<div className="flex items-center gap-2.5">
<div className="text-sm font-semibold">Title:</div>
<input
className="rounded border border-border bg-default py-1 px-2"
className="rounded border border-border bg-default px-2 py-1"
value={title}
onChange={(event) => {
setTitle(event.target.value)
@@ -207,7 +207,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
</TabPanel>
<TabPanel state={tabState} id="custom" className="flex flex-grow flex-col">
<textarea
className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default py-1.5 px-2.5 font-mono text-sm"
className="h-full min-h-[10rem] w-full flex-grow resize-none bg-default px-2.5 py-1.5 font-mono text-sm"
value={customPredicateJson}
onChange={(event) => {
setCustomPredicateJson(event.target.value)
@@ -224,7 +224,7 @@ const AddSmartViewModal = ({ controller, platform }: Props) => {
</TabPanel>
</TabsContainer>
{tabState.activeTab === 'custom' && (
<div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4">
<div className="flex flex-col gap-1.5 rounded-md border-2 border-info-backdrop bg-info-backdrop px-4 py-3">
<Disclosure
store={jsonExamplesDisclosure}
className="flex items-center justify-between focus:shadow-none focus:outline-none"

6
packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilder.tsx
View File

@@ -47,7 +47,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
<div className="flex w-full flex-col gap-2 md:flex-row md:items-center">
{index !== 0 && <div className="mr-2 text-sm font-semibold">{operator === 'and' ? 'AND' : 'OR'}</div>}
<select
className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
value={predicate.keypath}
onChange={(event) => {
changePredicateKeypath(index, event.target.value as PredicateKeypath)
@@ -60,7 +60,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
))}
</select>
<select
className="rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
className="rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
value={predicate.operator}
onChange={(event) => {
setPredicate(index, { operator: event.target.value as PredicateOperator })
@@ -106,7 +106,7 @@ const CompoundPredicateBuilder = ({ controller }: Props) => {
</div>
))}
{predicates.some((predicate) => PredicateKeypathTypes[predicate.keypath as PredicateKeypath] === 'date') && (
<div className="flex flex-col gap-2 rounded-md border-2 border-info-backdrop bg-info-backdrop py-3 px-4 [&_code]:rounded [&_code]:bg-default [&_code]:px-1.5 [&_code]:py-1">
<div className="flex flex-col gap-2 rounded-md border-2 border-info-backdrop bg-info-backdrop px-4 py-3 [&_code]:rounded [&_code]:bg-default [&_code]:px-1.5 [&_code]:py-1">
<div className="text-sm font-semibold">Date Examples:</div>
<ul className="space-y-2 pl-4">
<li>

10
packages/web/src/javascripts/Components/SmartViewBuilder/PredicateValue.tsx
View File

@@ -16,7 +16,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
return type === 'noteType' ? (
<select
className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
value={value}
onChange={(event) => {
setValue(event.target.value)
@@ -30,7 +30,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
</select>
) : type === 'editorIdentifier' ? (
<select
className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
value={value}
onChange={(event) => {
setValue(event.target.value)
@@ -44,7 +44,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
</select>
) : type === 'string' || type === 'date' ? (
<input
className="flex-grow rounded border border-border bg-default py-1.5 px-2"
className="flex-grow rounded border border-border bg-default px-2 py-1.5"
value={value}
onChange={(event) => {
setValue(event.target.value)
@@ -52,7 +52,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
/>
) : type === 'boolean' ? (
<select
className="flex-grow rounded border border-border bg-default py-1.5 px-2 focus:outline focus:outline-1 focus:outline-info"
className="flex-grow rounded border border-border bg-default px-2 py-1.5 focus:outline focus:outline-1 focus:outline-info"
value={value}
onChange={(event) => {
setValue(event.target.value)
@@ -64,7 +64,7 @@ const PredicateValue = ({ keypath, value, setValue }: Props) => {
) : type === 'number' ? (
<input
type="number"
className="flex-grow rounded border border-border bg-default py-1.5 px-2"
className="flex-grow rounded border border-border bg-default px-2 py-1.5"
value={value}
onChange={(event) => {
setValue(event.target.value)

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

@@ -47,7 +47,7 @@ const StyledTooltip = ({
autoFocusOnShow={!showOnHover}
store={tooltip}
className={classNames(
'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow',
className,
)}
updatePosition={() => {

2
packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
View File

@@ -83,7 +83,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
spellCheck={spellcheck}
onScroll={onScroll}
/>
<div className="search-highlight-container pointer-events-none absolute top-0 left-0 h-full w-full" />
<div className="search-highlight-container pointer-events-none absolute left-0 top-0 h-full w-full" />
</div>
</div>
}

2
packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
View File

@@ -88,7 +88,7 @@ const CodeOptionsPlugin = () => {
return (
<>
<div className="absolute top-2 right-6 rounded border border-border bg-default p-2">
<div className="absolute right-6 top-2 rounded border border-border bg-default p-2">
<Dropdown
label="Change code block language"
items={CODE_LANGUAGE_OPTIONS.map(([value, label]) => ({

2
packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/index.tsx
View File

@@ -154,7 +154,7 @@ function FloatingLinkEditor({
return (
<div
ref={editorRef}
className="absolute top-0 left-0 max-w-[100vw] rounded-lg border border-border bg-default py-1 px-2 shadow shadow-contrast md:hidden"
className="absolute left-0 top-0 max-w-[100vw] rounded-lg border border-border bg-default px-2 py-1 shadow shadow-contrast md:hidden"
>
<LinkEditor
linkUrl={linkUrl}

4
packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx
View File

@@ -277,7 +277,7 @@ function TextFormatFloatingToolbar({
return (
<div
ref={toolbarRef}
className="absolute top-0 left-0 rounded-lg border border-border bg-default py-1 px-2 shadow shadow-contrast"
className="absolute left-0 top-0 rounded-lg border border-border bg-default px-2 py-1 shadow shadow-contrast"
>
{isLink && (
<LinkEditor
@@ -289,7 +289,7 @@ function TextFormatFloatingToolbar({
lastSelection={lastSelection}
/>
)}
{isText && isLink && <div role="presentation" className="mt-0.5 mb-1.5 h-px bg-border" />}
{isText && isLink && <div role="presentation" className="mb-1.5 mt-0.5 h-px bg-border" />}
{isText && (
<div className="flex gap-1">
<ToolbarButton

4
packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx
View File

@@ -217,7 +217,7 @@ const MobileToolbarPlugin = () => {
{items.map((item) => {
return (
<button
className="flex items-center justify-center rounded py-3 px-3"
className="flex items-center justify-center rounded px-3 py-3"
aria-label={item.name}
onClick={item.onSelect}
key={item.name}
@@ -228,7 +228,7 @@ const MobileToolbarPlugin = () => {
})}
</div>
<button
className="flex flex-shrink-0 items-center justify-center rounded border-l border-border py-3 px-3"
className="flex flex-shrink-0 items-center justify-center rounded border-l border-border px-3 py-3"
aria-label="Dismiss keyboard"
>
<Icon type="keyboard-close" size="medium" />

6
packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
View File

@@ -70,7 +70,7 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
)}
</button>
<div
className="flex flex-col gap-2 py-2 px-2"
className="flex flex-col gap-2 px-2 py-2"
onKeyDown={(event) => {
if (event.key === KeyboardKey.Escape) {
closeDialog()
@@ -118,14 +118,14 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
/>
<label
className={classNames(
'relative flex items-center rounded border py-1 px-1.5 focus-within:ring-2 focus-within:ring-info focus-within:ring-offset-2 focus-within:ring-offset-default',
'relative flex items-center rounded border px-1.5 py-1 focus-within:ring-2 focus-within:ring-info focus-within:ring-offset-2 focus-within:ring-offset-default',
isCaseSensitive ? 'border-info bg-info text-info-contrast' : 'border-border hover:bg-contrast',
)}
title={`Case sensitive (${caseSensitivityShortcut})`}
>
<input
type="checkbox"
className="absolute top-0 left-0 z-[1] m-0 h-full w-full cursor-pointer border border-transparent p-0 opacity-0 shadow-none outline-none"
className="absolute left-0 top-0 z-[1] m-0 h-full w-full cursor-pointer border border-transparent p-0 opacity-0 shadow-none outline-none"
checked={isCaseSensitive}
onChange={() => {
dispatch({

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