Merge branch 'fix/dark-theme' into 'master'

FIX | dark theme

See merge request jetup/rws/rws-appication!365

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

@@ -5,7 +5,6 @@ import { 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'
-import moment from 'moment'
 
 interface IProps {
 	sheetRef: React.LegacyRef<RBSheet>
@@ -30,7 +29,7 @@ export const ChangeDateOfBirthdayModal: FC<IProps> = ({
 	return (
 		<BottomModal
 			closeOnPressMask
-			height={400}
+			height={$size(400)}
 			title={title}
 			sheetRef={sheetRef}>
 			<View style={styles.container}>

src/modules/account/components/change-phone-number-modal.component.tsx

@@ -33,7 +33,7 @@ export const ChangePhoneNumberModal = ({
 				setNewPhoneNumber('')
 				onClose()
 			}}
-			height={310}
+			height={$size(300)}
 			title={title}
 			closeDuration={100}
 			sheetRef={sheetRef}>

src/modules/chats/hooks/use-chat-messages.hook.ts

@@ -26,9 +26,9 @@ import { useSelector } from 'react-redux'
 import { getChatMessageMenuOptions } from '../configs'
 import { ChatMessageActionEnum } from '../enums'
 import Clipboard from '@react-native-community/clipboard'
-import Share from 'react-native-share'
 import store from '@/store'
 import { chatMessageManager } from '@/managers/chat-message.manager'
+import { isMessageEqualURL } from '@/shared/helpers'
 
 export const useChatMessages = (
 	chatId: number | string,
@@ -197,13 +197,9 @@ export const useChatMessages = (
 		})
 
 		if (message.type === MessageType.Text) {
-			const shareOptions = {
-				title: title,
-				message: message.content?.message,
-				url: url,
-				type: MessageType.Text,
-			}
-			Share.open(shareOptions)
+			if (!isMessageEqualURL(message.content?.message)) {
+				fsService.shareText(title, message.content?.message)
+			} else fsService.shareUrl(title, message.content?.message)
 		}
 
 		if (message.type === MessageType.Image) {
@@ -240,13 +236,20 @@ export const useChatMessages = (
 
 		if (message.type === MessageType.Forwarded) {
 			if (message.content?.originalMessage?.type === MessageType.Text) {
-				const shareOptions = {
-					title: title,
-					message: message.content?.originalMessage?.content?.message,
-					url: url,
-					type: MessageType.Text,
-				}
-				Share.open(shareOptions)
+				if (
+					!isMessageEqualURL(
+						message.content?.originalMessage?.content?.message,
+					)
+				) {
+					fsService.shareText(
+						title,
+						message.content?.originalMessage?.content?.message,
+					)
+				} else
+					fsService.shareUrl(
+						title,
+						message.content?.originalMessage?.content?.message,
+					)
 			} else {
 				fsService.shareFileOutside(
 					message.content?.originalMessage?.content?.fileUrl,

src/modules/chats/hooks/use-pined-messages.hook.ts

@@ -19,7 +19,7 @@ interface IProps {
 }
 
 export const usePinedMessages = ({ messages, role, onPress }: IProps) => {
-		const { isConnected } = useNetInfo()
+	const { isConnected } = useNetInfo()
 	const [activeInd, setActiveInd] = useState(null)
 
 	const nav = useNav()
@@ -50,7 +50,6 @@ export const usePinedMessages = ({ messages, role, onPress }: IProps) => {
 			{
 				name: 'Копіювати',
 				onPress: () => {
-					console.log(messages[activeInd])
 					onCopy(messages[activeInd])
 				},
 			},
@@ -71,7 +70,9 @@ export const usePinedMessages = ({ messages, role, onPress }: IProps) => {
 		]
 
 		const copyEnablesTypes = [MessageType.Text, MessageType.Image]
-		const canCopy = isConnected ? copyEnablesTypes.includes(messages[activeInd].type) : messages[activeInd].type === MessageType.Text
+		const canCopy = isConnected
+			? copyEnablesTypes.includes(messages[activeInd].type)
+			: messages[activeInd].type === MessageType.Text
 
 		if (!canCopy) options.shift()
 

src/modules/contacts/components/contact-row-card.component.tsx

@@ -40,7 +40,12 @@ export const ContactRowCard: FC<IProps> = ({
 					/>
 				</View>
 
-				<Txt style={styles.title}>{fullName}</Txt>
+				<Txt
+					numberOfLines={1}
+					ellipsizeMode="tail"
+					style={styles.title}>
+					{fullName}
+				</Txt>
 			</View>
 
 			<TouchableOpacity style={styles.infoWrap} onPress={onPressInfo}>
@@ -83,10 +88,11 @@ const createStyles = (theme: PartialTheme) =>
 		},
 		title: {
 			color: theme.$textPrimary,
+			width: $size(250, 230),
 			fontSize: $size(16),
 			fontWeight: '500',
 		},
 		infoWrap: {
-			marginRight: $size(15),
+			marginRight: $size(10, 5),
 		},
 	})

src/modules/media/smart-components/record-audio-modal.smart-component.tsx

@@ -108,8 +108,9 @@ export const RecordAudioModalSmart: FC = () => {
 	return (
 		<BottomModal
 			sheetRef={ref => (sheetRef.current = ref)}
-			height={$size(200, 190)}
+			height={$size(220, 210)}
 			onClose={onClose}
+			closeOnPressMask
 			containerStyle={styles.container}>
 			<Txt style={styles.title}>
 				{!recordFilPath

src/modules/media/smart-components/select-sticker.smart-component.tsx

@@ -31,7 +31,7 @@ const screenHeight = Dimensions.get('screen').height
 export const SelectStickerSmart = () => {
 	const sheetRef = useRef<BottomSheetModal>(null)
 	const { styles, theme } = useTheme(createStyles)
-	const [modalHeight, setModalHeight] = useState(screenHeight - 25)
+	const [modalHeight, setModalHeight] = useState(screenHeight - 50)
 	const settingsRef = useRef({
 		send: null,
 	}).current
@@ -88,6 +88,7 @@ export const SelectStickerSmart = () => {
 			backgroundStyle={[styles.container]}
 			backdropComponent={renderBackdrop}
 			enablePanDownToClose={false}
+			onDismiss={close}
 			keyboardBehavior="fillParent"
 			keyboardBlurBehavior="restore"
 			handleIndicatorStyle={[styles.indicator]}>
@@ -116,7 +117,7 @@ const createStyles = ({ ...theme }: PartialTheme) =>
 		container: {
 			borderTopRightRadius: 35,
 			borderTopLeftRadius: 35,
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 			marginTop: isAndroid($size(20), 5),
 
 			...Platform.select({
@@ -126,6 +127,9 @@ const createStyles = ({ ...theme }: PartialTheme) =>
 			}),
 		},
 		indicator: {
+			opacity: 0,
+			backgroundColor: theme.modal.$indicatorBg,
+			width: $size(70),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],

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

@@ -79,7 +79,7 @@ export const ConfirmModalSmartComponent: FC = () => {
 		<BottomModal
 			closeOnPressMask
 			sheetRef={ref => (sheetRef.current = ref)}
-			height={$size(250 + extraHeight, 200 + extraHeight)}
+			height={$size(240 + extraHeight, 200 + extraHeight)}
 			title={title}>
 			<View style={{ width: '100%' }}>
 				{!_.isEmpty(message) && (

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

@@ -95,7 +95,7 @@ const createStyles = (theme: PartialTheme) =>
 		container: {
 			borderTopRightRadius: 35,
 			borderTopLeftRadius: 35,
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 			marginTop: isAndroid($size(20), 0),
 			...Platform.select({
 				ios: {
@@ -113,6 +113,8 @@ const createStyles = (theme: PartialTheme) =>
 		},
 
 		indicator: {
+			backgroundColor: theme.modal.$indicatorBg,
+			width: $size(70),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],

src/modules/tasks/screens/add-update-task.screen.tsx

@@ -114,7 +114,7 @@ export const AddUpdateTaskScreen: FC<IProps> = ({ route, navigation }) => {
 
 	const openSelectInitiatorModal = () => {
 		Keyboard.dismiss()
-		console.log('openSelectInitiatorModal')
+
 		appEvents.emit('openUserPicker', {
 			callback: user => {
 				setFormField('initiatorId', user.id.toString())

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

@@ -10,7 +10,6 @@ import {
 	Platform,
 } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
-import RBSheet from 'react-native-raw-bottom-sheet'
 import {
 	$size,
 	Button,
@@ -55,8 +54,9 @@ export const SelectTaxonomiesModalSmart = () => {
 
 	const [modalHeight, setModalHeight] = useState(screenHeight - $size(150))
 
-	const [selectedItem, selectItem] = useState<ITaxonomyShortInfo>({} as any)
+	const [selectedItem, selectItem] = useState<ITaxonomyShortInfo>()
 	const [searchString, setsearchString] = useState<string>()
+
 	const title = useMemo(() => {
 		if (type === 'reason') return 'Оберіть підставу'
 		return 'Оберіть групу'
@@ -205,7 +205,7 @@ const createStyles = (theme: PartialTheme) =>
 		container: {
 			borderTopRightRadius: 35,
 			borderTopLeftRadius: 35,
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 			marginTop: isAndroid($size(20), 0),
 			...Platform.select({
 				ios: {
@@ -223,6 +223,8 @@ const createStyles = (theme: PartialTheme) =>
 		},
 
 		indicator: {
+			backgroundColor: theme.modal.$indicatorBg,
+			width: $size(70),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],
@@ -249,8 +251,7 @@ const createStyles = (theme: PartialTheme) =>
 		header: {
 			borderBottomWidth: 1,
 			borderBottomColor: theme.$border,
-
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 		},
 		item: {
 			alignSelf: 'stretch',

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

@@ -192,7 +192,7 @@ const createStyles = (theme: PartialTheme) =>
 		container: {
 			borderTopRightRadius: 35,
 			borderTopLeftRadius: 35,
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 			marginTop: isAndroid($size(20), 0),
 			...Platform.select({
 				ios: {
@@ -210,6 +210,8 @@ const createStyles = (theme: PartialTheme) =>
 		},
 
 		indicator: {
+			backgroundColor: theme.modal.$indicatorBg,
+			width: $size(70),
 			...Platform.select({
 				android: {
 					transform: [{ translateY: 20 }],
@@ -241,7 +243,7 @@ const createStyles = (theme: PartialTheme) =>
 		header: {
 			borderBottomWidth: 1,
 			borderBottomColor: theme.$border,
-			backgroundColor: theme.$layoutBg,
+			backgroundColor: theme.modal.$bg,
 		},
 		item: {
 			alignSelf: 'stretch',

src/services/system/fs.service.ts

@@ -158,6 +158,42 @@ const _downloadFile = (
 	})
 }
 
+export const shareText = async (title: string, message: string) => {
+	try {
+		const result = await Share.open({
+			title: title,
+			message: message,
+		})
+
+		if (result.success) {
+			console.log('succes sharing')
+		} else if (result.dismissedAction) {
+			console.log('dismissed')
+		}
+	} catch (error: any) {
+		console.log(error.message)
+		// Alert.alert(error.message)
+	}
+}
+
+export const shareUrl = async (title: string, message: string) => {
+	try {
+		const result = await Share.open({
+			title: title,
+			url: message,
+		})
+
+		if (result.success) {
+			console.log('succes sharing')
+		} else if (result.dismissedAction) {
+			console.log('dismissed')
+		}
+	} catch (error: any) {
+		console.log(error.message)
+		// Alert.alert(error.message)
+	}
+}
+
 export const shareFile = async (
 	fileUrl: string,
 	fileName: string,
@@ -284,6 +320,8 @@ export const fsService = {
 	deleteFile,
 	downloadToDevice,
 	dowloadByRNB: _downloadFile,
+	shareText,
+	shareUrl,
 	shareFile,
 	shareFileOutside,
 	createPath,

src/shared/components/modals/bottom-modal.smart-component.tsx

@@ -44,8 +44,9 @@ export const BottomModal: FC<IProps> = ({
 			openDuration={250}
 			closeDuration={closeDuration}
 			customStyles={{
-				container: {...styles.wrapper , height },
+				container: { ...styles.wrapper, height },
 				draggableIcon: {
+					backgroundColor: '#C6C6C6',
 					width: $size(70),
 					height: $size(2),
 				},

src/shared/components/modals/confirm-code-modal.component.tsx

@@ -109,7 +109,7 @@ export const ConfirmCodeModal = (props: IProps) => {
 			onClose={() => close()}
 			onOpen={() => restartCountDown()}
 			sheetRef={props.sheetRef}
-			height={$size(320, 320)}
+			height={$size(340, 320)}
 			title={props.title}>
 			<View style={styles.container}>
 				{renderTimer()}

src/shared/helpers/chat-message-preview-text.helper.ts

@@ -43,3 +43,16 @@ export const getMessagePreviewText = (message: Record<string, any>) => {
 		}
 	}
 }
+
+export const isMessageEqualURL = (str: string) => {
+	var pattern = new RegExp(
+		'^(https?:\\/\\/)?' + // protocol
+			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+			'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+			'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+			'(\\#[-a-z\\d_]*)?$',
+		'i',
+	) // fragment locator
+	return !!pattern.test(str)
+}

src/shared/themes/dark/colors.ts

@@ -15,11 +15,12 @@ export const colors: Colors = {
 	$warning: '#870D0D',
 
 	$layoutBg: '#000000',
+
 	$border: '#2C2C2C',
 
 	$textPrimary: '#fff',
 
 	$secondaryText: '#7F7F7F',
 
-	$loaderPrimary: '#fff'
+	$loaderPrimary: '#fff',
 }

src/shared/themes/dark/contacts.ts

@@ -10,7 +10,7 @@ export const contactsColors: ContactsColors = {
 
 	contactBirthdayButton: {
 		$unpressed: '#C6C6C6',
-		$pressed: '#C6C6C6'
+		$pressed: '#DE253B',
 	},
 
 	contactSpeakings: {

src/shared/themes/dark/settings.ts

@@ -5,9 +5,9 @@ export const settingsColors: SettingColors = {
 		$bgColor: '#1F1F1F',
 		$iconColor: '#C6C6C6',
 		$borderColor: '#222222',
-		$arrowIconColor: '#fff',
+		$arrowIconColor: '#C6C6C6',
 		checkableBgPreview: {
-			$shadow: '#000'
-		}
+			$shadow: '#000',
+		},
 	},
 }

src/shared/themes/dark/shared-components.ts

@@ -81,6 +81,7 @@ export const sharedComponentsColors: SharedComponentsColors = {
 		$bg: '#141414',
 		$title: colors.$textPrimary,
 		$input: '#000000',
+		$indicatorBg: '#C6C6C6',
 	},
 
 	ImgWithBgCircle: {
@@ -139,7 +140,7 @@ export const sharedComponentsColors: SharedComponentsColors = {
 	},
 
 	picker: {
-		$bg: '#000',
+		$bg: '#141414',
 		$buttonBg: '#000',
 		$text: '#fff',
 	},

src/shared/themes/interfaces/shared-components.interface.ts

@@ -98,6 +98,7 @@ export interface ModalColors {
 		$bg: string
 		$title: string
 		$input: string
+		$indicatorBg: string
 	}
 }
 

src/shared/themes/light/shared-components.ts

@@ -81,6 +81,7 @@ export const sharedComponentsColors: SharedComponentsColors = {
 		$bg: '#F8F8F8',
 		$title: colors.$textPrimary,
 		$input: '#ffffff',
+		$indicatorBg: '#C6C6C6',
 	},
 
 	ImgWithBgCircle: {