refactor(web): use asterisk icon for upgrade indicator (#1318)

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,

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'

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<ChangeEditorMenuProps> = ({
                           {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
                           {item.name}
                         </div>
-                        {!item.isEntitled && <Icon type="premium-feature" />}
+                        {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
                       </div>
                     </MenuItem>
                   )

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 = {

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'