FIX | fontFamily styles, layouts & sort printed tasks

src/modules/account/components/account-phone-number-input.component.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, TextInputProps, View, Text } from 'react-native'
 import { $size } from '@/shared/helpers'
 import { MaskedInput } from '@/shared/components/plugins'
-import { IconComponent } from '@/shared'
+import { IconComponent, Txt } from '@/shared'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 
@@ -23,7 +23,7 @@ export const AccountPhoneNumberInput = (props: IProps) => {
 	return (
 		<>
 			<View style={styles.wrapper}>
-				<Text style={[styles.label]}>{props.label}</Text>
+				<Txt style={[styles.label]}>{props.label}</Txt>
 				<View style={onCls(Boolean(props.error), 'inputWrap')}>
 					<MaskedInput
 						type={'cel-phone'}
@@ -79,27 +79,11 @@ const createStyles = (theme: PartialTheme) =>
 		input: {
 			color: theme.input.$text,
 			fontSize: $size(16, 14),
+			fontFamily: 'Gilroy',
 			paddingLeft: $size(15),
 			width: '100%',
 		},
 
-		// inputWrap: {
-		// 	width: '100%',
-		// },
-		// inputWrapActive: {
-		// 	borderColor: theme.$errorText,
-		// 	borderWidth: 1,
-		// },
-		// input: {
-		// 	fontSize: $size(16, 14),
-		// 	lineHeight: $size(16, 14),
-		// 	backgroundColor: theme.input.$bg,
-		// 	color: theme.input.$text,
-		// 	borderRadius: 10,
-		// 	height: $size(46, 44),
-		// 	width: '100%',
-		// 	paddingLeft: $size(15),
-		// },
 		icon: {
 			position: 'absolute',
 			right: $size(20, 18),

src/modules/account/components/work-phone-number.component.tsx

@@ -107,7 +107,7 @@ export const WorkPhoneNumber = () => {
 const createStyles = (theme: PartialTheme) =>
 	StyleSheet.create({
 		container: {
-			marginBottom: $size(10, 8),
+			// marginBottom: $size(10, 8),
 			width: '100%',
 		},
 		title: {

src/modules/account/screens/account.screen.tsx

@@ -159,6 +159,7 @@ export const AccountScreen: FC<IProps> = ({ navigation }) => {
 						keybordType="phone-pad"
 						error={errors.innerPhoneNumber}
 						inputProps={{
+							placeholder: '00 000',
 							maxLength: 6,
 						}}
 					/>
@@ -205,13 +206,13 @@ const createStyles = (theme: PartialTheme) =>
 	StyleSheet.create({
 		container: {
 			alignItems: 'center',
-			marginTop: $size(20, 16),
+			marginVertical: $size(20, 16),
 		},
 		imgWithMainInfo: {
 			marginBottom: $size(30, 25),
 		},
 		dateOfBirthField: {
-			marginBottom: $size(10, 8),
+			// marginBottom: $size(10, 8),
 		},
 		fields: {
 			marginTop: $size(30),

src/modules/chats/components/create-chat-header.component.tsx

@@ -47,7 +47,7 @@ export const CreateChatHeaderComponent: FC<IProps> = ({
 					value={value}
 					placeholder={placeholder}
 					style={styles.input}
-					placeholderTextColor={theme?.$textPrimary}
+					placeholderTextColor={theme?.$secondaryText}
 					editable={!disabled}
 					onChangeText={onChangeTitle}
 					maxLength={40}
@@ -74,6 +74,8 @@ const createStyles = (theme: PartialTheme) =>
 		},
 		input: {
 			fontSize: $size(16, 14),
+			fontFamily: 'Gilroy',
+			fontWeight: '500',
 			color: theme.$textPrimary,
 		},
 		error: {

src/modules/contacts/screens/contact-detail.screen.tsx

@@ -100,7 +100,10 @@ export const ContactDetailScreen: FC<IProps> = ({ navigation, route }) => {
 					color={theme.$loaderPrimary}
 				/>
 			) : (
-				<View style={{ marginTop: $size(20, 16) }}>
+				<View
+					style={{
+						marginVertical: $size(20, 18),
+					}}>
 					<AvatarTitle
 						imageUrl={contact?.avatarUrl}
 						avatarTextStyle={styles.avatarText}

src/modules/tasks/atoms/task-details-row.atom.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { View, Text, StyleSheet, StyleProp, TextStyle } from 'react-native'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 import { PartialTheme } from '@/shared/themes/interfaces'
-import { $size } from '@/shared'
+import { $size, Txt } from '@/shared'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 
 interface IProps {
@@ -24,9 +24,9 @@ export const TaskDetailsRow: FC<IProps> = ({
 
 	return (
 		<View style={styles.wrapper}>
-			<Text style={[styles.title, titleStyle]}>{title}</Text>
+			<Txt style={[styles.title, titleStyle]}>{title}</Txt>
 			<TouchableOpacity disabled={!onPress} onPress={onPress}>
-				<Text style={[styles.name, valueStyle]}>{value}</Text>
+				<Txt style={[styles.name, valueStyle]}>{value}</Txt>
 			</TouchableOpacity>
 		</View>
 	)

src/modules/tasks/hooks/use-task-actions.hook.ts

@@ -118,7 +118,12 @@ export const useTaskActions = (reload = (id: number) => {}) => {
 	}
 
 	const handlePressPrint = (tasks: ITaskPreview[] = selectedTasks) => {
-		print(tasks.map(it => it.id))
+		tasks.map(task => {
+			console.log(task.id)
+		})
+		print(
+			tasks.sort((a, b) => Number(b.id) - Number(a.id)).map(it => it.id),
+		)
 	}
 
 	const handlePressPdf = () => {

src/modules/tasks/screens/task-details.screen.tsx

@@ -5,6 +5,7 @@ import {
 	IRouteParams,
 	RouteKey,
 	ScreenLayout,
+	Txt,
 	useNav,
 } from '@/shared'
 import {
@@ -120,7 +121,7 @@ export const TaskDetailsScreen: FC<IProps> = ({
 						placeHolder="Назва"
 						onChange={val => {}}
 						needDoneBtnAbove
-						title={<Text style={styles.inputLabel}>Назва</Text>}
+						title={<Txt style={styles.inputLabel}>Назва</Txt>}
 					/>
 
 					<FormTextarea

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

@@ -119,13 +119,13 @@ export const SelectTaxonomiesModalSmart = () => {
 			<TouchableOpacity
 				style={[styles.item, isActive ? styles.itemActive : null]}
 				onPress={() => selectItem(item)}>
-				<Text
+				<Txt
 					style={[
 						styles.itemText,
 						isActive ? styles.itemTextActive : null,
 					]}>
 					{item.name}
-				</Text>
+				</Txt>
 			</TouchableOpacity>
 		)
 	}

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

@@ -115,13 +115,13 @@ export const SelectUserModalSmart = () => {
 			<TouchableOpacity
 				style={[styles.item, isActive ? styles.itemActive : null]}
 				onPress={() => selectItem(item)}>
-				<Text
+				<Txt
 					style={[
 						styles.itemText,
 						isActive ? styles.itemTextActive : null,
 					]}>
 					{item.fullName}
-				</Text>
+				</Txt>
 			</TouchableOpacity>
 		)
 	}

src/shared/components/forms/form-fake-date-input.component.tsx

@@ -5,6 +5,7 @@ import moment from 'moment'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 import { RoundButton } from '../buttons'
+import { Txt } from '@/shared'
 
 interface IProps {
 	value?: Date | string
@@ -29,7 +30,7 @@ export const FakeDateInputForm = ({
 
 	return (
 		<View style={[styles.wrapper, !props.smallSize && { width: '100%' }]}>
-			{props.title && <Text style={styles.title}>{props.title}</Text>}
+			{props.title && <Txt style={styles.title}>{props.title}</Txt>}
 			<TouchableOpacity
 				disabled={props.disabled}
 				style={[styles.input, props.style]}
@@ -84,6 +85,7 @@ const createStyles = (theme: PartialTheme) =>
 			marginLeft: $size(12),
 			color: theme.input.$text,
 			fontSize: $size(16, 14),
+			fontFamily: 'Gilroy',
 			fontWeight: '400',
 		},
 	})

src/shared/components/forms/form-large-control-with-icon.component.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { IconComponent } from '../elements'
-import { $size } from '@/shared/helpers'
+import { $size, getFont } from '@/shared/helpers'
 import {
 	StyleSheet,
 	View,
@@ -13,6 +13,7 @@ import {
 	Button,
 	Keyboard,
 	Platform,
+	TextStyle,
 } from 'react-native'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
@@ -51,6 +52,10 @@ export const LargeFormControlWithIcon = (props: IProps) => {
 		[],
 	)
 
+	const customInputStyle: TextStyle = {
+		fontFamily: getFont('Gilroy', '400'),
+	}
+
 	return (
 		<>
 			<View style={styles.wrapper}>
@@ -84,7 +89,7 @@ export const LargeFormControlWithIcon = (props: IProps) => {
 						value={props.value}
 						maxLength={props.maxLength}
 						onChangeText={v => props.onChange(v)}
-						style={[styles.input, props.style]}
+						style={[styles.input, customInputStyle, props.style]}
 						placeholder={props.placeHolder}
 						placeholderTextColor={
 							props.placeholderTextColor ||
@@ -134,7 +139,6 @@ const createStyles = (theme: PartialTheme) =>
 			height: $size(50, 46),
 			flex: 1,
 			fontSize: $size(16, 14),
-			// lineHeight: $size(20, 18),
 			color: theme.input.$text,
 		},
 		icon: {

src/shared/components/forms/form-search.component.tsx

@@ -167,6 +167,7 @@ const createStyles = (theme: PartialTheme) =>
 			color: theme.input.$text,
 			paddingLeft: $size(10),
 			fontSize: $size(14, 12),
+			fontFamily: 'Gilroy',
 			height: '100%',
 			width: '100%',
 		},

src/shared/components/forms/form-text-input-with-icon.component.tsx

@@ -31,6 +31,7 @@ interface IProps {
 export const TextInputWithIcon: FC<IProps> = ({
 	title,
 	value,
+	placeholder,
 	iconName,
 	editable = true,
 	type = 'default',
@@ -62,6 +63,7 @@ export const TextInputWithIcon: FC<IProps> = ({
 						editable={editable}
 						style={styles.input}
 						value={value}
+						placeholder={placeholder}
 						onChangeText={onChange}
 						keyboardType={keybordType}
 						{...inputProps}
@@ -109,6 +111,7 @@ const createStyles = (theme: PartialTheme) =>
 		input: {
 			color: theme.input.$text,
 			fontSize: $size(16, 14),
+			fontFamily: 'Gilroy',
 			paddingLeft: $size(15),
 			width: '100%',
 		},

src/shared/components/forms/form-textarea.component.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { $size } from '@/shared/helpers'
+import { $size, getFont } from '@/shared/helpers'
 import { useTheme } from '@/shared/hooks/use-theme.hook'
 import { PartialTheme } from '@/shared/themes/interfaces'
 import {
@@ -19,6 +19,8 @@ import {
 } from 'react-native'
 import { LayoutChangeEvent } from 'react-native'
 import { useKeyboard } from '@/shared/hooks'
+import { Txt } from '@/shared'
+import _ from 'lodash'
 
 interface IProps {
 	value: string
@@ -46,12 +48,16 @@ export const FormTextarea = (props: IProps) => {
 		[],
 	)
 
+	const customInputStyle: TextStyle = {
+		fontFamily: getFont('Gilroy', '400'),
+	}
+
 	return (
 		<View style={[styles.wrapper, props.wrapStyle]}>
 			{props.label ? (
-				<Text style={[styles.label, props.labelStyle]}>
+				<Txt style={[styles.label, props.labelStyle]}>
 					{props.label}
-				</Text>
+				</Txt>
 			) : null}
 			<View style={styles.inputWrapper}>
 				<TextInput
@@ -61,7 +67,7 @@ export const FormTextarea = (props: IProps) => {
 					}}
 					inputAccessoryViewID={INPUT_ACCESSORIES_VIEW_ID}
 					editable={!props.disabled}
-					style={[styles.input, props.inputStyle]}
+					style={[styles.input, customInputStyle, props.inputStyle]}
 					value={props.value}
 					onChangeText={val => props.onChange(props.name, val)}
 					placeholder={props.placeholder}
@@ -103,7 +109,7 @@ const createStyles = (theme: PartialTheme) =>
 		input: {
 			color: theme.input.$text,
 			fontSize: $size(16, 14),
-			fontWeight: '300',
+			fontWeight: '400',
 		},
 		error: {
 			marginTop: $size(5),

src/shared/components/forms/touchable-fake-input.atom.tsx

@@ -89,7 +89,8 @@ const createStyles = (theme: PartialTheme) =>
 		value: {
 			color: theme.input.$text,
 			lineHeight: $size(16, 14),
-			fontSize: $size(14, 12),
+			fontSize: $size(16, 14),
+			fontFamily: 'Gilroy',
 		},
 		icon: {
 			position: 'absolute',