diff --git a/packages/desktop/app/javascripts/Renderer/Renderer.ts b/packages/desktop/app/javascripts/Renderer/Renderer.ts index 2dcc91da7..6a963203a 100644 --- a/packages/desktop/app/javascripts/Renderer/Renderer.ts +++ b/packages/desktop/app/javascripts/Renderer/Renderer.ts @@ -111,7 +111,7 @@ async function configureWindow(remoteBridge: CrossProcessBridge) { // For Mac inset window const sheet = document.styleSheets[0] if (isMacOS) { - sheet.insertRule('#navigation { padding-top: 25px !important; }', sheet.cssRules.length) + sheet.insertRule('#navigation-content { padding-top: 25px !important; }', sheet.cssRules.length) } if (isMacOS || useSystemMenuBar) { diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index bd7b91e44..3b15b3cb1 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -58,12 +58,34 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo device.reloadStatusBarStyle(false) }) + const keyboardWillChangeFrame = Keyboard.addListener('keyboardWillChangeFrame', (e) => { + webViewRef.current?.postMessage( + JSON.stringify({ + reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameWillChange, + messageType: 'event', + messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY }, + }), + ) + }) + + const keyboardDidChangeFrame = Keyboard.addListener('keyboardDidChangeFrame', (e) => { + webViewRef.current?.postMessage( + JSON.stringify({ + reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameDidChange, + messageType: 'event', + messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY }, + }), + ) + }) + return () => { removeStateServiceListener() removeBackHandlerServiceListener() removeColorSchemeServiceListener() keyboardShowListener.remove() keyboardHideListener.remove() + keyboardWillChangeFrame.remove() + keyboardDidChangeFrame.remove() } }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService]) @@ -198,7 +220,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo const onFunctionMessage = async (functionName: string, messageId: string, args: any) => { const returnValue = await (device as any)[functionName](...args) - if (LoggingEnabled) { + if (LoggingEnabled && functionName !== 'consoleLog') { console.log(`Native device function ${functionName} called`) } webViewRef.current?.postMessage(JSON.stringify({ messageId, returnValue, messageType: 'reply' })) @@ -253,6 +275,12 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo injectedJavaScriptBeforeContentLoaded={injectedJS} bounces={false} keyboardDisplayRequiresUserAction={false} + scalesPageToFit={true} + /** + * This disables the global window scroll but keeps scroll within div elements like lists and textareas. + * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears. + */ + scrollEnabled={false} /> ) } diff --git a/packages/services/src/Domain/Application/WebApplicationInterface.ts b/packages/services/src/Domain/Application/WebApplicationInterface.ts index 9e05045dc..3eb41b356 100644 --- a/packages/services/src/Domain/Application/WebApplicationInterface.ts +++ b/packages/services/src/Domain/Application/WebApplicationInterface.ts @@ -11,6 +11,8 @@ export interface WebApplicationInterface extends ApplicationInterface { handleMobileLosingFocusEvent(): Promise handleMobileResumingFromBackgroundEvent(): Promise handleMobileColorSchemeChangeEvent(): void + handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void + handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void isNativeMobileWeb(): boolean mobileDevice(): MobileDeviceInterface handleAndroidBackButtonPressed(): void diff --git a/packages/services/src/Domain/Event/WebAppEvent.ts b/packages/services/src/Domain/Event/WebAppEvent.ts index ecc531981..1bcce80ce 100644 --- a/packages/services/src/Domain/Event/WebAppEvent.ts +++ b/packages/services/src/Domain/Event/WebAppEvent.ts @@ -6,4 +6,6 @@ export enum WebAppEvent { PanelResized = 'PanelResized', WindowDidFocus = 'WindowDidFocus', WindowDidBlur = 'WindowDidBlur', + MobileKeyboardDidChangeFrame = 'MobileKeyboardDidChangeFrame', + MobileKeyboardWillChangeFrame = 'MobileKeyboardWillChangeFrame', } diff --git a/packages/snjs/lib/Client/ReactNativeToWebEvent.ts b/packages/snjs/lib/Client/ReactNativeToWebEvent.ts index edce6db5a..aea9733ac 100644 --- a/packages/snjs/lib/Client/ReactNativeToWebEvent.ts +++ b/packages/snjs/lib/Client/ReactNativeToWebEvent.ts @@ -5,4 +5,6 @@ export enum ReactNativeToWebEvent { LosingFocus = 'LosingFocus', AndroidBackButtonPressed = 'AndroidBackButtonPressed', ColorSchemeChanged = 'ColorSchemeChanged', + KeyboardFrameWillChange = 'KeyboardFrameWillChange', + KeyboardFrameDidChange = 'KeyboardFrameDidChange', } diff --git a/packages/styles/src/Styles/_panels.scss b/packages/styles/src/Styles/_panels.scss index 86ae4b309..7b500a7ce 100644 --- a/packages/styles/src/Styles/_panels.scss +++ b/packages/styles/src/Styles/_panels.scss @@ -19,10 +19,6 @@ box-shadow: none; border: none; border-radius: 0; - - .sk-panel-content { - // padding: 0; - } } .sk-panel-header { diff --git a/packages/styles/src/Styles/main.scss b/packages/styles/src/Styles/main.scss index ee8f2bbe8..588713d93 100644 --- a/packages/styles/src/Styles/main.scss +++ b/packages/styles/src/Styles/main.scss @@ -5,7 +5,7 @@ --sn-stylekit-base-font-size: 0.8125rem; --sn-stylekit-font-size-p: 0.8125rem; - --sn-stylekit-font-size-editor: 0.983125rem; + --sn-stylekit-font-size-editor: 0.9375rem; --sn-stylekit-font-size-h6: 0.65rem; --sn-stylekit-font-size-h5: 0.73125rem; diff --git a/packages/web/src/javascripts/Application/Application.ts b/packages/web/src/javascripts/Application/Application.ts index bed5350a8..63224ca56 100644 --- a/packages/web/src/javascripts/Application/Application.ts +++ b/packages/web/src/javascripts/Application/Application.ts @@ -38,7 +38,7 @@ import { import { MobileWebReceiver, NativeMobileEventListener } from '../NativeMobileWeb/MobileWebReceiver' import { AndroidBackHandler } from '@/NativeMobileWeb/AndroidBackHandler' import { PrefDefaults } from '@/Constants/PrefDefaults' -import { setViewportHeightWithFallback } from '@/setViewportHeightWithFallback' +import { setCustomViewportHeight, setViewportHeightWithFallback } from '@/setViewportHeightWithFallback' import { WebServices } from './WebServices' export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void @@ -293,6 +293,15 @@ export class WebApplication extends SNApplication implements WebApplicationInter void this.getThemeService().handleMobileColorSchemeChangeEvent() } + handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void { + setCustomViewportHeight(String(frame.contentHeight), 'px', true) + this.notifyWebEvent(WebAppEvent.MobileKeyboardWillChangeFrame, frame) + } + + handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void { + this.notifyWebEvent(WebAppEvent.MobileKeyboardDidChangeFrame, frame) + } + private async lockApplicationAfterMobileEventIfApplicable(): Promise { const isLocked = await this.isLocked() if (isLocked) { diff --git a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx index fd966798b..810128a85 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx @@ -14,6 +14,7 @@ import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption import { ApplicationGroup } from '@/Application/ApplicationGroup' import { formatLastSyncDate } from '@/Utils/DateUtils' import Spinner from '@/Components/Spinner/Spinner' +import { MenuItemIconSize } from '@/Constants/TailwindClassNames' type Props = { viewControllerManager: ViewControllerManager @@ -23,7 +24,7 @@ type Props = { closeMenu: () => void } -const iconClassName = 'text-neutral mr-2' +const iconClassName = `text-neutral mr-2 ${MenuItemIconSize}` const GeneralAccountMenu: FunctionComponent = ({ application, @@ -90,48 +91,48 @@ const GeneralAccountMenu: FunctionComponent = ({ return ( <>
-
Account
+
Account
{user ? ( <> -
+
You're signed in as:
{user.email}
{application.getHost()}
{isSyncingInProgress ? ( -
+
Syncing...
) : (
- +
-
Last synced:
-
{lastSyncDate}
+
Last synced:
+
{lastSyncDate}
)}
- +
) : ( <>
-
+
You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption.
- - Offline + + Offline
diff --git a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx index 80bea1e7d..b6ed59ad1 100644 --- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx +++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx @@ -8,6 +8,7 @@ import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu' import MenuItem from '@/Components/Menu/MenuItem' import { MenuItemType } from '@/Components/Menu/MenuItemType' import Popover from '@/Components/Popover/Popover' +import { MenuItemIconSize } from '@/Constants/TailwindClassNames' type Props = { mainApplicationGroup: ApplicationGroup @@ -32,10 +33,10 @@ const WorkspaceSwitcherOption: FunctionComponent = ({ mainApplicationGrou className="justify-between" >
- + Switch workspace
- + { 'challenge-modal shadow-overlay-light relative flex flex-col items-center rounded border border-solid border-border bg-default p-8' } > - {message} +
{message}
) diff --git a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx index 98b5205ad..4a76689bc 100644 --- a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx +++ b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx @@ -7,7 +7,7 @@ type Props = { } const styles = { - base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition', + base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition text-sm', unselected: 'text-neutral border-secondary-border bg-default', selected: 'text-neutral-contrast border-info bg-info', } diff --git a/packages/web/src/javascripts/Components/Button/Button.tsx b/packages/web/src/javascripts/Components/Button/Button.tsx index 00623b356..e310dd041 100644 --- a/packages/web/src/javascripts/Components/Button/Button.tsx +++ b/packages/web/src/javascripts/Components/Button/Button.tsx @@ -52,7 +52,7 @@ const getClassName = ( const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer' const width = fullWidth ? 'w-full' : 'w-fit' const padding = small ? 'px-3 py-1.5' : 'px-4 py-1.5' - const textSize = small ? 'text-xs' : 'text-sm' + const textSize = small ? 'text-sm lg:text-xs' : 'text-base lg:text-sm' const rounded = isRounded ? 'rounded' : '' let colors = primary ? getColorsForPrimaryVariant(style) : getColorsForNormalVariant(style) diff --git a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx index 41ddbd4d2..abafba18c 100644 --- a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx +++ b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx @@ -21,7 +21,9 @@ const RoundIconButton = forwardRef( return (
+ ) + }, [ + showDisplayOptionsMenu, + toggleDisplayOptionsMenu, + displayOptionsButtonRef, + application, + isFilesSmartView, + selectedTag, + ]) + + const AddButton = useMemo(() => { + return ( + + ) + }, [addButtonLabel, addNewItem, isDailyEntry]) + + const FolderName = useMemo(() => { + return ( +
+
+ {icon && ( + + )} +
+
{panelTitle}
+ {optionsSubtitle &&
{optionsSubtitle}
} +
+
+
+ ) + }, [optionsSubtitle, icon, panelTitle]) + + const PhoneAndDesktopLayout = useMemo(() => { + return ( +
+ + {FolderName} +
+ {OptionsMenu} + {AddButton} +
+
+ ) + }, [OptionsMenu, AddButton, FolderName]) + + const TabletLayout = useMemo(() => { + return ( +
+
+ +
+ {OptionsMenu} + {AddButton} +
+
+ {FolderName} +
+ ) + }, [OptionsMenu, AddButton, FolderName]) + + return ( +
+ {!isTablet && PhoneAndDesktopLayout} + {isTablet && TabletLayout}
) } diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx index af849b614..51fc917f2 100644 --- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx @@ -23,9 +23,8 @@ import { PreferenceMode } from './PreferenceMode' import { PremiumFeatureIconClass, PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon' import Button from '@/Components/Button/Button' import { classNames } from '@/Utils/ConcatenateClassNames' -import { isDev } from '@/Utils' -const DailyEntryModeEnabled = isDev +const DailyEntryModeEnabled = true const DisplayOptionsMenu: FunctionComponent = ({ closeDisplayOptionsMenu, @@ -180,7 +179,7 @@ const DisplayOptionsMenu: FunctionComponent = ({ return (

{DailyEntryModeEnabled && - 'Create powerful workflows and organizational layouts with per-tag display preferences and the all-new Daily Notebook feature.'} + 'Create powerful workflows and organizational layouts with per-tag display preferences and the all-new Daily Notebook calendar layout.'} {!DailyEntryModeEnabled && 'Create powerful workflows and organizational layouts with per-tag display preferences.'}

@@ -226,20 +225,24 @@ const DisplayOptionsMenu: FunctionComponent = ({ return ( -
Preferences for
+
Preferences for
{!isSystemTag && }
- {currentMode === 'tag' && } + {currentMode === 'tag' && ( + + )}
{controlsDisabled && } -
Sort by
+
Sort by
= ({
-
View
+
View
{!isFilesSmartView && ( = ({ Show icon -
Other
+
Other
= ({ onChange={toggleEntryMode} >
-
Daily Notebook
+
+
Daily Notebook
+
+ Experimental +
+
Capture new notes daily with a calendar-based layout
 diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx index a7480c5b8..aff06f185 100644 --- a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx @@ -206,9 +206,9 @@ const NewNotePreferences: FunctionComponent = ({ return (
-
New Note Defaults
+
New Note Defaults
-
Note Type
+
Note Type
= ({
-
Title Format
+
Title Format
= ({ spellCheck={false} />
-
- Preview: {dayjs().format(customNoteTitleFormat)} +
+ Preview: + {dayjs().format(customNoteTitleFormat)}
-
+
= ({ > Options - . Use [] to escape date-time formatting. + . Use [] to escape formatting.
)} diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx index aa877c249..25de7dd9e 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx @@ -18,12 +18,12 @@ const ListItemFlagIcons: FunctionComponent = ({ item, hasFiles = false })
{item.locked && ( - + )} {item.trashed && ( - + )} {item.archived && ( @@ -33,17 +33,17 @@ const ListItemFlagIcons: FunctionComponent = ({ item, hasFiles = false }) )} {item.pinned && ( - + )} {hasFiles && ( - + )} {item.starred && ( - + )}
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx index 6614c8dc8..88b20fbd5 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ListItemMetadata.tsx @@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent = ({ item, hideDate, sortBy }) } return ( -
+
{item.protected && Protected {hideDate ? '' : ' • '}} {!hideDate && showModifiedDate && Modified {item.updatedAtString || 'Now'}} {!hideDate && !showModifiedDate && {item.createdAtString || 'Now'}} diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx index f4f4aff98..a3a8cde8e 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx @@ -14,7 +14,7 @@ const ListItemNotePreviewText: FunctionComponent = ({ item, hidePreview, } return ( -
+
{item.preview_html && (
= ({ hideTags, tags }) => { } return ( -
+
{tags.map((tag) => ( = ({ item }) => { return ( -
-
{item.title}
+
+ {item.title}
) } diff --git a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx index 3ef076e9e..3f22c80ba 100644 --- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx +++ b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx @@ -36,7 +36,7 @@ const CustomDropdownButton: FunctionComponent = ({
) : null} -
{label}
+
{label}
@@ -92,7 +92,7 @@ const Dropdown: FunctionComponent = ({
) : null} -
{item.label}
+
{item.label}
))} diff --git a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx index e721c9588..055479489 100644 --- a/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx +++ b/packages/web/src/javascripts/Components/Footer/UpgradeNow.tsx @@ -15,7 +15,7 @@ const UpgradeNow = ({ application, featuresController }: Props) => { return shouldShowCTA ? (
-
+
Use your keyboard to enter or paste in an emoji character.
{isMacOS && ( -
On macOS: ⌘ + ⌃ + Space bar to bring up emoji picker.
+
+ On macOS: ⌘ + ⌃ + Space bar to bring up emoji picker. +
)} {isWindows && ( -
On Windows: Windows key + . to bring up emoji picker.
+
+ On Windows: Windows key + . to bring up emoji picker. +
)} )} diff --git a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx index c582cf665..40d432573 100644 --- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx +++ b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx @@ -119,8 +119,11 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus 0 ? 'w-80' : 'mr-10 w-70'} no-border h-7 - bg-transparent text-xs text-text focus:border-b-2 focus:border-solid focus:border-info focus:shadow-none focus:outline-none`} + className={classNames( + `${tags.length > 0 ? 'w-80' : 'mr-10 w-70'}`, + 'bg-transparent text-sm text-text focus:border-b-2 focus:border-solid focus:border-info lg:text-xs', + 'no-border h-7 focus:shadow-none focus:outline-none', + )} value={searchQuery} onChange={onSearchQueryChange} type="text" diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx index 1b85cf56a..ebc4ef877 100644 --- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx +++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx @@ -92,7 +92,7 @@ const LinkedItemBubble = ({ return ( ) } diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx index dc0574d0e..46a65b772 100644 --- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx +++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx @@ -19,6 +19,8 @@ import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils' import { shareSelectedNotes } from '@/NativeMobileWeb/ShareSelectedNotes' import { downloadSelectedNotesOnAndroid } from '@/NativeMobileWeb/DownloadSelectedNotesOnAndroid' import ProtectedUnauthorizedLabel from '../ProtectedItemOverlay/ProtectedUnauthorizedLabel' +import { classNames } from '@/Utils/ConcatenateClassNames' +import { MenuItemIconSize } from '@/Constants/TailwindClassNames' type DeletePermanentlyButtonProps = { onClick: () => void @@ -34,10 +36,11 @@ const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => ( ) -const iconClass = 'text-neutral mr-2' -const iconClassDanger = 'text-danger mr-2' -const iconClassWarning = 'text-warning mr-2' -const iconClassSuccess = 'text-success mr-2' +const iconSize = MenuItemIconSize +const iconClass = `text-neutral mr-2 ${iconSize}` +const iconClassDanger = `text-danger mr-2 ${iconSize}` +const iconClassWarning = `text-warning mr-2 ${iconSize}` +const iconClassSuccess = `text-success mr-2 ${iconSize}` const getWordCount = (text: string) => { if (text.trim().length === 0) { @@ -99,7 +102,7 @@ const NoteAttributes: FunctionComponent<{ const format = editor?.package_info?.file_type || 'txt' return ( -
+
{typeof words === 'number' && (format === 'txt' || format === 'md') ? ( <>
@@ -127,7 +130,8 @@ const SpellcheckOptions: FunctionComponent<{ editorForNote: SNComponent | undefined notesController: NotesController note: SNNote -}> = ({ editorForNote, notesController, note }) => { + className: string +}> = ({ editorForNote, notesController, note, className }) => { const spellcheckControllable = Boolean(!editorForNote || editorForNote.package_info.spellcheckControl) const noteSpellcheck = !spellcheckControllable ? true @@ -138,7 +142,7 @@ const SpellcheckOptions: FunctionComponent<{ return (
@@ -288,7 +298,7 @@ const NotesOptions = ({ )} )} {application.platform === Platform.Android && ( - )} - {unarchived && ( )} + {notes.length === 1 ? ( <> - + + + - + + + + + ) : null} diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx index 027449751..935b26f0e 100644 --- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx +++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx @@ -40,7 +40,7 @@ const NotesOptionsPanel = ({ return ( <> - + = ({ className = '', notesControll return (
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx index e19b7d04c..a9b20192d 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/AccountPreferences.tsx @@ -32,7 +32,7 @@ const AccountPreferences = ({ application, viewControllerManager }: Props) => ( {application.hasAccount() && viewControllerManager.featuresController.hasFiles && ( )} - + {application.hasAccount() && } diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx index 7318018e2..8717f36a3 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Account/Authentication.tsx @@ -1,5 +1,5 @@ import Button from '@/Components/Button/Button' -import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content' +import { Title } from '@/Components/Preferences/PreferencesComponents/Content' import { WebApplication } from '@/Application/Application' import { ViewControllerManager } from '@/Controllers/ViewControllerManager' import { observer } from 'mobx-react-lite' @@ -33,11 +33,11 @@ const Authentication: FunctionComponent = ({ viewControllerManager }) =>
You're not signed in - +
Sign in to sync your notes and preferences across all your devices and enable end-to-end encryption. - +