Feat/task description block

apps/mobile/app/components/Accordion.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable react-native/no-color-literals */
+/* eslint-disable react-native/no-inline-styles */
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native"
+import React, { useState } from "react"
+import { Feather } from "@expo/vector-icons"
+import { useAppTheme } from "../theme"
+
+const Accordion = ({ children, title }) => {
+	const [expanded, setExpanded] = useState(true)
+	const { colors } = useAppTheme()
+
+	function toggleItem() {
+		setExpanded(!expanded)
+	}
+
+	const body = <View style={{ gap: 12 }}>{children}</View>
+	return (
+		<View style={[styles.accordContainer, { backgroundColor: colors.background }]}>
+			<TouchableOpacity style={styles.accordHeader} onPress={toggleItem}>
+				<Text style={[styles.accordTitle, { color: colors.primary }]}>{title}</Text>
+				<Feather
+					name={expanded ? "chevron-up" : "chevron-down"}
+					size={25}
+					color={colors.primary}
+				/>
+			</TouchableOpacity>
+			{expanded && (
+				<View style={{ paddingHorizontal: 12, marginBottom: 12 }}>
+					<View
+						style={{
+							width: "100%",
+							borderBottomColor: "#F2F2F2",
+							borderBottomWidth: 1,
+						}}
+					/>
+				</View>
+			)}
+			{expanded && body}
+		</View>
+	)
+}
+
+export default Accordion
+
+const styles = StyleSheet.create({
+	accordContainer: {
+		borderRadius: 8,
+		width: "100%",
+	},
+	accordHeader: {
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		padding: 12,
+	},
+	accordTitle: {
+		fontSize: 20,
+		fontWeight: "600",
+	},
+})

apps/mobile/app/components/IssuesModal.tsx

@@ -18,20 +18,16 @@ import { SvgUri } from "react-native-svg"
 import { IIssueType } from "../services/interfaces/ITaskIssue"
 import { useTeamTasks } from "../services/hooks/features/useTeamTasks"
 import { useAppTheme } from "../theme"
+import { BlurView } from "expo-blur"
 
 interface IssuesModalProps {
 	task: ITeamTask
 	readonly?: boolean
 	nameIncluded?: boolean
-	responsiveFontSize?: () => number
+	smallFont?: boolean
 }
 
-const IssuesModal: FC<IssuesModalProps> = ({
-	task,
-	readonly = false,
-	nameIncluded,
-	responsiveFontSize,
-}) => {
+const IssuesModal: FC<IssuesModalProps> = ({ task, readonly = false, nameIncluded, smallFont }) => {
 	const { allTaskIssues } = useTaskIssue()
 	const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
 	const { updateTask } = useTeamTasks()
@@ -56,14 +52,14 @@ const IssuesModal: FC<IssuesModalProps> = ({
 		currentIssue?.name === "Bug" ? 15 : currentIssue?.name === "Story" ? 14 : 13
 
 	return (
-		<>
+		<View>
 			<View
 				style={[
 					styles.wrapButton,
 					{
 						backgroundColor: currentIssue?.color,
 						height: nameIncluded ? 24 : 20,
-						width: nameIncluded ? "auto" : 20,
+						width: nameIncluded ? 65 : 20,
 						paddingVertical: nameIncluded && 2,
 						paddingHorizontal: nameIncluded && 10,
 						flexDirection: "row",
@@ -87,7 +83,7 @@ const IssuesModal: FC<IssuesModalProps> = ({
 					<Text
 						style={{
 							color: "#ffffff",
-							fontSize: responsiveFontSize ? responsiveFontSize() : 14,
+							fontSize: smallFont ? 10 : 14,
 						}}
 					>
 						{currentIssue?.name}
@@ -110,7 +106,7 @@ const IssuesModal: FC<IssuesModalProps> = ({
 					/>
 				</View>
 			</ModalPopUp>
-		</>
+		</View>
 	)
 }
 
@@ -141,6 +137,15 @@ const ModalPopUp = ({ visible, children, onDismiss }) => {
 	}
 	return (
 		<Modal animationType="fade" transparent visible={showModal}>
+			<BlurView
+				intensity={15}
+				tint="dark"
+				style={{
+					position: "absolute",
+					width: "100%",
+					height: "100%",
+				}}
+			/>
 			<TouchableWithoutFeedback onPress={() => onDismiss()}>
 				<View style={$modalBackGround}>
 					<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
@@ -185,7 +190,6 @@ const Item = ({ issue, onChangeIssue, closeModal, readonly = false }: IItem) =>
 
 const $modalBackGround: ViewStyle = {
 	flex: 1,
-	backgroundColor: "#000000AA",
 	justifyContent: "center",
 }
 

apps/mobile/app/components/StatusType.tsx

@@ -1,65 +1,80 @@
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import { SvgUri } from 'react-native-svg';
-import { useTaskLabels } from '../services/hooks/features/useTaskLabels';
-import { useTaskPriority } from '../services/hooks/features/useTaskPriority';
-import { useTaskSizes } from '../services/hooks/features/useTaskSizes';
-import { useTaskStatus } from '../services/hooks/features/useTaskStatus';
-import { ITaskStatusItem } from '../services/interfaces/ITaskStatus';
+import React, { useMemo } from "react"
+import { View } from "react-native"
+import { SvgUri } from "react-native-svg"
+import { useTaskLabels } from "../services/hooks/features/useTaskLabels"
+import { useTaskPriority } from "../services/hooks/features/useTaskPriority"
+import { useTaskSizes } from "../services/hooks/features/useTaskSizes"
+import { useTaskStatus } from "../services/hooks/features/useTaskStatus"
+import { ITaskStatusItem } from "../services/interfaces/ITaskStatus"
+import { useTaskVersion } from "../services/hooks/features/useTaskVersion"
 
 export type TStatusItem = {
-	bgColor?: string;
-	icon?: React.ReactNode | undefined;
-	name?: string;
-	value?: string;
-	bordered?: boolean;
-};
+	bgColor?: string
+	icon?: React.ReactNode | undefined
+	name?: string
+	value?: string
+	bordered?: boolean
+}
 
 export type TStatus<T extends string> = {
-	[k in T]: TStatusItem;
-};
+	[k in T]: TStatusItem
+}
 
-export function useMapToTaskStatusValues<T extends ITaskStatusItem>(data: T[], bordered = false): TStatus<any> {
+export function useMapToTaskStatusValues<T extends ITaskStatusItem>(
+	data: T[],
+	bordered = false,
+): TStatus<any> {
 	return useMemo(() => {
 		return data.reduce((acc, item) => {
 			const value: TStatus<any>[string] = {
-				name: item.name?.split('-').join(' '),
+				name: item.name?.split("-").join(" "),
 				value: item.value || item.name,
 				bgColor: item.color,
 				bordered,
-				icon: <View>{item.fullIconUrl && <SvgUri width={14} height={14} uri={item.fullIconUrl} />}</View>
-			};
+				icon: (
+					<View>
+						{item.fullIconUrl && (
+							<SvgUri width={14} height={14} uri={item.fullIconUrl} />
+						)}
+					</View>
+				),
+			}
 
 			if (value.name) {
-				acc[value.name] = value;
+				acc[value.name] = value
 			} else if (value.value) {
-				acc[value.value] = value;
+				acc[value.value] = value
 			}
-			return acc;
-		}, {} as TStatus<any>);
-	}, [data, bordered]);
+			return acc
+		}, {} as TStatus<any>)
+	}, [data, bordered])
 }
 
 // ==================== Task Status ========================================
 export function useTaskStatusValue() {
-	const { allStatuses } = useTaskStatus();
-	return useMapToTaskStatusValues(allStatuses);
+	const { allStatuses } = useTaskStatus()
+	return useMapToTaskStatusValues(allStatuses)
 }
 
 // =================== Task Size ==============================================
 export function useTaskSizeValue() {
-	const { allTaskSizes } = useTaskSizes();
-	return useMapToTaskStatusValues(allTaskSizes);
+	const { allTaskSizes } = useTaskSizes()
+	return useMapToTaskStatusValues(allTaskSizes)
 }
 
 // =================== Task Label ==============================================
 export function useTaskLabelValue() {
-	const { allTaskLabels } = useTaskLabels();
-	return useMapToTaskStatusValues(allTaskLabels);
+	const { allTaskLabels } = useTaskLabels()
+	return useMapToTaskStatusValues(allTaskLabels)
 }
 
 // =================== Task Priority ==============================================
 export function useTaskPriorityValue() {
-	const { allTaskPriorities } = useTaskPriority();
-	return useMapToTaskStatusValues(allTaskPriorities);
+	const { allTaskPriorities } = useTaskPriority()
+	return useMapToTaskStatusValues(allTaskPriorities)
+}
+// =================== Task Priority ==============================================
+export function useTaskVersionValue() {
+	const { taskVersionList } = useTaskVersion()
+	return useMapToTaskStatusValues(taskVersionList)
 }