From 3b89c655bd04cecf4cd0d9bac07199ecd759757a Mon Sep 17 00:00:00 2001
From: Vardan Hakobyan <vardan_live@live.com>
Date: Mon, 31 Jan 2022 19:01:57 +0400
Subject: [PATCH] feat: new UI for note cell (#537)

* chore: add support of svg files

* chore: replace original `no-shadow` rule to stop receiving false positive warnings

* feat: show editor icons and note status icons (pinned, deleted, etc.)

* refactor: store new colors in themes

* fix: handle missing icons case for note cell

* fix: get icon color and tint from snjs, remove duplicate color (`#086DD6`) from themes

* feat: let users to hide the editor icons

* chore: snjs version bump
---
 .eslintrc.js                                  |   2 +
 ios/Podfile.lock                              |  10 +-
 ios/StandardNotes.xcodeproj/project.pbxproj   |   4 +-
 metro.config.js                               |  34 +-
 package.json                                  |   4 +-
 src/components/Icon.styled.ts                 |   8 +
 src/components/SnIcon.tsx                     |  71 +++
 src/lib/application.ts                        |   4 +
 src/lib/preferences_manager.ts                |   1 +
 src/screens/Notes/NoteCell.styled.ts          |  40 +-
 src/screens/Notes/NoteCell.tsx                | 124 +++--
 src/screens/Notes/NoteCellFlags.tsx           |  28 -
 src/screens/Notes/NoteCellIconFlags.tsx       |  58 ++
 src/screens/Notes/NoteList.tsx                |   2 +
 src/screens/Notes/Notes.tsx                   |  24 +-
 .../Settings/Sections/PreferencesSection.tsx  |  19 +-
 src/style/Images/ic-archive.svg               |   4 +
 src/style/Images/ic-authenticator.svg         |   4 +
 src/style/Images/ic-code.svg                  |   4 +
 src/style/Images/ic-markdown.svg              |   4 +
 src/style/Images/ic-pencil-off.svg            |   3 +
 src/style/Images/ic-pin-filled.svg            |   3 +
 src/style/Images/ic-spreadsheets.svg          |   4 +
 src/style/Images/ic-tasks.svg                 |   4 +
 src/style/Images/ic-text-paragraph.svg        |   3 +
 src/style/Images/ic-text-rich.svg             |   4 +
 src/style/Images/ic-trash-filled.svg          |   4 +
 src/style/Themes/blue-dark.json               |   6 +
 src/style/Themes/blue.json                    |   6 +
 src/style/Themes/red.json                     |   6 +
 src/style/utils.ts                            |  25 +
 src/types/react-native-svg/index.d.ts         |   6 +
 yarn.lock                                     | 519 ++++++++++++++++--
 33 files changed, 911 insertions(+), 131 deletions(-)
 create mode 100644 src/components/Icon.styled.ts
 create mode 100644 src/components/SnIcon.tsx
 create mode 100644 src/screens/Notes/NoteCellIconFlags.tsx
 create mode 100644 src/style/Images/ic-archive.svg
 create mode 100644 src/style/Images/ic-authenticator.svg
 create mode 100644 src/style/Images/ic-code.svg
 create mode 100644 src/style/Images/ic-markdown.svg
 create mode 100644 src/style/Images/ic-pencil-off.svg
 create mode 100644 src/style/Images/ic-pin-filled.svg
 create mode 100644 src/style/Images/ic-spreadsheets.svg
 create mode 100644 src/style/Images/ic-tasks.svg
 create mode 100644 src/style/Images/ic-text-paragraph.svg
 create mode 100644 src/style/Images/ic-text-rich.svg
 create mode 100644 src/style/Images/ic-trash-filled.svg
 create mode 100644 src/types/react-native-svg/index.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index df7d4c90..abfcfe1a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,5 +5,7 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   rules: {
     'prettier/prettier': 'warn',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
   },
 };
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 17ed1a53..c695426c 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -390,6 +390,8 @@ PODS:
     - React-Core
   - RNStoreReview (0.1.5):
     - React
+  - RNSVG (12.1.1):
+    - React
   - RNVectorIcons (7.1.0):
     - React
   - RNZipArchive (6.0.2):
@@ -486,6 +488,7 @@ DEPENDENCIES:
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSearchBar (from `../node_modules/react-native-search-bar`)
   - RNStoreReview (from `../node_modules/react-native-store-review/ios`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - RNZipArchive (from `../node_modules/react-native-zip-archive`)
   - sn-textview (from `../node_modules/sn-textview`)
@@ -620,6 +623,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-search-bar"
   RNStoreReview:
     :path: "../node_modules/react-native-store-review/ios"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   RNZipArchive:
@@ -635,7 +640,7 @@ SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BugsnagReactNative: d6988f685aae2de5ecda1f5ca39f03661759d416
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e5569e42a1c79ca00521846c223173a57aca1fe1
   FBReactNativeSpec: fe08c1cd7e2e205718d77ad14b34957cce949b58
   Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733
@@ -649,7 +654,7 @@ SPEC CHECKSUMS:
   FlipperKit: d8d346844eca5d9120c17d441a2f38596e8ed2b9
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   GCDWebServer: 2c156a56c8226e2d5c0c3f208a3621ccffbe3ce4
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
+  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
@@ -699,6 +704,7 @@ SPEC CHECKSUMS:
   RNScreens: 21b73c94c9117e1110a79ee0ee80c93ccefed8ce
   RNSearchBar: 5ed8e13ba8a6c701fbd2afdfe4164493d24b2aee
   RNStoreReview: 62d6afd7c37db711a594bbffca6b0ea3a812b7a8
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
   RNZipArchive: 3dd2de5b7f590d79e83270508b78870bf5a54f36
   sn-textview: 0211237b3e0edeeb23aed2a9c47b78af35a81e95
diff --git a/ios/StandardNotes.xcodeproj/project.pbxproj b/ios/StandardNotes.xcodeproj/project.pbxproj
index 52291f47..334b6c9e 100644
--- a/ios/StandardNotes.xcodeproj/project.pbxproj
+++ b/ios/StandardNotes.xcodeproj/project.pbxproj
@@ -732,7 +732,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -798,7 +798,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
diff --git a/metro.config.js b/metro.config.js
index 94d5eeef..46638b64 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -2,15 +2,29 @@
  * Metro configuration for React Native
  * https://github.com/facebook/react-native
  *
+ * And for svg files usage
+ * https://stackoverflow.com/a/65231261/2504429
  * @format
  */
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};
+const {getDefaultConfig} = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: {sourceExts, assetExts},
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      }),
+      babelTransformerPath: require.resolve('react-native-svg-transformer')
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== "svg"),
+      sourceExts: [...sourceExts, "svg"]
+    },
+  };
+})();
diff --git a/package.json b/package.json
index 84e3585e..1cf2bbab 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@react-navigation/native": "^5.9.3",
     "@react-navigation/stack": "^5.14.3",
     "@standardnotes/sncrypto-common": "1.5.2",
-    "@standardnotes/snjs": "2.34.0",
+    "@standardnotes/snjs": "2.45.0",
     "js-base64": "^3.5.2",
     "moment": "^2.29.1",
     "react": "17.0.2",
@@ -51,6 +51,8 @@
     "react-native-sodium": "https://github.com/standardnotes/react-native-sodium#40e51a922e0c20c07ebf4d064b81994b4f3abcff",
     "react-native-static-server": "standardnotes/react-native-static-server#d0c4cb0feae233634ef26fc33118f258192c7b7d",
     "react-native-store-review": "^0.1.5",
+    "react-native-svg": "^12.1.1",
+    "react-native-svg-transformer": "^1.0.0",
     "react-native-tab-view": "^2.15.2",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-vector-icons": "^7.1.0",
diff --git a/src/components/Icon.styled.ts b/src/components/Icon.styled.ts
new file mode 100644
index 00000000..5447cad6
--- /dev/null
+++ b/src/components/Icon.styled.ts
@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export const iconStyles = StyleSheet.create({
+  icon: {
+    width: 14,
+    height: 14,
+  },
+});
diff --git a/src/components/SnIcon.tsx b/src/components/SnIcon.tsx
new file mode 100644
index 00000000..c86867c3
--- /dev/null
+++ b/src/components/SnIcon.tsx
@@ -0,0 +1,71 @@
+import { iconStyles } from '@Components/Icon.styled';
+import { IconType } from '@standardnotes/snjs';
+import React, { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+import ArchiveIcon from '../style/Images/ic-archive.svg';
+import AuthenticatorIcon from '../style/Images/ic-authenticator.svg';
+import CodeIcon from '../style/Images/ic-code.svg';
+import MarkdownIcon from '../style/Images/ic-markdown.svg';
+import PencilOffIcon from '../style/Images/ic-pencil-off.svg';
+import PinFilledIcon from '../style/Images/ic-pin-filled.svg';
+import SpreadsheetsIcon from '../style/Images/ic-spreadsheets.svg';
+import TasksIcon from '../style/Images/ic-tasks.svg';
+import PlainTextIcon from '../style/Images/ic-text-paragraph.svg';
+import RichTextIcon from '../style/Images/ic-text-rich.svg';
+import TrashFilledIcon from '../style/Images/ic-trash-filled.svg';
+
+const ICONS = {
+  'pencil-off': PencilOffIcon,
+  'plain-text': PlainTextIcon,
+  'rich-text': RichTextIcon,
+  code: CodeIcon,
+  markdown: MarkdownIcon,
+  spreadsheets: SpreadsheetsIcon,
+  tasks: TasksIcon,
+  authenticator: AuthenticatorIcon,
+  'trash-filled': TrashFilledIcon,
+  'pin-filled': PinFilledIcon,
+  archive: ArchiveIcon,
+};
+
+export type TEditorIcon = Extract<
+  IconType,
+  | 'pencil-off'
+  | 'plain-text'
+  | 'rich-text'
+  | 'code'
+  | 'markdown'
+  | 'spreadsheets'
+  | 'tasks'
+  | 'authenticator'
+  | 'trash-filled'
+  | 'pin-filled'
+  | 'archive'
+>;
+
+type Props = {
+  type: TEditorIcon;
+  fill?: string;
+  styles?: Record<string, unknown>;
+};
+
+export const SnIcon = ({ type, fill, styles = {} }: Props) => {
+  const theme = useContext(ThemeContext);
+  const fillColor = fill || theme.stylekitPalSky;
+
+  const IconComponent = ICONS[type];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return (
+    <IconComponent
+      fill={fillColor}
+      style={{
+        ...iconStyles.icon,
+        ...styles,
+      }}
+    />
+  );
+};
diff --git a/src/lib/application.ts b/src/lib/application.ts
index 48d1c6cf..12405718 100644
--- a/src/lib/application.ts
+++ b/src/lib/application.ts
@@ -6,6 +6,7 @@ import {
   ChallengeValidation,
   DeinitSource,
   Environment,
+  IconsController,
   NoteGroupController,
   platformFromString,
   SNApplication,
@@ -40,6 +41,7 @@ const IsDev = VersionInfo.bundleIdentifier?.includes('dev');
 export class MobileApplication extends SNApplication {
   private MobileServices!: MobileServices;
   public editorGroup: NoteGroupController;
+  public iconsController: IconsController;
   private startedDeinit: boolean = false;
   public Uuid: string; // UI remounts when Uuid changes
   static previouslyLaunched: boolean = false;
@@ -69,6 +71,7 @@ export class MobileApplication extends SNApplication {
     );
     this.Uuid = Math.random().toString();
     this.editorGroup = new NoteGroupController(this);
+    this.iconsController = new IconsController();
     this.mobileComponentManager.initialize(this.protocolService);
   }
 
@@ -100,6 +103,7 @@ export class MobileApplication extends SNApplication {
     }
     this.MobileServices = {} as MobileServices;
     this.editorGroup.deinit();
+    this.iconsController.deinit();
     super.deinit(source);
   }
 
diff --git a/src/lib/preferences_manager.ts b/src/lib/preferences_manager.ts
index 05915078..ecec947a 100644
--- a/src/lib/preferences_manager.ts
+++ b/src/lib/preferences_manager.ts
@@ -15,6 +15,7 @@ export enum PrefKey {
   LastExportDate = 'lastExportDate',
   DoNotShowAgainUnsupportedEditors = 'doNotShowAgainUnsupportedEditors',
   SelectedTagUuid = 'selectedTagUuid',
+  NotesHideEditorIcon = 'hideEditorIcon',
 }
 
 type Preferences = Record<PrefKey, any>;
diff --git a/src/screens/Notes/NoteCell.styled.ts b/src/screens/Notes/NoteCell.styled.ts
index ffdd744b..669edf2b 100644
--- a/src/screens/Notes/NoteCell.styled.ts
+++ b/src/screens/Notes/NoteCell.styled.ts
@@ -1,15 +1,31 @@
 import { hexToRGBA } from '@Style/utils';
+import { StyleSheet } from 'react-native';
 import styled, { css } from 'styled-components/native';
 
 export const TouchableContainer = styled.TouchableWithoutFeedback``;
-export const Container = styled.View<{ selected: boolean; padding: number }>`
-  padding: ${props => props.padding}px;
-  padding-right: ${props => props.padding * 2}px;
+export const Container = styled.View<{ selected: boolean; distance: number }>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: ${props => props.distance}px 0 0 ${props => props.distance}px;
+  background-color: ${({ theme, selected }) =>
+    selected ? theme.stylekitInfoColor : theme.stylekitBackgroundColor};
+`;
+export const CustomFlexContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const NoteDataContainer = styled.View<{ distance: number }>`
   border-bottom-color: ${({ theme }) =>
     hexToRGBA(theme.stylekitBorderColor, 0.75)};
   border-bottom-width: 1px;
-  background-color: ${({ theme, selected }) =>
-    selected ? theme.stylekitInfoColor : theme.stylekitBackgroundColor};
+  padding-bottom: ${props => props.distance}px;
+  margin-left: 10px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding-right: ${props => props.distance}px;
 `;
 export const DeletedText = styled.Text`
   color: ${({ theme }) => theme.stylekitInfoColor};
@@ -28,6 +44,8 @@ export const TitleText = styled.Text<{ selected: boolean }>`
   font-size: 16px;
   color: ${({ theme, selected }) =>
     selected ? theme.stylekitInfoContrastColor : theme.stylekitForegroundColor};
+  flex-grow: 1;
+  flex-shrink: 1;
 `;
 export const TagsContainter = styled.View`
   flex: 1;
@@ -49,3 +67,15 @@ export const DetailsText = styled(TagText)<{ first: boolean }>`
       margin-top: 5px;
     `}
 `;
+export const NoteTitleContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+export const styles = StyleSheet.create({
+  editorIcon: {
+    marginTop: 2,
+    width: 16,
+    height: 16,
+  },
+});
diff --git a/src/screens/Notes/NoteCell.tsx b/src/screens/Notes/NoteCell.tsx
index a82d49c4..b02ca524 100644
--- a/src/screens/Notes/NoteCell.tsx
+++ b/src/screens/Notes/NoteCell.tsx
@@ -1,21 +1,29 @@
+import { SnIcon, TEditorIcon } from '@Components/SnIcon';
 import {
   useChangeNote,
   useDeleteNoteWithPrivileges,
   useProtectOrUnprotectNote,
 } from '@Lib/snjs_helper_hooks';
 import { ApplicationContext } from '@Root/ApplicationContext';
+import { NoteCellIconFlags } from '@Screens/Notes/NoteCellIconFlags';
 import { CollectionSort, isNullOrUndefined, SNNote } from '@standardnotes/snjs';
 import {
   CustomActionSheetOption,
   useCustomActionSheet,
 } from '@Style/custom_action_sheet';
+import { getTintColorForEditor } from '@Style/utils';
 import React, { useContext, useRef, useState } from 'react';
 import { Text, View } from 'react-native';
+import { ThemeContext } from 'styled-components';
 import {
   Container,
+  CustomFlexContainer,
   DeletedText,
   DetailsText,
+  NoteDataContainer,
   NoteText,
+  NoteTitleContainer,
+  styles,
   TitleText,
   TouchableContainer,
 } from './NoteCell.styled';
@@ -27,6 +35,7 @@ type Props = {
   onPressItem: (noteUuid: SNNote['uuid']) => void;
   hideDates: boolean;
   hidePreviews: boolean;
+  hideEditorIcon: boolean;
   sortType: CollectionSort;
 };
 
@@ -37,9 +46,11 @@ export const NoteCell = ({
   sortType,
   hideDates,
   hidePreviews,
+  hideEditorIcon,
 }: Props) => {
   // Context
   const application = useContext(ApplicationContext);
+  const theme = useContext(ThemeContext);
 
   const [changeNote] = useChangeNote(note);
   const [protectOrUnprotectNote] = useProtectOrUnprotectNote(note);
@@ -187,6 +198,11 @@ export const NoteCell = ({
     !isNullOrUndefined(note.preview_plain) && note.preview_plain.length > 0;
   const showDetails = !note.errorDecrypting && (!hideDates || note.protected);
 
+  const editorForNote = application?.componentManager.editorForNote(note);
+  const [icon, tint] = application?.iconsController.getIconAndTintForEditor(
+    editorForNote?.identifier
+  ) as [TEditorIcon, number];
+
   return (
     <TouchableContainer
       onPress={_onPress}
@@ -195,54 +211,74 @@ export const NoteCell = ({
       onLongPress={onLongPress}
       delayPressIn={150}
     >
-      <Container ref={elementRef as any} selected={highlight} padding={padding}>
-        {note.deleted && <DeletedText>Deleting...</DeletedText>}
+      <Container
+        ref={elementRef as any}
+        selected={highlight}
+        distance={padding}
+      >
+        <CustomFlexContainer>
+          {!hideEditorIcon && (
+            <SnIcon
+              type={icon}
+              fill={getTintColorForEditor(theme, tint)}
+              styles={styles.editorIcon}
+            />
+          )}
+          <NoteDataContainer distance={padding}>
+            {note.deleted && <DeletedText>Deleting...</DeletedText>}
 
-        <NoteCellFlags note={note} highlight={highlight} />
+            <NoteCellFlags note={note} highlight={highlight} />
 
-        {note.errorDecrypting && !note.waitingForKey && (
-          <NoteText selected={highlight} numberOfLines={2}>
-            {'Please sign in to restore your decryption keys and notes.'}
-          </NoteText>
-        )}
-
-        {note.safeTitle().length > 0 && (
-          <TitleText selected={highlight}>{note.title}</TitleText>
-        )}
-
-        {hasPlainPreview && showPreview && (
-          <NoteText selected={highlight} numberOfLines={2}>
-            {note.preview_plain}
-          </NoteText>
-        )}
-
-        {!hasPlainPreview && showPreview && note.safeText().length > 0 && (
-          <NoteText selected={highlight} numberOfLines={2}>
-            {note.text}
-          </NoteText>
-        )}
-
-        {showDetails && (
-          <DetailsText
-            numberOfLines={1}
-            selected={highlight}
-            first={!note.title}
-          >
-            {note.protected && (
-              <Text>
-                Protected
-                {!hideDates && ' • '}
-              </Text>
+            {note.errorDecrypting && !note.waitingForKey && (
+              <NoteText selected={highlight} numberOfLines={2}>
+                {'Please sign in to restore your decryption keys and notes.'}
+              </NoteText>
             )}
-            {!hideDates && (
-              <Text>
-                {sortType === CollectionSort.UpdatedAt
-                  ? 'Modified ' + note.updatedAtString
-                  : note.createdAtString}
-              </Text>
+
+            <NoteTitleContainer>
+              {note.safeTitle().length > 0 ? (
+                <TitleText selected={highlight}>{note.title}</TitleText>
+              ) : (
+                <Text />
+              )}
+              <NoteCellIconFlags note={note} />
+            </NoteTitleContainer>
+
+            {hasPlainPreview && showPreview && (
+              <NoteText selected={highlight} numberOfLines={2}>
+                {note.preview_plain}
+              </NoteText>
             )}
-          </DetailsText>
-        )}
+
+            {!hasPlainPreview && showPreview && note.safeText().length > 0 && (
+              <NoteText selected={highlight} numberOfLines={2}>
+                {note.text}
+              </NoteText>
+            )}
+
+            {showDetails && (
+              <DetailsText
+                numberOfLines={1}
+                selected={highlight}
+                first={!note.title}
+              >
+                {note.protected && (
+                  <Text>
+                    Protected
+                    {!hideDates && ' • '}
+                  </Text>
+                )}
+                {!hideDates && (
+                  <Text>
+                    {sortType === CollectionSort.UpdatedAt
+                      ? 'Modified ' + note.updatedAtString
+                      : note.createdAtString}
+                  </Text>
+                )}
+              </DetailsText>
+            )}
+          </NoteDataContainer>
+        </CustomFlexContainer>
       </Container>
     </TouchableContainer>
   );
diff --git a/src/screens/Notes/NoteCellFlags.tsx b/src/screens/Notes/NoteCellFlags.tsx
index 9e0ab397..f1ef2463 100644
--- a/src/screens/Notes/NoteCellFlags.tsx
+++ b/src/screens/Notes/NoteCellFlags.tsx
@@ -33,34 +33,6 @@ export const NoteCellFlags = ({
 
   let flags = [];
 
-  if (note.pinned) {
-    flags.push({
-      text: 'Pinned',
-      color: theme.stylekitInfoColor,
-    });
-  }
-
-  if (note.archived) {
-    flags.push({
-      text: 'Archived',
-      color: theme.stylekitWarningColor,
-    });
-  }
-
-  if (note.locked) {
-    flags.push({
-      text: 'Editing Disabled',
-      color: theme.stylekitNeutralColor,
-    });
-  }
-
-  if (note.trashed) {
-    flags.push({
-      text: 'Deleted',
-      color: theme.stylekitDangerColor,
-    });
-  }
-
   if (note.errorDecrypting) {
     if (note.waitingForKey) {
       flags.push({
diff --git a/src/screens/Notes/NoteCellIconFlags.tsx b/src/screens/Notes/NoteCellIconFlags.tsx
new file mode 100644
index 00000000..2ed62ed8
--- /dev/null
+++ b/src/screens/Notes/NoteCellIconFlags.tsx
@@ -0,0 +1,58 @@
+import { SnIcon, TEditorIcon } from '@Components/SnIcon';
+import { SNNote } from '@standardnotes/snjs';
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components/native';
+
+const FlagIconsContainer = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+type Props = {
+  note: SNNote;
+};
+
+type TFlagIcon = {
+  icon: TEditorIcon;
+  fillColor?: string;
+};
+
+export const NoteCellIconFlags = ({ note }: Props) => {
+  const theme = useContext(ThemeContext);
+  const { stylekitCorn, stylekitDangerColor, stylekitInfoColor } = theme;
+
+  const flagIcons = [] as TFlagIcon[];
+
+  if (note.archived) {
+    flagIcons.push({
+      icon: 'archive',
+      fillColor: stylekitCorn,
+    });
+  }
+  if (note.locked) {
+    flagIcons.push({
+      icon: 'pencil-off',
+      fillColor: stylekitInfoColor,
+    });
+  }
+  if (note.trashed) {
+    flagIcons.push({
+      icon: 'trash-filled',
+      fillColor: stylekitDangerColor,
+    });
+  }
+  if (note.pinned) {
+    flagIcons.push({
+      icon: 'pin-filled',
+      fillColor: stylekitInfoColor,
+    });
+  }
+  return flagIcons.length ? (
+    <FlagIconsContainer>
+      {flagIcons.map((flagIcon, index) => (
+        <SnIcon key={index} type={flagIcon.icon} fill={flagIcon.fillColor} />
+      ))}
+    </FlagIconsContainer>
+  ) : null;
+};
diff --git a/src/screens/Notes/NoteList.tsx b/src/screens/Notes/NoteList.tsx
index bf69c6cd..ef305b18 100644
--- a/src/screens/Notes/NoteList.tsx
+++ b/src/screens/Notes/NoteList.tsx
@@ -53,6 +53,7 @@ type Props = {
   sortType: CollectionSort;
   hideDates: boolean;
   hidePreviews: boolean;
+  hideEditorIcon: boolean;
   decrypting: boolean;
   loading: boolean;
   hasRefreshControl: boolean;
@@ -188,6 +189,7 @@ export const NoteList = (props: Props) => {
         sortType={props.sortType}
         hideDates={props.hideDates}
         hidePreviews={props.hidePreviews}
+        hideEditorIcon={props.hideEditorIcon}
         highlighted={item.uuid === props.selectedNoteId}
       />
     );
diff --git a/src/screens/Notes/Notes.tsx b/src/screens/Notes/Notes.tsx
index 3acad832..3d38cc49 100644
--- a/src/screens/Notes/Notes.tsx
+++ b/src/screens/Notes/Notes.tsx
@@ -75,6 +75,11 @@ export const Notes = React.memo(
         .getLocalPreferences()
         .getValue(PrefKey.NotesHideNotePreview, false)
     );
+    const [hideEditorIcon, setHideEditorIcon] = useState<boolean>(() =>
+      application!
+        .getLocalPreferences()
+        .getValue(PrefKey.NotesHideEditorIcon, false)
+    );
     const [notes, setNotes] = useState<SNNote[]>([]);
     const [selectedNoteId, setSelectedNoteId] = useState<SNNote['uuid']>();
     const [searchText, setSearchText] = useState('');
@@ -105,7 +110,7 @@ export const Notes = React.memo(
     const haveDisplayOptions = useRef(false);
     const protectionsEnabled = useRef(
       application!.hasProtectionSources() &&
-      !application!.hasUnprotectedAccessSession()
+        !application!.hasUnprotectedAccessSession()
     );
 
     const reloadTitle = useCallback(
@@ -232,10 +237,10 @@ export const Notes = React.memo(
         const searchQuery =
           searchText || searchFilter
             ? {
-              query: searchFilter?.toLowerCase() ?? searchText.toLowerCase(),
-              includeProtectedNoteText:
-                includeProtected ?? includeProtectedNoteText,
-            }
+                query: searchFilter?.toLowerCase() ?? searchText.toLowerCase(),
+                includeProtectedNoteText:
+                  includeProtected ?? includeProtectedNoteText,
+              }
             : undefined;
 
         let applyFilters = false;
@@ -490,6 +495,9 @@ export const Notes = React.memo(
       const newHideDate = application!
         .getLocalPreferences()
         .getValue(PrefKey.NotesHideDate, false);
+      const newHideEditorIcon = application!
+        .getLocalPreferences()
+        .getValue(PrefKey.NotesHideEditorIcon, false);
 
       if (sortBy !== newSortBy) {
         setSortBy(newSortBy);
@@ -507,6 +515,10 @@ export const Notes = React.memo(
         setHideDates(newHideDate);
         displayOptionsChanged = true;
       }
+      if (hideEditorIcon !== newHideEditorIcon) {
+        setHideEditorIcon(newHideEditorIcon);
+        displayOptionsChanged = true;
+      }
 
       if (displayOptionsChanged) {
         reloadNotesDisplayOptions(undefined, {
@@ -521,6 +533,7 @@ export const Notes = React.memo(
       sortReverse,
       hidePreviews,
       hideDates,
+      hideEditorIcon,
       reloadNotes,
       reloadNotesDisplayOptions,
     ]);
@@ -584,6 +597,7 @@ export const Notes = React.memo(
           loading={loading}
           hidePreviews={hidePreviews}
           hideDates={hideDates}
+          hideEditorIcon={hideEditorIcon}
           selectedNoteId={
             application?.getAppState().isInTabletMode
               ? selectedNoteId
diff --git a/src/screens/Settings/Sections/PreferencesSection.tsx b/src/screens/Settings/Sections/PreferencesSection.tsx
index dc5e1dab..a9f10762 100644
--- a/src/screens/Settings/Sections/PreferencesSection.tsx
+++ b/src/screens/Settings/Sections/PreferencesSection.tsx
@@ -22,6 +22,11 @@ export const PreferencesSection = () => {
   const [hideDates, setHideDates] = useState<boolean>(() =>
     application!.getLocalPreferences().getValue(PrefKey.NotesHideDate, false)
   );
+  const [hideEditorIcon, setHideEditorIcon] = useState<boolean>(() =>
+    application!
+      .getLocalPreferences()
+      .getValue(PrefKey.NotesHideEditorIcon, false)
+  );
   const [hidePreviews, setHidePreviews] = useState<boolean>(() =>
     application!
       .getLocalPreferences()
@@ -61,6 +66,12 @@ export const PreferencesSection = () => {
       .setUserPrefValue(PrefKey.NotesHideDate, !hideDates);
     setHideDates(value => !value);
   };
+  const toggleNotesEditorIconHidden = () => {
+    application
+      ?.getLocalPreferences()
+      .setUserPrefValue(PrefKey.NotesHideEditorIcon, !hideEditorIcon);
+    setHideEditorIcon(value => !value);
+  };
 
   return (
     <>
@@ -101,9 +112,15 @@ export const PreferencesSection = () => {
         <SectionedAccessoryTableCell
           onPress={toggleNotesDateHidden}
           text={'Hide note dates'}
-          last
           selected={() => hideDates}
         />
+
+        <SectionedAccessoryTableCell
+          onPress={toggleNotesEditorIconHidden}
+          text={'Hide editor icons'}
+          last
+          selected={() => hideEditorIcon}
+        />
       </TableSection>
     </>
   );
diff --git a/src/style/Images/ic-archive.svg b/src/style/Images/ic-archive.svg
new file mode 100644
index 00000000..bc703480
--- /dev/null
+++ b/src/style/Images/ic-archive.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4444 12.3333H12.3333C12.3333 12.9522 12.0875 13.5457 11.6499 13.9832C11.2123 14.4208 10.6188 14.6667 10 14.6667C9.38116 14.6667 8.78767 14.4208 8.35008 13.9832C7.9125 13.5457 7.66667 12.9522 7.66667 12.3333H4.55556V4.55556H15.4444V12.3333ZM15.4444 3H4.55556C3.69222 3 3 3.7 3 4.55556V15.4444C3 15.857 3.16389 16.2527 3.45561 16.5444C3.74733 16.8361 4.143 17 4.55556 17H15.4444C15.857 17 16.2527 16.8361 16.5444 16.5444C16.8361 16.2527 17 15.857 17 15.4444V4.55556C17 4.143 16.8361 3.74733 16.5444 3.45561C16.2527 3.16389 15.857 3 15.4444 3Z" />
+<path d="M13.1111 8.44442H11.5556V6.11108H8.44447V8.44442H6.88892L10 11.5555L13.1111 8.44442Z" />
+</svg>
diff --git a/src/style/Images/ic-authenticator.svg b/src/style/Images/ic-authenticator.svg
new file mode 100644
index 00000000..e8dd720c
--- /dev/null
+++ b/src/style/Images/ic-authenticator.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.16667 14.1667C9.16667 14.3877 9.25446 14.5996 9.41074 14.7559C9.56702 14.9122 9.77899 15 10 15C10.221 15 10.433 14.9122 10.5893 14.7559C10.7455 14.5996 10.8333 14.3877 10.8333 14.1667C10.8333 13.9457 10.7455 13.7337 10.5893 13.5774C10.433 13.4211 10.221 13.3333 10 13.3333C9.77899 13.3333 9.56702 13.4211 9.41074 13.5774C9.25446 13.7337 9.16667 13.9457 9.16667 14.1667ZM9.16667 2.5V5.83333H10.8333V4.23333C13.6583 4.64167 15.8333 7.05833 15.8333 10C15.8333 11.5471 15.2188 13.0308 14.1248 14.1248C13.0308 15.2188 11.5471 15.8333 10 15.8333C8.4529 15.8333 6.96917 15.2188 5.87521 14.1248C4.78125 13.0308 4.16667 11.5471 4.16667 10C4.16667 8.6 4.65833 7.31667 5.48333 6.31667L10 10.8333L11.175 9.65833L5.50833 3.99167V4.00833C3.68333 5.375 2.5 7.54167 2.5 10C2.5 11.9891 3.29018 13.8968 4.6967 15.3033C6.10322 16.7098 8.01088 17.5 10 17.5C11.9891 17.5 13.8968 16.7098 15.3033 15.3033C16.7098 13.8968 17.5 11.9891 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5H9.16667ZM15 10C15 9.77899 14.9122 9.56702 14.7559 9.41074C14.5996 9.25446 14.3877 9.16667 14.1667 9.16667C13.9457 9.16667 13.7337 9.25446 13.5774 9.41074C13.4211 9.56702 13.3333 9.77899 13.3333 10C13.3333 10.221 13.4211 10.433 13.5774 10.5893C13.7337 10.7455 13.9457 10.8333 14.1667 10.8333C14.3877 10.8333 14.5996 10.7455 14.7559 10.5893C14.9122 10.433 15 10.221 15 10ZM5 10C5 10.221 5.0878 10.433 5.24408 10.5893C5.40036 10.7455 5.61232 10.8333 5.83333 10.8333C6.05435 10.8333 6.26631 10.7455 6.42259 10.5893C6.57887 10.433 6.66667 10.221 6.66667 10C6.66667 9.77899 6.57887 9.56702 6.42259 9.41074C6.26631 9.25446 6.05435 9.16667 5.83333 9.16667C5.61232 9.16667 5.40036 9.25446 5.24408 9.41074C5.0878 9.56702 5 9.77899 5 10Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-code.svg b/src/style/Images/ic-code.svg
new file mode 100644
index 00000000..79df4be8
--- /dev/null
+++ b/src/style/Images/ic-code.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.7417 2.5L12.375 2.83333L9.25832 17.5L7.62498 17.1667L10.7417 2.5ZM16.325 10L13.3333 7.00833V4.65L18.6833 10L13.3333 15.3417V12.9833L16.325 10ZM1.31665 10L6.66665 4.65V7.00833L3.67498 10L6.66665 12.9833V15.3417L1.31665 10Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-markdown.svg b/src/style/Images/ic-markdown.svg
new file mode 100644
index 00000000..1efac587
--- /dev/null
+++ b/src/style/Images/ic-markdown.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.4999 3.33325V4.99992H14.9999V14.9999H12.4999V16.6666H16.6666V3.33325H12.4999ZM3.33325 3.33325V16.6666H7.49992V14.9999H4.99992V4.99992H7.49992V3.33325H3.33325Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-pencil-off.svg b/src/style/Images/ic-pencil-off.svg
new file mode 100644
index 00000000..060d7c87
--- /dev/null
+++ b/src/style/Images/ic-pencil-off.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.25 7.9L12.25 4.9L15.1 7.75L12.1 10.75L11.05 9.7L13 7.675L12.325 7L10.375 8.95L9.25 7.9ZM17.275 4.45L15.55 2.725C15.4 2.575 15.175 2.5 15.025 2.5C14.875 2.5 14.65 2.575 14.5 2.725L13.15 4.075L16 6.925L17.275 5.5C17.575 5.275 17.575 4.75 17.275 4.45ZM16 16.525L15.025 17.5L10.15 12.625L6.85 16H4V13.15L7.375 9.775L2.5 4.975L3.475 4L16 16.525ZM9.1 11.575L8.425 10.9L5.5 13.825V14.5H6.175L9.1 11.575Z" />
+</svg>
diff --git a/src/style/Images/ic-pin-filled.svg b/src/style/Images/ic-pin-filled.svg
new file mode 100644
index 00000000..4e5ae92a
--- /dev/null
+++ b/src/style/Images/ic-pin-filled.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 10V4H13.75V2.5H6.25V4H7V10L4.5 11.5V13H9.4V17.5H10.6V13H15.5V11.5L13 10Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-spreadsheets.svg b/src/style/Images/ic-spreadsheets.svg
new file mode 100644
index 00000000..2566d69b
--- /dev/null
+++ b/src/style/Images/ic-spreadsheets.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4 3H16C16.3978 3 16.7794 3.15526 17.0607 3.43163C17.342 3.708 17.5 4.08284 17.5 4.47368V15.5263C17.5 15.9172 17.342 16.292 17.0607 16.5684C16.7794 16.8447 16.3978 17 16 17H4C3.60218 17 3.22064 16.8447 2.93934 16.5684C2.65804 16.292 2.5 15.9172 2.5 15.5263V4.47368C2.5 4.08284 2.65804 3.708 2.93934 3.43163C3.22064 3.15526 3.60218 3 4 3ZM4 5.94737V8.15789H7V5.94737H4ZM8.5 5.94737V8.15789H11.5V5.94737H8.5ZM16 8.15789V5.94737H13V8.15789H16ZM4 9.63158V11.8421H7V9.63158H4ZM4 15.5263H7V13.3158H4V15.5263ZM8.5 9.63158V11.8421H11.5V9.63158H8.5ZM8.5 15.5263H11.5V13.3158H8.5V15.5263ZM16 15.5263V13.3158H13V15.5263H16ZM16 9.63158H13V11.8421H16V9.63158Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-tasks.svg b/src/style/Images/ic-tasks.svg
new file mode 100644
index 00000000..c6b89554
--- /dev/null
+++ b/src/style/Images/ic-tasks.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.8333 15.8333H4.16667V4.16667H12.5V2.5H4.16667C3.24167 2.5 2.5 3.24167 2.5 4.16667V15.8333C2.5 16.2754 2.67559 16.6993 2.98816 17.0118C3.30072 17.3244 3.72464 17.5 4.16667 17.5H15.8333C16.2754 17.5 16.6993 17.3244 17.0118 17.0118C17.3244 16.6993 17.5 16.2754 17.5 15.8333V9.16667H15.8333V15.8333ZM6.59167 8.4L5.41667 9.58333L9.16667 13.3333L17.5 5L16.325 3.81667L9.16667 10.975L6.59167 8.4Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-text-paragraph.svg b/src/style/Images/ic-text-paragraph.svg
new file mode 100644
index 00000000..376e8ad4
--- /dev/null
+++ b/src/style/Images/ic-text-paragraph.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17 5V6.66667H3V5H17ZM3 15H10V13.3333H3V15ZM3 10.8333H17V9.16667H3V10.8333Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-text-rich.svg b/src/style/Images/ic-text-rich.svg
new file mode 100644
index 00000000..d895ca8c
--- /dev/null
+++ b/src/style/Images/ic-text-rich.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.5 7.49984H7.5V12.4998H2.5V7.49984ZM2.5 4.1665H17.5V5.83317H2.5V4.1665ZM17.5 7.49984V9.1665H9.16667V7.49984H17.5ZM17.5 10.8332V12.4998H9.16667V10.8332H17.5ZM2.5 14.1665H14.1667V15.8332H2.5V14.1665Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Images/ic-trash-filled.svg b/src/style/Images/ic-trash-filled.svg
new file mode 100644
index 00000000..63f9575b
--- /dev/null
+++ b/src/style/Images/ic-trash-filled.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.49992 2.5V3.33333H3.33325V5H4.16659V15.8333C4.16659 16.2754 4.34218 16.6993 4.65474 17.0118C4.9673 17.3244 5.39122 17.5 5.83325 17.5H14.1666C14.6086 17.5 15.0325 17.3244 15.3451 17.0118C15.6577 16.6993 15.8332 16.2754 15.8332 15.8333V5H16.6666V3.33333H12.4999V2.5H7.49992ZM7.49992 6.66667H9.16658V14.1667H7.49992V6.66667ZM10.8333 6.66667H12.4999V14.1667H10.8333V6.66667Z" />
+</svg>
\ No newline at end of file
diff --git a/src/style/Themes/blue-dark.json b/src/style/Themes/blue-dark.json
index 1e27a413..be2fb80b 100644
--- a/src/style/Themes/blue-dark.json
+++ b/src/style/Themes/blue-dark.json
@@ -37,5 +37,11 @@
 	"stylekitInputBorderColor": "#2E2E2E",
 	"stylekitScrollbarThumbColor": "#749BDA",
 	"stylekitScrollbarTrackBorderColor": "#2E2E2E",
+	"stylekitPalSky": "#72767E",
+	"stylekitCorn": "#EBAD00",
+	"stylekitDeepBlush": "#EA6595",
+	"stylekitPurpleHeart": "#7049CF",
+	"stylekitMountainMeadow": "#1AA772",
+	"stylekitJaffa": "#F28C52",
 	"statusBar": ""
 }
diff --git a/src/style/Themes/blue.json b/src/style/Themes/blue.json
index fd5fda9f..c732ac47 100644
--- a/src/style/Themes/blue.json
+++ b/src/style/Themes/blue.json
@@ -37,5 +37,11 @@
 	"stylekitInputBorderColor": "#e3e3e3",
 	"stylekitScrollbarThumbColor": "#dfdfdf",
 	"stylekitScrollbarTrackBorderColor": "#E7E7E7",
+	"stylekitPalSky": "#72767E",
+	"stylekitCorn": "#EBAD00",
+	"stylekitDeepBlush": "#EA6595",
+	"stylekitPurpleHeart": "#7049CF",
+	"stylekitMountainMeadow": "#1AA772",
+	"stylekitJaffa": "#F28C52",
 	"statusBar": ""
 }
diff --git a/src/style/Themes/red.json b/src/style/Themes/red.json
index 88c45add..405289db 100644
--- a/src/style/Themes/red.json
+++ b/src/style/Themes/red.json
@@ -37,5 +37,11 @@
 	"stylekitInputBorderColor": "#e3e3e3",
 	"stylekitScrollbarThumbColor": "#dfdfdf",
 	"stylekitScrollbarTrackBorderColor": "#E7E7E7",
+	"stylekitPalSky": "#72767E",
+	"stylekitCorn": "#EBAD00",
+	"stylekitDeepBlush": "#EA6595",
+	"stylekitPurpleHeart": "#7049CF",
+	"stylekitMountainMeadow": "#1AA772",
+	"stylekitJaffa": "#F28C52",
 	"statusBar": ""
 }
diff --git a/src/style/utils.ts b/src/style/utils.ts
index a149ba1a..c5743fad 100644
--- a/src/style/utils.ts
+++ b/src/style/utils.ts
@@ -1,5 +1,6 @@
 import { isNullOrUndefined } from '@standardnotes/snjs';
 import { Platform, ScaledSize } from 'react-native';
+import { DefaultTheme } from 'styled-components/native';
 import { MobileTheme } from './theme_service';
 /* eslint-disable no-bitwise */
 export const LIGHT_MODE_KEY = 'light';
@@ -127,3 +128,27 @@ export function hexToRGBA(hex: string, alpha: number) {
     throw new Error('Bad Hex');
   }
 }
+
+export const getTintColorForEditor = (
+  theme: DefaultTheme,
+  tint: number
+): string | undefined => {
+  const {
+    stylekitInfoColor,
+    stylekitDeepBlush,
+    stylekitCorn,
+    stylekitPurpleHeart,
+    stylekitMountainMeadow,
+    stylekitJaffa,
+  } = theme;
+
+  const tintColorsMap = new Map([
+    [1, stylekitInfoColor],
+    [2, stylekitDeepBlush],
+    [3, stylekitCorn],
+    [4, stylekitPurpleHeart],
+    [5, stylekitMountainMeadow],
+    [6, stylekitJaffa],
+  ]);
+  return tintColorsMap.get(tint);
+};
diff --git a/src/types/react-native-svg/index.d.ts b/src/types/react-native-svg/index.d.ts
new file mode 100644
index 00000000..fed8d166
--- /dev/null
+++ b/src/types/react-native-svg/index.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
diff --git a/yarn.lock b/yarn.lock
index c639754a..6dc29163 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -64,6 +64,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.15.5":
+  version "7.16.12"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.12.tgz#5edc53c1b71e54881315923ae2aedea2522bb784"
+  integrity sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.16.7"
+    "@babel/parser" "^7.16.12"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.10"
+    "@babel/types" "^7.16.8"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468"
@@ -82,6 +103,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe"
+  integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==
+  dependencies:
+    "@babel/types" "^7.16.8"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
@@ -458,6 +488,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.7.tgz#d372dda9c89fcec340a82630a9f533f2fe15877e"
   integrity sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==
 
+"@babel/parser@^7.16.10", "@babel/parser@^7.16.12":
+  version "7.16.12"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
+  integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
+
 "@babel/plugin-proposal-class-properties@^7.0.0":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
@@ -1019,6 +1054,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.16.10":
+  version "7.16.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f"
+  integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.16.10"
+    "@babel/types" "^7.16.8"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.12.1", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.7.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
@@ -1028,6 +1079,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.15.6", "@babel/types@^7.16.8":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.16.0", "@babel/types@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.7.tgz#4ed19d51f840ed4bd5645be6ce40775fecf03159"
@@ -1698,20 +1757,21 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standardnotes/auth@3.8.1":
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.8.1.tgz#4197fb2f7e223c6bd13a870a3feac3c73294fb3c"
-  integrity sha512-Q2/81dgFGIGuYlQ4VnSjGRsDB0Qw0tQP/qsiuV+DQj+wdp5Wy5WX3Q4g+p2PNvoyEAYgbuduEHZfWuTLAaIdyw==
-  dependencies:
-    "@standardnotes/common" "^1.2.1"
-
-"@standardnotes/auth@3.8.3", "@standardnotes/auth@^3.8.1":
+"@standardnotes/auth@3.8.3":
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.8.3.tgz#6e627c1a1a9ebf91d97f52950d099bf7704382e3"
   integrity sha512-wz056b3pv8IIX74lYaqjCUvnw3NSow+ex5pn/VlGxg8r7gq19WsmgyXP2BoE7nqKddO1JMlFok+4gdnutYF0Cw==
   dependencies:
     "@standardnotes/common" "^1.2.1"
 
+"@standardnotes/auth@^3.15.3":
+  version "3.15.3"
+  resolved "https://registry.yarnpkg.com/@standardnotes/auth/-/auth-3.15.3.tgz#bf77332e0ac3d846acc45f25083459e42f4a4374"
+  integrity sha512-16wgMl0qmq8w+HUktfQ7ODoprkngSs0vsSF5G9aHM1L+lFMwlGeVOztHH2zwG91pFkl7BaK6LcEimoYiml6VAw==
+  dependencies:
+    "@standardnotes/common" "^1.8.0"
+    jsonwebtoken "^8.5.1"
+
 "@standardnotes/common@1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.2.1.tgz#9db212db86ccbf08b347da02549b3dbe4bedbb02"
@@ -1722,17 +1782,23 @@
   resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.3.0.tgz#d3376ebe146cbe43577a0980fc09ea01fd18eb3a"
   integrity sha512-ePyxHHG+AswmDSemh4AEGtDL8hvlW1KOnUSweGBtLbgSuh2CrhexuoYp7Juf9Bzli7s+Zl+2EZI0EEBqoE8iyg==
 
+"@standardnotes/common@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/common/-/common-1.8.0.tgz#af72ad85f0d410ae31c0c110137911e2595634de"
+  integrity sha512-R3nfAvhaXp5ufMB0M0fmV9yizE/Of2PGNJKnxtdxwowAq/ZakHu8Rh/v485PXrCaCFREVOZQO8kg0RQM8YngSw==
+
 "@standardnotes/components@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@standardnotes/components/-/components-1.2.3.tgz#6d2d439b435b935e283e09a57614f9769a299d40"
   integrity sha512-s02YBEL8L7qkBELVOcxPTfKbOqmKMnY/GBHhBtNpX1YTXGMGCPB3QYaKQr7x2JStclX/iQf072N75NQY2wxf7g==
 
-"@standardnotes/domain-events@2.5.1":
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.5.1.tgz#e6433e940ae616683d1c24f76133c70755504c44"
-  integrity sha512-p0VB4Al/ZcVqcj9ztU7TNqzc3jjjG6/U7x9lBW/QURHxpB+PnwJq3kFU5V5JA9QpCOYlXLT71CMERMf/O5QX6g==
+"@standardnotes/domain-events@^2.20.1":
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/domain-events/-/domain-events-2.20.1.tgz#3d6af041d20029b791877dc4d99a815ffa149474"
+  integrity sha512-UmkeF2nS2mFnR5OntT3d8My8CYaVth631B3hSGh7C8wVa3MSs2A9y+Ko2/JL92QxQa7/V5vt/rvPQKnLjT3YBg==
   dependencies:
-    "@standardnotes/auth" "^3.8.1"
+    "@standardnotes/auth" "^3.15.3"
+    "@standardnotes/features" "^1.26.1"
 
 "@standardnotes/features@^1.20.3":
   version "1.20.3"
@@ -1742,35 +1808,135 @@
     "@standardnotes/auth" "3.8.3"
     "@standardnotes/common" "1.2.1"
 
-"@standardnotes/features@^1.20.5":
-  version "1.20.5"
-  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.20.5.tgz#443e3ae84d13f0aaa35708c5c237dac8041cb50d"
-  integrity sha512-4QQeWLk2frEF9UYOfnuQoulkUJ3PooVLasPUA+zva+KIokBiyPmVPsi3HAYXlHqowu+lDhKU2pUklLhm1ePvJw==
+"@standardnotes/features@^1.26.1":
+  version "1.26.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/features/-/features-1.26.1.tgz#d4e4aed2ba91e40c407484e569a96c339477bba2"
+  integrity sha512-zxoeH9fjQtcTUbc5qaYD7AZETKDniM+tIvmLrWqwSC9B6/IL0R39G51BEkOzen+KhR/WgH3itHDVM+zrSMg53Q==
   dependencies:
-    "@standardnotes/auth" "3.8.3"
-    "@standardnotes/common" "1.2.1"
+    "@standardnotes/auth" "^3.15.3"
+    "@standardnotes/common" "^1.8.0"
 
-"@standardnotes/settings@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.9.0.tgz#0f01da5f6782363e4d77ee584b40f8614c555626"
-  integrity sha512-y+Mh7NuXtekEDr4PAvzg9KcRaCdd+0zlTXWO2D5MG28lLv/uhZmSsyWxZCVZqW3Rx6vz3c9IJdi7SoXN51gzSQ==
+"@standardnotes/settings@^1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@standardnotes/settings/-/settings-1.11.1.tgz#62e0df52820534c67041c99ed7f2c3a277158f39"
+  integrity sha512-uZChaTlIV63fYn7ODzVd/IB0nvrgyo/DwVaNgkjjHd3doGYqBMzzdfhs0RT0Ffpy0LOQhLpLBYqyJAryl1c4EA==
 
 "@standardnotes/sncrypto-common@1.5.2":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.5.2.tgz#be9404689d94f953c68302609a4f76751eaa82cd"
   integrity sha512-+OQ6gajTcVSHruw33T52MHyBDKL1vRCfQBXQn4tt4+bCfBAe+PFLkEQMHp35bg5twCfg9+wUf2KhmNNSNyBBZw==
 
-"@standardnotes/snjs@2.34.0":
-  version "2.34.0"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.34.0.tgz#ba5ccc3e82a190d3284cea2936e3453ed49b0b2c"
-  integrity sha512-1qIahN+TFy51FZcouWSGpIqxe5kDZAl07n3quzv3WszzvfIeB2X+40bmhJAj7/qbWjvNfoA60jKZYxiAbMIiJQ==
+"@standardnotes/sncrypto-common@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/sncrypto-common/-/sncrypto-common-1.6.0.tgz#c6174adf65c778c8d53e45ea4c68087786f86b67"
+  integrity sha512-3gTTokb+DWxtBH72auVtoB76V9pCZWyQ7hmClgBuQF3i5j6HvuuBZGiicHmwAv1zJxMi/op3haE8lwzQc8NJ9g==
+
+"@standardnotes/snjs@2.45.0":
+  version "2.45.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.45.0.tgz#d123434b959d279af2ffe00acf2e9e6784cf497c"
+  integrity sha512-gTlOG3wd4zYaBeReypQiz+ASEnVCKaB8kWtKF61nkV9j3vFgYh3krsvdhOi6lMXBk+CijEefeLhrmooOtv08Xg==
   dependencies:
-    "@standardnotes/auth" "3.8.1"
-    "@standardnotes/common" "1.2.1"
-    "@standardnotes/domain-events" "2.5.1"
-    "@standardnotes/features" "^1.20.5"
-    "@standardnotes/settings" "^1.9.0"
-    "@standardnotes/sncrypto-common" "1.5.2"
+    "@standardnotes/auth" "^3.15.3"
+    "@standardnotes/common" "^1.8.0"
+    "@standardnotes/domain-events" "^2.20.1"
+    "@standardnotes/features" "^1.26.1"
+    "@standardnotes/settings" "^1.11.1"
+    "@standardnotes/sncrypto-common" "^1.6.0"
+
+"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
+  integrity sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz#58654908beebfa069681a83332544b17e5237e89"
+  integrity sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz#d06dd6e8a8f603f92f9979bb9990a1f85a4f57ba"
+  integrity sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz#0b85837577b02c31c09c758a12932820f5245cee"
+  integrity sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==
+
+"@svgr/babel-plugin-svg-dynamic-title@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz#28236ec26f7ab9d486a487d36ae52d58ba15676f"
+  integrity sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz#40267c5dea1b43c4f83a0eb6169e08b43d8bafce"
+  integrity sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==
+
+"@svgr/babel-plugin-transform-react-native-svg@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz#eb688d0a5f539e34d268d8a516e81f5d7fede7c9"
+  integrity sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==
+
+"@svgr/babel-plugin-transform-svg-component@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz#7ba61d9fc1fb42b0ba1a04e4630019fa7e993c4f"
+  integrity sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==
+
+"@svgr/babel-preset@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-6.2.0.tgz#1d3ad8c7664253a4be8e4a0f0e6872f30d8af627"
+  integrity sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^6.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^6.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^6.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^6.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^6.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^6.0.0"
+    "@svgr/babel-plugin-transform-svg-component" "^6.2.0"
+
+"@svgr/core@^6.1.2":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.0.tgz#187a7930695635382c1ab42f476a1d4d45a65994"
+  integrity sha512-n5PrYAPoTpWGykqa8U05/TVTHOrVR/TxrUJ5EWHP9Db6vR3qnqzwAVLiFT1+slA7zQoJTXafQb+akwThf9SxGw==
+  dependencies:
+    "@svgr/plugin-jsx" "^6.2.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^7.0.1"
+
+"@svgr/hast-util-to-babel-ast@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.0.0.tgz#423329ad866b6c169009cc82b5e28ffee80c857c"
+  integrity sha512-S+TxtCdDyRGafH1VG1t/uPZ87aOYOHzWL8kqz4FoSZcIbzWA6rnOmjNViNiDzqmEpzp2PW5o5mZfvC9DiVZhTQ==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    entities "^3.0.1"
+
+"@svgr/plugin-jsx@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.0.tgz#5e41a75b12b34cb66509e63e535606161770ff42"
+  integrity sha512-QJDEe7K5Hkd4Eewu4pcjiOKTCtjB47Ol6lDLXVhf+jEewi+EKJAaAmM+bNixfW6LSNEg8RwOYQN3GZcprqKfHw==
+  dependencies:
+    "@babel/core" "^7.15.5"
+    "@svgr/babel-preset" "^6.2.0"
+    "@svgr/hast-util-to-babel-ast" "^6.0.0"
+    svg-parser "^2.0.2"
+
+"@svgr/plugin-svgo@^6.1.2":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz#4cbe6a33ccccdcae4e3b63ded64cc1cbe1faf48c"
+  integrity sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==
+  dependencies:
+    cosmiconfig "^7.0.1"
+    deepmerge "^4.2.2"
+    svgo "^2.5.0"
+
+"@trysound/sax@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
+  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.10"
@@ -1900,6 +2066,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prettier@^2.0.0":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.1.tgz#be148756d5480a84cde100324c03a86ae5739fb5"
@@ -2558,6 +2729,11 @@ bluebird@^3.5.4:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
 bplist-creator@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.0.8.tgz#56b2a6e79e9aec3fc33bf831d09347d73794e79c"
@@ -2626,6 +2802,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+  integrity sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -2740,6 +2921,11 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
 camelize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
@@ -2949,6 +3135,11 @@ commander@^2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -3056,6 +3247,17 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-fetch@^3.0.4:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c"
@@ -3096,6 +3298,27 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
 
+css-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-select@^4.1.3:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
+  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.1.0"
+    domhandler "^4.3.0"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
 css-to-react-native@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
@@ -3105,6 +3328,31 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
+css-tree@^1.0.0-alpha.39, css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
+css-what@^3.2.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+  integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
+
+css-what@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
+  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -3343,6 +3591,33 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+domelementtype@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -3350,6 +3625,30 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@^4.2.0, domhandler@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dtrace-provider@~0.8:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.8.tgz#2996d5490c37e1347be263b423ed7b297fb0d97e"
@@ -3365,6 +3664,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz#ae0f0fa2d85045ef14a817daa3ce9acd0489e5bf"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -3416,6 +3722,16 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 envinfo@^7.7.2:
   version "7.7.3"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.7.3.tgz#4b2d8622e3e7366afb8091b23ed95569ea0208cc"
@@ -5392,6 +5708,22 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
+jsonwebtoken@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
+  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^5.6.0"
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -5410,6 +5742,23 @@ jsx-ast-utils@^2.4.1:
     array-includes "^3.1.1"
     object.assign "^4.1.0"
 
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.4.1.tgz#743c32985cb9e98655530d53641b66c8645b039a"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -5536,11 +5885,36 @@ lodash.frompairs@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2"
   integrity sha1-vE5SB/onV8E25XNhTpZkUGsrG9I=
 
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
+  integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
+  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
+  integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
+  integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
 lodash.isstring@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
@@ -5551,6 +5925,11 @@ lodash.omit@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
   integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
 
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
 lodash.pick@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@@ -5671,6 +6050,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@@ -6091,6 +6475,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 mv@~2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/mv/-/mv-2.1.1.tgz#ae6ce0d6f6d5e0a4f7d893798d03c1ea9559b6a2"
@@ -6265,6 +6654,20 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
+nth-check@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+  dependencies:
+    boolbase "~1.0.0"
+
+nth-check@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
+  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nullthrows@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
@@ -6550,6 +6953,11 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
+path-dirname@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
+
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
@@ -7037,6 +7445,23 @@ react-native-store-review@^0.1.5:
   resolved "https://registry.yarnpkg.com/react-native-store-review/-/react-native-store-review-0.1.5.tgz#9df69786a137580748e368641698d2104519e4cf"
   integrity sha512-vVx7NYaQva3bGU5MdqXn4yEB+o+GPdmjqAuj7PnkepfeCS6Bi3sqniiKoXmKOKDgRTfIobBZjUkHzWeHli1+3A==
 
+react-native-svg-transformer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg-transformer/-/react-native-svg-transformer-1.0.0.tgz#7a707e5e95d20321b5f3dcfd0c3c8762ebd0221b"
+  integrity sha512-ALHU5VvLLyKM/BvyEG7VYJmqglvaXtU7mGRCxrEwwpJO/GBf1ZMUzc4AeJAjSodj7yYtlDYRxNSt9ySWpaa6JQ==
+  dependencies:
+    "@svgr/core" "^6.1.2"
+    "@svgr/plugin-svgo" "^6.1.2"
+    path-dirname "^1.0.2"
+
+react-native-svg@^12.1.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"
+  integrity sha512-NIAJ8jCnXGCqGWXkkJ1GTzO4a3Md5at5sagYV8Vh4MXYnL4z5Rh428Wahjhh+LIjx40EE5xM5YtwyJBqOIba2Q==
+  dependencies:
+    css-select "^2.1.0"
+    css-tree "^1.0.0-alpha.39"
+
 react-native-tab-view@^2.15.2:
   version "2.15.2"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz#4bc7832d33a119306614efee667509672a7ee64e"
@@ -7922,6 +8347,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stack-generator@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
@@ -8164,6 +8594,24 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svg-parser@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svgo@^2.5.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
+  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    picocolors "^1.0.0"
+    stable "^0.1.8"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -8831,6 +9279,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yargs-parser@^13.0.0, yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"