Piteball
/
skolplattformen-backup
mirror of https://github.com/kolplattformen/skolplattformen.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: update colors to reach AAA

This commit is contained in:
Jonathan Edenström 2021-09-12 22:29:26 +02:00
parent 2cf6bceab6
commit 0140984918
15 changed files with 203 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/app/components/absence.component.tsx
View File

@ -16,6 +16,7 @@ import { View } from 'react-native'
import DateTimePickerModal from 'react-native-modal-datetime-picker'
import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
import * as Yup from 'yup'
import { defaultStackStyling } from '../design/navigationThemes'
import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
import { studentName } from '../utils/peopleHelpers'
import { useSMS } from '../utils/SMS'
@ -35,21 +36,24 @@ interface AbsenceFormValues {
endTime: moment.Moment
}
export const absenceRouteOptions = ({
route,
}: {
route: RouteProp<RootStackParamList, 'Absence'>
}): NativeStackNavigationOptions => {
const child = route.params.child
return {
headerCenter: () => (
<NavigationTitle
title={translate('abscense.title')}
subtitle={studentName(child?.name)}
/>
),
export const absenceRouteOptions =
(darkMode: boolean) =>
({
route,
}: {
route: RouteProp<RootStackParamList, 'Absence'>
}): NativeStackNavigationOptions => {
const child = route.params.child
return {
...defaultStackStyling(darkMode),
headerCenter: () => (
<NavigationTitle
title={translate('abscense.title')}
subtitle={studentName(child?.name)}
/>
),
}
}
}
const Absence = () => {
const AbsenceSchema = Yup.object().shape({
@ -142,6 +146,7 @@ const Absence = () => {
status={hasError('socialSecurityNumber') ? 'danger' : 'basic'}
value={values.socialSecurityNumber}
style={styles.input}
placeholder="YYYYMMDD-XXXX"
accessoryRight={
hasError('socialSecurityNumber') ? AlertIcon : undefined
}
@ -254,16 +259,16 @@ const themedStyles = StyleService.create({
inputHalf: { ...LayoutStyle.flex.full },
input: {
backgroundColor: 'background-basic-color-1',
borderColor: 'color-input-border',
},
// TODO: Refactor to use mapping.json in eva design
pickerButton: {
backgroundColor: 'background-basic-color-1',
},
label: {
...Typography.fontSize.xs,
...Typography.fontSize.sm,
...Typography.fontWeight.bold,
color: 'color-basic-600',
marginBottom: Sizing.t1,
marginBottom: Sizing.t2,
},
error: {
color: 'color-primary-600',

43
packages/app/components/child.component.tsx
View File

@ -7,7 +7,7 @@ import {
} from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { Icon } from '@ui-kitten/components'
import React from 'react'
import React, { useEffect } from 'react'
import { StyleProp, TextProps } from 'react-native'
import { NativeStackNavigationOptions } from 'react-native-screens/native-stack'
import { defaultStackStyling } from '../design/navigationThemes'
@ -20,6 +20,7 @@ import { RootStackParamList } from './navigation.component'
import { NavigationTitle } from './navigationTitle.component'
import { NewsList } from './newsList.component'
import { NotificationsList } from './notificationsList.component'
import { TabBarLabel } from './tabBarLabel.component'
type ChildNavigationProp = StackNavigationProp<RootStackParamList, 'Child'>
type ChildRouteProps = RouteProp<RootStackParamList, 'Child'>
@ -52,6 +53,9 @@ const TabNavigator = ({
initialRouteName={initialRouteName}
screenOptions={({ route }) => {
return {
tabBarLabel: ({ focused }) => (
<TabBarLabel label={route.name} focused={focused} />
),
tabBarIcon: ({ focused, color }) => {
let iconName = 'news'
@ -106,30 +110,35 @@ const getHeaderTitle = (route: any) => {
}
}
export const childRouteOptions = ({
route,
}: {
route: RouteProp<RootStackParamList, 'Child'>
}): NativeStackNavigationOptions => {
const { child } = route.params
export const childRouteOptions =
(darkMode: boolean) =>
({
route,
}: {
route: RouteProp<RootStackParamList, 'Child'>
}): NativeStackNavigationOptions => {
const { child } = route.params
return {
...defaultStackStyling,
headerCenter: () => (
<NavigationTitle
title={getHeaderTitle(route)}
subtitle={studentName(child?.name)}
/>
),
return {
...defaultStackStyling(darkMode),
headerCenter: () => (
<NavigationTitle
title={getHeaderTitle(route)}
subtitle={studentName(child?.name)}
/>
),
}
}
}
export const Child = () => {
const route = useRoute<ChildRouteProps>()
const { child, initialRouteName } = route.params
const navigation = useNavigation()
navigation.setOptions({ title: getHeaderTitle(route) })
useEffect(() => {
navigation.setOptions({ title: getHeaderTitle(route) })
}, [navigation, route])
return (
<ChildProvider child={child}>

13
packages/app/components/childListItem.component.tsx
View File

@ -17,14 +17,14 @@ import {
} from '@ui-kitten/components'
import moment from 'moment'
import React from 'react'
import { TouchableOpacity, View } from 'react-native'
import { TouchableOpacity, useColorScheme, View } from 'react-native'
import { Colors, Layout, Sizing } from '../styles'
import { studentName } from '../utils/peopleHelpers'
import { translate } from '../utils/translation'
import { RootStackParamList } from './navigation.component'
import { StudentAvatar } from './studentAvatar.component'
import { DaySummary } from './daySummary.component'
import { AlertIcon, RightArrowIcon } from './icon.component'
import { RootStackParamList } from './navigation.component'
import { StudentAvatar } from './studentAvatar.component'
interface ChildListItemProps {
child: Child
@ -98,6 +98,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
const className = getClassName()
const styles = useStyleSheet(themeStyles)
const isDarkMode = useColorScheme() === 'dark'
return (
<TouchableOpacity
@ -115,7 +116,9 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
<View style={styles.cardHeaderRight}>
<RightArrowIcon
style={styles.icon}
fill={Colors.neutral.gray500}
fill={
isDarkMode ? Colors.neutral.gray200 : Colors.neutral.gray800
}
name="star"
/>
</View>
@ -162,7 +165,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
accessibilityLabel={`${child.name}, ${translate('abscense.title')}`}
appearance="ghost"
accessoryLeft={AlertIcon}
status=""
status="primary"
style={styles.absenceButton}
onPress={() => navigation.navigate('Absence', { child })}
>

15
packages/app/components/children.component.tsx
View File

@ -29,14 +29,15 @@ import { CloseOutlineIcon } from './icon.component'
const colors = ['primary', 'success', 'info', 'warning', 'danger']
export const childenRouteOptions = (): NativeStackNavigationOptions => {
return {
...defaultStackStyling,
title: translate('children.title'),
headerLargeTitle: false,
headerLargeTitleHideShadow: true,
export const childenRouteOptions =
(darkMode: boolean) => (): NativeStackNavigationOptions => {
return {
...defaultStackStyling(darkMode),
title: translate('children.title'),
headerLargeTitle: true,
headerLargeTitleHideShadow: true,
}
}
}
export const Children = () => {
const styles = useStyleSheet(themedStyles)

60
packages/app/components/daySummary.component.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'
import { useTimetable } from '@skolplattformen/api-hooks'
import { Child } from '@skolplattformen/embedded-api'
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
import moment, { Moment } from 'moment'
import React from 'react'
import { View } from 'react-native'
import { LanguageService } from '../services/languageService'
import { translate } from '../utils/translation'
@ -33,39 +33,35 @@ export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => {
const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
return (
<View style={styles.summary}>
<View style={styles.part}>
<View>
<Text category="c2" style={styles.label}>
{translate('schedule.start')}
</Text>
<Text category="h5">{lessons[0].timeStart.slice(0, 5)} - </Text>
</View>
</View>
<View style={styles.part}>
<View>
<Text category="c2" style={styles.label}>
{translate('schedule.end')}
</Text>
<Text category="h5">
{lessons[lessons.length - 1].timeEnd.slice(0, 5)}
</Text>
</View>
</View>
<View style={styles.part}>
<View>
<Text category="c2" style={styles.label}>
&nbsp;
</Text>
<Text category="s2">
{gymBag
? ` 🤼‍♀️ ${translate('schedule.gymBag', {
defaultValue: 'Gympapåse',
})}`
: ''}
</Text>
<View>
<View style={styles.summary}>
<View style={styles.part}>
<View>
<Text category="c2" style={styles.label}>
{translate('schedule.start')}
</Text>
<Text category="h5">{lessons[0].timeStart.slice(0, 5)} - </Text>
</View>
</View>
<View style={styles.part}>
<View>
<Text category="c2" style={styles.label}>
{translate('schedule.end')}
</Text>
<Text category="h5">
{lessons[lessons.length - 1].timeEnd.slice(0, 5)}
</Text>
</View>
</View>
</View>
<Text category="s2">
{gymBag
? ` 🤼‍♀️ ${translate('schedule.gymBag', {
defaultValue: 'Gympapåse',
})}`
: ''}
</Text>
</View>
)
}

8
packages/app/components/navigation.component.tsx
View File

@ -91,22 +91,22 @@ export const AppNavigator = () => {
<Screen
name="Children"
component={Children}
options={childenRouteOptions}
options={childenRouteOptions(colorScheme === 'dark')}
/>
<Screen
name="Child"
component={Child}
options={childRouteOptions}
options={childRouteOptions(colorScheme === 'dark')}
/>
<Screen
name="NewsItem"
component={NewsItem}
options={newsItemRouteOptions}
options={newsItemRouteOptions(colorScheme === 'dark')}
/>
<Screen
name="Absence"
component={Absence}
options={absenceRouteOptions}
options={absenceRouteOptions(colorScheme === 'dark')}
/>
</>
) : (

36
packages/app/components/newsItem.component.tsx
View File

@ -26,24 +26,26 @@ const displayDate = (date: string | undefined) => moment(date).format('lll')
const dateIsValid = (date: string | undefined) =>
moment(date, moment.ISO_8601).isValid()
export const newsItemRouteOptions = ({
route,
}: {
route: RouteProp<RootStackParamList, 'NewsItem'>
}): NativeStackNavigationOptions => {
const newsItem = route.params.newsItem
const { child } = route.params
return {
...defaultStackStyling,
headerCenter: () => (
<NavigationTitle
title={newsItem.header}
subtitle={studentName(child?.name)}
/>
),
headerLargeTitle: false,
export const newsItemRouteOptions =
(darkMode: boolean) =>
({
route,
}: {
route: RouteProp<RootStackParamList, 'NewsItem'>
}): NativeStackNavigationOptions => {
const newsItem = route.params.newsItem
const { child } = route.params
return {
...defaultStackStyling(darkMode),
headerCenter: () => (
<NavigationTitle
title={newsItem.header}
subtitle={studentName(child?.name)}
/>
),
headerLargeTitle: false,
}
}
}
export const NewsItem = ({ route }: NewsItemProps) => {
const { newsItem, child } = route.params

6
packages/app/components/newsListItem.component.tsx
View File

@ -4,7 +4,7 @@ import { NewsItem } from '@skolplattformen/embedded-api'
import { StyleService, useStyleSheet } from '@ui-kitten/components'
import moment from 'moment'
import React, { ReactNode } from 'react'
import { Dimensions, Pressable, Text, View } from 'react-native'
import { Dimensions, Text, TouchableOpacity, View } from 'react-native'
import { Layout, Sizing, Typography } from '../styles'
import { useChild } from './childContext.component'
import { Image } from './image.component'
@ -31,7 +31,7 @@ export const NewsListItem = ({ item, children }: NewsListItemProps) => {
const displayDate = hasDate ? moment(hasDate).fromNow() : null
return (
<Pressable
<TouchableOpacity
onPress={() => navigation.navigate('NewsItem', { newsItem: item, child })}
>
<View style={styles.card}>
@ -57,7 +57,7 @@ export const NewsListItem = ({ item, children }: NewsListItemProps) => {
</View>
</View>
</View>
</Pressable>
</TouchableOpacity>
)
}

6
packages/app/components/notification.component.tsx
View File

@ -2,7 +2,7 @@ import { Notification as NotificationType } from '@skolplattformen/embedded-api'
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
import moment from 'moment'
import React from 'react'
import { Pressable, View } from 'react-native'
import { TouchableOpacity, View } from 'react-native'
import { Layout, Sizing, Typography } from '../styles'
import { ModalWebView } from './modalWebView.component'
@ -26,7 +26,7 @@ export const Notification = ({ item }: NotificationProps) => {
return (
<>
<Pressable onPress={open}>
<TouchableOpacity onPress={open}>
<View style={styles.card}>
<View>
<Text style={styles.title}>{item.sender}</Text>
@ -38,7 +38,7 @@ export const Notification = ({ item }: NotificationProps) => {
</View>
<Text>{item.message}</Text>
</View>
</Pressable>
</TouchableOpacity>
{isOpen && (
<ModalWebView
url={item.url}

2
packages/app/components/setLanguage.component.tsx
View File

@ -146,7 +146,7 @@ const themedStyles = StyleService.create({
},
languageButtonSubtitle: {
...fontSize.sm,
opacity: 0.4,
color: 'text-hint-color',
},
button: { ...LayoutStyle.flex.full },
})

34
packages/app/components/tabBarLabel.component.tsx Normal file
View File

@ -0,0 +1,34 @@
import { StyleService, Text, useStyleSheet } from '@ui-kitten/components'
import React from 'react'
import { View } from 'react-native'
export type TabBarLabelProps = {
label: string
focused: boolean
}
export const TabBarLabel = ({ label, focused }: TabBarLabelProps) => {
const styles = useStyleSheet(themedStyles)
return (
<View>
<Text
style={[styles.label, focused ? styles.focused : null]}
maxFontSizeMultiplier={2}
>
{label}
</Text>
</View>
)
}
const themedStyles = StyleService.create({
label: {
fontWeight: '600',
fontSize: 12,
color: 'color-tab-default',
},
focused: {
color: 'color-tab-focused',
},
})

7
packages/app/design/dark.json
View File

@ -68,10 +68,15 @@
"color-danger-transparent-600": "rgba(186, 50, 127, 0.48)",
"background-basic-color-1": "#150A12",
"background-basic-color-2": "#030200",
"text-hint-color": "#B3BBCB",
"color-control-default": "#E5E7EB",
"color-basic-default": "$color-primary-800",
"color-basic-focus": "$color-primary-700",
"color-basic-hover": "$color-primary-700",
"color-basic-active": "$color-primary-700",
"color-basic-text": "$color-primary-100"
"color-basic-text": "$color-primary-100",
"color-input-border": "$color-basic-300",
"color-tab-default": "$color-primary-50",
"color-tab-focused": "$color-primary-200",
"color-button-ghost-text": "$color-primary-200"
}

10
packages/app/design/light.json
View File

@ -75,12 +75,16 @@
"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": "#fff",
"background-basic-color-2": "$color-basic-200",
"text-hint-color": "#4B5466",
"color-basic-default": "$color-primary-50",
"color-basic-focus": "$color-primary-100",
"color-basic-hover": "$color-primary-100",
"color-basic-active": "$color-primary-100",
"color-basic-text": "$color-primary-800"
"color-basic-text": "$color-primary-800",
"color-input-border": "$color-basic-800",
"background-basic-color-1": "#fff",
"background-basic-color-2": "#f7f9fc",
"color-tab-default": "$color-basic-700",
"color-tab-focused": "$color-primary-500",
"color-button-ghost-text": "$color-primary-500"
}

10
packages/app/design/mapping.json
View File

@ -7,6 +7,16 @@
"Button": {
"meta": {},
"appearances": {
"ghost": {
"variantGroups": {
"status": {
"primary": {
"textColor": "$color-button-ghost-text",
"iconTintColor": "$color-button-ghost-text"
}
}
}
},
"filled": {
"mapping": {},
"variantGroups": {

34
packages/app/design/navigationThemes.ts
View File

@ -7,9 +7,9 @@ export const darkNavigationTheme: Theme = {
colors: {
...DarkTheme.colors,
background: darkTheme['background-basic-color-2'],
border: darkTheme['background-basic-color-1'],
card: darkTheme['background-basic-color-1'],
primary: darkTheme['color-primary-400'],
border: darkTheme['background-basic-color-2'],
card: darkTheme['background-basic-color-2'],
primary: darkTheme['color-primary-200'],
text: '#ddd',
},
}
@ -25,11 +25,25 @@ export const lightNavigationTheme: Theme = {
},
}
export const defaultStackStyling: NativeStackNavigationOptions = {
headerTitleStyle: {
fontFamily: 'Poppins-Medium',
},
headerBackTitleStyle: {
fontFamily: 'Poppins-Regular',
},
export const defaultStackStyling = (
darkMode: boolean
): NativeStackNavigationOptions => {
return {
headerStyle: {
backgroundColor: darkMode
? darkTheme['background-basic-color-2']
: lightTheme['background-basic-color-1'],
},
headerLargeStyle: {
backgroundColor: darkMode
? darkTheme['background-basic-color-2']
: lightTheme['background-basic-color-2'],
},
headerTitleStyle: {
fontFamily: 'Poppins-Medium',
},
headerBackTitleStyle: {
fontFamily: 'Poppins-Regular',
},
}
}