FIX | android dark theme / task permissions

src/modules/account/components/change-date-of-birthday-moda.component.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import { $size, BottomModal, Button } from '@/shared'
 import RBSheet from 'react-native-raw-bottom-sheet'
-import { StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, View } from 'react-native'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 import DatePicker from 'react-native-date-picker'
@@ -29,13 +29,15 @@ export const ChangeDateOfBirthdayModal: FC<IProps> = ({
 	return (
 		<BottomModal
 			closeOnPressMask
-			height={$size(400)}
+			height={Platform.OS === 'ios' ? $size(400) : $size(350)}
 			title={title}
 			sheetRef={sheetRef}>
 			<View style={styles.container}>
 				<DatePicker
 					textColor={theme.$textPrimary}
 					date={newBirthdayDate}
+					is24hourSource="locale"
+					androidVariant="nativeAndroid"
 					onDateChange={setNewDate}
 					locale={'uk'}
 					mode={'date'}

src/modules/executors/hooks/use-fetch-executors.hook.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { IShortUser, useFlatList } from '@/shared'
+import { IShortUser, useFlatList, useSocketListener } from '@/shared'
 import { IPermittedExecutorResponse } from '@/api/users/responses.interface'
 import { transformPermittedExecutors } from '@/api/users/transforms'
 import { tasksService } from '@/services/domain'
@@ -31,6 +31,8 @@ export const useFetchPermittedExecutors = (
 		if (searchString !== null) resetFlatList()
 	}, [searchString])
 
+	useSocketListener('user/change-permissions', resetFlatList, [])
+
 	return {
 		executors,
 		isLoading,

src/modules/executors/smart-components/executors-slider-list.smart-component.tsx

@@ -9,6 +9,7 @@ import {
 	RouteKey,
 	useFlatList,
 	useNav,
+	useSocketListener,
 	useTheme,
 } from '@/shared'
 import { ContentBlock } from '@/shared/components/blocks'
@@ -76,6 +77,8 @@ export const ExecutorsSliderListSmart: FC<ExecutorsSliderListSmartProps> = ({
 		if (searchString !== null) setLoadParams({ searchString })
 	}, [searchString])
 
+	useSocketListener('user/change-permissions', resetFlatList, [])
+
 	const renderItem = item => {
 		return (
 			<View key={item.id} style={styles.container}>

src/modules/groups/hooks/use-fetch-groups-with-tasks-count.hook.ts

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react'
-import { ITaxonomyWithTasksCount, useFlatList } from '@/shared'
+import {
+	ITaxonomyWithTasksCount,
+	useFlatList,
+	useSocketListener,
+} from '@/shared'
 import { taxonomiesService } from '@/services/domain'
 
 export const useFetchGroupsWithTasksCount = (

src/modules/groups/smart-components/groups-slider-list.smart-component.tsx

@@ -6,6 +6,7 @@ import {
 	useEventsListener,
 	useFlatList,
 	useNav,
+	useSocketListener,
 	useTheme,
 } from '@/shared'
 import { $size, getTitleByCount } from '@/shared/helpers'
@@ -82,6 +83,8 @@ export const GroupsSliderList: FC<GroupsSliderListProps> = ({
 
 	useEventsListener('onLastTaskDeleted', onLastTaskDeleted, [])
 
+	useSocketListener('user/change-permissions', resetFlatList, [])
+
 	const renderItem = useCallback(item => {
 		if (!item || !item.tasksCount) return null
 		return (

src/modules/home/smart-components/my-tasks-list.smart-component.tsx

@@ -20,6 +20,7 @@ import {
 	useEventsListener,
 	useFlatList,
 	useNav,
+	useSocketListener,
 } from '@/shared'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
@@ -86,6 +87,8 @@ export const MyTasksListSmart: FC<IProps> = ({ contentStyle, ...props }) => {
 
 	useEventsListener('reloadTask', resetFlatList)
 
+	useSocketListener('user/change-permissions', resetFlatList, [])
+
 	useEffect(() => {
 		if (props.onLoaded) props.onLoaded(count)
 	}, [count])

src/modules/root/atoms/icon-with-count-indicator.component.tsx

@@ -138,7 +138,7 @@ const createStyles = ({ tabBar }: PartialTheme) =>
 			height: 20,
 			minWidth: 20,
 			opacity: 0.9,
-			paddingTop: 2
+			paddingTop: 2,
 		},
 		indicatorCount: {
 			color: tabBar.indicator.$txt,

src/modules/root/hooks/use-app-badge.hook.ts

@@ -50,7 +50,10 @@ export const useAppBadge = () => {
 	const setAppBadge = async () =>
 		await ShortcutBadge.setCount(unreadMessagesCount + unreadTasksCount)
 
-	const onReadChat = (data: { chatId: number | string; unreadCount?: number }) => {
+	const onReadChat = (data: {
+		chatId: number | string
+		unreadCount?: number
+	}) => {
 		if (data?.unreadCount)
 			simpleDispatch(new DecreaseUnreadMessagesCount(data?.unreadCount))
 	}
@@ -88,7 +91,11 @@ export const useAppBadge = () => {
 			simpleDispatch(new IncreaseUnreadMessagesCount(countToIncrease))
 	}
 
-	const onNewTask = (data: { taskId: number, executorId: number, authorId: number }) => {
+	const onNewTask = (data: {
+		taskId: number
+		executorId: number
+		authorId: number
+	}) => {
 		if (data.authorId === account.id) return
 		if (hasPermissionsForUserTasks(Number(data.executorId)))
 			simpleDispatch(new IncreaseUnreadCount())
@@ -106,11 +113,11 @@ export const useAppBadge = () => {
 			simpleDispatch(new DecreaseUnreadCount())
 	}
 
-	const onNeedReloadTasksCount = async () => await tasksService.getUnreadTasksCount()
+	const onNeedReloadTasksCount = async () =>
+		await tasksService.getUnreadTasksCount()
 
 	const onChatIsRead = async (data: SocketEvents['chat/is-read']) => {
-		if (data.userId === account.id)
-			await reloadUnreadMessagesCount()
+		if (data.userId === account.id) await reloadUnreadMessagesCount()
 	}
 
 	useEffect(() => {
@@ -150,4 +157,6 @@ export const useAppBadge = () => {
 		account,
 		permissions,
 	])
+
+	useSocketListener('user/change-permissions', onNeedReloadTasksCount, [])
 }

src/modules/root/smart-components/date-picker.smart-component.tsx

@@ -80,6 +80,8 @@ export const DatePickerSmartComponent: FC = () => {
 				<DatePicker
 					date={date}
 					textColor={theme?.$textPrimary}
+					is24hourSource="locale"
+					androidVariant="nativeAndroid"
 					onDateChange={setDate}
 					locale={'uk'}
 					minimumDate={minDate}
@@ -115,9 +117,10 @@ const createStyles = (theme: PartialTheme) =>
 		indicator: {
 			backgroundColor: theme.modal.$indicatorBg,
 			width: $size(70),
+			height: $size(2),
 			...Platform.select({
 				android: {
-					transform: [{ translateY: 20 }],
+					transform: [{ translateY: $size(20) }],
 				},
 			}),
 		},

src/modules/root/smart-components/modal-picker.smart-component.tsx

@@ -4,7 +4,6 @@ import React, { FC, useRef, useState } from 'react'
 
 import { Dimensions, Platform, StyleSheet, View } from 'react-native'
 import RBSheet from 'react-native-raw-bottom-sheet'
-// import { Picker as RNPicker } from '@react-native-picker/picker'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 import { Picker } from 'react-native-wheel-pick'
 import _ from 'lodash'
@@ -15,7 +14,7 @@ interface ISettingsProps {
 }
 
 export const ModalPickerSmartComponent: FC = () => {
-	const { styles } = useTheme(createStyles)
+	const { theme, styles } = useTheme(createStyles)
 
 	const sheetRef = useRef<RBSheet>(null)
 	const settingsRef = useRef<ISettingsProps>({ callback: null })
@@ -80,6 +79,8 @@ export const ModalPickerSmartComponent: FC = () => {
 			}}>
 			<View style={styles.wrapper}>
 				<Picker
+					textColor={theme.picker.$text}
+					textSize={$size(18, 16)}
 					selectedValue={selectedItemKey}
 					style={styles.picker}
 					itemStyle={styles.item}
@@ -127,10 +128,8 @@ const createStyles = (theme: PartialTheme) =>
 			},
 		}),
 		item: {
-			fontSize: Platform.select({
-				ios: $size(18, 16),
-				android: $size(16, 14),
-			}),
+			// ios styles only
+			fontSize: $size(18, 16),
 			color: theme.picker.$text,
 		},
 	})

src/modules/tasks/hooks/use-fetch-tasks-by-filter.hook.ts

@@ -1,4 +1,9 @@
-import { ITaskFilter, ITaskPreview, useFlatList } from '@/shared'
+import {
+	ITaskFilter,
+	ITaskPreview,
+	useFlatList,
+	useSocketListener,
+} from '@/shared'
 import { tasksService } from '@/services/domain'
 import { useEffect } from 'react'
 import { ITaskPreviewResponse } from '@/api/tasks/responses.interface'
@@ -77,7 +82,11 @@ export const useFetchTasksByFilter = ({
 	})
 
 	useEffect(() => {
-		if (searchString) setLoadParams({ ...getFetchParams(), globalSearchString: searchString })
+		if (searchString)
+			setLoadParams({
+				...getFetchParams(),
+				globalSearchString: searchString,
+			})
 	}, [searchString])
 
 	const reloadTasks = () => {
@@ -92,6 +101,8 @@ export const useFetchTasksByFilter = ({
 		taskFilterStatus: filter?.status,
 	})
 
+	useSocketListener('user/change-permissions', resetFlatList, [])
+
 	return {
 		items,
 		count,

src/modules/tasks/smart-components/finish-task-modal.smart-component.tsx

@@ -1,6 +1,6 @@
 import { useEventsListener } from '@/shared'
 import React, { useRef, useState } from 'react'
-import { StyleSheet, View, Text } from 'react-native'
+import { StyleSheet, View, Text, Platform } from 'react-native'
 import { BottomModal, Button, FakeDateInputForm } from '@/shared/components'
 import { $size } from '@/shared/helpers'
 import RBSheet from 'react-native-raw-bottom-sheet'
@@ -62,11 +62,20 @@ export const FinishTaskModal = () => {
 
 	useEffect(() => {
 		if (dateState.isShowCalendar)
-			return updateModalHeight($size(580, 560), tasksCount)
+			return updateModalHeight(
+				Platform.OS === 'ios' ? $size(630, 620) : $size(630, 620),
+				tasksCount,
+			)
 		if (dateState.isShowTimePicker)
-			return updateModalHeight($size(460, 400), tasksCount)
+			return updateModalHeight(
+				Platform.OS === 'ios' ? $size(490, 400) : $size(460, 400),
+				tasksCount,
+			)
 		if (!dateState.isShowCalendar && !dateState.isShowTimePicker)
-			return updateModalHeight($size(270, 250), tasksCount)
+			return updateModalHeight(
+				Platform.OS === 'ios' ? $size(280, 260) : $size(280, 260),
+				tasksCount,
+			)
 	}, [dateState, tasksCount])
 
 	const updateModalHeight = (
@@ -163,6 +172,8 @@ export const FinishTaskModal = () => {
 						}}
 						locale={'uk'}
 						mode={'time'}
+						is24hourSource="locale"
+						androidVariant="nativeAndroid"
 						textColor={theme.$textPrimary}
 						maximumDate={new Date()}
 						style={styles.timePicker}

src/modules/taxonomies/smart-components/select-taxonomies-modal/index.tsx

@@ -225,6 +225,7 @@ const createStyles = (theme: PartialTheme) =>
 		indicator: {
 			backgroundColor: theme.modal.$indicatorBg,
 			width: $size(70),
+			height: $size(2),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],

src/modules/users/smart-components/select-user-modal/index.tsx

@@ -212,6 +212,7 @@ const createStyles = (theme: PartialTheme) =>
 		indicator: {
 			backgroundColor: theme.modal.$indicatorBg,
 			width: $size(70),
+			height: $size(2),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],