From 840e144e48fe90b33ce9ab713ca02a696887b8ea Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 3 May 2021 10:18:00 -0700 Subject: tma-822-base changes --- src/assets/images/no_chats.png | Bin 0 -> 28760 bytes src/assets/images/no_chats@2x.png | Bin 0 -> 12709 bytes src/assets/images/no_chats@3x.png | Bin 0 -> 46139 bytes src/constants/strings.ts | 2 + src/screens/chat/ChatListScreen.tsx | 4 + src/screens/main/NotificationsScreen.tsx | 2 +- .../main/notification/EmptyNotificationView.tsx | 105 ++++++++++++++++++--- src/types/types.ts | 3 + 8 files changed, 103 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/no_chats.png create mode 100644 src/assets/images/no_chats@2x.png create mode 100644 src/assets/images/no_chats@3x.png (limited to 'src') diff --git a/src/assets/images/no_chats.png b/src/assets/images/no_chats.png new file mode 100644 index 00000000..4e321f17 Binary files /dev/null and b/src/assets/images/no_chats.png differ diff --git a/src/assets/images/no_chats@2x.png b/src/assets/images/no_chats@2x.png new file mode 100644 index 00000000..d906df09 Binary files /dev/null and b/src/assets/images/no_chats@2x.png differ diff --git a/src/assets/images/no_chats@3x.png b/src/assets/images/no_chats@3x.png new file mode 100644 index 00000000..f0f05c7b Binary files /dev/null and b/src/assets/images/no_chats@3x.png differ diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 50e4518b..e8f2725d 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -56,6 +56,8 @@ export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry'; export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture"; export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!'; export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; +export const FIRST_MESSAGE = 'How about sending your first message to your friend'; +export const START_CHATTING = 'Let’s Start Chatting!'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index d2cfcb5d..810ebdb2 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -9,6 +9,7 @@ import {TabsGradient} from '../../components'; import {ChannelPreview, MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; +import EmptyNotificationView from '../../screens/main/notification/EmptyNotificationView'; import { LocalAttachmentType, LocalChannelType, @@ -99,6 +100,9 @@ const ChatListScreen: React.FC = () => { sort={{last_message_at: -1}} maxUnreadCount={99} Preview={ChannelPreview} + EmptyStateIndicator={() => { + return ; + }} /> diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 3efd9af8..06a61f04 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -304,7 +304,7 @@ const NotificationsScreen: React.FC = () => { extraData={requestLimit} ListEmptyComponent={ - + } /> diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index f43cfb2a..b80bb203 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -1,12 +1,19 @@ import React from 'react'; import {Image, Text, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; +import { + UP_TO_DATE, + NO_NEW_NOTIFICATIONS, + FIRST_MESSAGE, + START_CHATTING, +} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; -import {SCREEN_HEIGHT, normalize} from '../../../utils'; -const EmptyNotificationView: React.FC = () => { - return ( - +import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../../utils'; +import {EmptyViewProps} from '../../../types/index'; + +const EmptyNotificationView: React.FC = ({viewType}) => { + const _getNotificationImage = () => { + return ( { source={require('../../../assets/images/empty_notifications.png')} /> - - {UP_TO_DATE} - - - {NO_NEW_NOTIFICATIONS} + ); + }; + + const _getChatImage = () => { + return ( + + + + ); + }; + + const _getImageForType = () => { + switch (viewType) { + case 'Notification': + return _getNotificationImage(); + case 'ChatList': + return _getChatImage(); + } + }; + + const _getTextForNotification = () => { + return ( + <> + + {UP_TO_DATE} + + + {NO_NEW_NOTIFICATIONS} + + + ); + }; + + const _getTextForChat = () => { + return ( + + + {START_CHATTING} + + + {FIRST_MESSAGE} + + ); + }; + + const _getTextForType = () => { + switch (viewType) { + case 'Notification': + return _getTextForNotification(); + case 'ChatList': + return _getTextForChat(); + } + }; + + return ( + + {_getImageForType()} + {_getTextForType()} ); }; const styles = StyleSheet.create({ - container: {alignItems: 'center'}, + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, upperTextStyle: { + textAlign: 'center', fontWeight: '700', fontSize: normalize(23), lineHeight: normalize(40), }, + chatTextStyles: { + width: '85%', + }, bottomTextStyle: { + textAlign: 'center', color: '#2D3B45', fontWeight: '600', fontSize: normalize(20), lineHeight: normalize(40), }, + imageStyles: { + width: SCREEN_WIDTH * 0.72, + height: SCREEN_WIDTH * 0.72, + }, backgroundLinearView: { - borderRadius: 135.5, + borderRadius: (SCREEN_WIDTH * 0.72) / 2, }, }); diff --git a/src/types/types.ts b/src/types/types.ts index e7f651dc..ce39947c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -23,6 +23,9 @@ export interface CategoryPreviewType { } export type FriendshipStatusType = 'friends' | 'requested' | 'no_record'; +export interface EmptyViewProps { + viewType: 'Notification' | 'ChatList'; +} export enum UniversityType { Brown = 'Brown University', -- cgit v1.2.3-70-g09d2 From ef2c8f57971b6ca55a6a3ef58609b0c80fe55869 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 3 May 2021 10:23:01 -0700 Subject: tma-822-base UI changes --- src/components/common/EmptyContentView.tsx | 129 +++++++++++++++++++++ src/screens/chat/ChatListScreen.tsx | 4 +- src/screens/main/NotificationsScreen.tsx | 4 +- .../main/notification/EmptyNotificationView.tsx | 129 --------------------- 4 files changed, 133 insertions(+), 133 deletions(-) create mode 100644 src/components/common/EmptyContentView.tsx delete mode 100644 src/screens/main/notification/EmptyNotificationView.tsx (limited to 'src') diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx new file mode 100644 index 00000000..1416c556 --- /dev/null +++ b/src/components/common/EmptyContentView.tsx @@ -0,0 +1,129 @@ +import React from 'react'; +import {Image, Text, StyleSheet, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import { + UP_TO_DATE, + NO_NEW_NOTIFICATIONS, + FIRST_MESSAGE, + START_CHATTING, +} from '../../constants/strings'; +import {NOTIFICATION_GRADIENT} from '../../constants/constants'; +import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../utils'; +import {EmptyViewProps} from '../../types/index'; + +const EmptyNotificationView: React.FC = ({viewType}) => { + const _getNotificationImage = () => { + return ( + + + + ); + }; + + const _getChatImage = () => { + return ( + + + + ); + }; + + const _getImageForType = () => { + switch (viewType) { + case 'Notification': + return _getNotificationImage(); + case 'ChatList': + return _getChatImage(); + } + }; + + const _getTextForNotification = () => { + return ( + <> + + {UP_TO_DATE} + + + {NO_NEW_NOTIFICATIONS} + + + ); + }; + + const _getTextForChat = () => { + return ( + + + {START_CHATTING} + + + {FIRST_MESSAGE} + + + ); + }; + + const _getTextForType = () => { + switch (viewType) { + case 'Notification': + return _getTextForNotification(); + case 'ChatList': + return _getTextForChat(); + } + }; + + return ( + + {_getImageForType()} + {_getTextForType()} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, + upperTextStyle: { + textAlign: 'center', + fontWeight: '700', + fontSize: normalize(23), + lineHeight: normalize(40), + }, + chatTextStyles: { + width: '85%', + }, + bottomTextStyle: { + textAlign: 'center', + color: '#2D3B45', + fontWeight: '600', + fontSize: normalize(20), + lineHeight: normalize(40), + }, + imageStyles: { + width: SCREEN_WIDTH * 0.72, + height: SCREEN_WIDTH * 0.72, + }, + backgroundLinearView: { + borderRadius: (SCREEN_WIDTH * 0.72) / 2, + }, +}); + +export default EmptyNotificationView; diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx index 810ebdb2..1df5c2da 100644 --- a/src/screens/chat/ChatListScreen.tsx +++ b/src/screens/chat/ChatListScreen.tsx @@ -9,7 +9,7 @@ import {TabsGradient} from '../../components'; import {ChannelPreview, MessagesHeader} from '../../components/messages'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootReducer'; -import EmptyNotificationView from '../../screens/main/notification/EmptyNotificationView'; +import EmptyContentView from '../../components/common/EmptyContentView'; import { LocalAttachmentType, LocalChannelType, @@ -101,7 +101,7 @@ const ChatListScreen: React.FC = () => { maxUnreadCount={99} Preview={ChannelPreview} EmptyStateIndicator={() => { - return ; + return ; }} /> diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 06a61f04..9fbc4cfe 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -28,7 +28,7 @@ import { import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; import {getDateAge, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import EmptyNotificationView from './notification/EmptyNotificationView'; +import EmptyContentView from '../../components/common/EmptyContentView'; const NotificationsScreen: React.FC = () => { const {newNotificationReceived} = useSelector( @@ -304,7 +304,7 @@ const NotificationsScreen: React.FC = () => { extraData={requestLimit} ListEmptyComponent={ - + } /> diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx deleted file mode 100644 index b80bb203..00000000 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react'; -import {Image, Text, StyleSheet, View} from 'react-native'; -import LinearGradient from 'react-native-linear-gradient'; -import { - UP_TO_DATE, - NO_NEW_NOTIFICATIONS, - FIRST_MESSAGE, - START_CHATTING, -} from '../../../constants/strings'; -import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; -import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../../utils'; -import {EmptyViewProps} from '../../../types/index'; - -const EmptyNotificationView: React.FC = ({viewType}) => { - const _getNotificationImage = () => { - return ( - - - - ); - }; - - const _getChatImage = () => { - return ( - - - - ); - }; - - const _getImageForType = () => { - switch (viewType) { - case 'Notification': - return _getNotificationImage(); - case 'ChatList': - return _getChatImage(); - } - }; - - const _getTextForNotification = () => { - return ( - <> - - {UP_TO_DATE} - - - {NO_NEW_NOTIFICATIONS} - - - ); - }; - - const _getTextForChat = () => { - return ( - - - {START_CHATTING} - - - {FIRST_MESSAGE} - - - ); - }; - - const _getTextForType = () => { - switch (viewType) { - case 'Notification': - return _getTextForNotification(); - case 'ChatList': - return _getTextForChat(); - } - }; - - return ( - - {_getImageForType()} - {_getTextForType()} - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - }, - topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, - upperTextStyle: { - textAlign: 'center', - fontWeight: '700', - fontSize: normalize(23), - lineHeight: normalize(40), - }, - chatTextStyles: { - width: '85%', - }, - bottomTextStyle: { - textAlign: 'center', - color: '#2D3B45', - fontWeight: '600', - fontSize: normalize(20), - lineHeight: normalize(40), - }, - imageStyles: { - width: SCREEN_WIDTH * 0.72, - height: SCREEN_WIDTH * 0.72, - }, - backgroundLinearView: { - borderRadius: (SCREEN_WIDTH * 0.72) / 2, - }, -}); - -export default EmptyNotificationView; -- cgit v1.2.3-70-g09d2 From 2abe11e6b231410c7bd531adabfe9158109411cb Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 3 May 2021 12:16:35 -0700 Subject: File name changes --- src/components/common/EmptyContentView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx index 1416c556..e3aaf621 100644 --- a/src/components/common/EmptyContentView.tsx +++ b/src/components/common/EmptyContentView.tsx @@ -11,7 +11,7 @@ import {NOTIFICATION_GRADIENT} from '../../constants/constants'; import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../utils'; import {EmptyViewProps} from '../../types/index'; -const EmptyNotificationView: React.FC = ({viewType}) => { +const EmptyContentView: React.FC = ({viewType}) => { const _getNotificationImage = () => { return ( Date: Tue, 4 May 2021 07:45:08 -0700 Subject: style to look more like figma --- src/components/common/EmptyContentView.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx index e3aaf621..14ad4af1 100644 --- a/src/components/common/EmptyContentView.tsx +++ b/src/components/common/EmptyContentView.tsx @@ -100,7 +100,10 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, - topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, + topMargin: { + marginTop: SCREEN_HEIGHT * 0.025, + paddingBottom: '5%', + }, upperTextStyle: { textAlign: 'center', fontWeight: '700', @@ -112,10 +115,10 @@ const styles = StyleSheet.create({ }, bottomTextStyle: { textAlign: 'center', - color: '#2D3B45', + color: '#808080', fontWeight: '600', fontSize: normalize(20), - lineHeight: normalize(40), + lineHeight: normalize(30), }, imageStyles: { width: SCREEN_WIDTH * 0.72, -- cgit v1.2.3-70-g09d2