feat: 🎸 Dark mode (#364)

* Darkmode init

* More work on dark-mode, still some bugs with hooks

* More darkmode fixes

* Cleaned up theming

* Fixed notification theming

* Fixed notifcations import

* Fixed linting

* Fixed visibility issue

* Fix mock for react-native-appearance

* Fixed coloring in news

* feat: add dark theme

* Adjusted colors to be darker

* Major rewamp so that we utilize the Eva Design system a bit more for theming

* Dark mode

* readded listHeader

* fixes girls-dark-mode

* Changes

* spelling error on buttons

* Better label color

* Dark mode images

* Menu styling

* colors on news items

* Fixes calender

* Menu text

* last changes

* styling

* readded border color

* Removed padding

* more buttons on calendar

* switcharoo

* minor tweaks

* Minor tweaks

* minor tweaks

* fix: 🐛 fixade till layout missad i mergen

* fix: 🐛 mer layoutfixar

* fix: 🐛 tweekade textfärgerna

Light mode ska nu ha samma färger som den hade innan. Dark mode har lite
dämpade färger, så inte texten lyser

* fix: 🐛 barnens knappar tillbaka till vit

* fix: 🐛 dar mode basic button colors and linting

* fix: 🐛 modalWebView buttons are back

Co-authored-by: Axel <54435884+axdra@users.noreply.github.com>
Co-authored-by: axdra <axel.draws@outlook.com>
Co-authored-by: Rickard Natt och Dag <rickard@hey.com>
Co-authored-by: Christian Landgren <christian@landgren.nu>
Co-authored-by: Kajetan Kazimierczak <kajetanek@gmail.com>

packages/app/App.js

@@ -3,7 +3,8 @@ import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
 import { EvaIconsPack } from '@ui-kitten/eva-icons'
 import * as eva from '@eva-design/eva'
-import customization from './design/customization.json'
+import darkTheme from './design/dark.json'
+import lightTheme from './design/light.json'
 import { AppNavigator } from './components/navigation.component'
 import init from '@skolplattformen/embedded-api'
 import { ApiProvider } from '@skolplattformen/api-hooks'
@@ -13,7 +14,7 @@ import { StatusBar } from 'react-native'
 import { useBackgroundBlur } from './utils/blur'
 import { LanguageProvider } from './context/language/languageContext'
 import { translations } from './utils/translation'
-
+import { AppearanceProvider, useColorScheme } from 'react-native-appearance'
 const api = init(fetch, CookieManager)
 
 const reporter = __DEV__
@@ -28,21 +29,31 @@ const reporter = __DEV__
 
 export default () => {
   const FullBlurView = useBackgroundBlur()
+  const colorScheme = useColorScheme()
 
   return (
     <ApiProvider api={api} storage={AsyncStorage} reporter={reporter}>
       <SafeAreaProvider>
-        <StatusBar backgroundColor="#fff" barStyle="dark-content" translucent />
+        <AppearanceProvider>
-        <IconRegistry icons={EvaIconsPack} />
+          <StatusBar
-        <ApplicationProvider
+            backgroundColor={colorScheme === 'dark' ? '#222B45' : '#FFF'}
-          {...eva}
+            barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
-          theme={{ ...eva.light, ...customization }}
+            translucent
-        >
+          />
-          <LanguageProvider cache={true} data={translations}>
+          <IconRegistry icons={EvaIconsPack} />
-            <AppNavigator />
+          <ApplicationProvider
-          </LanguageProvider>
+            {...eva}
-          {FullBlurView}
+            theme={{
-        </ApplicationProvider>
+              ...(colorScheme === 'dark' ? eva.dark : eva.light),
+              ...(colorScheme === 'dark' ? darkTheme : lightTheme),
+            }}
+          >
+            <LanguageProvider cache={true} data={translations}>
+              <AppNavigator />
+            </LanguageProvider>
+            {FullBlurView}
+          </ApplicationProvider>
+        </AppearanceProvider>
       </SafeAreaProvider>
     </ApiProvider>
   )

packages/app/__mocks__/react-native-appearance.js

@@ -0,0 +1 @@
+export * from 'react-native-appearance/src/mock'

packages/app/components/absence.component.tsx

@@ -7,19 +7,21 @@ import {
   Divider,
   Input,
   Layout,
+  StyleService,
   Text,
   TopNavigation,
   TopNavigationAction,
-  useTheme,
+  useStyleSheet,
 } from '@ui-kitten/components'
 import { Formik } from 'formik'
 import moment from 'moment'
 import Personnummer from 'personnummer'
 import React from 'react'
-import { SafeAreaView, StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import DateTimePickerModal from 'react-native-modal-datetime-picker'
 import * as Yup from 'yup'
-import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
+import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
+import { SafeAreaView } from '../ui/safeAreaView.component'
 import { studentName } from '../utils/peopleHelpers'
 import { useSMS } from '../utils/SMS'
 import { translate } from '../utils/translation'
@@ -51,10 +53,10 @@ const Absence = () => {
   const route = useRoute<AbsenceRouteProps>()
   const { sendSMS } = useSMS()
   const { child } = route.params
-  const theme = useTheme()
   const [socialSecurityNumber, setSocialSecurityNumber] = React.useState('')
   const minumumDate = moment().hours(8).minute(0)
   const maximumDate = moment().hours(17).minute(0)
+  const styles = useStyleSheet(themedStyles)
 
   React.useEffect(() => {
     const getSocialSecurityNumber = async () => {
@@ -75,7 +77,7 @@ const Absence = () => {
   }
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <SafeAreaView>
       <TopNavigation
         accessoryLeft={() => (
           <TopNavigationAction
@@ -132,11 +134,13 @@ const Absence = () => {
             return (
               <View>
                 <View style={styles.field}>
+                  <Text style={styles.label}>
+                    {translate('general.socialSecurityNumber')}
+                  </Text>
                   <Input
                     accessibilityLabel={translate(
                       'general.socialSecurityNumber'
                     )}
-                    label={translate('general.socialSecurityNumber')}
                     keyboardType="number-pad"
                     onChangeText={handleChange('socialSecurityNumber')}
                     onBlur={handleBlur('socialSecurityNumber')}
@@ -146,7 +150,7 @@ const Absence = () => {
                     value={values.socialSecurityNumber}
                   />
                   {hasError('socialSecurityNumber') && (
-                    <Text style={{ color: theme['color-danger-700'] }}>
+                    <Text style={styles.error}>
                       {errors.socialSecurityNumber}
                     </Text>
                   )}
@@ -247,12 +251,14 @@ const Absence = () => {
 
 export default Absence
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   safeArea: {
     ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
+    backgroundColor: 'background-basic-color-1',
+  },
+  topBar: {
+    backgroundColor: 'background-basic-color-1',
   },
-  topBar: { backgroundColor: Colors.neutral.white },
   wrap: {
     ...LayoutStyle.flex.full,
     padding: Sizing.t5,
@@ -264,7 +270,10 @@ const styles = StyleSheet.create({
   label: {
     ...Typography.fontSize.xs,
     ...Typography.fontWeight.bold,
-    color: 'rgb(150,161,184)',
+    color: 'color-basic-600',
     marginBottom: Sizing.t1,
   },
+  error: {
+    color: 'color-primary-600',
+  },
 })

packages/app/components/auth.component.tsx

@@ -3,24 +3,20 @@ import {
   Text,
   TopNavigation,
   TopNavigationAction,
+  StyleService,
+  useStyleSheet,
 } from '@ui-kitten/components'
 import React from 'react'
-import {
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native'
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
 import { Login } from './login.component'
-import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
+import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
-import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
 import { translate } from '../utils/translation'
 import { GlobeIcon } from './icon.component'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from './navigation.component'
+import { SafeAreaView } from '../ui/safeAreaView.component'
+import { KeyboardAvoidingView } from '../ui/keyboardAvoidingView.component'
 
 const randomWord = () => {
   const words = translate('auth.words')
@@ -38,13 +34,12 @@ interface AuthProps {
 }
 
 export const Auth: React.FC<AuthProps> = ({ navigation }) => {
+  const styles = useStyleSheet(themeStyles)
+
   return (
-    <KeyboardAvoidingView
+    <KeyboardAvoidingView>
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.keyboardAvoidingView}
-    >
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-        <SafeAreaView style={styles.safeArea}>
+        <SafeAreaView>
           <SafeAreaViewContainer>
             <TopNavigation
               alignment="center"
@@ -75,12 +70,7 @@ export const Auth: React.FC<AuthProps> = ({ navigation }) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themeStyles = StyleService.create({
-  keyboardAvoidingView: { ...LayoutStyle.flex.full },
-  safeArea: {
-    ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
-  },
   container: {
     ...LayoutStyle.mainAxis.center,
     ...LayoutStyle.crossAxis.flexEnd,
@@ -94,7 +84,7 @@ const styles = StyleSheet.create({
     ...Typography.align.center,
     ...Typography.fontSize.base,
     ...Typography.fontWeight.bold,
-    color: Colors.neutral.gray500,
+    color: 'color-basic-500',
     marginTop: Sizing.t1,
   },
 })

packages/app/components/calendar.component.tsx

@@ -1,18 +1,26 @@
 import { useCalendar } from '@skolplattformen/api-hooks'
 import { CalendarItem } from '@skolplattformen/embedded-api'
-import { Divider, List, ListItem, Text } from '@ui-kitten/components'
+import {
+  Divider,
+  List,
+  ListItem,
+  Text,
+  StyleService,
+  useStyleSheet,
+} from '@ui-kitten/components'
 import moment from 'moment'
 import React from 'react'
-import { ListRenderItemInfo, StyleSheet, View } from 'react-native'
+import { ListRenderItemInfo, View } from 'react-native'
-import { Colors, Typography } from '../styles'
+import { Typography } from '../styles'
 import { useChild } from './childContext.component'
 import { CalendarOutlineIcon } from './icon.component'
-import { Week } from './week.component'
 import { SaveToCalendar } from './saveToCalendar.component'
+import { Week } from './week.component'
 
 export const Calendar = () => {
   const child = useChild()
   const { data } = useCalendar(child)
+  const styles = useStyleSheet(themedStyles)
 
   return !data?.length ? (
     <View>
@@ -49,17 +57,13 @@ export const Calendar = () => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
-  emptyStateImage: {
-    height: 200,
-    width: '100%',
-  },
   container: {
     height: '100%',
     width: '100%',
   },
   description: {
     ...Typography.fontSize.xs,
-    color: Colors.neutral.gray500,
+    color: 'color-basic-600',
   },
 })

packages/app/components/child.component.tsx

@@ -14,9 +14,7 @@ import {
   TopNavigationAction,
 } from '@ui-kitten/components'
 import React from 'react'
-import { StyleProp, StyleSheet, TextProps } from 'react-native'
+import { StyleProp, TextProps } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { Colors, Layout as LayoutStyle } from '../styles'
 import { studentName } from '../utils/peopleHelpers'
 import { Calendar } from './calendar.component'
 import { ChildProvider } from './childContext.component'
@@ -32,6 +30,7 @@ import { RootStackParamList } from './navigation.component'
 import { NewsList } from './newsList.component'
 import { NotificationsList } from './notificationsList.component'
 import { translate } from '../utils/translation'
+import { SafeAreaView } from '../ui/safeAreaView.component'
 
 type ChildNavigationProp = StackNavigationProp<RootStackParamList, 'Child'>
 type ChildRouteProps = RouteProp<RootStackParamList, 'Child'>
@@ -158,7 +157,7 @@ export const Child = () => {
   }
 
   return (
-    <SafeAreaView style={{ ...styles.wrap }}>
+    <SafeAreaView>
       <ChildProvider child={child}>
         <TopNavigation
           title={() => (
@@ -166,23 +165,9 @@ export const Child = () => {
           )}
           alignment="center"
           accessoryLeft={BackAction}
-          style={styles.topBar}
         />
         <TabNavigator initialRouteName={initialRouteName} />
       </ChildProvider>
     </SafeAreaView>
   )
 }
-
-const styles = StyleSheet.create({
-  wrap: {
-    ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
-  },
-  topBar: {
-    backgroundColor: Colors.neutral.white,
-  },
-  backdrop: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-})

packages/app/components/childListItem.component.tsx

@@ -8,11 +8,19 @@ import {
   useSchedule,
 } from '@skolplattformen/api-hooks'
 import { Child } from '@skolplattformen/embedded-api'
-import { Avatar, Button, Card, Text } from '@ui-kitten/components'
+
+import {
+  Avatar,
+  Button,
+  Card,
+  StyleService,
+  Text,
+  useStyleSheet,
+} from '@ui-kitten/components'
 import moment from 'moment'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
-import { Colors, Layout, Sizing } from '../styles'
+import { Layout, Sizing } from '../styles'
 import { studentName } from '../utils/peopleHelpers'
 import { translate } from '../utils/translation'
 import {
@@ -27,12 +35,10 @@ interface ChildListItemProps {
   child: Child
   color: string
 }
-
 type ChildListItemNavigationProp = StackNavigationProp<
   RootStackParamList,
   'Children'
 >
-
 export const ChildListItem = ({ child, color }: ChildListItemProps) => {
   // Forces rerender when child.id changes
   React.useEffect(() => {}, [child.id])
@@ -97,69 +103,85 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
   }
 
   const className = getClassName()
+  const styles = useStyleSheet(themeStyles)
 
-  const Footer = () => (
+  const statusColors = {
-    <View style={styles.itemFooter}>
+    loading: 'basic',
-      <Button
+    loaded: 'basic',
-        style={[styles.item, styles[newsStatus]]}
+    error: 'error',
-        status="control"
+    pending: 'basic',
-        size="small"
+  }
-        onPress={() =>
+
-          navigation.navigate('Child', {
+  const buttonAppearance: string = 'ghost'
-            child,
+
-            color,
+  const Footer = () => {
-            initialRouteName: translate('navigation.news'),
+    return (
-          })
+      <View style={styles.itemFooter}>
-        }
+        <Button
-        accessoryLeft={NewsIcon}
+          style={styles.item}
-      >
+          size="small"
-        {`${(news || []).length}`}
+          appearance={buttonAppearance}
-      </Button>
+          status={statusColors[newsStatus]}
-      <Button
+          onPress={() =>
-        style={[styles.item, styles[notificationsStatus]]}
+            navigation.navigate('Child', {
-        status="control"
+              child,
-        size="small"
+              color,
-        onPress={() =>
+              initialRouteName: translate('navigation.news'),
-          navigation.navigate('Child', {
+            })
-            child,
+          }
-            color,
+          accessoryLeft={NewsIcon}
-            initialRouteName: translate('navigation.notifications'),
+        >
-          })
+          {`${(news || []).length}`}
-        }
+        </Button>
-        accessoryLeft={NotificationsIcon}
+        <Button
-      >
+          style={styles.item}
-        {`${(notifications || []).length}`}
+          size="small"
-      </Button>
+          appearance={buttonAppearance}
-      <Button
+          status={statusColors[notificationsStatus]}
-        style={[styles.item, styles[calendarStatus]]}
+          onPress={() =>
-        status="control"
+            navigation.navigate('Child', {
-        size="small"
+              child,
-        onPress={() =>
+              color,
-          navigation.navigate('Child', {
+              initialRouteName: translate('navigation.notifications'),
-            child,
+            })
-            color,
+          }
-            initialRouteName: translate('navigation.calender'),
+          accessoryLeft={NotificationsIcon}
-          })
+        >
-        }
+          {`${(notifications || []).length}`}
-        accessoryLeft={CalendarOutlineIcon}
+        </Button>
-      >
+        <Button
-        {`${(calendar || []).length}`}
+          style={styles.item}
-      </Button>
+          size="small"
-      <Button
+          appearance={buttonAppearance}
-        style={[styles.item, styles[menuStatus]]}
+          status={statusColors[calendarStatus]}
-        status="control"
+          onPress={() =>
-        size="small"
+            navigation.navigate('Child', {
-        onPress={() =>
+              child,
-          navigation.navigate('Child', {
+              color,
-            child,
+              initialRouteName: translate('navigation.calender'),
-            color,
+            })
-            initialRouteName: translate('navigation.menu'),
+          }
-          })
+          accessoryLeft={CalendarOutlineIcon}
-        }
+        >
-        accessoryLeft={MenuIcon}
+          {`${(calendar || []).length}`}
-      />
+        </Button>
-    </View>
+        <Button
-  )
+          style={styles.item}
+          size="small"
+          appearance={buttonAppearance}
+          status={statusColors[menuStatus]}
+          onPress={() =>
+            navigation.navigate('Child', {
+              child,
+              color,
+              initialRouteName: translate('navigation.menu'),
+            })
+          }
+          accessoryLeft={MenuIcon}
+        />
+      </View>
+    )
+  }
 
   return (
     <Card
@@ -204,13 +226,15 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
       {scheduleAndCalendarThisWeek.length ||
       notificationsThisWeek.length ||
       newsThisWeek.length ? null : (
-        <Text category="p1">{translate('news.noNewNewsItemsThisWeek')}</Text>
+        <Text category="p1" style={styles.noNewNewsItemsText}>
+          {translate('news.noNewNewsItemsThisWeek')}
+        </Text>
       )}
       <View style={styles.itemFooterAbsence}>
         <Button
           size="small"
+          status="primary"
           onPress={() => navigation.navigate('Absence', { child })}
-          style={styles.button}
         >
           {translate('abscense.title')}
         </Button>
@@ -219,7 +243,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themeStyles = StyleService.create({
   card: {
     marginBottom: Sizing.t5,
   },
@@ -243,18 +267,7 @@ const styles = StyleSheet.create({
   item: {
     paddingHorizontal: 0,
   },
-  loaded: {
+  noNewNewsItemsText: {
-    color: Colors.neutral.black,
+    color: 'color-basic-600',
-  },
-  loading: {
-    color: '#555',
-  },
-  error: {
-    color: '#500',
-  },
-  pending: {},
-  button: {
-    backgroundColor: Colors.primary.primary600,
-    borderColor: Colors.primary.primary600,
   },
 })

packages/app/components/children.component.tsx

@@ -1,4 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
+
 import { useApi, useChildList } from '@skolplattformen/api-hooks'
 import { Child } from '@skolplattformen/embedded-api'
 import {
@@ -10,6 +11,7 @@ import {
   Text,
   TopNavigation,
   TopNavigationAction,
+  useTheme,
 } from '@ui-kitten/components'
 import React from 'react'
 import {
@@ -33,11 +35,11 @@ export const Children = () => {
     translate('general.logout'),
     translate('general.abort'),
   ]
+  const theme = useTheme()
 
   const { api } = useApi()
   const { data: childList, status, reload } = useChildList()
   const insets = useSafeAreaInsets()
-
   const handleSettingSelection = (index: number) => {
     switch (index) {
       case 0:
@@ -71,10 +73,13 @@ export const Children = () => {
   // when this view is actually lightgrey. Taking the padding top value from the use inset hook.
   return (
     <View
-      style={{
+      style={[
-        ...styles.topContainer,
+        {
-        paddingTop: insets.top,
+          ...styles.topContainer,
-      }}
+          paddingTop: insets.top,
+        },
+        { backgroundColor: theme['background-basic-color-1'] },
+      ]}
     >
       <>
         {status === 'loaded' ? (
@@ -170,7 +175,6 @@ export const Children = () => {
 const styles = StyleSheet.create({
   topContainer: {
     ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
     paddingBottom: 0,
   },
   loading: {

packages/app/components/login.component.tsx

@@ -5,7 +5,9 @@ import {
   Card,
   Input,
   Modal,
+  StyleService,
   Text,
+  useStyleSheet,
 } from '@ui-kitten/components'
 import Personnummer from 'personnummer'
 import React, { useEffect, useState } from 'react'
@@ -13,14 +15,13 @@ import {
   Image,
   Linking,
   Platform,
-  StyleSheet,
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
 import ActionSheet from 'rn-actionsheet-module'
 import { useAsyncStorage } from 'use-async-storage'
 import { schema } from '../app.json'
-import { Colors, Layout, Sizing } from '../styles'
+import { Layout, Sizing } from '../styles'
 import { translate } from '../utils/translation'
 import {
   CloseOutlineIcon,
@@ -145,9 +146,15 @@ export const Login = () => {
     }
   }
 
+  const styles = useStyleSheet(themedStyles)
+
   return (
     <>
-      <Image source={require('../assets/boys.png')} style={styles.image} />
+      <Image
+        source={require('../assets/boys.png')}
+        // @ts-expect-error Don't know why this occurs
+        style={styles.image}
+      />
       <View style={styles.loginForm}>
         {loginMethodIndex === 1 && (
           <Input
@@ -171,7 +178,7 @@ export const Login = () => {
         <ButtonGroup style={styles.loginButtonGroup}>
           <Button
             onPress={() => startLogin(socialSecurityNumber)}
-            style={[styles.button, styles.loginButton]}
+            style={styles.loginButton}
             appearance="ghost"
             disabled={loginMethodIndex === 1 && !valid}
             status="primary"
@@ -182,7 +189,7 @@ export const Login = () => {
           </Button>
           <Button
             onPress={selectLoginMethod}
-            style={[styles.button, styles.loginMethodButton]}
+            style={styles.loginMethodButton}
             appearance="ghost"
             status="primary"
             accessoryLeft={SelectIcon}
@@ -193,8 +200,8 @@ export const Login = () => {
       <Modal
         visible={visible}
         style={styles.modal}
-        backdropStyle={styles.modalBackdrop}
         onBackdropPress={() => showModal(false)}
+        backdropStyle={styles.backdrop}
       >
         <Card disabled>
           <Text style={styles.bankIdLoading}>
@@ -202,7 +209,7 @@ export const Login = () => {
           </Text>
 
           <Button
-            style={styles.button}
+            status="primary"
             onPress={() => {
               cancelLoginRequest()
               showModal(false)
@@ -216,11 +223,14 @@ export const Login = () => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   image: {
     ...Sizing.aspectRatio(0.9, Sizing.Ratio['4:3']),
     marginVertical: Sizing.t4,
   },
+  backdrop: {
+    backgroundColor: 'color-basic-transparent-600',
+  },
   loginForm: {
     ...Layout.mainAxis.flexStart,
     ...Layout.crossAxis.flexEnd,
@@ -231,17 +241,9 @@ const styles = StyleSheet.create({
     minHeight: 45,
   },
   loginButton: { ...Layout.flex.full },
-  loginButtonText: { color: Colors.neutral.white },
   loginMethodButton: { width: 45 },
   modal: {
     width: '80%',
   },
-  modalBackdrop: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
   bankIdLoading: { margin: 10 },
-  button: {
-    backgroundColor: Colors.primary.primary600,
-    borderColor: Colors.primary.primary600,
-  },
 })

packages/app/components/menu.component.tsx

@@ -4,7 +4,7 @@ import { List, Text } from '@ui-kitten/components'
 import 'moment/locale/sv'
 import React from 'react'
 import { Image, ListRenderItemInfo, StyleSheet, View } from 'react-native'
-import { Colors, Sizing, Layout as LayoutStyle, Typography } from '../styles'
+import { Sizing, Layout as LayoutStyle, Typography } from '../styles'
 import { translate } from '../utils/translation'
 import { useChild } from './childContext.component'
 import { MenuListItem } from './menuListItem.component'
@@ -19,7 +19,7 @@ export const Menu = () => {
       data={data}
       ListEmptyComponent={
         <View style={styles.emptyState}>
-          <Text category="h6">{translate('menu.emptyHeadline')}</Text>
+          <Text category="h4">{translate('menu.emptyHeadline')}</Text>
           <Text style={styles.emptyStateDescription}>
             {translate('menu.emptyText')}
           </Text>
@@ -48,7 +48,6 @@ const styles = StyleSheet.create({
   emptyState: {
     ...LayoutStyle.center,
     ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
     paddingHorizontal: Sizing.t5,
     paddingTop: 25,
   },

packages/app/components/menuListItem.component.tsx

@@ -1,14 +1,15 @@
-import { Text, Card } from '@ui-kitten/components'
+import { Text, Card, StyleService, useStyleSheet } from '@ui-kitten/components'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import { MenuItem } from '@skolplattformen/embedded-api'
-import { Colors, Sizing, Typography } from '../styles'
+import { Sizing, Typography } from '../styles'
 
 interface MenuListItemProps {
   item: MenuItem
 }
 
 export const MenuListItem = ({ item }: MenuListItemProps) => {
+  const styles = useStyleSheet(themedStyles)
   return (
     <View style={styles.container}>
       <Card
@@ -25,7 +26,7 @@ export const MenuListItem = ({ item }: MenuListItemProps) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   container: {
     width: '100%',
   },
@@ -38,11 +39,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  listHeader: {
-    backgroundColor: '#fff',
-  },
   title: {
     ...Typography.header,
-    color: Colors.neutral.gray700,
+    color: 'color-basic-800',
   },
 })

packages/app/components/modalWebView.component.tsx

@@ -1,17 +1,10 @@
 import { useApi } from '@skolplattformen/api-hooks'
-import { Text } from '@ui-kitten/components'
+import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
 import React, { useEffect, useState } from 'react'
-import {
+import { Linking, Modal, TouchableOpacity, View } from 'react-native'
-  Linking,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { WebView } from 'react-native-webview'
-import { WebViewNavigationEvent } from 'react-native-webview/lib/WebViewTypes'
+import { Layout, Sizing } from '../styles'
-import { Colors, Layout, Sizing } from '../styles'
 import { BackIcon, ExternalLinkIcon } from './icon.component'
 
 interface ModalWebViewProps {
@@ -19,7 +12,6 @@ interface ModalWebViewProps {
   sharedCookiesEnabled: boolean
   onClose: () => void
 }
-
 export const ModalWebView = ({
   url,
   onClose,
@@ -44,11 +36,12 @@ export const ModalWebView = ({
     setModalVisible(false)
     onClose()
   }
-
   const openInApp = () => {
     Linking.openURL(url)
   }
 
+  const styles = useStyleSheet(themedStyles)
+
   return (
     <Modal
       animationType="slide"
@@ -60,7 +53,10 @@ export const ModalWebView = ({
         <View style={styles.headerWrapper}>
           <View style={styles.header}>
             <TouchableOpacity onPress={closeModal}>
-              <BackIcon style={styles.backIcon} fill={Colors.neutral.gray800} />
+              <BackIcon
+                style={styles.backIcon}
+                fill={styles.backIcon.shadowColor}
+              />
             </TouchableOpacity>
             <Text category="s1" style={styles.headerText} numberOfLines={1}>
               {title}
@@ -68,17 +64,18 @@ export const ModalWebView = ({
             <TouchableOpacity onPress={openInApp}>
               <ExternalLinkIcon
                 style={styles.shareIcon}
-                fill={Colors.neutral.gray800}
+                fill={styles.shareIcon.shadowColor}
               />
             </TouchableOpacity>
           </View>
         </View>
         {(headers || sharedCookiesEnabled) && (
           <WebView
+            style={styles.webview}
             source={{ uri: url, headers }}
             sharedCookiesEnabled={sharedCookiesEnabled}
             thirdPartyCookiesEnabled={sharedCookiesEnabled}
-            onLoad={(event: WebViewNavigationEvent) => {
+            onLoad={(event) => {
               setTitle(event.nativeEvent.title)
             }}
           />
@@ -88,17 +85,21 @@ export const ModalWebView = ({
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   container: {
-    ...Layout.flex.full,
+    flex: 1,
+    backgroundColor: 'background-basic-color-1',
   },
   headerWrapper: {
     marginTop: Sizing.t1,
-    backgroundColor: Colors.neutral.white,
     padding: Sizing.t1,
     borderRadius: 2,
-    borderColor: Colors.neutral.gray200,
+    borderColor: 'basic-color-200',
     borderBottomWidth: 1,
+    backgroundColor: 'background-basic-color-1',
+  },
+  backdrop: {
+    backgroundColor: 'color-basic-transparent-600',
   },
   headerText: {
     overflow: 'hidden',
@@ -110,15 +111,18 @@ const styles = StyleSheet.create({
     ...Layout.mainAxis.center,
     paddingHorizontal: Sizing.t3,
     paddingVertical: Sizing.t1,
-    backgroundColor: Colors.neutral.white,
+    backgroundColor: 'background-basic-color-1',
   },
   shareIcon: {
     width: 24,
     height: 24,
+    shadowColor: 'color-basic-600',
   },
   backIcon: {
     width: 24,
     height: 24,
     marginRight: Sizing.t4,
+    shadowColor: 'color-basic-600',
   },
+  webview: {},
 })

packages/app/components/newsItem.component.tsx

@@ -6,18 +6,21 @@ import {
   Text,
   TopNavigation,
   TopNavigationAction,
+  StyleService,
+  useStyleSheet,
 } from '@ui-kitten/components'
 import moment from 'moment'
 import 'moment/locale/sv'
 import React from 'react'
-import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import { Colors, Layout, Sizing, Typography } from '../styles'
 import { translate } from '../utils/translation'
 import { BackIcon } from './icon.component'
 import { Image } from './image.component'
 import { Markdown } from './markdown.component'
 import { RootStackParamList } from './navigation.component'
-import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
+import { SafeAreaView } from '../ui/safeAreaView.component'
 
 interface NewsItemProps {
   navigation: StackNavigationProp<RootStackParamList, 'NewsItem'>
@@ -32,6 +35,8 @@ const dateIsValid = (date: string | undefined) =>
 export const NewsItem = ({ navigation, route }: NewsItemProps) => {
   const { newsItem, child } = route.params
   const { data } = useNewsDetails(child, newsItem)
+  const styles = useStyleSheet(themedStyles)
+  const stylesMarkdown = useStyleSheet(themedStylesMarkdown)
 
   const navigateBack = () => {
     navigation.goBack()
@@ -46,7 +51,7 @@ export const NewsItem = ({ navigation, route }: NewsItemProps) => {
   )
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <SafeAreaView>
       <SafeAreaViewContainer>
         <TopNavigation
           title={() => (
@@ -80,27 +85,13 @@ export const NewsItem = ({ navigation, route }: NewsItemProps) => {
             </Text>
           )}
           <View style={styles.body}>
-            <Markdown
+            <Markdown style={stylesMarkdown}>{data.body}</Markdown>
-              style={{
-                body: {
-                  ...Typography.fontSize.base,
-                  color: Colors.neutral.gray800,
-                  lineHeight: 26,
-                },
-                heading1: {
-                  ...Typography.fontSize.xl,
-                  color: Colors.neutral.gray800,
-                },
-                heading2: {
-                  ...Typography.fontSize.lg,
-                  color: Colors.neutral.gray800,
-                },
-              }}
-            >
-              {data.body}
-            </Markdown>
             {newsItem.fullImageUrl && (
-              <Image src={newsItem.fullImageUrl} style={styles.image} />
+              <Image
+                src={newsItem.fullImageUrl}
+                // @ts-expect-error Fix later on
+                style={styles.image}
+              />
             )}
           </View>
         </ScrollView>
@@ -109,7 +100,23 @@ export const NewsItem = ({ navigation, route }: NewsItemProps) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStylesMarkdown = StyleService.create({
+  body: {
+    ...Typography.fontSize.base,
+    color: 'color-basic-800',
+    lineHeight: 26,
+  },
+  heading1: {
+    ...Typography.fontSize.xl,
+    color: 'color-basic-600',
+  },
+  heading2: {
+    ...Typography.fontSize.lg,
+    color: 'color-basic-800',
+  },
+})
+
+const themedStyles = StyleService.create({
   safeArea: {
     ...Layout.flex.full,
     backgroundColor: Colors.neutral.white,
@@ -120,6 +127,7 @@ const styles = StyleSheet.create({
   },
   article: {
     padding: Sizing.t5,
+    backgroundColor: 'background-basic-color-2',
   },
   scrollView: {
     ...Layout.flex.full,
@@ -136,12 +144,12 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     ...Typography.fontSize.xs,
-    color: Colors.neutral.gray600,
+    color: 'color-basic-600',
   },
   strong: {
     ...Typography.fontSize.xs,
     ...Typography.fontWeight.bold,
-    color: Colors.neutral.gray600,
+    color: 'color-basic-600',
   },
   published: {
     marginBottom: Sizing.t1,

packages/app/components/newsListItem.component.tsx

@@ -1,14 +1,15 @@
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import { RootStackParamList } from './navigation.component'
 import { NewsItem } from '@skolplattformen/embedded-api'
 import React, { ReactNode } from 'react'
 import moment from 'moment'
-import { Dimensions, StyleSheet, Text, View } from 'react-native'
+import { Dimensions, Text, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
-import { Colors, Layout, Sizing, Typography } from '../styles'
+import { Layout, Sizing, Typography } from '../styles'
 import { useChild } from './childContext.component'
 import { Image } from './image.component'
+import { RootStackParamList } from './navigation.component'
+import { StyleService, useStyleSheet } from '@ui-kitten/components'
 
 interface NewsListItemProps {
   item: NewsItem
@@ -23,6 +24,7 @@ type NewsListItemNavigationProp = StackNavigationProp<
 const { width } = Dimensions.get('window')
 
 export const NewsListItem = ({ item, children }: NewsListItemProps) => {
+  const styles = useStyleSheet(themedStyles)
   const navigation = useNavigation<NewsListItemNavigationProp>()
   const child = useChild()
   const hasDate = item.published || item.modified
@@ -35,7 +37,11 @@ export const NewsListItem = ({ item, children }: NewsListItemProps) => {
     >
       <View style={styles.card}>
         {width > 320 && item.fullImageUrl ? (
-          <Image src={item.fullImageUrl} style={styles.image} />
+          <Image
+            src={item.fullImageUrl}
+            // @ts-expect-error Don't know why this linter breaks
+            style={styles.image}
+          />
         ) : null}
         <View style={styles.text}>
           <View>
@@ -55,16 +61,19 @@ export const NewsListItem = ({ item, children }: NewsListItemProps) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   card: {
     ...Layout.flex.full,
     ...Layout.flex.row,
-    backgroundColor: Colors.neutral.white,
+
     borderRadius: 2,
-    borderColor: Colors.neutral.gray200,
+
     borderWidth: 1,
     padding: Sizing.t5,
     marginBottom: Sizing.t2,
+
+    backgroundColor: 'background-basic-color-1',
+    borderColor: 'border-basic-color-3',
   },
   text: {
     ...Layout.flex.full,
@@ -72,15 +81,17 @@ const styles = StyleSheet.create({
   title: {
     ...Typography.header,
     marginBottom: Sizing.t1,
+    color: 'text-basic-color',
   },
   subtitle: {
     ...Typography.fontSize.xs,
-    color: Colors.neutral.gray600,
+
     marginBottom: Sizing.t2,
+    color: 'text-hint-color',
   },
   intro: {
     ...Typography.fontSize.sm,
-    color: Colors.neutral.gray700,
+    color: 'text-basic-color',
   },
   image: {
     borderRadius: 3,

packages/app/components/notification.component.tsx

@@ -1,8 +1,8 @@
 import { Notification as NotificationType } from '@skolplattformen/embedded-api'
-import { Card, Text } from '@ui-kitten/components'
+import { Card, StyleService, Text, useStyleSheet } from '@ui-kitten/components'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
-import { Colors, Layout, Sizing, Typography } from '../styles'
+import { Layout, Sizing, Typography } from '../styles'
 import { ModalWebView } from './modalWebView.component'
 import moment from 'moment'
 
@@ -11,6 +11,7 @@ interface NotificationProps {
 }
 
 export const Notification = ({ item }: NotificationProps) => {
+  const styles = useStyleSheet(themedStyles)
   const [isOpen, setIsOpen] = React.useState(false)
   const open = () => setIsOpen(true)
   const close = () => setIsOpen(false)
@@ -52,21 +53,23 @@ export const Notification = ({ item }: NotificationProps) => {
   )
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   card: {
     ...Layout.flex.full,
-    backgroundColor: Colors.neutral.white,
     borderRadius: 2,
-    borderColor: Colors.neutral.gray200,
+
     borderWidth: 1,
     marginBottom: Sizing.t2,
+
+    backgroundColor: 'background-basic-color-1',
+    borderColor: 'border-basic-color-3',
   },
   title: {
     ...Typography.header,
     marginBottom: Sizing.t1,
   },
   subtitle: {
-    color: Colors.neutral.gray600,
     ...Typography.fontSize.xs,
+    color: 'text-hint-color',
   },
 })

packages/app/components/notificationsList.component.tsx

@@ -9,7 +9,6 @@ import { Notification } from './notification.component'
 export const NotificationsList = () => {
   const child = useChild()
   const { data } = useNotifications(child)
-
   return (
     <List
       style={styles.container}

packages/app/components/saveToCalendar.component.tsx

@@ -1,7 +1,6 @@
 import { CalendarItem } from '@skolplattformen/embedded-api'
 import { Button, MenuItem, OverflowMenu, Text } from '@ui-kitten/components'
 import React from 'react'
-import { StyleSheet } from 'react-native'
 import RNCalendarEvents from 'react-native-calendar-events'
 import Toast from 'react-native-simple-toast'
 import { translate } from '../utils/translation'
@@ -74,7 +73,6 @@ export const SaveToCalendar = ({ event }: SaveToCalendarProps) => {
     <OverflowMenu
       visible={visible}
       anchor={renderToggleButton}
-      backdropStyle={styles.backdrop}
       onBackdropPress={closeOverflowMenu}
     >
       <MenuItem
@@ -90,13 +88,3 @@ export const SaveToCalendar = ({ event }: SaveToCalendarProps) => {
     </OverflowMenu>
   )
 }
-
-const styles = StyleSheet.create({
-  backdrop: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  },
-  group: {
-    position: 'relative',
-    zIndex: 10,
-  },
-})

packages/app/components/setLanguage.component.tsx

@@ -8,15 +8,16 @@ import {
   TopNavigation,
 } from '@ui-kitten/components'
 import React, { useState } from 'react'
-import { SafeAreaView, StyleSheet, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import { useLanguage } from '../hooks/useLanguage'
 import { isRTL, LanguageService } from '../services/languageService'
-import { Colors, Layout as LayoutStyle, Sizing } from '../styles'
+import { Layout as LayoutStyle, Sizing } from '../styles'
 import { translate } from '../utils/translation'
 import { BackIcon } from './icon.component'
-import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
 import RNRestart from 'react-native-restart'
+import { SafeAreaView } from '../ui/safeAreaView.component'
 
 interface Language {
   langCode: string
@@ -101,7 +102,7 @@ export const SetLanguage = () => {
   const activeLanguages = languages.filter((language) => language.active)
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <SafeAreaView>
       <SafeAreaViewContainer>
         <TopNavigation
           accessoryLeft={() => (
@@ -115,6 +116,7 @@ export const SetLanguage = () => {
             <View style={styles.languageList}>
               {activeLanguages.map((language) => (
                 <TouchableOpacity
+                  key={language.langCode}
                   style={styles.languageButton}
                   onPress={() => setSelectedLanguage(language.langCode)}
                 >
@@ -149,11 +151,6 @@ export const SetLanguage = () => {
 }
 
 const styles = StyleSheet.create({
-  keyboardAvoidingView: { ...LayoutStyle.flex.full },
-  safeArea: {
-    ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
-  },
   languageList: {
     flex: 1,
     alignSelf: 'stretch',

packages/app/components/transitionView.component.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react'
 import { ViewProps } from 'react-native'
+// @ts-expect-error No typescript defs
 import * as Animatable from 'react-native-animatable'
 
 interface TransitionViewPropsType extends ViewProps {

packages/app/components/week.component.tsx

@@ -5,15 +5,18 @@ import {
   Text,
   TabBar,
   Tab,
+  StyleService,
+  useStyleSheet,
 } from '@ui-kitten/components'
 import React, { useEffect, useState } from 'react'
 import moment from 'moment'
-import { StyleSheet, View } from 'react-native'
+import { View } from 'react-native'
 import { useMenu, useTimetable } from '@skolplattformen/api-hooks'
 import { TimetableEntry, Child, MenuItem } from '@skolplattformen/embedded-api'
 import { LanguageService } from '../services/languageService'
 import { translate } from '../utils/translation'
 import { TransitionView } from './transitionView.component'
+import { Typography } from '../styles'
 
 interface WeekProps {
   child: Child
@@ -30,37 +33,50 @@ interface DayProps {
   lessons: TimetableEntry[]
 }
 
-const LessonList = ({ lessons, header }: LessonListProps) => (
+const LessonList = ({ lessons, header }: LessonListProps) => {
-  <List
+  const styles = useStyleSheet(themedStyles)
-    style={styles.part}
-    data={lessons}
-    ListHeaderComponent={() => (
-      <Text maxFontSizeMultiplier={2} category="c1" style={styles.header}>
-        {header}
-      </Text>
-    )}
-    renderItem={({
-      item: { id, name, timeStart, timeEnd, teacher, location },
-    }) => (
-      <ListItem
-        key={id}
-        style={styles.item}
-        title={() => <Text maxFontSizeMultiplier={1}>{name}</Text>}
-        description={() => (
-          <Text maxFontSizeMultiplier={1}>{`${timeStart.slice(
-            0,
-            5
-          )}-${timeEnd.slice(0, 5)} ${
-            location ? `(${location})` : ''
-          } ${teacher}`}</Text>
-        )}
-      />
-    )}
-  />
-)
 
-export const Day = ({ weekDay, lunch, lessons }: DayProps) =>
+  return (
-  lessons.length ? (
+    <List
+      style={styles.part}
+      data={lessons}
+      ListHeaderComponent={() => (
+        <Text maxFontSizeMultiplier={2} category="c1" style={styles.header}>
+          {header}
+        </Text>
+      )}
+      renderItem={({
+        item: { id, name, timeStart, timeEnd, teacher, location },
+      }) => (
+        <ListItem
+          key={id}
+          style={styles.item}
+          title={() => (
+            <Text style={styles.lessonTitle} maxFontSizeMultiplier={1}>
+              {name}
+            </Text>
+          )}
+          description={() => (
+            <Text maxFontSizeMultiplier={1}>{`${timeStart.slice(
+              0,
+              5
+            )}-${timeEnd.slice(0, 5)} ${
+              location ? `(${location})` : ''
+            } ${teacher}`}</Text>
+          )}
+        />
+      )}
+    />
+  )
+}
+
+export const Day = ({ weekDay, lunch, lessons }: DayProps) => {
+  const styles = useStyleSheet(themedStyles)
+
+  if (lessons.length <= 0) {
+    return null
+  }
+  return (
     <View style={styles.tab} key={weekDay}>
       <View style={styles.summary}>
         <Text maxFontSizeMultiplier={2} category="c1" style={styles.startTime}>
@@ -98,7 +114,8 @@ export const Day = ({ weekDay, lunch, lessons }: DayProps) =>
         lessons={lessons.filter(({ timeStart }) => timeStart >= '12:00')}
       />
     </View>
-  ) : null
+  )
+}
 
 export const Week = ({ child }: WeekProps) => {
   moment.locale(LanguageService.getLanguageCode())
@@ -115,6 +132,8 @@ export const Week = ({ child }: WeekProps) => {
   )
   const { data: menu } = useMenu(child)
 
+  const styles = useStyleSheet(themedStyles)
+
   useEffect(() => {
     const shouldShowSchema = lessons.length > 0
     setShowSchema(shouldShowSchema)
@@ -156,9 +175,9 @@ export const Week = ({ child }: WeekProps) => {
   ) : null
 }
 
-const styles = StyleSheet.create({
+const themedStyles = StyleService.create({
   view: {
-    backgroundColor: '#fafafa',
+    backgroundColor: 'background-basic-color-2',
   },
   part: {
     backgroundColor: 'transparent',
@@ -170,14 +189,14 @@ const styles = StyleSheet.create({
   },
   item: {
     height: 45,
-    backgroundColor: 'white',
+    backgroundColor: 'background-basic-color-1',
     paddingHorizontal: 0,
     borderRadius: 2,
     margin: 2,
     width: '90%',
   },
   time: {
-    color: '#333',
+    color: 'color-basic-500',
     fontSize: 9,
   },
   dayTab: {
@@ -202,8 +221,12 @@ const styles = StyleSheet.create({
   },
   pager: {
     margin: 10,
+    ...Typography.fontWeight.bold,
   },
   header: {
     paddingLeft: 8,
   },
+  lessonTitle: {
+    ...Typography.fontWeight.bold,
+  },
 })

packages/app/design/customization.json

@@ -1,77 +0,0 @@
-{
-  "color-primary-100": "#FFD8D6",
-  "color-primary-200": "#FFADB1",
-  "color-primary-300": "#FF8496",
-  "color-primary-400": "#FF668B",
-  "color-primary-500": "#FF3379",
-  "color-primary-600": "#DB2575",
-  "color-primary-700": "#B7196F",
-  "color-primary-800": "#931064",
-  "color-primary-900": "#7A095C",
-  "color-primary-transparent-100": "rgba(255, 51, 121, 0.08)",
-  "color-primary-transparent-200": "rgba(255, 51, 121, 0.16)",
-  "color-primary-transparent-300": "rgba(255, 51, 121, 0.24)",
-  "color-primary-transparent-400": "rgba(255, 51, 121, 0.32)",
-  "color-primary-transparent-500": "rgba(255, 51, 121, 0.4)",
-  "color-primary-transparent-600": "rgba(255, 51, 121, 0.48)",
-  "color-success-100": "#F2FDD3",
-  "color-success-200": "#E2FCA8",
-  "color-success-300": "#CCF77C",
-  "color-success-400": "#B4EF5A",
-  "color-success-500": "#92E527",
-  "color-success-600": "#73C41C",
-  "color-success-700": "#58A413",
-  "color-success-800": "#40840C",
-  "color-success-900": "#2F6D07",
-  "color-success-transparent-100": "rgba(146, 229, 39, 0.08)",
-  "color-success-transparent-200": "rgba(146, 229, 39, 0.16)",
-  "color-success-transparent-300": "rgba(146, 229, 39, 0.24)",
-  "color-success-transparent-400": "rgba(146, 229, 39, 0.32)",
-  "color-success-transparent-500": "rgba(146, 229, 39, 0.4)",
-  "color-success-transparent-600": "rgba(146, 229, 39, 0.48)",
-  "color-info-100": "#CEFEF1",
-  "color-info-200": "#9EFDEC",
-  "color-info-300": "#6EFAEC",
-  "color-info-400": "#49F5F2",
-  "color-info-500": "#10E0EF",
-  "color-info-600": "#0BB0CD",
-  "color-info-700": "#0885AC",
-  "color-info-800": "#05608A",
-  "color-info-900": "#034672",
-  "color-info-transparent-100": "rgba(16, 224, 239, 0.08)",
-  "color-info-transparent-200": "rgba(16, 224, 239, 0.16)",
-  "color-info-transparent-300": "rgba(16, 224, 239, 0.24)",
-  "color-info-transparent-400": "rgba(16, 224, 239, 0.32)",
-  "color-info-transparent-500": "rgba(16, 224, 239, 0.4)",
-  "color-info-transparent-600": "rgba(16, 224, 239, 0.48)",
-  "color-warning-100": "#FEF2DC",
-  "color-warning-200": "#FDE1B9",
-  "color-warning-300": "#FBCB95",
-  "color-warning-400": "#F7B57A",
-  "color-warning-500": "#F2934F",
-  "color-warning-600": "#D06F39",
-  "color-warning-700": "#AE5027",
-  "color-warning-800": "#8C3519",
-  "color-warning-900": "#74220F",
-  "color-warning-transparent-100": "rgba(242, 147, 79, 0.08)",
-  "color-warning-transparent-200": "rgba(242, 147, 79, 0.16)",
-  "color-warning-transparent-300": "rgba(242, 147, 79, 0.24)",
-  "color-warning-transparent-400": "rgba(242, 147, 79, 0.32)",
-  "color-warning-transparent-500": "rgba(242, 147, 79, 0.4)",
-  "color-warning-transparent-600": "rgba(242, 147, 79, 0.48)",
-  "color-danger-100": "#FEE2E3",
-  "color-danger-200": "#FDC5CD",
-  "color-danger-300": "#F9A6BB",
-  "color-danger-400": "#F48EB2",
-  "color-danger-500": "#ED6AA5",
-  "color-danger-600": "#CB4D93",
-  "color-danger-700": "#AA3581",
-  "color-danger-800": "#89216F",
-  "color-danger-900": "#711463",
-  "color-danger-transparent-100": "rgba(237, 106, 165, 0.08)",
-  "color-danger-transparent-200": "rgba(237, 106, 165, 0.16)",
-  "color-danger-transparent-300": "rgba(237, 106, 165, 0.24)",
-  "color-danger-transparent-400": "rgba(237, 106, 165, 0.32)",
-  "color-danger-transparent-500": "rgba(237, 106, 165, 0.4)",
-  "color-danger-transparent-600": "rgba(237, 106, 165, 0.48)"
-}

packages/app/design/dark.json

@@ -0,0 +1,87 @@
+{
+  "color-primary-100": "#FDD3D4",
+  "color-primary-200": "#FBA7B3",
+  "color-primary-300": "#F47A97",
+  "color-primary-400": "#E95789",
+  "color-primary-500": "#DB2575",
+  "color-primary-600": "#BC1B72",
+  "color-primary-700": "#9D126B",
+  "color-primary-800": "#7F0B60",
+  "color-primary-900": "#690759",
+  "color-primary-transparent-100": "rgba(219, 37, 117, 0.08)",
+  "color-primary-transparent-200": "rgba(219, 37, 117, 0.16)",
+  "color-primary-transparent-300": "rgba(219, 37, 117, 0.24)",
+  "color-primary-transparent-400": "rgba(219, 37, 117, 0.32)",
+  "color-primary-transparent-500": "rgba(219, 37, 117, 0.4)",
+  "color-primary-transparent-600": "rgba(219, 37, 117, 0.48)",
+  "color-success-100": "#EEFACF",
+  "color-success-200": "#DAF6A1",
+  "color-success-300": "#B8E36F",
+  "color-success-400": "#93C948",
+  "color-success-500": "#64A518",
+  "color-success-600": "#4E8D11",
+  "color-success-700": "#3B760C",
+  "color-success-800": "#2A5F07",
+  "color-success-900": "#1E4F04",
+  "color-success-transparent-100": "rgba(100, 165, 24, 0.08)",
+  "color-success-transparent-200": "rgba(100, 165, 24, 0.16)",
+  "color-success-transparent-300": "rgba(100, 165, 24, 0.24)",
+  "color-success-transparent-400": "rgba(100, 165, 24, 0.32)",
+  "color-success-transparent-500": "rgba(100, 165, 24, 0.4)",
+  "color-success-transparent-600": "rgba(100, 165, 24, 0.48)",
+  "color-info-100": "#D1E5FE",
+  "color-info-200": "#A5C9FD",
+  "color-info-300": "#77AAFB",
+  "color-info-400": "#558EF7",
+  "color-info-500": "#1F62F2",
+  "color-info-600": "#164BD0",
+  "color-info-700": "#0F37AE",
+  "color-info-800": "#09268C",
+  "color-info-900": "#051A74",
+  "color-info-transparent-100": "rgba(31, 98, 242, 0.08)",
+  "color-info-transparent-200": "rgba(31, 98, 242, 0.16)",
+  "color-info-transparent-300": "rgba(31, 98, 242, 0.24)",
+  "color-info-transparent-400": "rgba(31, 98, 242, 0.32)",
+  "color-info-transparent-500": "rgba(31, 98, 242, 0.4)",
+  "color-info-transparent-600": "rgba(31, 98, 242, 0.48)",
+  "color-warning-100": "#FCF1CA",
+  "color-warning-200": "#F9E097",
+  "color-warning-300": "#EFC662",
+  "color-warning-400": "#E0A93B",
+  "color-warning-500": "#CC8204",
+  "color-warning-600": "#AF6902",
+  "color-warning-700": "#925202",
+  "color-warning-800": "#763D01",
+  "color-warning-900": "#612F00",
+  "color-warning-transparent-100": "rgba(204, 130, 4, 0.08)",
+  "color-warning-transparent-200": "rgba(204, 130, 4, 0.16)",
+  "color-warning-transparent-300": "rgba(204, 130, 4, 0.24)",
+  "color-warning-transparent-400": "rgba(204, 130, 4, 0.32)",
+  "color-warning-transparent-500": "rgba(204, 130, 4, 0.4)",
+  "color-warning-transparent-600": "rgba(204, 130, 4, 0.48)",
+  "color-danger-100": "#FBD6DC",
+  "color-danger-200": "#F8AFC2",
+  "color-danger-300": "#EA83A9",
+  "color-danger-400": "#D56097",
+  "color-danger-500": "#BA327F",
+  "color-danger-600": "#9F2476",
+  "color-danger-700": "#85196C",
+  "color-danger-800": "#6B0F5F",
+  "color-danger-900": "#590956",
+  "color-danger-transparent-100": "rgba(186, 50, 127, 0.08)",
+  "color-danger-transparent-200": "rgba(186, 50, 127, 0.16)",
+  "color-danger-transparent-300": "rgba(186, 50, 127, 0.24)",
+  "color-danger-transparent-400": "rgba(186, 50, 127, 0.32)",
+  "color-danger-transparent-500": "rgba(186, 50, 127, 0.4)",
+  "color-danger-transparent-600": "rgba(186, 50, 127, 0.48)",
+  "background-basic-color-1": "#2E3137",
+  "background-basic-color-2": "#202225",
+  "color-control-default": "#E5E7EB",
+  /* text colors */
+  "color-basic-800": "#DCDDDE",
+  "color-basic-600": "#DCDDDE",
+  "color-basic-500": "#8E9297",
+  /* basic button colors */
+  "color-basic-300": "#202020",
+  "color-basic-400": "gray"
+}

packages/app/design/light.json

@@ -0,0 +1,80 @@
+{
+  "color-primary-100": "#FDD3D4",
+  "color-primary-200": "#FBA7B3",
+  "color-primary-300": "#F47A97",
+  "color-primary-400": "#E95789",
+  "color-primary-500": "#DB2575",
+  "color-primary-600": "#BC1B72",
+  "color-primary-700": "#9D126B",
+  "color-primary-800": "#7F0B60",
+  "color-primary-900": "#690759",
+  "color-primary-transparent-100": "rgba(219, 37, 117, 0.08)",
+  "color-primary-transparent-200": "rgba(219, 37, 117, 0.16)",
+  "color-primary-transparent-300": "rgba(219, 37, 117, 0.24)",
+  "color-primary-transparent-400": "rgba(219, 37, 117, 0.32)",
+  "color-primary-transparent-500": "rgba(219, 37, 117, 0.4)",
+  "color-primary-transparent-600": "rgba(219, 37, 117, 0.48)",
+  "color-success-100": "#EEFACF",
+  "color-success-200": "#DAF6A1",
+  "color-success-300": "#B8E36F",
+  "color-success-400": "#93C948",
+  "color-success-500": "#64A518",
+  "color-success-600": "#4E8D11",
+  "color-success-700": "#3B760C",
+  "color-success-800": "#2A5F07",
+  "color-success-900": "#1E4F04",
+  "color-success-transparent-100": "rgba(100, 165, 24, 0.08)",
+  "color-success-transparent-200": "rgba(100, 165, 24, 0.16)",
+  "color-success-transparent-300": "rgba(100, 165, 24, 0.24)",
+  "color-success-transparent-400": "rgba(100, 165, 24, 0.32)",
+  "color-success-transparent-500": "rgba(100, 165, 24, 0.4)",
+  "color-success-transparent-600": "rgba(100, 165, 24, 0.48)",
+  "color-info-100": "#D1E5FE",
+  "color-info-200": "#A5C9FD",
+  "color-info-300": "#77AAFB",
+  "color-info-400": "#558EF7",
+  "color-info-500": "#1F62F2",
+  "color-info-600": "#164BD0",
+  "color-info-700": "#0F37AE",
+  "color-info-800": "#09268C",
+  "color-info-900": "#051A74",
+  "color-info-transparent-100": "rgba(31, 98, 242, 0.08)",
+  "color-info-transparent-200": "rgba(31, 98, 242, 0.16)",
+  "color-info-transparent-300": "rgba(31, 98, 242, 0.24)",
+  "color-info-transparent-400": "rgba(31, 98, 242, 0.32)",
+  "color-info-transparent-500": "rgba(31, 98, 242, 0.4)",
+  "color-info-transparent-600": "rgba(31, 98, 242, 0.48)",
+  "color-warning-100": "#FCF1CA",
+  "color-warning-200": "#F9E097",
+  "color-warning-300": "#EFC662",
+  "color-warning-400": "#E0A93B",
+  "color-warning-500": "#CC8204",
+  "color-warning-600": "#AF6902",
+  "color-warning-700": "#925202",
+  "color-warning-800": "#763D01",
+  "color-warning-900": "#612F00",
+  "color-warning-transparent-100": "rgba(204, 130, 4, 0.08)",
+  "color-warning-transparent-200": "rgba(204, 130, 4, 0.16)",
+  "color-warning-transparent-300": "rgba(204, 130, 4, 0.24)",
+  "color-warning-transparent-400": "rgba(204, 130, 4, 0.32)",
+  "color-warning-transparent-500": "rgba(204, 130, 4, 0.4)",
+  "color-warning-transparent-600": "rgba(204, 130, 4, 0.48)",
+  "color-danger-100": "#FBD6DC",
+  "color-danger-200": "#F8AFC2",
+  "color-danger-300": "#EA83A9",
+  "color-danger-400": "#D56097",
+  "color-danger-500": "#BA327F",
+  "color-danger-600": "#9F2476",
+  "color-danger-700": "#85196C",
+  "color-danger-800": "#6B0F5F",
+  "color-danger-900": "#590956",
+  "color-danger-transparent-100": "rgba(186, 50, 127, 0.08)",
+  "color-danger-transparent-200": "rgba(186, 50, 127, 0.16)",
+  "color-danger-transparent-300": "rgba(186, 50, 127, 0.24)",
+  "color-danger-transparent-400": "rgba(186, 50, 127, 0.32)",
+  "color-danger-transparent-500": "rgba(186, 50, 127, 0.4)",
+  "color-danger-transparent-600": "rgba(186, 50, 127, 0.48)",
+  "color-basic-800": "#1F2937",
+  "color-basic-600": "#4B5563",
+  "color-basic-500": "#6B7280"
+}

packages/app/ios/Podfile.lock

@@ -268,6 +268,8 @@ PODS:
     - React-jsi (= 0.64.0)
     - React-perflogger (= 0.64.0)
   - React-jsinspector (0.64.0)
+  - react-native-appearance (0.3.4):
+    - React
   - react-native-blur (0.8.0):
     - React
   - react-native-cookies (5.0.1):
@@ -406,6 +408,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-appearance (from `../node_modules/react-native-appearance`)
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - "react-native-cookies (from `../node_modules/@react-native-community/cookies`)"
   - react-native-restart (from `../node_modules/react-native-restart`)
@@ -482,6 +485,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-appearance:
+    :path: "../node_modules/react-native-appearance"
   react-native-blur:
     :path: "../node_modules/@react-native-community/blur"
   react-native-cookies:
@@ -540,9 +545,9 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 0b41cf9e0b74ffa97ededb3d0210da5b4710474c
+  FBReactNativeSpec: bc9813353956ed2de2f370de75d9c1123e81f425
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
@@ -550,7 +555,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   hermes-engine: 7d97ba46a1e29bacf3e3c61ecb2804a5ddd02d4f
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
@@ -565,6 +570,7 @@ SPEC CHECKSUMS:
   React-jsi: 74341196d9547cbcbcfa4b3bbbf03af56431d5a1
   React-jsiexecutor: 06a9c77b56902ae7ffcdd7a4905f664adc5d237b
   React-jsinspector: 0ae35a37b20d5e031eb020a69cc5afdbd6406301
+  react-native-appearance: 0f0e5fc2fcef70e03d48c8fe6b00b9158c2ba8aa
   react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-cookies: ce50e42ace7cf0dd47769260ca5bbe8eee607e4e
   react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979

packages/app/package.json

@@ -42,6 +42,7 @@
     "personnummer": "3.1.3",
     "react": "17.0.2",
     "react-native": "0.64.0",
+    "react-native-appearance": "^0.3.4",
     "react-native-animatable": "^1.3.3",
     "react-native-calendar-events": "2.2.0",
     "react-native-fix-image": "2.1.0",

packages/app/ui/keyboardAvoidingView.component.tsx

@@ -0,0 +1,26 @@
+import { StyleService, useStyleSheet } from '@ui-kitten/components'
+import React from 'react'
+import {
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+  Platform,
+} from 'react-native'
+import { Layout } from '../styles'
+
+export const KeyboardAvoidingView: React.FC = ({ children }) => {
+  const styles = useStyleSheet(themedStyles)
+
+  return (
+    <RNKeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.keyboardAvoidingView}
+    >
+      {children}
+    </RNKeyboardAvoidingView>
+  )
+}
+
+const themedStyles = StyleService.create({
+  keyboardAvoidingView: {
+    ...Layout.flex.full,
+  },
+})

packages/app/ui/safeAreaView.component.tsx

@@ -0,0 +1,17 @@
+import { StyleService, useStyleSheet } from '@ui-kitten/components'
+import React from 'react'
+import { SafeAreaView as RNSafeAreaView, ViewProps } from 'react-native'
+import { Layout } from '../styles'
+
+export const SafeAreaView: React.FC<ViewProps> = ({ children }) => {
+  const styles = useStyleSheet(themedStyles)
+
+  return <RNSafeAreaView style={styles.safeArea}>{children}</RNSafeAreaView>
+}
+
+const themedStyles = StyleService.create({
+  safeArea: {
+    ...Layout.flex.full,
+    backgroundColor: 'background-basic-color-1',
+  },
+})

packages/app/yarn.lock

@@ -17,24 +17,24 @@
     "@babel/highlight" "^7.12.13"
 
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15", "@babel/compat-data@^7.13.8":
-  version "7.13.15"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.15.tgz#7e8eea42d0b64fda2b375b22d06c605222e848f4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
-  integrity sha512-ltnibHKR1VnrU4ymHyQ/CXtNXI6yZC0oJThyW78Hft8XndANwi+9H+UIklBDraIjFEJzw8wmcM427oDd9KS5wA==
+  integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
 "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.13.15", "@babel/core@^7.4.5", "@babel/core@^7.7.5":
-  version "7.13.16"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.16.tgz#7756ab24396cc9675f1c3fcd5b79fcce192ea96a"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.0.tgz#47299ff3ec8d111b493f1a9d04bf88c04e728d88"
-  integrity sha512-sXHpixBiWWFti0AV2Zq7avpTasr6sIAu7Y396c608541qAU2ui4a193m0KSQmfPSKFZLnQ3cvlKDOm3XkuXm3Q==
+  integrity sha512-8YqpRig5NmIHlMLw09zMlPTvUVMILjqCOtVgu+TVNWEBvy9b5I3RRyhqnrV4hjgEK7n8P9OqvkWJAFmEL6Wwfw==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.16"
+    "@babel/generator" "^7.14.0"
     "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-module-transforms" "^7.13.14"
+    "@babel/helper-module-transforms" "^7.14.0"
-    "@babel/helpers" "^7.13.16"
+    "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.13.16"
+    "@babel/parser" "^7.14.0"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.15"
+    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.13.16"
+    "@babel/types" "^7.14.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -42,12 +42,12 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.13.16", "@babel/generator@^7.5.0":
+"@babel/generator@^7.14.0", "@babel/generator@^7.5.0":
-  version "7.13.16"
+  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.1.tgz#1f99331babd65700183628da186f36f63d615c93"
-  integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
+  integrity sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==
   dependencies:
-    "@babel/types" "^7.13.16"
+    "@babel/types" "^7.14.1"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -77,14 +77,15 @@
     semver "^6.3.0"
 
 "@babel/helper-create-class-features-plugin@^7.13.0":
-  version "7.13.11"
+  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz#30d30a005bca2c953f5653fc25091a492177f4f6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.1.tgz#1fe11b376f3c41650ad9fedc665b0068722ea76c"
-  integrity sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==
+  integrity sha512-r8rsUahG4ywm0QpGcCrLaUSOuNAISR3IZCg4Fx05Ozq31aCUrQsTLH6KPxy0N5ULoQ4Sn9qjNdGNtbPWAC6hYg==
   dependencies:
+    "@babel/helper-annotate-as-pure" "^7.12.13"
     "@babel/helper-function-name" "^7.12.13"
-    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-replace-supers" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
 
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
@@ -132,7 +133,7 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-member-expression-to-functions@^7.13.0", "@babel/helper-member-expression-to-functions@^7.13.12":
+"@babel/helper-member-expression-to-functions@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
   integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
@@ -146,19 +147,19 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
-"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.13.14":
+"@babel/helper-module-transforms@^7.14.0":
-  version "7.13.14"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz#e600652ba48ccb1641775413cb32cfa4e8b495ef"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz#8fcf78be220156f22633ee204ea81f73f826a8ad"
-  integrity sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==
+  integrity sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==
   dependencies:
     "@babel/helper-module-imports" "^7.13.12"
     "@babel/helper-replace-supers" "^7.13.12"
     "@babel/helper-simple-access" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.0"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.13"
+    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.13.14"
+    "@babel/types" "^7.14.0"
 
 "@babel/helper-optimise-call-expression@^7.12.13":
   version "7.12.13"
@@ -191,7 +192,7 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.12"
 
-"@babel/helper-simple-access@^7.12.13", "@babel/helper-simple-access@^7.13.12":
+"@babel/helper-simple-access@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
   integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
@@ -212,10 +213,10 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-validator-identifier@^7.12.11":
+"@babel/helper-validator-identifier@^7.14.0":
-  version "7.12.11"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
 "@babel/helper-validator-option@^7.12.17":
   version "7.12.17"
@@ -232,28 +233,28 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.0"
 
-"@babel/helpers@^7.13.16":
+"@babel/helpers@^7.14.0":
-  version "7.13.17"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.13.17.tgz#b497c7a00e9719d5b613b8982bda6ed3ee94caf6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.0.tgz#ea9b6be9478a13d6f961dbb5f36bf75e2f3b8f62"
-  integrity sha512-Eal4Gce4kGijo1/TGJdqp3WuhllaMLSrW6XcL0ulyUAQOuxHcCafZE8KHg9857gcTehsm/v7RcOx2+jp0Ryjsg==
+  integrity sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==
   dependencies:
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.17"
+    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.13.17"
+    "@babel/types" "^7.14.0"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  version "7.13.10"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+  integrity sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.0"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.12.13", "@babel/parser@^7.13.16", "@babel/parser@^7.7.0":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.12.13", "@babel/parser@^7.14.0", "@babel/parser@^7.7.0":
-  version "7.13.16"
+  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47"
-  integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
+  integrity sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q==
 
 "@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0":
   version "7.13.0"
@@ -450,9 +451,9 @@
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-block-scoping@^7.0.0":
-  version "7.13.16"
+  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz#a9c0f10794855c63b1d629914c7dcfeddd185892"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.1.tgz#ac1b3a8e3d8cbb31efc6b9be2f74eb9823b74ab2"
-  integrity sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==
+  integrity sha512-2mQXd0zBrwfp0O1moWIhPpEeTKDvxyHcnma3JATVP1l+CctWBuot6OJG8LQ4DnBj4ZZPSmlb/fm4mu47EOAnVA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
 
@@ -529,13 +530,13 @@
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.1.0":
-  version "7.13.8"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz#7b01ad7c2dcf2275b06fa1781e00d13d420b3e1b"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.0.tgz#52bc199cb581e0992edba0f0f80356467587f161"
-  integrity sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==
+  integrity sha512-EX4QePlsTaRZQmw9BsoPeyh5OCtRGIhwfLquhxGp5e32w+dyL8htOcDwamlitmNFK6xBZYlygjdye9dbd9rUlQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.13.0"
+    "@babel/helper-module-transforms" "^7.14.0"
     "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-simple-access" "^7.12.13"
+    "@babel/helper-simple-access" "^7.13.12"
     babel-plugin-dynamic-import-node "^2.3.3"
 
 "@babel/plugin-transform-object-assign@^7.0.0":
@@ -694,9 +695,9 @@
     source-map-support "^0.5.16"
 
 "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.13.17"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
-  integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -709,26 +710,26 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.13.13", "@babel/traverse@^7.13.15", "@babel/traverse@^7.13.17", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.14.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.4":
-  version "7.13.17"
+  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.17.tgz#c85415e0c7d50ac053d758baec98b28b2ecfeea3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.0.tgz#cea0dc8ae7e2b1dec65f512f39f3483e8cc95aef"
-  integrity sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==
+  integrity sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.16"
+    "@babel/generator" "^7.14.0"
     "@babel/helper-function-name" "^7.12.13"
     "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.13.16"
+    "@babel/parser" "^7.14.0"
-    "@babel/types" "^7.13.17"
+    "@babel/types" "^7.14.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.14", "@babel/types@^7.13.16", "@babel/types@^7.13.17", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
+"@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.14.0", "@babel/types@^7.14.1", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
-  version "7.13.17"
+  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"
-  integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
+  integrity sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
 "@bcoe/v8-coverage@^0.2.3":
@@ -1739,9 +1740,9 @@
   integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
 
 "@types/node@*":
-  version "15.0.1"
+  version "15.0.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.1.tgz#ef34dea0881028d11398be5bf4e856743e3dc35a"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.2.tgz#51e9c0920d1b45936ea04341aa3e2e58d339fb67"
-  integrity sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==
+  integrity sha512-p68+a+KoxpoB47015IeYZYRrdqMUcpbK8re/zpFB8Ld46LHC1lPEbp3EXgkEhAYEcPvjJF6ZO+869SQ0aH1dcA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1805,9 +1806,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@>=16.9.0":
-  version "17.0.4"
+  version "17.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.4.tgz#a67c6f7a460d2660e950d9ccc1c2f18525c28220"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
-  integrity sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==
+  integrity sha512-bj4biDB9ZJmGAYTWSKJly6bMr4BLUiBrx9ujiJEoP9XIDY9CTaPGxE5QWN/1WjpPLzYF7/jRNnV2nNxNe970sw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2002,9 +2003,9 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.1.0:
-  version "8.2.1"
+  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.1.tgz#0d36af126fb6755095879c1dc6fd7edf7d60a5fb"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
-  integrity sha512-z716cpm5TX4uzOzILx8PavOE6C6DKshHDw1aQN52M/yNSqE9s5O8SMfyhCCfCJ3HmTL0NkVOi+8a/55T7YB3bg==
+  integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
 
 ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
@@ -2538,14 +2539,14 @@ browser-resolve@^1.11.3:
   dependencies:
     resolve "1.1.7"
 
-browserslist@^4.14.5, browserslist@^4.16.4:
+browserslist@^4.14.5, browserslist@^4.16.6:
-  version "4.16.5"
+  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.5.tgz#952825440bca8913c62d0021334cbe928ef062ae"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001214"
+    caniuse-lite "^1.0.30001219"
     colorette "^1.2.2"
-    electron-to-chromium "^1.3.719"
+    electron-to-chromium "^1.3.723"
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
@@ -2658,10 +2659,10 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
-caniuse-lite@^1.0.30001214:
+caniuse-lite@^1.0.30001219:
-  version "1.0.30001219"
+  version "1.0.30001222"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001222.tgz#2789b8487282cbbe1700924f53951303d28086a9"
-  integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
+  integrity sha512-rPmwUK0YMjfMlZVmH6nVB5U3YJ5Wnx3vmT5lnRO3nIKO8bJ+TRWMbGuuiSugDJqESy/lz+1hSrlQEagCtoOAWQ==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -2986,13 +2987,18 @@ copy-descriptor@^0.1.0:
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
 core-js-compat@^3.9.1:
-  version "3.11.0"
+  version "3.11.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.0.tgz#635683f43480a0b41e3f6be3b1c648dadb8b4390"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.2.tgz#5048e367851cfd2c6c0cb81310757b4da296e385"
-  integrity sha512-3wsN9YZJohOSDCjVB0GequOyHax8zFiogSX3XWLE28M1Ew7dTU57tgHjIylSBKSIouwmLBp3g61sKMz/q3xEGA==
+  integrity sha512-gYhNwu7AJjecNtRrIfyoBabQ3ZG+llfPmg9BifIX8yxIpDyfNLRM73zIjINSm6z3dMdI1nwNC9C7uiy4pIC6cw==
   dependencies:
-    browserslist "^4.16.4"
+    browserslist "^4.16.6"
     semver "7.0.0"
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3367,10 +3373,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.719:
+electron-to-chromium@^1.3.723:
-  version "1.3.723"
+  version "1.3.727"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.723.tgz#52769a75635342a4db29af5f1e40bd3dad02c877"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz#857e310ca00f0b75da4e1db6ff0e073cc4a91ddf"
-  integrity sha512-L+WXyXI7c7+G1V8ANzRsPI5giiimLAUDC6Zs1ojHHPhYXb3k/iTABFmWjivEtsWrRQymjnO66/rO2ZTABGdmWg==
+  integrity sha512-Mfz4FIB4FSvEwBpDfdipRIrwd6uo8gUDoRDF4QEYb4h4tSuI3ov594OrjU6on042UlFHouIJpClDODGkPcBSbg==
 
 emittery@^0.7.1:
   version "0.7.2"
@@ -3387,6 +3393,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -3626,9 +3639,9 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint-visitor-keys@^2.0.0:
-  version "2.0.0"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
 eslint@^7.24.0:
   version "7.25.0"
@@ -3913,11 +3926,31 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbemitter@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  integrity sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=
+  dependencies:
+    fbjs "^0.8.4"
+
 fbjs-css-vars@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
+fbjs@^0.8.4:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fbjs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.0.tgz#0907067fb3f57a78f45d95f1eacffcacd623c165"
@@ -4036,9 +4069,9 @@ flatted@^3.1.0:
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
 flow-parser@0.*:
-  version "0.149.0"
+  version "0.150.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.149.0.tgz#6e5749ad832ba211968429accdb6a3858706e4f8"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.150.0.tgz#69ba3e90b0d127bc2f0d7025854805eeb09fd2c1"
-  integrity sha512-ruUVkZuM9oFQjhSsLO/OJYRYpGnuXJpTnIZmgzna6DyLFb3CLpeO27oJbWyeXaa830hmKf0JRzpcdFsFS8lmpg==
+  integrity sha512-kYoNG9BH4RlYwEt0A9+30ZiUiYBNB9KLDeDI4rSBb0QsoH5F12ywNUOHp5JD2KVYz6nhapbn/kCIZALSmd3q6w==
 
 flow-parser@^0.121.0:
   version "0.121.0"
@@ -4463,6 +4496,13 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -4591,9 +4631,9 @@ is-arrayish@^0.3.1:
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-bigint@^1.0.1:
-  version "1.0.1"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
-  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+  integrity sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA==
 
 is-boolean-object@^1.1.0:
   version "1.1.0"
@@ -4774,7 +4814,7 @@ is-regex@^1.1.2:
     call-bind "^1.0.2"
     has-symbols "^1.0.1"
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -4845,6 +4885,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -5662,9 +5710,9 @@ jest@^26.6.3:
     jest-cli "^26.6.3"
 
 jetifier@^1.6.2:
-  version "1.6.6"
+  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.6.tgz#fec8bff76121444c12dc38d2dad6767c421dab68"
+  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.8.tgz#e88068697875cbda98c32472902c4d3756247798"
-  integrity sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ==
+  integrity sha512-3Zi16h6L5tXDRQJTb221cnRoVG9/9OvreLdLU2/ZjRv/GILL+2Cemt0IKvkowwkDpvouAU1DQPOJ7qaiHeIdrw==
 
 joi@^17.2.1:
   version "17.4.0"
@@ -6706,6 +6754,14 @@ node-fetch@2.6.1, node-fetch@^2.2.0, node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-html-parser@^2.1.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-2.2.1.tgz#6507a8658810d1612890a8ddd534e01b2f97e07e"
@@ -6752,9 +6808,9 @@ node-releases@^1.1.71:
   integrity sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==
 
 node-stream-zip@^1.9.1:
-  version "1.13.3"
+  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.3.tgz#63235337abebcef408b244b4e28f28961e6e86f0"
+  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.4.tgz#baafc329ffb9e27de84b6882d74e9f2cbe77e2a5"
-  integrity sha512-Vv95ug+8Jfug4AxcqNV7TeGEk2antNidj+YBOyP8SS8LTHJmjsE3d9h6L831eJtO8p7jesJ3CDtgkwmLO/wcSw==
+  integrity sha512-M2nPvnSWFFH+fgLIRZDqmhshmuzXcr+ce9BsHQX/30pXR+cEz/USMYmx9ZAFYy837W2QoDoNzhFtbZhfzaMk9A==
 
 normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
   version "2.5.0"
@@ -7443,9 +7499,9 @@ range-parser@~1.2.1:
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
 react-devtools-core@^4.6.0:
-  version "4.12.4"
+  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.12.4.tgz#50ed121d467f44b051d1f7d19694849db0365d52"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.13.0.tgz#fa80ee03b1a975c1d9898e24de841e45a4b22d30"
-  integrity sha512-hVCT7wRtA5xWclgLb3oA51RNBAlbuTauEYkqFX+qRAkPLVJoX8qdJnO7r+47SSUckD5vkBm3kaAhg6597m7gDA==
+  integrity sha512-KR+0pLw8wTjOVr+9AECe5ctmycaAjbmxN3bbdB0vmlwm0JkxNnKMxDzanf+4V8IuPBQWgm8qdWpbSOqhu1l14g==
   dependencies:
     shell-quote "^1.6.1"
     ws "^7"
@@ -7479,6 +7535,15 @@ react-native-animatable@^1.3.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-native-appearance@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/react-native-appearance/-/react-native-appearance-0.3.4.tgz#2cbcbc5142cdc1898c116684f519b16c879cbec2"
+  integrity sha512-Vz3zdJbAEiMDwuw6wH98TT1WVfBvWjvANutYtkIbl16KGRCigtSgt6IIiLsF3/TSS3y3FtHhWDelFeGw/rtuig==
+  dependencies:
+    fbemitter "^2.1.1"
+    invariant "^2.2.4"
+    use-subscription "^1.0.0"
+
 react-native-calendar-events@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-native-calendar-events/-/react-native-calendar-events-2.2.0.tgz#6cb78bf712457ca9928dae95b428c91e7b895ae0"
@@ -8048,7 +8113,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -9237,7 +9302,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.0.0:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
   integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==