pearce-screen-cards #4
@ -10,6 +10,9 @@ type RequestApprovalProps = {
|
||||
unreadCount?: number;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const RequestApprovalElement = ({
|
||||
element,
|
||||
children,
|
||||
@ -18,12 +21,29 @@ const RequestApprovalElement = ({
|
||||
const { id, icon, messageId } = element;
|
||||
const message = useAppSelector((state) => getMessage(state, messageId));
|
||||
|
||||
|
||||
const getMessageText = () =>{
|
||||
|
||||
|
||||
// console.log("I am being fired!")
|
||||
/*@ts-ignore*/
|
||||
if(message.kind == 'RequestApprovalToAttack') {
|
||||
return 'Request to Attack'
|
||||
|
||||
}
|
||||
/*@ts-ignore*/
|
||||
// else if(message.kind == 'MissileToOwnshipDetected'){
|
||||
// return 'Missile Incoming'
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
const renderUnreadCount = () => {
|
||||
if (unreadCount && unreadCount > 0) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-full bg-white w-[35px] h-[35px] text-[#252526] flex
|
||||
items-center justify-center text-lg"
|
||||
items-center justify-center text-lg rounded-full"
|
||||
>
|
||||
{unreadCount}
|
||||
</div>
|
||||
@ -34,12 +54,24 @@ const RequestApprovalElement = ({
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className="flex text-white justify-between items-center gap-4 pr-4"
|
||||
className="flex text-white justify-between items-center gap-4 pr-4 rounded-full"
|
||||
>
|
||||
<div className="flex space-between items-center justify-center gap-4">
|
||||
<IconElement element={icon} />
|
||||
{/* @ts-ignore */}
|
||||
<span>{message?.data?.target?.type}</span>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex space-between items-center justify-center gap-4 rounded-full">
|
||||
<div className="flex">
|
||||
<IconElement element={icon} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* @ts-ignore */}
|
||||
<span className ="text-[24px]">{message?.data?.target?.type}</span>
|
||||
<div className="flex flex-col text-sm text-[#BCBCBC] text-[20px] pb-2">
|
||||
<div>{getMessageText()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{renderUnreadCount()}
|
||||
|
@ -247,6 +247,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: '#97979D #e0e0e0',
|
||||
scrollbarGutter: 'stable',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{convoElements.map((element, index) => {
|
||||
@ -262,7 +263,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
// style for active element (element due to which the history widget is open)
|
||||
const activeElementStyle =
|
||||
element.id === selectedElement?.id
|
||||
? 'bg-[#444449] text-[28px] font-medium border-4 border-white'
|
||||
? 'bg-[#444449] text-[28px] font-medium border-4 border-white p-0'
|
||||
: '';
|
||||
|
||||
const numUnreadMessages =
|
||||
@ -272,12 +273,12 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
<div
|
||||
id={element.id}
|
||||
key={element.id}
|
||||
style={{ height: LIST_ELEMENT_HEIGHT }}
|
||||
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${hoverStyle} ${activeElementStyle}`}
|
||||
style={{ height: LIST_ELEMENT_HEIGHT, width: 340 }}
|
||||
className={`text-white flex items-center justify-center p-3 rounded-xl ${hoverStyle} ${activeElementStyle}`}
|
||||
>
|
||||
<ListElement
|
||||
element={element}
|
||||
outerDivStyleClass="w-full h-full"
|
||||
outerDivStyleClass="w-full h-full px-4 rounded-full "
|
||||
unreadCount={numUnreadMessages}
|
||||
>
|
||||
{/* Nested children here if wanted.. */}
|
||||
|
@ -1,2 +1,2 @@
|
||||
export const LIST_WIDGET_HEIGHT = 850;
|
||||
export const LIST_WIDGET_WIDTH = 300;
|
||||
export const LIST_WIDGET_WIDTH = 345;
|
||||
|
Loading…
Reference in New Issue
Block a user