From 2a9eca5b2915e1c70577daa7cfb3046eb0681929 Mon Sep 17 00:00:00 2001
From: Perfect1076 <jeffreyvan.2001@gmail.com>
Date: Thu, 30 May 2024 11:19:53 +0200
Subject: [PATCH 1/3] feat: cards on pearce screen now have a small message in
 the cards to describe what type of message is coming in. Currently is just
 approval to attack.

---
 .../Complex/RequestApprovalElement.tsx        | 40 +++++++++++++++++--
 src/components/Widget/ListWidget.tsx          |  2 +-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/components/Element/Complex/RequestApprovalElement.tsx b/src/components/Element/Complex/RequestApprovalElement.tsx
index 073d813..14fd45a 100644
--- a/src/components/Element/Complex/RequestApprovalElement.tsx
+++ b/src/components/Element/Complex/RequestApprovalElement.tsx
@@ -10,6 +10,9 @@ type RequestApprovalProps = {
   unreadCount?: number;
 };
 
+
+
+
 const RequestApprovalElement = ({
   element,
   children,
@@ -18,6 +21,23 @@ 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 (
@@ -36,10 +56,22 @@ const RequestApprovalElement = ({
       id={id}
       className="flex text-white justify-between items-center gap-4 pr-4"
     >
-      <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">
+          <div className="flex">
+            <IconElement element={icon} />
+          </div>
+
+          <div>
+            {/* @ts-ignore */}
+            <span>{message?.data?.target?.type}</span>
+            <div className="flex flex-col text-sm">
+            <div>{getMessageText()}</div>
+          </div>
+          </div>
+
+        </div>
+
       </div>
 
       {renderUnreadCount()}
diff --git a/src/components/Widget/ListWidget.tsx b/src/components/Widget/ListWidget.tsx
index c3f2691..073782c 100644
--- a/src/components/Widget/ListWidget.tsx
+++ b/src/components/Widget/ListWidget.tsx
@@ -17,7 +17,7 @@ type ListWidgetProps = {
   widget: Widget;
 };
 
-const LIST_ELEMENT_HEIGHT = 80;
+const LIST_ELEMENT_HEIGHT = 90;
 const GAP_BETWEEN_ELEMENTS = 6;
 
 const ListWidget = ({ widget }: ListWidgetProps) => {
-- 
2.30.2


From 97833f96336157787f0690e3120720628ace4ff8 Mon Sep 17 00:00:00 2001
From: Perfect1076 <jeffreyvan.2001@gmail.com>
Date: Thu, 30 May 2024 15:07:18 +0200
Subject: [PATCH 2/3] fix: the text now has correct font and proper sizes. the
 cards are also rounded.

---
 .../Element/Complex/RequestApprovalElement.tsx        | 10 +++++-----
 src/components/Widget/ListWidget.tsx                  | 11 ++++++-----
 src/prototype/utils/constants.ts                      |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/Element/Complex/RequestApprovalElement.tsx b/src/components/Element/Complex/RequestApprovalElement.tsx
index 14fd45a..aeea89d 100644
--- a/src/components/Element/Complex/RequestApprovalElement.tsx
+++ b/src/components/Element/Complex/RequestApprovalElement.tsx
@@ -43,7 +43,7 @@ const RequestApprovalElement = ({
       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>
@@ -54,18 +54,18 @@ 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 flex-col">
-        <div className="flex space-between items-center justify-center gap-4">
+        <div className="flex space-between items-center justify-center gap-4 rounded-full">
           <div className="flex">
             <IconElement element={icon} />
           </div>
 
           <div>
             {/* @ts-ignore */}
-            <span>{message?.data?.target?.type}</span>
-            <div className="flex flex-col text-sm">
+            <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>
diff --git a/src/components/Widget/ListWidget.tsx b/src/components/Widget/ListWidget.tsx
index 073782c..e89ac15 100644
--- a/src/components/Widget/ListWidget.tsx
+++ b/src/components/Widget/ListWidget.tsx
@@ -17,7 +17,7 @@ type ListWidgetProps = {
   widget: Widget;
 };
 
-const LIST_ELEMENT_HEIGHT = 90;
+const LIST_ELEMENT_HEIGHT = 80;
 const GAP_BETWEEN_ELEMENTS = 6;
 
 const ListWidget = ({ widget }: ListWidgetProps) => {
@@ -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 pb-2 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.. */}
diff --git a/src/prototype/utils/constants.ts b/src/prototype/utils/constants.ts
index 80a235b..4d3397f 100644
--- a/src/prototype/utils/constants.ts
+++ b/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;
-- 
2.30.2


From 77c3da9cb4b74cd362c848929d4f9e9908f96cc2 Mon Sep 17 00:00:00 2001
From: Perfect1076 <jeffreyvan.2001@gmail.com>
Date: Thu, 30 May 2024 15:10:38 +0200
Subject: [PATCH 3/3]  refactor: got rid of small line.

---
 src/components/Widget/ListWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Widget/ListWidget.tsx b/src/components/Widget/ListWidget.tsx
index e89ac15..2403aee 100644
--- a/src/components/Widget/ListWidget.tsx
+++ b/src/components/Widget/ListWidget.tsx
@@ -274,7 +274,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
             id={element.id}
             key={element.id}
             style={{ height: LIST_ELEMENT_HEIGHT, width: 340 }}
-            className={`text-white flex items-center justify-center p-3 pb-2 rounded-xl ${hoverStyle} ${activeElementStyle}`}
+            className={`text-white flex items-center justify-center p-3 rounded-xl ${hoverStyle} ${activeElementStyle}`}
           >
             <ListElement
               element={element}
-- 
2.30.2