src/components/Element/Complex/RequestApprovalElement.tsx

@@ -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()}

src/components/Widget/ListWidget.tsx

@@ -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.. */}

src/prototype/utils/constants.ts

@@ -1,2 +1,2 @@
 export const LIST_WIDGET_HEIGHT = 850;
-export const LIST_WIDGET_WIDTH = 300;
+export const LIST_WIDGET_WIDTH = 345;