diff --git a/packages/icons/src/Icons/ic-diamond-filled.svg b/packages/icons/src/Icons/ic-diamond-filled.svg new file mode 100644 index 000000000..a29d7008a --- /dev/null +++ b/packages/icons/src/Icons/ic-diamond-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/Icons/ic-star-circle-filled.svg b/packages/icons/src/Icons/ic-star-circle-filled.svg new file mode 100644 index 000000000..de23e22e8 --- /dev/null +++ b/packages/icons/src/Icons/ic-star-circle-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/Icons/index.ts b/packages/icons/src/Icons/index.ts index c0bcc80a8..569b0366c 100644 --- a/packages/icons/src/Icons/index.ts +++ b/packages/icons/src/Icons/index.ts @@ -47,6 +47,7 @@ import CopyIcon from './ic-copy.svg' import CreateAccountIllustration from './create-account-illustration.svg' import DashboardIcon from './ic-dashboard.svg' import DiamondIcon from './diamond-with-horizontal-lines.svg' +import DiamondFilledIcon from './ic-diamond-filled.svg' import DownloadIcon from './ic-download.svg' import DragIcon from './ic-drag.svg' import DrawIcon from './ic-draw.svg' @@ -167,6 +168,7 @@ import SNLogoIcon from './ic-standard-notes.svg' import SortDescendingIcon from './ic-sort-descending.svg' import SpreadsheetsIcon from './ic-spreadsheets.svg' import StarFilledIcon from './ic-star-filled.svg' +import StarCircleFilled from './ic-star-circle-filled.svg' import StarIcon from './ic-star.svg' import StarVariantFilledIcon from './ic-star-variant-filled.svg' import StrikethroughIcon from './ic-strikethrough.svg' @@ -245,6 +247,7 @@ export { CopyIcon, CreateAccountIllustration, DashboardIcon, + DiamondFilledIcon, DiamondIcon, DownloadIcon, DragIcon, @@ -365,6 +368,7 @@ export { SNLogoIcon, SortDescendingIcon, SpreadsheetsIcon, + StarCircleFilled, StarFilledIcon, StarIcon, StarVariantFilledIcon, diff --git a/packages/snjs/lib/Types/IconType.ts b/packages/snjs/lib/Types/IconType.ts index 260076c90..43fd117c3 100644 --- a/packages/snjs/lib/Types/IconType.ts +++ b/packages/snjs/lib/Types/IconType.ts @@ -40,6 +40,8 @@ export type IconType = | 'color-fill' | 'copy' | 'dashboard' + | 'diamond-filled' + | 'diamond' | 'download' | 'drag' | 'draw' @@ -151,6 +153,7 @@ export type IconType = | 'spreadsheets' | 'standard-notes-2' | 'standard-notes' + | 'star-circle-filled' | 'star-filled' | 'star-variant-filled' | 'star' diff --git a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx index 794c9f5d0..2ffa185be 100644 --- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx +++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx @@ -24,6 +24,7 @@ import { transactionForDisassociateComponentWithCurrentNote, } from '../NoteView/TransactionFunctions' import { reloadFont } from '../NoteView/FontFunctions' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' type ChangeEditorMenuProps = { application: WebApplication @@ -202,7 +203,7 @@ const ChangeEditorMenu: FunctionComponent = ({ {group.icon && } {item.name} - {!item.isEntitled && } + {!item.isEntitled && } ) diff --git a/packages/web/src/javascripts/Components/Icon/Icon.tsx b/packages/web/src/javascripts/Components/Icon/Icon.tsx index cb0e89cdf..7de818c59 100644 --- a/packages/web/src/javascripts/Components/Icon/Icon.tsx +++ b/packages/web/src/javascripts/Components/Icon/Icon.tsx @@ -1,190 +1,104 @@ import { FunctionComponent, useMemo } from 'react' import { IconType } from '@standardnotes/snjs' - -import { - AccessibilityIcon, - AccountCircleIcon, - AddIcon, - ArchiveIcon, - ArrowLeftIcon, - ArrowsSortDownIcon, - ArrowsSortUpIcon, - AttachmentFileIcon, - AuthenticatorIcon, - CheckBoldIcon, - CheckCircleIcon, - CheckIcon, - ChevronDownIcon, - ChevronRightIcon, - ClearCircleFilledIcon, - CloseIcon, - CloudOffIcon, - CodeIcon, - CopyIcon, - DashboardIcon, - DownloadIcon, - EditorIcon, - EmailIcon, - EyeIcon, - EyeOffIcon, - FileDocIcon, - FileIcon, - FileImageIcon, - FileMovIcon, - FileMusicIcon, - FileOtherIcon, - FilePdfIcon, - FilePptIcon, - FileXlsIcon, - FileZipIcon, - FolderIcon, - HashtagIcon, - HashtagOffIcon, - HelpIcon, - HistoryIcon, - InfoIcon, - KeyboardIcon, - LinkIcon, - LinkOffIcon, - ListBulleted, - ListedIcon, - LockFilledIcon, - LockIcon, - MarkdownIcon, - MenuArrowDownAlt, - MenuArrowDownIcon, - MenuArrowRightIcon, - MenuCloseIcon, - MoreIcon, - NotesFilledIcon, - NotesIcon, - PasswordIcon, - PencilFilledIcon, - PencilIcon, - PencilOffIcon, - PinFilledIcon, - PinIcon, - PlainTextIcon, - PremiumFeatureIcon, - RestoreIcon, - RichTextIcon, - SearchIcon, - SecurityIcon, - ServerIcon, - SettingsIcon, - SignInIcon, - SignOutIcon, - SortDescendingIcon, - SpreadsheetsIcon, - StarIcon, - SubtractIcon, - SyncIcon, - TasksIcon, - ThemesIcon, - TrashFilledIcon, - TrashIcon, - TrashSweepIcon, - TuneIcon, - UnarchiveIcon, - UnpinIcon, - UserAddIcon, - UserIcon, - UserSwitch, - WarningIcon, - WindowIcon, -} from '@standardnotes/icons' +import * as icons from '@standardnotes/icons' export const ICONS = { - 'account-circle': AccountCircleIcon, - 'arrow-left': ArrowLeftIcon, - 'arrows-sort-down': ArrowsSortDownIcon, - 'arrows-sort-up': ArrowsSortUpIcon, - 'attachment-file': AttachmentFileIcon, - 'check-bold': CheckBoldIcon, - 'check-circle': CheckCircleIcon, - 'chevron-down': ChevronDownIcon, - 'chevron-right': ChevronRightIcon, - 'clear-circle-filled': ClearCircleFilledIcon, - 'cloud-off': CloudOffIcon, - 'eye-off': EyeOffIcon, - 'file-doc': FileDocIcon, - 'file-image': FileImageIcon, - 'file-mov': FileMovIcon, - 'file-music': FileMusicIcon, - 'file-other': FileOtherIcon, - 'file-pdf': FilePdfIcon, - 'file-ppt': FilePptIcon, - 'file-xls': FileXlsIcon, - 'file-zip': FileZipIcon, - 'hashtag-off': HashtagOffIcon, - 'link-off': LinkOffIcon, - 'list-bulleted': ListBulleted, - 'lock-filled': LockFilledIcon, - 'menu-arrow-down-alt': MenuArrowDownAlt, - 'menu-arrow-down': MenuArrowDownIcon, - 'menu-arrow-right': MenuArrowRightIcon, - 'menu-close': MenuCloseIcon, - 'notes-filled': NotesFilledIcon, - 'pencil-filled': PencilFilledIcon, - 'pencil-off': PencilOffIcon, - 'pin-filled': PinFilledIcon, - 'plain-text': PlainTextIcon, - 'premium-feature': PremiumFeatureIcon, - 'rich-text': RichTextIcon, - 'sort-descending': SortDescendingIcon, - 'trash-filled': TrashFilledIcon, - 'trash-sweep': TrashSweepIcon, - 'user-add': UserAddIcon, - 'user-switch': UserSwitch, - accessibility: AccessibilityIcon, - add: AddIcon, - archive: ArchiveIcon, - authenticator: AuthenticatorIcon, - check: CheckIcon, - close: CloseIcon, - code: CodeIcon, - copy: CopyIcon, - dashboard: DashboardIcon, - download: DownloadIcon, - editor: EditorIcon, - email: EmailIcon, - eye: EyeIcon, - file: FileIcon, - folder: FolderIcon, - hashtag: HashtagIcon, - help: HelpIcon, - history: HistoryIcon, - info: InfoIcon, - keyboard: KeyboardIcon, - link: LinkIcon, - listed: ListedIcon, - lock: LockIcon, - markdown: MarkdownIcon, - more: MoreIcon, - notes: NotesIcon, - password: PasswordIcon, - pencil: PencilIcon, - pin: PinIcon, - restore: RestoreIcon, - search: SearchIcon, - security: SecurityIcon, - server: ServerIcon, - settings: SettingsIcon, - signIn: SignInIcon, - signOut: SignOutIcon, - spreadsheets: SpreadsheetsIcon, - star: StarIcon, - subtract: SubtractIcon, - sync: SyncIcon, - tasks: TasksIcon, - themes: ThemesIcon, - trash: TrashIcon, - tune: TuneIcon, - unarchive: UnarchiveIcon, - unpin: UnpinIcon, - user: UserIcon, - warning: WarningIcon, - window: WindowIcon, + 'account-circle': icons.AccountCircleIcon, + 'arrow-left': icons.ArrowLeftIcon, + 'arrows-sort-down': icons.ArrowsSortDownIcon, + 'arrows-sort-up': icons.ArrowsSortUpIcon, + 'attachment-file': icons.AttachmentFileIcon, + 'check-bold': icons.CheckBoldIcon, + 'check-circle': icons.CheckCircleIcon, + 'chevron-down': icons.ChevronDownIcon, + 'chevron-right': icons.ChevronRightIcon, + 'clear-circle-filled': icons.ClearCircleFilledIcon, + 'cloud-off': icons.CloudOffIcon, + 'diamond-filled': icons.DiamondFilledIcon, + 'eye-off': icons.EyeOffIcon, + 'file-doc': icons.FileDocIcon, + 'file-image': icons.FileImageIcon, + 'file-mov': icons.FileMovIcon, + 'file-music': icons.FileMusicIcon, + 'file-other': icons.FileOtherIcon, + 'file-pdf': icons.FilePdfIcon, + 'file-ppt': icons.FilePptIcon, + 'file-xls': icons.FileXlsIcon, + 'file-zip': icons.FileZipIcon, + 'hashtag-off': icons.HashtagOffIcon, + 'link-off': icons.LinkOffIcon, + 'list-bulleted': icons.ListBulleted, + 'lock-filled': icons.LockFilledIcon, + 'menu-arrow-down-alt': icons.MenuArrowDownAlt, + 'menu-arrow-down': icons.MenuArrowDownIcon, + 'menu-arrow-right': icons.MenuArrowRightIcon, + 'menu-close': icons.MenuCloseIcon, + 'notes-filled': icons.NotesFilledIcon, + 'pencil-filled': icons.PencilFilledIcon, + 'pencil-off': icons.PencilOffIcon, + 'pin-filled': icons.PinFilledIcon, + 'plain-text': icons.PlainTextIcon, + 'premium-feature': icons.PremiumFeatureIcon, + 'rich-text': icons.RichTextIcon, + 'sort-descending': icons.SortDescendingIcon, + 'star-circle-filled': icons.StarCircleFilled, + 'star-filled': icons.StarFilledIcon, + 'star-variant-filled': icons.StarVariantFilledIcon, + 'trash-filled': icons.TrashFilledIcon, + 'trash-sweep': icons.TrashSweepIcon, + 'user-add': icons.UserAddIcon, + 'user-switch': icons.UserSwitch, + accessibility: icons.AccessibilityIcon, + add: icons.AddIcon, + archive: icons.ArchiveIcon, + asterisk: icons.AsteriskIcon, + authenticator: icons.AuthenticatorIcon, + check: icons.CheckIcon, + close: icons.CloseIcon, + code: icons.CodeIcon, + copy: icons.CopyIcon, + dashboard: icons.DashboardIcon, + diamond: icons.DiamondIcon, + download: icons.DownloadIcon, + editor: icons.EditorIcon, + email: icons.EmailIcon, + eye: icons.EyeIcon, + file: icons.FileIcon, + folder: icons.FolderIcon, + hashtag: icons.HashtagIcon, + help: icons.HelpIcon, + history: icons.HistoryIcon, + info: icons.InfoIcon, + keyboard: icons.KeyboardIcon, + link: icons.LinkIcon, + listed: icons.ListedIcon, + lock: icons.LockIcon, + markdown: icons.MarkdownIcon, + more: icons.MoreIcon, + notes: icons.NotesIcon, + password: icons.PasswordIcon, + pencil: icons.PencilIcon, + pin: icons.PinIcon, + restore: icons.RestoreIcon, + search: icons.SearchIcon, + security: icons.SecurityIcon, + server: icons.ServerIcon, + settings: icons.SettingsIcon, + signIn: icons.SignInIcon, + signOut: icons.SignOutIcon, + spreadsheets: icons.SpreadsheetsIcon, + star: icons.StarIcon, + subtract: icons.SubtractIcon, + sync: icons.SyncIcon, + tasks: icons.TasksIcon, + themes: icons.ThemesIcon, + trash: icons.TrashIcon, + tune: icons.TuneIcon, + unarchive: icons.UnarchiveIcon, + unpin: icons.UnpinIcon, + user: icons.UserIcon, + warning: icons.WarningIcon, + window: icons.WindowIcon, } type Props = { diff --git a/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts b/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts new file mode 100644 index 000000000..b476b0e64 --- /dev/null +++ b/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts @@ -0,0 +1,4 @@ +import { IconType } from '@standardnotes/snjs' + +export const PremiumFeatureIconName: IconType = 'asterisk' +export const PremiumFeatureIconClass = 'text-info' diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx index 1b4037f67..c4eca0fae 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx @@ -12,6 +12,7 @@ import { sortThemes } from '@/Utils/SortThemes' import PreferencesPane from '../PreferencesComponents/PreferencesPane' import PreferencesGroup from '../PreferencesComponents/PreferencesGroup' import PreferencesSegment from '../PreferencesComponents/PreferencesSegment' +import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon' type Props = { application: WebApplication @@ -57,7 +58,7 @@ const Appearance: FunctionComponent = ({ application }) => { themesAsItems.push({ label: theme.name as string, value: theme.identifier, - icon: 'premium-feature', + icon: PremiumFeatureIconName, }) } }) @@ -86,7 +87,7 @@ const Appearance: FunctionComponent = ({ application }) => { } const changeAutoLightTheme = (value: string, item: DropdownItem) => { - if (item.icon === 'premium-feature') { + if (item.icon === PremiumFeatureIconName) { premiumModal.activate(`${item.label} theme`) } else { application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error) @@ -95,7 +96,7 @@ const Appearance: FunctionComponent = ({ application }) => { } const changeAutoDarkTheme = (value: string, item: DropdownItem) => { - if (item.icon === 'premium-feature') { + if (item.icon === PremiumFeatureIconName) { premiumModal.activate(`${item.label} theme`) } else { application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error) diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx index c52d34deb..5afb56f18 100644 --- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx +++ b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx @@ -1,14 +1,16 @@ import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog' import { FunctionComponent, useCallback, useRef } from 'react' import Icon from '@/Components/Icon/Icon' -import { PremiumIllustration } from '@standardnotes/icons' import { WebApplication } from '@/Application/Application' import { openSubscriptionDashboard } from '@/Utils/ManageSubscription' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' +import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions' type Props = { application: WebApplication featureName: string hasSubscription: boolean + hasAccount: boolean onClose: () => void showModal: boolean } @@ -17,6 +19,7 @@ const PremiumFeaturesModal: FunctionComponent = ({ application, featureName, hasSubscription, + hasAccount, onClose, showModal, }) => { @@ -25,10 +28,12 @@ const PremiumFeaturesModal: FunctionComponent = ({ const handleClick = useCallback(() => { if (hasSubscription) { openSubscriptionDashboard(application) + } else if (hasAccount) { + void loadPurchaseFlowUrl(application) } else if (window.plansUrl) { window.location.assign(window.plansUrl) } - }, [application, hasSubscription]) + }, [application, hasSubscription, hasAccount]) return showModal ? ( @@ -44,14 +49,17 @@ const PremiumFeaturesModal: FunctionComponent = ({ -
- +
+
Enable Advanced Features
- In order to use {featureName} and other advanced features, please - purchase a subscription or upgrade your current plan. + To take advantage of {featureName} and other advanced features, + upgrade your current plan.
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx index caf256c89..a32595802 100644 --- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx +++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx @@ -4,6 +4,7 @@ import { FunctionComponent, MouseEventHandler, useCallback } from 'react' import Icon from '@/Components/Icon/Icon' import { usePremiumModal } from '@/Hooks/usePremiumModal' import Switch from '@/Components/Switch/Switch' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' type Props = { application: WebApplication @@ -44,7 +45,7 @@ const FocusModeSwitch: FunctionComponent = ({ application, onToggle, onCl ) : (
- +
)} diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx index adf07b9dd..5bf50c896 100644 --- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx +++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx @@ -6,6 +6,7 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal' import Switch from '@/Components/Switch/Switch' import { ThemeItem } from './ThemeItem' import RadioIndicator from '../RadioIndicator/RadioIndicator' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' type Props = { item: ThemeItem @@ -57,7 +58,7 @@ const ThemesMenuButton: FunctionComponent = ({ application, item, onBlur {item.name} - {!canActivateTheme && } + {!canActivateTheme && } ) : ( <> @@ -73,7 +74,7 @@ const ThemesMenuButton: FunctionComponent = ({ application, item, onBlur }} > ) : ( - + )} )} diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx index 057c8e500..73544ca3f 100644 --- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx +++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx @@ -7,6 +7,7 @@ import { previewHistoryEntryTitle } from './utils' import { FeaturesClientInterface, RevisionListEntry } from '@standardnotes/snjs/dist/@types' import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController' import Spinner from '@/Components/Spinner/Spinner' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' type RemoteHistoryListProps = { features: FeaturesClientInterface @@ -47,7 +48,9 @@ const RemoteHistoryList: FunctionComponent = ({ features >
{previewHistoryEntryTitle(entry)}
- {!features.hasMinimumRole(entry.required_role) && } + {!features.hasMinimumRole(entry.required_role) && ( + + )}
))} diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx index f52abb7f6..e6764e7e2 100644 --- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx +++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx @@ -10,6 +10,7 @@ import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside' import { NavigationController } from '@/Controllers/Navigation/NavigationController' import HorizontalSeparator from '../Shared/HorizontalSeparator' import { formatDateForContextMenu } from '@/Utils/DateUtils' +import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon' type ContextMenuProps = { navigationController: NavigationController @@ -83,7 +84,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag Add subtag - {!isEntitledToFolders && } + {!isEntitledToFolders && } diff --git a/packages/web/src/javascripts/Hooks/usePremiumModal.tsx b/packages/web/src/javascripts/Hooks/usePremiumModal.tsx index 3048e1ae4..c304a9254 100644 --- a/packages/web/src/javascripts/Hooks/usePremiumModal.tsx +++ b/packages/web/src/javascripts/Hooks/usePremiumModal.tsx @@ -40,6 +40,8 @@ const PremiumModalProvider: FunctionComponent = observer( !viewControllerManager.subscriptionController.isUserSubscriptionCanceled, ) + const hasAccount = application.hasAccount() + const activate = useCallback( (feature: string) => { viewControllerManager.featuresController.showPremiumAlert(feature).catch(console.error) @@ -58,6 +60,7 @@ const PremiumModalProvider: FunctionComponent = observer( application={application} featureName={featureName} hasSubscription={hasSubscription} + hasAccount={hasAccount} onClose={close} showModal={!!featureName} />