feat: import svg files from stylekit (#844)

* chore: install stylekit with its new name

* feat: import svg files from stylekit

* feat: import the remaining svgs from stylekit

* fix: import 'warning' icon from stylekit

* chore: import warning icon from stylekit

* chore: bump stylekit version

* chore: update sn dependencies

app/assets/javascripts/components/Icon.tsx

@@ -1,73 +1,75 @@
-import AccessibilityIcon from '../../icons/ic-accessibility.svg';
-import AccountCircleIcon from '../../icons/ic-account-circle.svg';
-import AddIcon from '../../icons/ic-add.svg';
-import ArchiveIcon from '../../icons/ic-archive.svg';
-import ArrowLeftIcon from '../../icons/ic-arrow-left.svg';
-import ArrowsSortDownIcon from '../../icons/ic-arrows-sort-down.svg';
-import ArrowsSortUpIcon from '../../icons/ic-arrows-sort-up.svg';
-import AuthenticatorIcon from '../../icons/ic-authenticator.svg';
-import CheckBoldIcon from '../../icons/ic-check-bold.svg';
-import CheckCircleIcon from '../../icons/ic-check-circle.svg';
-import CheckIcon from '../../icons/ic-check.svg';
-import ChevronDownIcon from '../../icons/ic-chevron-down.svg';
-import ChevronRightIcon from '../../icons/ic-chevron-right.svg';
-import CloseIcon from '../../icons/ic-close.svg';
-import CloudOffIcon from '../../icons/ic-cloud-off.svg';
-import CodeIcon from '../../icons/ic-code.svg';
-import CopyIcon from '../../icons/ic-copy.svg';
-import DownloadIcon from '../../icons/ic-download.svg';
-import EditorIcon from '../../icons/ic-editor.svg';
-import EmailIcon from '../../icons/ic-email.svg';
-import EyeIcon from '../../icons/ic-eye.svg';
-import EyeOffIcon from '../../icons/ic-eye-off.svg';
-import HashtagIcon from '../../icons/ic-hashtag.svg';
-import HelpIcon from '../../icons/ic-help.svg';
-import InfoIcon from '../../icons/ic-info.svg';
-import KeyboardIcon from '../../icons/ic-keyboard.svg';
-import LinkOffIcon from '../../icons/ic-link-off.svg';
-import ListBulleted from '../../icons/ic-list-bulleted.svg';
-import ListedIcon from '../../icons/ic-listed.svg';
-import LockFilledIcon from '../../icons/ic-lock-filled.svg';
-import LockIcon from '../../icons/ic-lock.svg';
-import MarkdownIcon from '../../icons/ic-markdown.svg';
-import MenuArrowDownAlt from '../../icons/ic-menu-arrow-down-alt.svg';
-import MenuArrowDownIcon from '../../icons/ic-menu-arrow-down.svg';
-import MenuArrowRight from '../../icons/ic-menu-arrow-right.svg';
-import MenuCloseIcon from '../../icons/ic-menu-close.svg';
-import MoreIcon from '../../icons/ic-more.svg';
-import NotesIcon from '../../icons/ic-notes.svg';
-import PasswordIcon from '../../icons/ic-textbox-password.svg';
-import PencilOffIcon from '../../icons/ic-pencil-off.svg';
-import PinFilledIcon from '../../icons/ic-pin-filled.svg';
-import PinIcon from '../../icons/ic-pin.svg';
-import PlainTextIcon from '../../icons/ic-text-paragraph.svg';
-import PremiumFeatureIcon from '../../icons/ic-premium-feature.svg';
-import RestoreIcon from '../../icons/ic-restore.svg';
-import RichTextIcon from '../../icons/ic-text-rich.svg';
-import SecurityIcon from '../../icons/ic-security.svg';
-import ServerIcon from '../../icons/ic-server.svg';
-import SettingsIcon from '../../icons/ic-settings.svg';
-import SignInIcon from '../../icons/ic-signin.svg';
-import SignOutIcon from '../../icons/ic-signout.svg';
-import SpreadsheetsIcon from '../../icons/ic-spreadsheets.svg';
-import StarIcon from '../../icons/ic-star.svg';
-import SyncIcon from '../../icons/ic-sync.svg';
-import TasksIcon from '../../icons/ic-tasks.svg';
-import ThemesIcon from '../../icons/ic-themes.svg';
-import TrashFilledIcon from '../../icons/ic-trash-filled.svg';
-import TrashIcon from '../../icons/ic-trash.svg';
-import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
-import TuneIcon from '../../icons/ic-tune.svg';
-import UnarchiveIcon from '../../icons/ic-unarchive.svg';
-import UnpinIcon from '../../icons/ic-pin-off.svg';
-import UserIcon from '../../icons/ic-user.svg';
-import UserSwitch from '../../icons/ic-user-switch.svg';
-import WarningIcon from '../../icons/ic-warning.svg';
-import WindowIcon from '../../icons/ic-window.svg';
-
 import { FunctionalComponent } from 'preact';
 import { IconType } from '@standardnotes/snjs';
 
+import {
+  AccessibilityIcon,
+  AccountCircleIcon,
+  AddIcon,
+  ArchiveIcon,
+  ArrowLeftIcon,
+  ArrowsSortDownIcon,
+  ArrowsSortUpIcon,
+  AuthenticatorIcon,
+  CheckBoldIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  CloudOffIcon,
+  CodeIcon,
+  CopyIcon,
+  DownloadIcon,
+  EditorIcon,
+  EmailIcon,
+  EyeIcon,
+  EyeOffIcon,
+  HashtagIcon,
+  HelpIcon,
+  InfoIcon,
+  KeyboardIcon,
+  LinkOffIcon,
+  ListBulleted,
+  ListedIcon,
+  LockFilledIcon,
+  LockIcon,
+  MarkdownIcon,
+  MenuArrowDownAlt,
+  MenuArrowDownIcon,
+  MenuArrowRight,
+  MenuCloseIcon,
+  MoreIcon,
+  NotesIcon,
+  PasswordIcon,
+  PencilOffIcon,
+  PinFilledIcon,
+  PinIcon,
+  PlainTextIcon,
+  PremiumFeatureIcon,
+  RestoreIcon,
+  RichTextIcon,
+  SecurityIcon,
+  ServerIcon,
+  SettingsIcon,
+  SignInIcon,
+  SignOutIcon,
+  SpreadsheetsIcon,
+  StarIcon,
+  SyncIcon,
+  TasksIcon,
+  ThemesIcon,
+  TrashFilledIcon,
+  TrashIcon,
+  TrashSweepIcon,
+  TuneIcon,
+  UnarchiveIcon,
+  UnpinIcon,
+  UserIcon,
+  UserSwitch,
+  WarningIcon,
+  WindowIcon,
+} from '@standardnotes/stylekit';
+
 const ICONS = {
   'account-circle': AccountCircleIcon,
   'arrow-left': ArrowLeftIcon,

app/assets/javascripts/components/MultipleSelectedNotes.tsx

@@ -1,5 +1,5 @@
 import { AppState } from '@/ui_models/app_state';
-import NotesIcon from '../../icons/il-notes.svg';
+import { IlNotesIcon } from '@standardnotes/stylekit';
 import { observer } from 'mobx-react-lite';
 import { NotesOptionsPanel } from './NotesOptionsPanel';
 import { WebApplication } from '@/ui_models/application';
@@ -26,7 +26,7 @@ export const MultipleSelectedNotes = observer(
           </div>
         </div>
         <div className="flex-grow flex flex-col justify-center items-center w-full max-w-md">
-          <NotesIcon className="block" />
+          <IlNotesIcon className="block" />
           <h2 className="text-lg m-0 text-center mt-4">
             {count} selected notes
           </h2>

app/assets/javascripts/components/PremiumFeaturesModal.tsx

@@ -5,7 +5,7 @@ import {
 } from '@reach/alert-dialog';
 import { FunctionalComponent } from 'preact';
 import { Icon } from './Icon';
-import PremiumIllustration from '../../svg/il-premium.svg';
+import { PremiumIllustration } from '@standardnotes/stylekit';
 import { useRef } from 'preact/hooks';
 
 type Props = {

app/assets/javascripts/components/shared/AccordionItem.tsx

@@ -1,18 +1,18 @@
 import { FunctionalComponent } from 'preact';
 import { useRef, useState } from 'preact/hooks';
-import ArrowDown from '../../../svg/arrow-down.svg';
+import { ArrowDownCheckmarkIcon } from '@standardnotes/stylekit';
 import { Title } from '@/preferences/components';
 
 type Props = {
   title: string | JSX.Element;
   className?: string;
-}
+};
 
 export const AccordionItem: FunctionalComponent<Props> = ({
-                                                            title,
-                                                            className = '',
-                                                            children
-                                                          }) => {
+  title,
+  className = '',
+  children,
+}) => {
   const elementRef = useRef<HTMLDivElement>(null);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -25,7 +25,7 @@ export const AccordionItem: FunctionalComponent<Props> = ({
         }}
       >
         <Title>{title}</Title>
-        <ArrowDown
+        <ArrowDownCheckmarkIcon
           className={'sn-accordion-arrow-icon absolute right-0'}
           width={20}
           height={20}

app/assets/javascripts/preferences/panes/account/Authentication.tsx

@@ -10,7 +10,7 @@ import { WebApplication } from '@/ui_models/application';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import AccountIllustration from '../../../../svg/il-account.svg';
+import { AccountIllustration } from '@standardnotes/stylekit';
 
 export const Authentication: FunctionComponent<{
   application: WebApplication;

app/assets/javascripts/purchaseFlow/PurchaseFlowView.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { CreateAccount } from './panes/CreateAccount';
 import { SignIn } from './panes/SignIn';
-import SNLogoFull from '../../svg/ic-sn-logo-full.svg';
+import { SNLogoFull } from '@standardnotes/stylekit';
 
 type PaneSelectorProps = {
   currentPane: PurchaseFlowPane;

app/assets/javascripts/purchaseFlow/panes/CreateAccount.tsx

@@ -5,13 +5,15 @@ import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import Illustration from '../../../svg/create-account-illustration.svg';
-import Circle from '../../../svg/circle-55.svg';
-import BlueDot from '../../../svg/blue-dot.svg';
-import Diamond from '../../../svg/diamond-with-horizontal-lines.svg';
 import { FloatingLabelInput } from '@/components/FloatingLabelInput';
 import { isEmailValid } from '@/utils';
 import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
+import {
+  BlueDotIcon,
+  CircleIcon,
+  DiamondIcon,
+  CreateAccountIllustration,
+} from '@standardnotes/stylekit';
 
 type Props = {
   appState: AppState;
@@ -120,13 +122,13 @@ export const CreateAccount: FunctionComponent<Props> = observer(
 
     return (
       <div className="flex items-center">
-        <Circle className="absolute w-8 h-8 top-40% -left-28" />
-        <BlueDot className="absolute w-4 h-4 top-35% -left-10" />
-        <Diamond className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
+        <CircleIcon className="absolute w-8 h-8 top-40% -left-28" />
+        <BlueDotIcon className="absolute w-4 h-4 top-35% -left-10" />
+        <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
 
-        <Circle className="absolute w-8 h-8 bottom-35% -right-20" />
-        <BlueDot className="absolute w-4 h-4 bottom-25% -right-10" />
-        <Diamond className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
+        <CircleIcon className="absolute w-8 h-8 bottom-35% -right-20" />
+        <BlueDotIcon className="absolute w-4 h-4 bottom-25% -right-10" />
+        <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
 
         <div className="mr-12 md:mr-0">
           <h1 className="mt-0 mb-2 text-2xl">Create your free account</h1>
@@ -211,7 +213,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(
             />
           </div>
         </div>
-        <Illustration className="md:hidden" />
+        <CreateAccountIllustration className="md:hidden" />
       </div>
     );
   }

app/assets/javascripts/purchaseFlow/panes/SignIn.tsx

@@ -5,12 +5,10 @@ import { PurchaseFlowPane } from '@/ui_models/app_state/purchase_flow_state';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import Circle from '../../../svg/circle-55.svg';
-import BlueDot from '../../../svg/blue-dot.svg';
-import Diamond from '../../../svg/diamond-with-horizontal-lines.svg';
 import { FloatingLabelInput } from '@/components/FloatingLabelInput';
 import { isEmailValid } from '@/utils';
 import { loadPurchaseFlowUrl } from '../PurchaseFlowWrapper';
+import { BlueDotIcon, CircleIcon, DiamondIcon } from '@standardnotes/stylekit';
 
 type Props = {
   appState: AppState;
@@ -101,13 +99,13 @@ export const SignIn: FunctionComponent<Props> = observer(
 
     return (
       <div className="flex items-center">
-        <Circle className="absolute w-8 h-8 top-35% -left-56" />
-        <BlueDot className="absolute w-4 h-4 top-30% -left-40" />
-        <Diamond className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
+        <CircleIcon className="absolute w-8 h-8 top-35% -left-56" />
+        <BlueDotIcon className="absolute w-4 h-4 top-30% -left-40" />
+        <DiamondIcon className="absolute w-26 h-26 -bottom-5 left-0 -translate-x-1/2 -z-index-1" />
 
-        <Circle className="absolute w-8 h-8 bottom-30% -right-56" />
-        <BlueDot className="absolute w-4 h-4 bottom-20% -right-44" />
-        <Diamond className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
+        <CircleIcon className="absolute w-8 h-8 bottom-30% -right-56" />
+        <BlueDotIcon className="absolute w-4 h-4 bottom-20% -right-44" />
+        <DiamondIcon className="absolute w-18 h-18 top-0 -right-2 translate-x-1/2 -z-index-1" />
 
         <div>
           <h1 className="mt-0 mb-2 text-2xl">Sign in</h1>