refactor(app): lägg till designsystem (#230)

packages/app/components/absence.component.tsx

@@ -19,6 +19,7 @@ import React from 'react'
 import { SafeAreaView, StyleSheet, 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 { studentName } from '../utils/peopleHelpers'
 import { useSMS } from '../utils/SMS'
 import { BackIcon } from './icon.component'
@@ -232,17 +233,23 @@ const Absence = () => {
 export default Absence
 
 const styles = StyleSheet.create({
-  safeArea: { backgroundColor: '#fff', flex: 1 },
-  topBar: { backgroundColor: '#fff' },
-  wrap: { flex: 1, padding: 20 },
-  field: { marginBottom: 16 },
-  partOfDay: { flexDirection: 'row', marginBottom: 16 },
-  spacer: { width: 8 },
-  inputHalf: { flex: 1 },
+  safeArea: {
+    ...LayoutStyle.flex.full,
+    backgroundColor: Colors.neutral.white,
+  },
+  topBar: { backgroundColor: Colors.neutral.white },
+  wrap: {
+    ...LayoutStyle.flex.full,
+    padding: Sizing.t5,
+  },
+  field: { marginBottom: Sizing.t4 },
+  partOfDay: { ...LayoutStyle.flex.row, marginBottom: Sizing.t4 },
+  spacer: { width: Sizing.t2 },
+  inputHalf: { ...LayoutStyle.flex.full },
   label: {
+    ...Typography.fontSize.xs,
+    ...Typography.fontWeight.bold,
     color: 'rgb(150,161,184)',
-    fontWeight: '700',
-    fontSize: 12,
-    marginBottom: 4,
+    marginBottom: Sizing.t1,
   },
 })

packages/app/components/auth.component.tsx

@@ -10,6 +10,7 @@ import {
   View,
 } from 'react-native'
 import { Login } from './login.component'
+import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
 
 const funArguments = [
   'agila',
@@ -62,21 +63,23 @@ export const Auth = () => {
 }
 
 const styles = StyleSheet.create({
-  keyboardAvoidingView: { flex: 1 },
-  safeArea: { flex: 1, backgroundColor: '#fff' },
+  keyboardAvoidingView: { ...LayoutStyle.flex.full },
+  safeArea: {
+    ...LayoutStyle.flex.full,
+    backgroundColor: Colors.neutral.white,
+  },
   container: {
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: 20,
+    ...LayoutStyle.mainAxis.center,
+    ...LayoutStyle.crossAxis.flexEnd,
+    padding: Sizing.t5,
   },
   content: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
+    ...LayoutStyle.center,
+    ...LayoutStyle.flex.full,
   },
   subtitle: {
+    ...Typography.align.center,
     color: '#9CA3AF',
-    marginTop: 4,
-    textAlign: 'center',
+    marginTop: Sizing.t1,
   },
 })

packages/app/components/child.component.tsx

@@ -16,6 +16,7 @@ import {
 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 { studentName } from '../utils/peopleHelpers'
 import { Calendar } from './calendar.component'
 import { ChildProvider } from './childContext.component'
@@ -148,11 +149,11 @@ export const Child = () => {
 
 const styles = StyleSheet.create({
   wrap: {
-    backgroundColor: '#fff',
-    flex: 1,
+    ...LayoutStyle.flex.full,
+    backgroundColor: Colors.neutral.white,
   },
   topBar: {
-    backgroundColor: '#fff',
+    backgroundColor: Colors.neutral.white,
   },
   backdrop: {
     backgroundColor: 'rgba(0, 0, 0, 0.5)',

packages/app/components/childListItem.component.tsx

@@ -12,6 +12,7 @@ import { Avatar, Button, Card, Text } 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 { studentName } from '../utils/peopleHelpers'
 import {
   CalendarOutlineIcon,
@@ -198,30 +199,30 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
 
 const styles = StyleSheet.create({
   card: {
-    marginBottom: 20,
+    marginBottom: Sizing.t5,
   },
   cardHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    ...Layout.flex.row,
+    ...Layout.mainAxis.center,
   },
-  cardAvatar: { margin: 20, marginRight: 0 },
-  cardHeaderText: { margin: 20, flex: 1 },
+  cardAvatar: { margin: Sizing.t5, marginRight: 0 },
+  cardHeaderText: { margin: Sizing.t5, flex: 1 },
   itemFooter: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    paddingVertical: 8,
+    ...Layout.flex.row,
+    ...Layout.crossAxis.evenly,
+    paddingVertical: Sizing.t2,
     borderRadius: 5,
     margin: 0,
   },
   itemFooterAbsence: {
-    alignItems: 'flex-start',
-    marginTop: 16,
+    ...Layout.mainAxis.flexStart,
+    marginTop: Sizing.t4,
   },
   item: {
     paddingHorizontal: 0,
   },
   loaded: {
-    color: '#000',
+    color: Colors.neutral.black,
   },
   loading: {
     color: '#555',

packages/app/components/children.component.tsx

@@ -12,19 +12,17 @@ import {
 } from '@ui-kitten/components'
 import React from 'react'
 import {
-  Dimensions,
   Image,
   ListRenderItemInfo,
   SafeAreaView,
   StyleSheet,
   View,
 } from 'react-native'
 import ActionSheet from 'rn-actionsheet-module'
+import { Colors, Layout as LayoutStyle, Sizing, Typography } from '../styles'
 import { ChildListItem } from './childListItem.component'
 import { SettingsIcon } from './icon.component'
 
-const { width } = Dimensions.get('window')
-
 const colors = ['primary', 'success', 'info', 'warning', 'danger']
 const settingsOptions = ['Logga ut', 'Avbryt']
 
@@ -110,48 +108,43 @@ export const Children = () => {
 
 const styles = StyleSheet.create({
   topContainer: {
-    flex: 1,
-    backgroundColor: '#fff',
+    ...LayoutStyle.flex.full,
+    backgroundColor: Colors.neutral.white,
   },
   loading: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    ...LayoutStyle.center,
+    ...LayoutStyle.flex.full,
   },
   loadingImage: {
-    height: (width / 16) * 9,
-    width: width,
+    ...Sizing.aspectRatio(),
   },
   loadingMessage: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    marginTop: 8,
+    ...LayoutStyle.mainAxis.center,
+    ...LayoutStyle.flex.row,
+    marginTop: Sizing.t2,
   },
   loadingText: {
-    marginLeft: 20,
+    marginLeft: Sizing.t5,
   },
   childList: {
-    flex: 1,
+    ...LayoutStyle.flex.full,
   },
   childListContainer: {
-    padding: 20,
+    padding: Sizing.t5,
   },
   emptyState: {
-    backgroundColor: '#fff',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20,
+    ...LayoutStyle.center,
+    ...LayoutStyle.flex.full,
+    backgroundColor: Colors.neutral.white,
+    paddingHorizontal: Sizing.t5,
   },
   emptyStateDescription: {
+    ...Typography.align.center,
     lineHeight: 21,
-    marginTop: 8,
-    textAlign: 'center',
+    marginTop: Sizing.t2,
   },
   emptyStateImage: {
-    // 80% size and 16:9 aspect ratio
-    height: ((width * 0.8) / 16) * 9,
-    marginTop: 20,
-    width: width * 0.8,
+    ...Sizing.aspectRatio(0.8),
+    marginTop: Sizing.t5,
   },
 })

packages/app/components/login.component.tsx

@@ -10,7 +10,6 @@ import {
 import Personnummer from 'personnummer'
 import React, { useEffect, useState } from 'react'
 import {
-  Dimensions,
   Image,
   Linking,
   Platform,
@@ -21,15 +20,14 @@ import {
 import ActionSheet from 'rn-actionsheet-module'
 import { useAsyncStorage } from 'use-async-storage'
 import { schema } from '../app.json'
+import { Colors, Layout, Sizing } from '../styles'
 import {
   CloseOutlineIcon,
   PersonIcon,
   SecureIcon,
   SelectIcon,
 } from './icon.component'
 
-const { width } = Dimensions.get('window')
-
 export const Login = () => {
   const { api } = useApi()
   const [cancelLoginRequest, setCancelLoginRequest] = useState<
@@ -209,21 +207,20 @@ export const Login = () => {
 
 const styles = StyleSheet.create({
   image: {
-    height: ((width * 0.9) / 4) * 3,
-    marginVertical: 16,
-    width: width * 0.9,
+    ...Sizing.aspectRatio(0.9, Sizing.Ratio['4:3']),
+    marginVertical: Sizing.t4,
   },
   loginForm: {
-    justifyContent: 'flex-end',
-    alignItems: 'flex-start',
-    paddingHorizontal: 20,
+    ...Layout.mainAxis.flexStart,
+    ...Layout.crossAxis.flexEnd,
+    paddingHorizontal: Sizing.t5,
   },
   pnrInput: { minHeight: 70 },
   loginButtonGroup: {
     minHeight: 45,
   },
-  loginButton: { flex: 1 },
-  loginButtonText: { color: '#fff' },
+  loginButton: { ...Layout.flex.full },
+  loginButtonText: { color: Colors.neutral.white },
   loginMethodButton: { width: 45 },
   modal: {
     width: '80%',

packages/app/components/newsListItem.component.tsx

@@ -5,6 +5,7 @@ import React from 'react'
 import moment from 'moment'
 import { Dimensions, StyleSheet, Text, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
+import { Colors, Layout, Sizing, Typography } from '../styles'
 import { useChild } from './childContext.component'
 import { Image } from './image.component'
 import { RootStackParamList } from './navigation.component'
@@ -55,36 +56,36 @@ export const NewsListItem = ({ item }: NewsListItemProps) => {
 
 const styles = StyleSheet.create({
   card: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: '#fff',
+    ...Layout.flex.full,
+    ...Layout.flex.row,
+    backgroundColor: Colors.neutral.white,
     borderRadius: 2,
     borderColor: '#f0f0f0',
     borderWidth: 1,
-    padding: 20,
-    marginBottom: 8,
+    padding: Sizing.t5,
+    marginBottom: Sizing.t2,
   },
   text: {
-    flex: 1,
+    ...Layout.flex.full,
   },
   title: {
-    fontSize: 18,
-    fontWeight: '700',
+    ...Typography.fontWeight.bold,
+    ...Typography.fontSize.lg,
     marginBottom: 2,
   },
   subtitle: {
+    ...Typography.fontSize.xs,
     color: '#6B7280',
-    fontSize: 12,
-    marginBottom: 8,
+    marginBottom: Sizing.t2,
   },
   intro: {
+    ...Typography.fontSize.sm,
     color: '#374151',
-    fontSize: 14,
   },
   image: {
     borderRadius: 3,
     width: 80,
     height: 80,
-    marginRight: 16,
+    marginRight: Sizing.t5,
   },
 })

packages/app/components/notification.component.tsx

@@ -2,6 +2,7 @@ import { Notification as NotificationType } from '@skolplattformen/embedded-api'
 import { Card, Text } from '@ui-kitten/components'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
+import { Colors, Layout, Sizing, Typography } from '../styles'
 import { ModalWebView } from './modalWebView.component'
 import moment from 'moment'
 
@@ -43,20 +44,19 @@ export const Notification = ({ item }: NotificationProps) => {
 
 const styles = StyleSheet.create({
   card: {
-    flex: 1,
-    backgroundColor: '#fff',
+    ...Layout.flex.full,
+    backgroundColor: Colors.neutral.white,
     borderRadius: 2,
     borderColor: '#f0f0f0',
     borderWidth: 1,
-    marginBottom: 8,
+    marginBottom: Sizing.t2,
   },
   title: {
-    fontSize: 18,
-    fontWeight: '700',
+    ...Typography.header,
     marginBottom: 2,
   },
   subtitle: {
     color: '#6B7280',
-    fontSize: 12,
+    ...Typography.fontSize.xs,
   },
 })

packages/app/package.json

@@ -47,6 +47,7 @@
     "react-native-svg": "12.1.0",
     "react-native-svg-transformer": "0.14.3",
     "react-native-tab-view": "2.15.2",
+    "react-native-typography": "^1.4.1",
     "react-native-webview": "11.2.4",
     "rn-actionsheet-module": "1.0.3",
     "use-async-storage": "1.2.0",