nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 00:50:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

change messenger styling

Browse Source
This commit is contained in:
dank074 2021-12-11 17:00:38 -06:00
parent e933e0f677
commit b5ef9abac8
6 changed files with 134 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -14,7 +14,7 @@
"@nitrots/nitro-renderer": "file:../nitro-renderer", "@nitrots/nitro-renderer": "file:../nitro-renderer",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"node-sass": "^5.0.0", "node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-bootstrap": "^2.0.0-alpha.2", "react-bootstrap": "^2.0.0-alpha.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",

15
public/renderer-config.json
View File

@ -101,20 +101,7 @@
"elephants" "elephants"
], ],
"preload.assets.urls": [ "preload.assets.urls": [
"${images.url}/additions/user_blowkiss.png", "${asset.url}/bundled/generic/avatar_additions.nitro",
"${images.url}/additions/user_idle_left_1.png",
"${images.url}/additions/user_idle_left_2.png",
"${images.url}/additions/user_idle_right_1.png",
"${images.url}/additions/user_idle_right_2.png",
"${images.url}/additions/user_muted.png",
"${images.url}/additions/user_muted_small.png",
"${images.url}/additions/user_typing.png",
"${images.url}/additions/number_1.png",
"${images.url}/additions/number_2.png",
"${images.url}/additions/number_3.png",
"${images.url}/additions/number_4.png",
"${images.url}/additions/number_5.png",
"${images.url}/additions/pet_experience_bubble.png",
"${images.url}/loading_icon.png", "${images.url}/loading_icon.png",
"${images.url}/clear_icon.png", "${images.url}/clear_icon.png",
"${images.url}/big_arrow.png" "${images.url}/big_arrow.png"

3
src/App.scss
View File

@ -56,6 +56,9 @@ $help-height: 450px;
$nitropedia-width: 400px; $nitropedia-width: 400px;
$nitropedia-height: 400px; $nitropedia-height: 400px;
$messenger-width: 500px;
$messenger-height: 370px;
.nitro-app { .nitro-app {
width: 100%; width: 100%;
height: 100%; height: 100%;

17
src/views/friends/common/MessengerThread.ts
View File

@ -12,20 +12,20 @@ export class MessengerThread
private _participant: MessengerFriend; private _participant: MessengerFriend;
private _groups: MessengerThreadChatGroup[]; private _groups: MessengerThreadChatGroup[];
private _lastUpdated: Date; private _lastUpdated: Date;
private _unread: boolean; private _unreadCount: number;
constructor(participant: MessengerFriend, isNew: boolean = true) constructor(participant: MessengerFriend, isNew: boolean = true)
{ {
this._participant = participant; this._participant = participant;
this._groups = []; this._groups = [];
this._lastUpdated = new Date(); this._lastUpdated = new Date();
this._unread = false; this._unreadCount = 0;
if(isNew) if(isNew)
{ {
this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION); this.addMessage(null, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
this._unread = false; this._unreadCount = 0;
} }
} }
@ -45,7 +45,7 @@ export class MessengerThread
group.addChat(chat); group.addChat(chat);
this._lastUpdated = new Date(); this._lastUpdated = new Date();
this._unread = true; this._unreadCount++;
return chat; return chat;
} }
@ -65,7 +65,7 @@ export class MessengerThread
public setRead(): void public setRead(): void
{ {
this._unread = false; this._unreadCount = 0;
} }
public get participant(): MessengerFriend public get participant(): MessengerFriend
@ -83,8 +83,13 @@ export class MessengerThread
return this._lastUpdated; return this._lastUpdated;
} }
public get unreadCount(): number
{
return this._unreadCount;
}
public get unread(): boolean public get unread(): boolean
{ {
return this._unread; return this._unreadCount > 0;
} }
} }

35
src/views/friends/views/messenger/FriendsMessengerView.scss
View File

@ -1,24 +1,27 @@
.nitro-friends-messenger { .nitro-friends-messenger {
width: 280px; width: $messenger-width;
resize: both; height: $messenger-height;
.friend-head { .open-chat-entry {
position: relative; position: relative;
width: 40px; border: 2px solid;
height: 40px; border-color: $light;
overflow: hidden;
.icon { &.active {
position: absolute; border-color: #fffde9;
top: 1px; background-color: #ececec
right: 1px;
z-index: 10;
} }
.avatar-image { .friend-head {
position: absolute; width: 45px;
margin-left: -27px; height: 45px;
margin-top: -27px; overflow: hidden;
.avatar-image {
position: absolute;
margin-left: -27px;
margin-top: -27px;
}
} }
} }
@ -27,8 +30,6 @@
} }
.chat-messages { .chat-messages {
height: 200px;
min-height: 200px;
overflow-y: auto; overflow-y: auto;
.message-avatar { .message-avatar {

189
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -4,10 +4,11 @@ import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeTex
import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound'; import { MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound } from '../../../../api/utils/PlaySound';
import { FriendsMessengerIconEvent } from '../../../../events'; import { FriendsMessengerIconEvent } from '../../../../events';
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base'; import { NitroLayoutBase } from '../../../../layout/base';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { ItemCountView } from '../../../shared/item-count/ItemCountView';
import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat'; import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { useFriendsContext } from '../../context/FriendsContext'; import { useFriendsContext } from '../../context/FriendsContext';
@ -15,41 +16,41 @@ import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessenger
export const FriendsMessengerView: FC<{}> = props => export const FriendsMessengerView: FC<{}> = props =>
{ {
const [ isVisible, setIsVisible ] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [ messageThreads, setMessageThreads ] = useState<MessengerThread[]>([]); const [messageThreads, setMessageThreads] = useState<MessengerThread[]>([]);
const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1); const [activeThreadIndex, setActiveThreadIndex] = useState(-1);
const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState<number[]>([]); const [hiddenThreadIndexes, setHiddenThreadIndexes] = useState<number[]>([]);
const [ messageText, setMessageText ] = useState(''); const [messageText, setMessageText] = useState('');
const [ updateValue, setUpdateValue ] = useState({}); const [updateValue, setUpdateValue] = useState({});
const { friends = [] } = useFriendsContext(); const { friends = [] } = useFriendsContext();
const messagesBox = useRef<HTMLDivElement>(); const messagesBox = useRef<HTMLDivElement>();
const followFriend = useCallback(() => const followFriend = useCallback(() =>
{ {
SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id)); SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id));
}, [ messageThreads, activeThreadIndex ]); }, [messageThreads, activeThreadIndex]);
const openProfile = useCallback(() => const openProfile = useCallback(() =>
{ {
GetUserProfile(messageThreads[activeThreadIndex].participant.id); GetUserProfile(messageThreads[activeThreadIndex].participant.id);
}, [ messageThreads, activeThreadIndex ]); }, [messageThreads, activeThreadIndex]);
const getFriend = useCallback((userId: number) => const getFriend = useCallback((userId: number) =>
{ {
return ((friends.find(friend => (friend.id === userId))) || null); return ((friends.find(friend => (friend.id === userId))) || null);
}, [ friends ]); }, [friends]);
const visibleThreads = useMemo(() => const visibleThreads = useMemo(() =>
{ {
return messageThreads.filter((thread, index) => return messageThreads.filter((thread, index) =>
{ {
if(hiddenThreadIndexes.indexOf(index) >= 0) return false; if(hiddenThreadIndexes.indexOf(index) >= 0) return false;
return true; return true;
}); });
}, [ messageThreads, hiddenThreadIndexes ]); }, [messageThreads, hiddenThreadIndexes]);
const getMessageThreadWithIndex = useCallback<(userId: number) => [ number, MessengerThread ]>((userId: number) => const getMessageThreadWithIndex = useCallback<(userId: number) => [number, MessengerThread]>((userId: number) =>
{ {
if(messageThreads.length > 0) if(messageThreads.length > 0)
{ {
@ -64,43 +65,43 @@ export const FriendsMessengerView: FC<{}> = props =>
if(hiddenIndex >= 0) if(hiddenIndex >= 0)
{ {
setHiddenThreadIndexes(prevValue => setHiddenThreadIndexes(prevValue =>
{ {
const newIndexes = [ ...prevValue ]; const newIndexes = [...prevValue];
newIndexes.splice(hiddenIndex, 1); newIndexes.splice(hiddenIndex, 1);
return newIndexes; return newIndexes;
}); });
} }
return [ i, thread ]; return [i, thread];
} }
} }
} }
const friend = getFriend(userId); const friend = getFriend(userId);
if(!friend) return [ -1, null ]; if(!friend) return [-1, null];
const thread = new MessengerThread(friend); const thread = new MessengerThread(friend);
const newThreads = [ ...messageThreads, thread ]; const newThreads = [...messageThreads, thread];
setMessageThreads(newThreads); setMessageThreads(newThreads);
return [ (newThreads.length - 1), thread ]; return [(newThreads.length - 1), thread];
}, [ messageThreads, hiddenThreadIndexes, getFriend ]); }, [messageThreads, hiddenThreadIndexes, getFriend]);
const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) => const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();
const [ threadIndex, thread ] = getMessageThreadWithIndex(parser.senderId); const [threadIndex, thread] = getMessageThreadWithIndex(parser.senderId);
if((threadIndex === -1) || !thread) return; if((threadIndex === -1) || !thread) return;
thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData); thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData);
setMessageThreads(prevValue => [ ...prevValue ]); setMessageThreads(prevValue => [...prevValue]);
}, [ getMessageThreadWithIndex ]); }, [getMessageThreadWithIndex]);
CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent); CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
@ -122,17 +123,17 @@ export const FriendsMessengerView: FC<{}> = props =>
BatchUpdates(() => BatchUpdates(() =>
{ {
setMessageThreads(prevValue => [ ...prevValue ]); setMessageThreads(prevValue => [...prevValue]);
setMessageText(''); setMessageText('');
}); });
}, [ messageThreads, activeThreadIndex, messageText ]); }, [messageThreads, activeThreadIndex, messageText]);
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
{ {
if(event.key !== 'Enter') return; if(event.key !== 'Enter') return;
sendMessage(); sendMessage();
}, [ sendMessage ]); }, [sendMessage]);
const linkReceived = useCallback((url: string) => const linkReceived = useCallback((url: string) =>
{ {
@ -147,7 +148,7 @@ export const FriendsMessengerView: FC<{}> = props =>
return; return;
} }
const [ threadIndex ] = getMessageThreadWithIndex(parseInt(parts[2])); const [threadIndex] = getMessageThreadWithIndex(parseInt(parts[2]));
if(threadIndex === -1) return; if(threadIndex === -1) return;
@ -156,18 +157,18 @@ export const FriendsMessengerView: FC<{}> = props =>
setActiveThreadIndex(threadIndex); setActiveThreadIndex(threadIndex);
setIsVisible(true); setIsVisible(true);
}); });
}, [ getMessageThreadWithIndex ]); }, [getMessageThreadWithIndex]);
const closeThread = useCallback((threadIndex: number) => const closeThread = useCallback((threadIndex: number) =>
{ {
setHiddenThreadIndexes(prevValue => setHiddenThreadIndexes(prevValue =>
{ {
const values = [ ...prevValue ]; const values = [...prevValue];
if(values.indexOf(threadIndex) === -1) values.push(threadIndex); if(values.indexOf(threadIndex) === -1) values.push(threadIndex);
return values; return values;
}); });
}, []); }, []);
useEffect(() => useEffect(() =>
@ -180,19 +181,19 @@ export const FriendsMessengerView: FC<{}> = props =>
AddEventLinkTracker(linkTracker); AddEventLinkTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker); return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived ]); }, [linkReceived]);
useEffect(() => useEffect(() =>
{ {
if(!isVisible) return; if(!isVisible) return;
if(activeThreadIndex === -1) setActiveThreadIndex(0); if(activeThreadIndex === -1) setActiveThreadIndex(0);
}, [ isVisible, activeThreadIndex ]); }, [isVisible, activeThreadIndex]);
useEffect(() => useEffect(() =>
{ {
if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0); if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0);
}, [ activeThreadIndex, hiddenThreadIndexes ]); }, [activeThreadIndex, hiddenThreadIndexes]);
useEffect(() => useEffect(() =>
{ {
@ -206,7 +207,7 @@ export const FriendsMessengerView: FC<{}> = props =>
activeThread.setRead(); activeThread.setRead();
setUpdateValue({}); setUpdateValue({});
} }
}, [ isVisible, messageThreads, activeThreadIndex ]); }, [isVisible, messageThreads, activeThreadIndex]);
useEffect(() => useEffect(() =>
{ {
@ -223,7 +224,7 @@ export const FriendsMessengerView: FC<{}> = props =>
for(const thread of visibleThreads) for(const thread of visibleThreads)
{ {
if(thread.unread) if(thread.unreadCount > 0)
{ {
isUnread = true; isUnread = true;
@ -234,65 +235,71 @@ export const FriendsMessengerView: FC<{}> = props =>
if(isUnread) PlaySound(MESSENGER_MESSAGE_RECEIVED); if(isUnread) PlaySound(MESSENGER_MESSAGE_RECEIVED);
dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON)); dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON));
}, [ visibleThreads, updateValue ]); }, [visibleThreads, updateValue]);
if(!isVisible) return null; if(!isVisible) return null;
return ( return (
<NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={ true }> <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" simple={true}>
<NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } /> <NitroCardHeaderView headerText={LocalizeText('messenger.window.title', ['OPEN_CHAT_COUNT'], [visibleThreads.length.toString()])} onCloseClick={event => setIsVisible(false)} />
<NitroCardContentView> <NitroCardContentView>
<NitroLayoutFlex gap={ 2 } overflow="auto"> <NitroLayoutGrid>
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) => <NitroLayoutGridColumn size={ 4 }>
<NitroLayoutBase className='text-black fw-bold fs-5'>{LocalizeText('toolbar.icon.label.messenger')}</NitroLayoutBase>
<NitroLayoutFlexColumn className='h-100 overflow-auto'>
{visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
{ {
const messageThreadIndex = messageThreads.indexOf(thread); const messageThreadIndex = messageThreads.indexOf(thread);
return ( return (
<div key={ index } className="position-relative friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }> <NitroLayoutFlex key={index} className={`open-chat-entry p-1 cursor-pointer rounded ${activeThreadIndex === messageThreadIndex ? 'active' : ''}`} onClick={event => setActiveThreadIndex(messageThreadIndex)}>
{ thread.unread && {thread.unread &&
<NitroLayoutBase className="position-absolute nitro-friends-spritesheet icon-new-message top-1 end-1 z-index-1" /> } <ItemCountView count={ thread.unreadCount }/>
{ thread.participant.id > 0 && <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />} }
{ thread.participant.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={thread.participant.figure } /> } <div className="friend-head rounded flex-shrink-0">
</div> {thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
{thread.participant.id <= 0 && <BadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
</div>
<NitroLayoutBase className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</NitroLayoutBase>
</NitroLayoutFlex>
); );
}) } })}
</NitroLayoutFlex>
<NitroLayoutFlex className="align-items-center my-1" position="relative">
{ (activeThreadIndex >= 0) &&
<NitroLayoutBase className="text-black bg-light pe-2 flex-none">
{ LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }
</NitroLayoutBase> }
<hr className="bg-dark m-0 w-100" />
</NitroLayoutFlex>
{ (activeThreadIndex >= 0) &&
<>
<NitroLayoutFlex className="mb-2" gap={ 2 }>
<NitroLayoutButtonGroup>
<NitroLayoutButton variant="primary" size="sm" onClick={ followFriend }>
<NitroLayoutBase className="nitro-friends-spritesheet icon-follow" />
</NitroLayoutButton>
<NitroLayoutButton variant="primary" size="sm" onClick={ openProfile }>
<NitroLayoutBase className="nitro-friends-spritesheet icon-profile-sm" />
</NitroLayoutButton>
</NitroLayoutButtonGroup>
<NitroLayoutButton variant="danger" size="sm" onClick={ openProfile }>
{ LocalizeText('messenger.window.button.report') }
</NitroLayoutButton>
<NitroLayoutButton className="ms-auto" variant="primary" size="sm" onClick={ event => closeThread(activeThreadIndex) }>
<NitroLayoutBase className="fas fa-times" />
</NitroLayoutButton>
</NitroLayoutFlex>
<NitroLayoutFlexColumn innerRef={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2">
<FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } />
</NitroLayoutFlexColumn> </NitroLayoutFlexColumn>
<NitroLayoutFlex gap={ 2 }> </NitroLayoutGridColumn>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } /> <NitroLayoutGridColumn size={ 8 }>
<NitroLayoutButton variant="success" size="sm" onClick={ sendMessage }> {(activeThreadIndex >= 0) &&
{ LocalizeText('widgets.chatinput.say') } <>
</NitroLayoutButton> <NitroLayoutBase className='mb-2 text-black text-center fw-bold fs-6'>{LocalizeText('messenger.window.separator', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])}</NitroLayoutBase>
</NitroLayoutFlex> <NitroLayoutFlex className="mb-2" gap={2}>
</> } <NitroLayoutButtonGroup>
<NitroLayoutButton variant="primary" size="sm" onClick={followFriend}>
<NitroLayoutBase className="nitro-friends-spritesheet icon-follow" />
</NitroLayoutButton>
<NitroLayoutButton variant="primary" size="sm" onClick={openProfile}>
<NitroLayoutBase className="nitro-friends-spritesheet icon-profile-sm" />
</NitroLayoutButton>
</NitroLayoutButtonGroup>
<NitroLayoutButton variant="danger" size="sm" onClick={openProfile}>
{LocalizeText('messenger.window.button.report')}
</NitroLayoutButton>
<NitroLayoutButton className="ms-auto" variant="primary" size="sm" onClick={event => closeThread(activeThreadIndex)}>
<NitroLayoutBase className="fas fa-times" />
</NitroLayoutButton>
</NitroLayoutFlex>
<NitroLayoutFlexColumn innerRef={messagesBox} className="bg-muted p-2 rounded chat-messages mb-2 h-100 w-100">
<FriendsMessengerThreadView thread={messageThreads[activeThreadIndex]} />
</NitroLayoutFlexColumn>
<NitroLayoutFlex gap={2}>
<input type="text" className="form-control form-control-sm" placeholder={LocalizeText('messenger.window.input.default', ['FRIEND_NAME'], [messageThreads[activeThreadIndex].participant.name])} value={messageText} onChange={event => setMessageText(event.target.value)} onKeyDown={onKeyDown} />
<NitroLayoutButton variant="success" size="sm" onClick={sendMessage}>
{LocalizeText('widgets.chatinput.say')}
</NitroLayoutButton>
</NitroLayoutFlex>
</>}
</NitroLayoutGridColumn>
</NitroLayoutGrid>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );