Feature | Home screen

ios/Podfile.lock

@@ -459,7 +459,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: 04e763ddb0e7284054919cd96d9a24975355b0da
+  FBReactNativeSpec: 09a9b45481cf51e2fc98dd8dc8432607e43e1c52
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c

src/config/fontello.json

@@ -663,6 +663,20 @@
       "search": [
         "xcircle-1"
       ]
+    },
+    {
+      "uid": "697a3bc4fa53b0120cd7329d34a28926",
+      "css": "vectorstar",
+      "code": 59439,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M564.3 812.8L779.2 948.9C806.6 966.4 840.8 940.5 832.6 908.4L770.5 664.1C768.8 657.3 769 650.2 771.1 643.5 773.2 636.8 777.2 630.8 782.6 626.3L975.3 465.9C1000.7 444.8 987.6 402.8 955 400.7L703.4 384.3C696.6 383.9 690.1 381.5 684.6 377.4 679.1 373.4 674.9 367.9 672.5 361.5L578.6 125.1C576 118.4 571.5 112.6 565.6 108.5 559.7 104.5 552.6 102.3 545.5 102.3 538.3 102.3 531.2 104.5 525.3 108.5 519.4 112.6 514.9 118.4 512.3 125.1L418.4 361.5C416 367.9 411.8 373.4 406.3 377.4 400.8 381.5 394.3 383.9 387.6 384.3L135.9 400.7C103.3 402.8 90.3 444.8 115.6 465.9L308.3 626.3C313.7 630.8 317.7 636.8 319.8 643.5 321.9 650.2 322.1 657.3 320.4 664.1L262.8 890.7C253 929.1 294 960.2 326.9 939.3L526.7 812.8C532.3 809.2 538.8 807.3 545.5 807.3 552.1 807.3 558.6 809.2 564.3 812.8V812.8Z",
+        "width": 1091
+      },
+      "search": [
+        "vectorstar"
+      ]
     }
   ]
 }

src/modules/home/components/filter-search-header.component.tsx

@@ -0,0 +1,84 @@
+import React, {FC, useState} from 'react';
+import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native';
+import {$size, getTheme, IconComponent} from '@/shared';
+
+interface IProps {
+	searchString: string;
+	onSearchValChange: (val: string) => void;
+	onPressFilter: () => void;
+}
+
+export const FilterSearchHeaderComponent: FC<IProps> = ({
+	searchString,
+	onPressFilter,
+	onSearchValChange,
+}) => {
+	const [onFocus, setFocus] = useState<boolean>(false);
+
+	return (
+		<View style={styles.container}>
+			<TouchableOpacity
+				onPress={onPressFilter}
+				style={[styles.baseWrap, styles.filterBtnWrap]}>
+				<IconComponent
+					name={'slidershorizontal-1'}
+					size={$size(25)}
+					color={getTheme().icon.$defaultColor}
+				/>
+			</TouchableOpacity>
+
+			<View style={[styles.baseWrap, styles.searchFieldWrap]}>
+				<IconComponent
+					name={'magnifyingglass-1'}
+					size={$size(25)}
+					style={styles.searchIcon}
+					color={
+						onFocus || searchString
+							? getTheme().icon.$activeColor
+							: getTheme().icon.$defaultColor
+					}
+				/>
+
+				<TextInput
+					value={searchString}
+					onChangeText={onSearchValChange}
+					onBlur={() => setFocus(false)}
+					onFocus={() => setFocus(true)}
+					placeholder="Знайдіть задачу, групу"
+				/>
+			</View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		width: '100%',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		paddingBottom: $size(10),
+		borderBottomWidth: 1,
+		borderBottomColor: getTheme().$border,
+	},
+
+	baseWrap: {
+		width: $size(40),
+		backgroundColor: getTheme().$white,
+		borderRadius: 10,
+		alignItems: 'center',
+	},
+
+	filterBtnWrap: {
+		justifyContent: 'center',
+		height: $size(40),
+	},
+
+	searchFieldWrap: {
+		width: $size(285),
+		flexDirection: 'row',
+	},
+
+	searchIcon: {
+		marginHorizontal: $size(10),
+	},
+});

src/modules/home/components/horizontal-list.component.tsx

@@ -0,0 +1,82 @@
+import {$size, SelfItemComponent} from '@/shared';
+import React, {FC} from 'react';
+import {
+	Dimensions,
+	FlatList,
+	StyleSheet,
+	View,
+	Text,
+	TouchableOpacity,
+} from 'react-native';
+import {groupsData} from '../mock/groups-data.mock';
+
+const {width} = Dimensions.get('window');
+const ITEM_SIZE = width * 0.92;
+
+interface IProps {
+	title: string;
+	onPressSeeAll: () => void;
+	onPressInfo: () => void;
+}
+
+export const HorizontalListComponent: FC<IProps> = ({
+	title,
+	onPressSeeAll,
+	onPressInfo,
+}) => {
+	return (
+		<View style={styles.container}>
+			<View style={styles.listHeader}>
+				<Text style={styles.title}>{title}</Text>
+
+				<TouchableOpacity onPress={onPressSeeAll}>
+					<Text style={styles.seeAll}>Дивитись усі</Text>
+				</TouchableOpacity>
+			</View>
+
+			<FlatList
+				horizontal
+				showsHorizontalScrollIndicator={false}
+				snapToInterval={ITEM_SIZE}
+				decelerationRate={0}
+				contentContainerStyle={{alignItems: 'center'}}
+				data={groupsData}
+				renderItem={({item, index}) => {
+					return (
+						<SelfItemComponent
+							{...item}
+							onPressInfo={onPressInfo}
+							style={
+								groupsData.length - 1 !== index && {
+									marginRight: 10,
+								}
+							}
+						/>
+					);
+				}}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginVertical: $size(10),
+	},
+
+	listHeader: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginHorizontal: $size(5),
+	},
+
+	title: {
+		fontSize: 16,
+		fontWeight: '600',
+	},
+
+	seeAll: {
+		fontSize: 14,
+		fontWeight: '300',
+	},
+});

src/modules/home/components/index.ts

@@ -0,0 +1,3 @@
+export * from './filter-search-header.component';
+export * from './horizontal-list.component';
+export * from './my-tasks-list.component';

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

@@ -0,0 +1,70 @@
+import {$size, FlatListItemComponent, getTheme} from '@/shared';
+import React, {FC} from 'react';
+import {StyleSheet, View, Text, TouchableOpacity, FlatList} from 'react-native';
+import {myTasksData} from '../mock/my-tasks-data.mock';
+
+interface IProps {
+	checkboxVal: boolean;
+	onPressCheckbox: () => void;
+}
+
+export const MyTasksListComponent: FC<IProps> = ({
+	checkboxVal,
+	onPressCheckbox,
+}) => {
+	return (
+		<View style={styles.container}>
+			<View style={styles.listHeader}>
+				<Text style={styles.title}>Моï задачi</Text>
+
+				<TouchableOpacity>
+					<Text style={styles.seeAll}>Дивитись усі</Text>
+				</TouchableOpacity>
+			</View>
+
+			<FlatList
+				data={myTasksData}
+				scrollEnabled={false}
+				contentContainerStyle={styles.listContainer}
+				renderItem={({item}) => {
+					return (
+						<FlatListItemComponent
+							{...item}
+							checkboxVal={checkboxVal}
+							onPressCheckbox={onPressCheckbox}
+						/>
+					);
+				}}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		marginBottom: $size(30),
+	},
+
+	listHeader: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		marginHorizontal: $size(5),
+		marginVertical: $size(20),
+	},
+
+	title: {
+		fontSize: 16,
+		fontWeight: '600',
+	},
+
+	seeAll: {
+		fontSize: 14,
+		fontWeight: '300',
+	},
+
+	listContainer: {
+		paddingTop: $size(20),
+		borderRadius: 20,
+		backgroundColor: getTheme().$white,
+	},
+});

src/modules/home/index.ts

@@ -0,0 +1 @@
+export * from './screens';

src/modules/home/mock/groups-data.mock.ts

@@ -0,0 +1,38 @@
+export const groupsData = [
+	{
+		title: 'Development',
+		info: '35 tasks',
+	},
+	{
+		title: 'Design',
+		info: '35 tasks',
+	},
+	{
+		title: 'Management',
+		info: '35 tasks',
+	},
+	{
+		title: 'Development',
+		info: '35 tasks',
+	},
+	{
+		title: 'Design',
+		info: '35 tasks',
+	},
+	{
+		title: 'Management',
+		info: '35 tasks',
+	},
+	{
+		title: 'Development',
+		info: '35 tasks',
+	},
+	{
+		title: 'Design',
+		info: '35 tasks',
+	},
+	{
+		title: 'Management',
+		info: '35 tasks',
+	},
+];

src/modules/home/mock/my-tasks-data.mock.ts

@@ -0,0 +1,282 @@
+export const myTasksData = [
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+	{
+		title: 'Створити план розвитку нашої компанії',
+		count: 1234,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Звіт за лютий',
+		count: 3,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: false,
+			chat: true,
+			star: false,
+		},
+	},
+	{
+		title: 'Створити дизайн',
+		count: 3123,
+		date: '21.03.2021',
+		userName: 'User',
+		imageUri: null,
+		icons: {
+			clip: true,
+			chat: true,
+			star: true,
+		},
+	},
+];

src/modules/home/screens/home.screen.tsx

@@ -0,0 +1,38 @@
+import React, {FC} from 'react';
+import {
+	FilterSearchHeaderComponent,
+	HorizontalListComponent,
+	MyTasksListComponent,
+} from '../components';
+import {FlatListItemComponent, ScreenLayout} from '@/shared';
+
+export const HomeScreen: FC = () => {
+	return (
+		<ScreenLayout needScroll>
+			<>
+				<FilterSearchHeaderComponent
+					searchString=""
+					onSearchValChange={() => {}}
+					onPressFilter={() => {}}
+				/>
+
+				<HorizontalListComponent
+					title="Групи"
+					onPressSeeAll={() => {}}
+					onPressInfo={() => {}}
+				/>
+
+				<HorizontalListComponent
+					title="Виконавцi"
+					onPressSeeAll={() => {}}
+					onPressInfo={() => {}}
+				/>
+
+				<MyTasksListComponent
+					checkboxVal={false}
+					onPressCheckbox={() => {}}
+				/>
+			</>
+		</ScreenLayout>
+	);
+};

src/modules/home/screens/index.ts

@@ -0,0 +1 @@
+export * from './home.screen';

src/modules/root/index.tsx

@@ -5,6 +5,7 @@ import {SignInScreen} from '../auth';
 import {TabBarSmart} from '@/modules/navigation/smart-component';
 import {LoadingScreen} from './screens';
 import {NoInternetConnectionScreen} from './screens/no-internet-connection.screen';
+import {HomeScreen} from '../home';
 
 console.log('useEventsListener', useEventsListener);
 
@@ -29,9 +30,10 @@ export const Navigation = () => {
 
 	return (
 		<>
+			<HomeScreen />
 			{/* <NoInternetConnectionScreen /> */}
 			{/* <LoadingScreen /> */}
-			<SignInScreen />
+			{/* <SignInScreen /> */}
 			<TabBarSmart />
 		</>
 	);

src/shared/components/elements/checkbox.component.tsx

@@ -0,0 +1,38 @@
+import {getTheme} from '@/shared/themes';
+import React, {FC} from 'react';
+import {StyleSheet, TouchableOpacity, ViewStyle} from 'react-native';
+import {IconComponent} from './icon.component';
+
+interface IProps {
+	value: boolean;
+	size: number;
+	containerStyle?: ViewStyle;
+	onPress: () => void;
+}
+
+export const CheckBox: FC<IProps> = ({
+	value,
+	size,
+	containerStyle,
+	onPress,
+}) => {
+	return (
+		<TouchableOpacity onPress={onPress} style={containerStyle}>
+			{value ? (
+				<IconComponent
+					name={'checksquare-1'}
+					size={size}
+					color={getTheme().icon.$activeColor}
+				/>
+			) : (
+				<IconComponent
+					name={'checksquare-1-1'}
+					size={size}
+					color={getTheme().icon.$defaultColor}
+				/>
+			)}
+		</TouchableOpacity>
+	);
+};
+
+const styles = StyleSheet.create({});

src/shared/components/elements/flat-list-item.component.tsx

@@ -0,0 +1,150 @@
+import {$size} from '@/shared/helpers';
+import {getTheme} from '@/shared/themes';
+import React, {FC} from 'react';
+import {Image, StyleSheet, View, Text} from 'react-native';
+import {CheckBox} from './checkbox.component';
+import {IconComponent} from './icon.component';
+
+interface IProps {
+	title: string;
+	count: number;
+	date: string;
+	userName?: string;
+	imageUri?: string;
+	checkboxVal?: boolean;
+	icons?: {
+		clip?: boolean;
+		chat?: boolean;
+		star?: boolean;
+	};
+	onPressCheckbox: () => void;
+}
+
+export const FlatListItemComponent: FC<IProps> = ({
+	title,
+	count,
+	date,
+	imageUri,
+	checkboxVal,
+	userName,
+	icons,
+	onPressCheckbox,
+}) => {
+	const tabBarIcons = ['paperclip-1', 'chat-2', 'vectorstar'];
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.iconWrap}>
+				{imageUri ? (
+					<Image source={{uri: imageUri}} />
+				) : (
+					<Text style={styles.noIcon}>{userName[0]}</Text>
+				)}
+			</View>
+
+			<View style={styles.contentWrap}>
+				<View style={styles.topBarWrap}>
+					<View style={styles.tabBarIcons}>
+						{tabBarIcons.map((item, i) => {
+							icons[i];
+							return (
+								<View key={`icon-${i}`}>
+									<IconComponent
+										name={item}
+										size={$size(16)}
+										color={getTheme().icon.$darkGray}
+										style={styles.tabBaIcon}
+									/>
+									{icons[i] && (
+										<View style={styles.indicator} />
+									)}
+								</View>
+							);
+						})}
+					</View>
+
+					<Text style={styles.count}>{`#${count}, ${date}`}</Text>
+				</View>
+
+				<Text style={[styles.title]}>{title}</Text>
+			</View>
+
+			<CheckBox
+				size={$size(19)}
+				value={checkboxVal}
+				containerStyle={styles.checkbox}
+				onPress={onPressCheckbox}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: '#fff',
+		flexDirection: 'row',
+		alignItems: 'center',
+	},
+
+	iconWrap: {
+		width: $size(35),
+		height: $size(35),
+		backgroundColor: getTheme().$layoutBg,
+		alignItems: 'center',
+		justifyContent: 'center',
+		borderRadius: 100,
+		margin: $size(20),
+		overflow: 'hidden',
+	},
+
+	noIcon: {
+		fontSize: 18,
+		fontWeight: '500',
+		color: getTheme().icon.$defaultColor,
+	},
+
+	contentWrap: {
+		paddingBottom: $size(3),
+	},
+
+	topBarWrap: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+
+	tabBarIcons: {
+		flexDirection: 'row',
+		marginRight: $size(20),
+	},
+
+	indicator: {
+		width: $size(6),
+		height: $size(6),
+		position: 'absolute',
+		bottom: $size(1),
+		right: $size(7),
+		backgroundColor: getTheme().$secondary,
+		borderColor: getTheme().$white,
+		borderWidth: 1,
+		borderRadius: 100,
+	},
+
+	tabBaIcon: {
+		marginRight: $size(7),
+	},
+
+	count: {
+		color: getTheme().icon.$darkGray,
+	},
+
+	title: {
+		fontSize: 16,
+		maxWidth: $size(200),
+		marginVertical: $size(6),
+	},
+
+	checkbox: {
+		position: 'absolute',
+		right: $size(24),
+	},
+});

src/shared/components/elements/icon.component.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
-import { createIconSetFromFontello } from 'react-native-vector-icons';
-import { fontelloConfig } from '@/config/fontello.config';
+import {createIconSetFromFontello} from 'react-native-vector-icons';
+import {fontelloConfig} from '@/config/fontello.config';
+import {ColorValue} from 'react-native';
 const Icon = createIconSetFromFontello(fontelloConfig);
 
 interface IProps {
-   name: string
-   size: number
-   color: string
-   style?: any
-   onPress?: () => void
+	name: string;
+	size: number;
+	color: ColorValue;
+	style?: any;
+	onPress?: () => void;
 }
 
 export const IconComponent = (props: IProps) => {
-   return (
-      <Icon
-         name={props.name}
-         size={props.size}
-         color={props.color}
-         style={props.style}
-         onPress={props.onPress}
-      />
-   )
-}
+	return (
+		<Icon
+			name={props.name}
+			size={props.size}
+			color={props.color}
+			style={props.style}
+			onPress={props.onPress}
+		/>
+	);
+};

src/shared/components/elements/index.ts

@@ -1,2 +1,6 @@
 export * from './txt.component';
-export * from './icon.component'
+export * from './icon.component';
+export * from './logo.component';
+export * from './self-item.component';
+export * from './flat-list-item.component';
+export * from './checkbox.component'

src/shared/components/elements/self-item.component.tsx

@@ -0,0 +1,106 @@
+import {$size} from '@/shared/helpers';
+import {getTheme} from '@/shared/themes';
+import React, {FC} from 'react';
+import {
+	StyleSheet,
+	View,
+	Text,
+	TouchableOpacity,
+	ViewStyle,
+	Image,
+} from 'react-native';
+import {IconComponent} from './icon.component';
+
+interface IProps {
+	title: string;
+	info: string;
+	imageUri?: string;
+	style?: ViewStyle;
+	onPressInfo: () => void;
+}
+
+export const SelfItemComponent: FC<IProps> = ({
+	title,
+	info,
+	style,
+	imageUri,
+	onPressInfo,
+}) => {
+	return (
+		<View style={[styles.container, style]}>
+			<View style={styles.iconWrap}>
+				{imageUri ? (
+					<Image source={{uri: imageUri}} style={styles.icon} />
+				) : (
+					<Text style={styles.noIcon}>{title[0]}</Text>
+				)}
+			</View>
+
+			<View style={styles.content}>
+				<Text style={styles.title}>{title}</Text>
+				<Text style={styles.info}>{info}</Text>
+			</View>
+
+			<TouchableOpacity onPress={onPressInfo} style={styles.infoBtnWrap}>
+				<IconComponent
+					name={'info'}
+					size={$size(20)}
+					color={getTheme().icon.$defaultColor}
+				/>
+			</TouchableOpacity>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		width: $size(335),
+		height: $size(80),
+		padding: $size(20),
+		backgroundColor: getTheme().$white,
+		marginVertical: $size(10),
+		borderRadius: 20,
+		alignItems: 'center',
+		flexDirection: 'row',
+	},
+
+	iconWrap: {
+		width: $size(50),
+		height: $size(50),
+		backgroundColor: getTheme().$layoutBg,
+		borderRadius: 100,
+		alignItems: 'center',
+		justifyContent: 'center',
+		overflow: 'hidden',
+	},
+
+	icon: {
+		width: $size(50),
+		height: $size(50),
+	},
+
+	noIcon: {
+		fontSize: 22,
+		color: getTheme().icon.$defaultColor,
+	},
+
+	content: {
+		marginLeft: $size(15),
+	},
+
+	title: {
+		fontSize: 16,
+		fontWeight: '500',
+	},
+
+	info: {
+		fontSize: 14,
+		fontWeight: '300',
+		marginLeft: $size(3),
+	},
+
+	infoBtnWrap: {
+		position: 'absolute',
+		right: $size(20),
+	},
+});

src/shared/themes/interfaces/colors.interface.ts

@@ -1,16 +1,21 @@
+import {ColorValue} from 'react-native';
+
 export interface Colors {
-	$primary: string;
-	$secondary: string;
+	$white: ColorValue;
+	$primary: ColorValue;
+	$secondary: ColorValue;
+
+	$success: ColorValue;
+	$successText: ColorValue;
 
-	$success: string;
-	$successText: string;
+	$error: ColorValue;
+	$errorText: ColorValue;
 
-	$error: string;
-	$errorText: string;
+	$warning: ColorValue;
 
-	$warning: string;
+	$layoutBg: ColorValue;
 
-	$layoutBg: string;
+	$border: ColorValue;
 
-	$textPrimary: string;
+	$textPrimary: ColorValue;
 }

src/shared/themes/interfaces/navigation.interface.ts

@@ -1,7 +1,8 @@
+import {ColorValue} from 'react-native';
 export interface NavigationColors {
-   tabBar: {
-      $activeIconColor: string;
-      $iconColor: string;
-      $shadowColor: string;
-   };
+	tabBar: {
+		$activeIconColor: ColorValue;
+		$iconColor: ColorValue;
+		$shadowColor: ColorValue;
+	};
 }

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

@@ -1,28 +1,37 @@
+import {ColorValue} from 'react-native';
 export interface ButtonsColors {
 	primaryBtn: {
-		$bg: string;
-		$text: string;
+		$bg: ColorValue;
+		$text: ColorValue;
 	};
 	borderBtn: {
-		$bg: string;
-		$text: string;
-		$borderColor: string
-	}
+		$bg: ColorValue;
+		$text: ColorValue;
+		$borderColor: ColorValue;
+	};
 }
 
 export interface InputColors {
 	iconInput: {
-		$icon: string;
-		$iconBg: string;
-		$placeholder: string;
-		$text: string;
+		$icon: ColorValue;
+		$iconBg: ColorValue;
+		$placeholder: ColorValue;
+		$text: ColorValue;
 	};
 
 	input: {
-		$icon: string;
-		$placeholder: string;
-		$text: string;
+		$icon: ColorValue;
+		$placeholder: ColorValue;
+		$text: ColorValue;
+	};
+}
+
+export interface IconColors {
+	icon: {
+		$defaultColor: ColorValue;
+		$darkGray: ColorValue
+		$activeColor: ColorValue;
 	};
 }
 
-export type SharedComponentsColors = ButtonsColors & InputColors;
+export type SharedComponentsColors = ButtonsColors & InputColors & IconColors;

src/shared/themes/light/colors.ts

@@ -1,6 +1,7 @@
-import { Colors } from '../interfaces/colors.interface';
+import {Colors} from '../interfaces/colors.interface';
 
 export const colors: Colors = {
+	$white: '#fff',
 	$primary: '#fbe4e7',
 	$secondary: 'rgba(222, 37, 59, 1)',
 
@@ -14,5 +15,7 @@ export const colors: Colors = {
 
 	$layoutBg: '#f8f8f8',
 
+	$border: '#EAEAEA',
+
 	$textPrimary: '#000',
 };

src/shared/themes/light/navigation.ts

@@ -1,9 +1,10 @@
-import { NavigationColors } from "../interfaces/navigation.interface";
+import {sharedComponentsColors} from './shared-components';
+import {NavigationColors} from '../interfaces/navigation.interface';
 
 export const navigation: NavigationColors = {
 	tabBar: {
-		$activeIconColor: '#DE253B',
-		$iconColor: '#B2B3B7',
-		$shadowColor: 'rgba(221, 37, 59, 0.35)'
-	}
+		$iconColor: sharedComponentsColors.icon.$defaultColor,
+		$activeIconColor: sharedComponentsColors.icon.$activeColor,
+		$shadowColor: 'rgba(221, 37, 59, 0.35)',
+	},
 };

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

@@ -1,5 +1,5 @@
-import { SharedComponentsColors } from '../interfaces/shared-components.interface';
-import { colors } from './colors';
+import {SharedComponentsColors} from '../interfaces/shared-components.interface';
+import {colors} from './colors';
 
 export const sharedComponentsColors: SharedComponentsColors = {
 	primaryBtn: {
@@ -23,4 +23,10 @@ export const sharedComponentsColors: SharedComponentsColors = {
 		$placeholder: '',
 		$text: '',
 	},
+
+	icon: {
+		$defaultColor: '#B2B3B7',
+		$darkGray: '#7F7F7F',
+		$activeColor: '#DE253B',
+	},
 };