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>
2021-05-06 14:35:11 +02:00 · 2021-05-06 14:35:11 +02:00 · bd9a4f54b9
parent b59f681516
commit bd9a4f54b9
31 changed files with 766 additions and 511 deletions
--- a/packages/app/App.js
+++ b/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 />
-        <IconRegistry icons={EvaIconsPack} />
-        <ApplicationProvider
-          {...eva}
-          theme={{ ...eva.light, ...customization }}
-        >
-          <LanguageProvider cache={true} data={translations}>
-            <AppNavigator />
-          </LanguageProvider>
-          {FullBlurView}
-        </ApplicationProvider>
+        <AppearanceProvider>
+          <StatusBar
+            backgroundColor={colorScheme === 'dark' ? '#222B45' : '#FFF'}
+            barStyle={colorScheme === 'dark' ? 'light-content' : 'dark-content'}
+            translucent
+          />
+          <IconRegistry icons={EvaIconsPack} />
+          <ApplicationProvider
+            {...eva}
+            theme={{
+              ...(colorScheme === 'dark' ? eva.dark : eva.light),
+              ...(colorScheme === 'dark' ? darkTheme : lightTheme),
+            }}
+          >
+            <LanguageProvider cache={true} data={translations}>
+              <AppNavigator />
+            </LanguageProvider>
+            {FullBlurView}
+          </ApplicationProvider>
+        </AppearanceProvider>
      </SafeAreaProvider>
    </ApiProvider>
  )
--- a/packages/app/mocks/react-native-appearance.js
+++ b/packages/app/mocks/react-native-appearance.js
@ -0,0 +1 @@
+export * from 'react-native-appearance/src/mock'
--- a/packages/app/assets/boys.png
+++ b/packages/app/assets/boys.png
--- a/packages/app/assets/girls.png
+++ b/packages/app/assets/girls.png
--- a/packages/app/components/absence.component.tsx
+++ b/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',
+  },
 })
--- a/packages/app/components/auth.component.tsx
+++ b/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 {
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native'
+import { Keyboard, TouchableWithoutFeedback, View } from 'react-native'
 import { Login } from './login.component'
-import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
-import { SafeAreaViewContainer } from './safeAreaViewContainer.component'
+import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
+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
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={styles.keyboardAvoidingView}
-    >
+    <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({
-  keyboardAvoidingView: { ...LayoutStyle.flex.full },
-  safeArea: {
-    ...LayoutStyle.flex.full,
-    backgroundColor: Colors.neutral.white,
-  },
+const themeStyles = StyleService.create({
  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,
  },
 })
--- a/packages/app/components/calendar.component.tsx
+++ b/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 { Colors, Typography } from '../styles'
+import { ListRenderItemInfo, View } from 'react-native'
+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({
-  emptyStateImage: {
-    height: 200,
-    width: '100%',
-  },
+const themedStyles = StyleService.create({
  container: {
    height: '100%',
    width: '100%',
  },
  description: {
    ...Typography.fontSize.xs,
-    color: Colors.neutral.gray500,
+    color: 'color-basic-600',
  },
 })
--- a/packages/app/components/child.component.tsx
+++ b/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 { SafeAreaView } from 'react-native-safe-area-context'
-import { Colors, Layout as LayoutStyle } from '../styles'
+import { StyleProp, TextProps } from 'react-native'
 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)',
-  },
-})
--- a/packages/app/components/childListItem.component.tsx
+++ b/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 { Colors, Layout, Sizing } from '../styles'
+import { View } from 'react-native'
+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 = () => (
-    <View style={styles.itemFooter}>
-      <Button
-        style={[styles.item, styles[newsStatus]]}
-        status="control"
-        size="small"
-        onPress={() =>
-          navigation.navigate('Child', {
-            child,
-            color,
-            initialRouteName: translate('navigation.news'),
-          })
-        }
-        accessoryLeft={NewsIcon}
-      >
-        {`${(news || []).length}`}
-      </Button>
-      <Button
-        style={[styles.item, styles[notificationsStatus]]}
-        status="control"
-        size="small"
-        onPress={() =>
-          navigation.navigate('Child', {
-            child,
-            color,
-            initialRouteName: translate('navigation.notifications'),
-          })
-        }
-        accessoryLeft={NotificationsIcon}
-      >
-        {`${(notifications || []).length}`}
-      </Button>
-      <Button
-        style={[styles.item, styles[calendarStatus]]}
-        status="control"
-        size="small"
-        onPress={() =>
-          navigation.navigate('Child', {
-            child,
-            color,
-            initialRouteName: translate('navigation.calender'),
-          })
-        }
-        accessoryLeft={CalendarOutlineIcon}
-      >
-        {`${(calendar || []).length}`}
-      </Button>
-      <Button
-        style={[styles.item, styles[menuStatus]]}
-        status="control"
-        size="small"
-        onPress={() =>
-          navigation.navigate('Child', {
-            child,
-            color,
-            initialRouteName: translate('navigation.menu'),
-          })
-        }
-        accessoryLeft={MenuIcon}
-      />
-    </View>
-  )
+  const statusColors = {
+    loading: 'basic',
+    loaded: 'basic',
+    error: 'error',
+    pending: 'basic',
+  }
+
+  const buttonAppearance: string = 'ghost'
+
+  const Footer = () => {
+    return (
+      <View style={styles.itemFooter}>
+        <Button
+          style={styles.item}
+          size="small"
+          appearance={buttonAppearance}
+          status={statusColors[newsStatus]}
+          onPress={() =>
+            navigation.navigate('Child', {
+              child,
+              color,
+              initialRouteName: translate('navigation.news'),
+            })
+          }
+          accessoryLeft={NewsIcon}
+        >
+          {`${(news || []).length}`}
+        </Button>
+        <Button
+          style={styles.item}
+          size="small"
+          appearance={buttonAppearance}
+          status={statusColors[notificationsStatus]}
+          onPress={() =>
+            navigation.navigate('Child', {
+              child,
+              color,
+              initialRouteName: translate('navigation.notifications'),
+            })
+          }
+          accessoryLeft={NotificationsIcon}
+        >
+          {`${(notifications || []).length}`}
+        </Button>
+        <Button
+          style={styles.item}
+          size="small"
+          appearance={buttonAppearance}
+          status={statusColors[calendarStatus]}
+          onPress={() =>
+            navigation.navigate('Child', {
+              child,
+              color,
+              initialRouteName: translate('navigation.calender'),
+            })
+          }
+          accessoryLeft={CalendarOutlineIcon}
+        >
+          {`${(calendar || []).length}`}
+        </Button>
+        <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: {
-    color: Colors.neutral.black,
-  },
-  loading: {
-    color: '#555',
-  },
-  error: {
-    color: '#500',
-  },
-  pending: {},
-  button: {
-    backgroundColor: Colors.primary.primary600,
-    borderColor: Colors.primary.primary600,
+  noNewNewsItemsText: {
+    color: 'color-basic-600',
  },
 })
--- a/packages/app/components/children.component.tsx
+++ b/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={{
-        ...styles.topContainer,
-        paddingTop: insets.top,
-      }}
+      style={[
+        {
+          ...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: {
--- a/packages/app/components/login.component.tsx
+++ b/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,
-  },
 })
--- a/packages/app/components/menu.component.tsx
+++ b/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,
  },
--- a/packages/app/components/menuListItem.component.tsx
+++ b/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',
  },
 })
--- a/packages/app/components/modalWebView.component.tsx
+++ b/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 {
-  Linking,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
+import { Linking, Modal, 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 { Colors, Layout, Sizing } from '../styles'
+import { 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: {},
 })
--- a/packages/app/components/newsItem.component.tsx
+++ b/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
-              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>
+            <Markdown style={stylesMarkdown}>{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,
--- a/packages/app/components/newsListItem.component.tsx
+++ b/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,
--- a/packages/app/components/notification.component.tsx
+++ b/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 { Colors, Layout, Sizing, Typography } from '../styles'
+import { View } from 'react-native'
+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',
  },
 })
--- a/packages/app/components/notificationsList.component.tsx
+++ b/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}
--- a/packages/app/components/saveToCalendar.component.tsx
+++ b/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,
-  },
-})
--- a/packages/app/components/setLanguage.component.tsx
+++ b/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',
--- a/packages/app/components/transitionView.component.tsx
+++ b/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 {
--- a/packages/app/components/week.component.tsx
+++ b/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) => (
-  <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 maxFontSizeMultiplier={1}>{name}</Text>}
-        description={() => (
-          <Text maxFontSizeMultiplier={1}>{`${timeStart.slice(
-            0,
-            5
-          )}-${timeEnd.slice(0, 5)} ${
-            location ? `(${location})` : ''
-          } ${teacher}`}</Text>
-        )}
-      />
-    )}
-  />
-)
+const LessonList = ({ lessons, header }: LessonListProps) => {
+  const styles = useStyleSheet(themedStyles)

-export const Day = ({ weekDay, lunch, lessons }: DayProps) =>
-  lessons.length ? (
+  return (
+    <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,
+  },
 })
--- a/packages/app/design/customization.json
+++ b/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)"
-}
--- a/packages/app/design/dark.json
+++ b/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"
+}
--- a/packages/app/design/light.json
+++ b/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"
+}
--- a/packages/app/ios/Podfile.lock
+++ b/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
--- a/packages/app/package.json
+++ b/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",
--- a/packages/app/ui/keyboardAvoidingView.component.tsx
+++ b/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,
+  },
+})
--- a/packages/app/ui/safeAreaView.component.tsx
+++ b/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',
+  },
+})
--- a/packages/app/components/safeAreaViewContainer.component.tsx
+++ b/packages/app/components/safeAreaViewContainer.component.tsx
--- a/packages/app/yarn.lock
+++ b/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"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.15.tgz#7e8eea42d0b64fda2b375b22d06c605222e848f4"
-  integrity sha512-ltnibHKR1VnrU4ymHyQ/CXtNXI6yZC0oJThyW78Hft8XndANwi+9H+UIklBDraIjFEJzw8wmcM427oDd9KS5wA==
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
+  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"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.16.tgz#7756ab24396cc9675f1c3fcd5b79fcce192ea96a"
-  integrity sha512-sXHpixBiWWFti0AV2Zq7avpTasr6sIAu7Y396c608541qAU2ui4a193m0KSQmfPSKFZLnQ3cvlKDOm3XkuXm3Q==
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.0.tgz#47299ff3ec8d111b493f1a9d04bf88c04e728d88"
+  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/helpers" "^7.13.16"
-    "@babel/parser" "^7.13.16"
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helpers" "^7.14.0"
+    "@babel/parser" "^7.14.0"
    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.15"
-    "@babel/types" "^7.13.16"
+    "@babel/traverse" "^7.14.0"
+    "@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":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
-  integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
+"@babel/generator@^7.14.0", "@babel/generator@^7.5.0":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.1.tgz#1f99331babd65700183628da186f36f63d615c93"
+  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"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz#30d30a005bca2c953f5653fc25091a492177f4f6"
-  integrity sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.1.tgz#1fe11b376f3c41650ad9fedc665b0068722ea76c"
+  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":
-  version "7.13.14"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz#e600652ba48ccb1641775413cb32cfa4e8b495ef"
-  integrity sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==
+"@babel/helper-module-transforms@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz#8fcf78be220156f22633ee204ea81f73f826a8ad"
+  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/types" "^7.13.14"
+    "@babel/traverse" "^7.14.0"
+    "@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":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+"@babel/helper-validator-identifier@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
+  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":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.13.17.tgz#b497c7a00e9719d5b613b8982bda6ed3ee94caf6"
-  integrity sha512-Eal4Gce4kGijo1/TGJdqp3WuhllaMLSrW6XcL0ulyUAQOuxHcCafZE8KHg9857gcTehsm/v7RcOx2+jp0Ryjsg==
+"@babel/helpers@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.0.tgz#ea9b6be9478a13d6f961dbb5f36bf75e2f3b8f62"
+  integrity sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==
  dependencies:
    "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.17"
-    "@babel/types" "^7.13.17"
+    "@babel/traverse" "^7.14.0"
+    "@babel/types" "^7.14.0"

 "@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.0.tgz#3197e375711ef6bf834e67d0daec88e4f46113cf"
+  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":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
-  integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
+"@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.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47"
+  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"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz#a9c0f10794855c63b1d629914c7dcfeddd185892"
-  integrity sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.1.tgz#ac1b3a8e3d8cbb31efc6b9be2f74eb9823b74ab2"
+  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"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.13.8.tgz#7b01ad7c2dcf2275b06fa1781e00d13d420b3e1b"
-  integrity sha512-9QiOx4MEGglfYZ4XOnU79OHr6vIWUakIj9b4mioN8eQIoEh+pf5p/zEB36JpDFWA12nNMiRf7bfoRvl9Rn79Bw==
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.0.tgz#52bc199cb581e0992edba0f0f80356467587f161"
+  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"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
-  integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  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":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.17.tgz#c85415e0c7d50ac053d758baec98b28b2ecfeea3"
-  integrity sha512-BMnZn0R+X6ayqm3C3To7o1j7Q020gWdqdyP50KEoVqaCO2c/Im7sYZSmVgvefp8TTMQ+9CtwuBp0Z1CZ8V3Pvg==
+"@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.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.0.tgz#cea0dc8ae7e2b1dec65f512f39f3483e8cc95aef"
+  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/types" "^7.13.17"
+    "@babel/parser" "^7.14.0"
+    "@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":
-  version "7.13.17"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
-  integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
+"@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.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"
+  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"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.1.tgz#ef34dea0881028d11398be5bf4e856743e3dc35a"
-  integrity sha512-TMkXt0Ck1y0KKsGr9gJtWGjttxlZnnvDtphxUOSd0bfaR6Q1jle+sPvrzNR1urqYTWMinoKvjKfXUGsumaO1PA==
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-15.0.2.tgz#51e9c0920d1b45936ea04341aa3e2e58d339fb67"
+  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"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.4.tgz#a67c6f7a460d2660e950d9ccc1c2f18525c28220"
-  integrity sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==
+  version "17.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
+  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"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.1.tgz#0d36af126fb6755095879c1dc6fd7edf7d60a5fb"
-  integrity sha512-z716cpm5TX4uzOzILx8PavOE6C6DKshHDw1aQN52M/yNSqE9s5O8SMfyhCCfCJ3HmTL0NkVOi+8a/55T7YB3bg==
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
+  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:
-  version "4.16.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.5.tgz#952825440bca8913c62d0021334cbe928ef062ae"
-  integrity sha512-C2HAjrM1AI/djrpAUU/tr4pml1DqLIzJKSLDBXBrNErl9ZCCTXdhwxdJjYc16953+mBWf7Lw+uUJgpgb8cN71A==
+browserslist@^4.14.5, browserslist@^4.16.6:
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  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:
-  version "1.0.30001219"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
-  integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
+caniuse-lite@^1.0.30001219:
+  version "1.0.30001222"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001222.tgz#2789b8487282cbbe1700924f53951303d28086a9"
+  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"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.0.tgz#635683f43480a0b41e3f6be3b1c648dadb8b4390"
-  integrity sha512-3wsN9YZJohOSDCjVB0GequOyHax8zFiogSX3XWLE28M1Ew7dTU57tgHjIylSBKSIouwmLBp3g61sKMz/q3xEGA==
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.11.2.tgz#5048e367851cfd2c6c0cb81310757b4da296e385"
+  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:
-  version "1.3.723"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.723.tgz#52769a75635342a4db29af5f1e40bd3dad02c877"
-  integrity sha512-L+WXyXI7c7+G1V8ANzRsPI5giiimLAUDC6Zs1ojHHPhYXb3k/iTABFmWjivEtsWrRQymjnO66/rO2ZTABGdmWg==
+electron-to-chromium@^1.3.723:
+  version "1.3.727"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz#857e310ca00f0b75da4e1db6ff0e073cc4a91ddf"
+  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"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
-  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  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"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.149.0.tgz#6e5749ad832ba211968429accdb6a3858706e4f8"
-  integrity sha512-ruUVkZuM9oFQjhSsLO/OJYRYpGnuXJpTnIZmgzna6DyLFb3CLpeO27oJbWyeXaa830hmKf0JRzpcdFsFS8lmpg==
+  version "0.150.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.150.0.tgz#69ba3e90b0d127bc2f0d7025854805eeb09fd2c1"
+  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"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
-  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a"
+  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"
-  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.6.tgz#fec8bff76121444c12dc38d2dad6767c421dab68"
-  integrity sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ==
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.8.tgz#e88068697875cbda98c32472902c4d3756247798"
+  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"
-  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.3.tgz#63235337abebcef408b244b4e28f28961e6e86f0"
-  integrity sha512-Vv95ug+8Jfug4AxcqNV7TeGEk2antNidj+YBOyP8SS8LTHJmjsE3d9h6L831eJtO8p7jesJ3CDtgkwmLO/wcSw==
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/node-stream-zip/-/node-stream-zip-1.13.4.tgz#baafc329ffb9e27de84b6882d74e9f2cbe77e2a5"
+  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"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.12.4.tgz#50ed121d467f44b051d1f7d19694849db0365d52"
-  integrity sha512-hVCT7wRtA5xWclgLb3oA51RNBAlbuTauEYkqFX+qRAkPLVJoX8qdJnO7r+47SSUckD5vkBm3kaAhg6597m7gDA==
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.13.0.tgz#fa80ee03b1a975c1d9898e24de841e45a4b22d30"
+  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==
				`@ -0,0 +1 @@`
				`export * from 'react-native-appearance/src/mock'`