From 5de76238c357b30abb8bbc2050dc3041e8af1049 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 10:38:28 -0700
Subject: [PATCH 1/7] draft status sidebar

---
 src/components/Widget/HistoryWidget.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx
index 02458ad..a50658c 100644
--- a/src/components/Widget/HistoryWidget.tsx
+++ b/src/components/Widget/HistoryWidget.tsx
@@ -7,13 +7,23 @@ type HistoryWidgetProps = {
 const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const { id, x, y, w, h, elements } = widget;
 
+  console.log('elements: ', elements);
+
   return (
     <div
       key={id}
       style={{ top: y, left: x, width: w, height: h }}
-      className={`absolute bg-[#2D2D30] text-white flex items-center justify-center`}
+      className={`absolute bg-[#2D2D30] text-white grid grid-cols-12 items-start justify-start p-4`}
     >
-      History Widget
+      <div className="col-span-1 flex flex-col h-full">
+        <span className="bg-teal-300 flex flex-row py-1 mx-4 rounded-md items-center justify-center">
+          4
+        </span>
+        <div className="border-gray-200 h-full w-1/2 border-r-4 my-4 flex flex-row items-center justify-center rounded-sm" />
+      </div>
+
+      <div className="col-span-11 bg-gray-300">message content</div>
+      <div className="col-span-1 flex flex-col">test</div>
     </div>
   );
 };

From 84851cae4ff34e7696abd48ee779be051b2dd374 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 20:51:10 -0700
Subject: [PATCH 2/7] test with mock data

---
 .../Element/Simple/TableElement.tsx           | 10 +-
 src/components/Widget/HistoryWidget.tsx       | 92 +++++++++++++++++--
 2 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/src/components/Element/Simple/TableElement.tsx b/src/components/Element/Simple/TableElement.tsx
index 16e99ab..aa250de 100644
--- a/src/components/Element/Simple/TableElement.tsx
+++ b/src/components/Element/Simple/TableElement.tsx
@@ -13,12 +13,16 @@ const TableElement = ({ element, children }: TableElementProps) => {
 
   const renderTable = () => {
     return (
-      <table className="border-collapse">
+      <table className="border-collapse w-full border-spacing-14">
         <tbody>
           {Array.from({ length: rows }).map((_, i) => (
-            <tr className="border-y-2 border-gray-800" key={i}>
+            <tr className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`} key={i}>
               {Array.from({ length: cols }).map((_, j) => (
-                <td key={j}>{tableData[i][j]}</td>
+                <td key={j} className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && 'text-[#bcbcbc]'} border-[#585864] py-1`}>
+                  <div className='ml-4'>
+                  {tableData[i][j]}
+                  </div>
+                  </td>
               ))}
             </tr>
           ))}
diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx
index a50658c..0fa83bb 100644
--- a/src/components/Widget/HistoryWidget.tsx
+++ b/src/components/Widget/HistoryWidget.tsx
@@ -1,4 +1,5 @@
 import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
+import TableElement from '../Element/Simple/TableElement';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -13,17 +14,90 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
     <div
       key={id}
       style={{ top: y, left: x, width: w, height: h }}
-      className={`absolute bg-[#2D2D30] text-white grid grid-cols-12 items-start justify-start p-4`}
+      className={`absolute text-white `}
     >
-      <div className="col-span-1 flex flex-col h-full">
-        <span className="bg-teal-300 flex flex-row py-1 mx-4 rounded-md items-center justify-center">
-          4
-        </span>
-        <div className="border-gray-200 h-full w-1/2 border-r-4 my-4 flex flex-row items-center justify-center rounded-sm" />
-      </div>
+      <div className="grid grid-cols-12 items-start justify-start p-4 gap-4">
 
-      <div className="col-span-11 bg-gray-300">message content</div>
-      <div className="col-span-1 flex flex-col">test</div>
+        {/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
+
+        <div className="col-span-1 flex flex-col h-full">
+          <span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
+            4
+          </span>
+          <div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
+        </div>
+
+        <div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
+          <div className="grid grid-cols-6">
+            <div className="col-span-2 flex flex-col gap-5">
+              <div className="font-semibold text-xl">
+                <div className="text-[#97979d]">ACA-7</div>
+                Request to attack
+              </div>
+              <div className="font-normal">Approval for kinetic attack</div>
+            </div>
+
+            <div className="col-span-4 w-full">
+              <TableElement
+                element={{
+                  id: 'convoID_<el.index>',
+                  modality: 'visual',
+                  h: 3,
+                  w: 4,
+
+                  type: 'table',
+                  rows: 4,
+                  cols: 2,
+                  tableData: [
+                    ['location', '34N, 118W'],
+                    ['priority', 'high'],
+                    ['threat-level', 'high'],
+                    ['col.damage', '45%'],
+                  ],
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="col-span-1 flex flex-col h-full">
+          <span className="bg-[#2d2d30] text-white text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
+            3
+          </span>
+          <div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
+        </div>
+
+        <div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
+          <div className="grid grid-cols-6">
+            <div className="col-span-2 flex flex-col gap-5">
+              <div className="font-semibold text-xl">
+                <div className="text-[#97979d]">Update</div>
+                Threat Level High
+              </div>
+              <div className="font-normal"></div>
+            </div>
+
+            <div className="col-span-4 w-full">
+              <TableElement
+                element={{
+                  id: 'convoID_<el.index>',
+                  modality: 'visual',
+                  h: 3,
+                  w: 4,
+
+                  type: 'table',
+                  rows: 2,
+                  cols: 2,
+                  tableData: [
+                    ['priority', 'high'],
+                    ['threat-level', 'high'],
+                  ],
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

From 5142e50bbd995caef1fed18ec70db27bf2e0443b Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 21:18:35 -0700
Subject: [PATCH 3/7] fix misaligned tables

---
 .../Element/Simple/TableElement.tsx           | 19 ++++++++++++-------
 src/components/Widget/HistoryWidget.tsx       |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Element/Simple/TableElement.tsx b/src/components/Element/Simple/TableElement.tsx
index aa250de..501c8f6 100644
--- a/src/components/Element/Simple/TableElement.tsx
+++ b/src/components/Element/Simple/TableElement.tsx
@@ -13,16 +13,21 @@ const TableElement = ({ element, children }: TableElementProps) => {
 
   const renderTable = () => {
     return (
-      <table className="border-collapse w-full border-spacing-14">
+      <table className="border-collapse border-spacing-14 w-full">
         <tbody>
           {Array.from({ length: rows }).map((_, i) => (
-            <tr className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`} key={i}>
+            <tr
+              className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`}
+              key={i}
+            >
               {Array.from({ length: cols }).map((_, j) => (
-                <td key={j} className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && 'text-[#bcbcbc]'} border-[#585864] py-1`}>
-                  <div className='ml-4'>
-                  {tableData[i][j]}
-                  </div>
-                  </td>
+                <td
+                  key={j}
+                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && 'text-[#bcbcbc]'} border-[#585864] py-1`}
+                  style={{ width: `${100 / cols}%` }}
+                >
+                  <div className="ml-6">{tableData[i][j]}</div>
+                </td>
               ))}
             </tr>
           ))}
diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx
index 0fa83bb..5d19267 100644
--- a/src/components/Widget/HistoryWidget.tsx
+++ b/src/components/Widget/HistoryWidget.tsx
@@ -21,7 +21,7 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
         {/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
 
         <div className="col-span-1 flex flex-col h-full">
-          <span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
+          <span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-2 rounded-md items-center justify-center">
             4
           </span>
           <div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />

From 887e2f7518bfded96255981b901e3e01b33b4015 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 21:29:13 -0700
Subject: [PATCH 4/7] extract color into props

---
 src/components/Element/Simple/TableElement.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Element/Simple/TableElement.tsx b/src/components/Element/Simple/TableElement.tsx
index 501c8f6..de7e04b 100644
--- a/src/components/Element/Simple/TableElement.tsx
+++ b/src/components/Element/Simple/TableElement.tsx
@@ -6,9 +6,21 @@ type TableElementProps = {
   // children for nested elements that Tom mentioned.
   children?: ReactNode;
   // and more props to perhaps control position of the children
+
+  borderColor?: string;
+  evenAlternatingColor?: string;
+  oddAlternatingColor?: string;
+  leftLabelColor?: string;
 };
 
-const TableElement = ({ element, children }: TableElementProps) => {
+const TableElement = ({
+  element,
+  children,
+  borderColor = '#585864',
+  evenAlternatingColor = '#202021',
+  oddAlternatingColor = '#00FFFFFF',
+  leftLabelColor = '#bcbcbc',
+}: TableElementProps) => {
   const { rows, cols, tableData } = element;
 
   const renderTable = () => {
@@ -17,13 +29,13 @@ const TableElement = ({ element, children }: TableElementProps) => {
         <tbody>
           {Array.from({ length: rows }).map((_, i) => (
             <tr
-              className={`border-y-2 border-[#585864] ${i % 2 === 0 && 'bg-[#202021]'}`}
+              className={`border-y-2 border-[${borderColor}] bg-[${i % 2 === 0 ? evenAlternatingColor : oddAlternatingColor}] `}
               key={i}
             >
               {Array.from({ length: cols }).map((_, j) => (
                 <td
                   key={j}
-                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && 'text-[#bcbcbc]'} border-[#585864] py-1`}
+                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && `text-[${leftLabelColor}]`} border-[${borderColor}] py-1`}
                   style={{ width: `${100 / cols}%` }}
                 >
                   <div className="ml-6">{tableData[i][j]}</div>

From 2a534771c1cd08360c2fbb376e6ce7d06bef28e5 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 22:31:27 -0700
Subject: [PATCH 5/7] bugfix: tailwind template strings do not work

---
 src/components/Element/Simple/TableElement.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Element/Simple/TableElement.tsx b/src/components/Element/Simple/TableElement.tsx
index de7e04b..2c2c491 100644
--- a/src/components/Element/Simple/TableElement.tsx
+++ b/src/components/Element/Simple/TableElement.tsx
@@ -16,26 +16,26 @@ type TableElementProps = {
 const TableElement = ({
   element,
   children,
-  borderColor = '#585864',
-  evenAlternatingColor = '#202021',
-  oddAlternatingColor = '#00FFFFFF',
-  leftLabelColor = '#bcbcbc',
+  borderColor = 'border-[#585864]',
+  evenAlternatingColor = 'bg-[#202021]',
+  oddAlternatingColor = 'bg-[rgba(0,0,0,0)]',
+  leftLabelColor = 'text-[#bcbcbc]',
 }: TableElementProps) => {
   const { rows, cols, tableData } = element;
 
   const renderTable = () => {
     return (
-      <table className="border-collapse border-spacing-14 w-full">
+      <table className="border-collapse w-full">
         <tbody>
           {Array.from({ length: rows }).map((_, i) => (
             <tr
-              className={`border-y-2 border-[${borderColor}] bg-[${i % 2 === 0 ? evenAlternatingColor : oddAlternatingColor}] `}
+              className={`border-y-2 ${borderColor} ${i % 2 === 0 ? evenAlternatingColor : oddAlternatingColor}`}
               key={i}
             >
               {Array.from({ length: cols }).map((_, j) => (
                 <td
                   key={j}
-                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && `text-[${leftLabelColor}]`} border-[${borderColor}] py-1`}
+                  className={`${j > 0 ? 'border-l-2' : 'border-x-0'} ${j === 0 && leftLabelColor} ${borderColor} py-1`}
                   style={{ width: `${100 / cols}%` }}
                 >
                   <div className="ml-6">{tableData[i][j]}</div>

From 5adcd08d9f98568c1c76f31031b4e38c492304a3 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 22:41:37 -0700
Subject: [PATCH 6/7] add tailwind colors into config

---
 tailwind.config.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 3b67ddc..31b1a64 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+const tailwindConfig =  {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
@@ -8,6 +8,16 @@ export default {
       //   pointer: 'url(https://i.stack.imgur.com/UOvLJ.png), pointer',
       // },
     },
+    colors: {
+      ...require('tailwindcss/colors'),
+      turquoise: "#19debb",
+      "muted-gray": "#97979d",
+      convo: {
+        bar: "#656566",
+      },
+    },
   },
   plugins: [],
 };
+
+export default tailwindConfig;
\ No newline at end of file

From 943ca33f0d9b0f8faca2a8a7f927a8d0922d6332 Mon Sep 17 00:00:00 2001
From: Azlothe <bbqian7@gmail.com>
Date: Sun, 19 May 2024 22:46:18 -0700
Subject: [PATCH 7/7] replace color settings to tailwind custom classes

---
 src/components/Widget/HistoryWidget.tsx | 10 +++++-----
 tailwind.config.js                      |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx
index 5d19267..d78b244 100644
--- a/src/components/Widget/HistoryWidget.tsx
+++ b/src/components/Widget/HistoryWidget.tsx
@@ -17,21 +17,20 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
       className={`absolute text-white `}
     >
       <div className="grid grid-cols-12 items-start justify-start p-4 gap-4">
-
         {/* TODO : extract out into HistoryMessageElement. Currently is mock data to test look */}
 
         <div className="col-span-1 flex flex-col h-full">
-          <span className="bg-[#19debb] text-black text-xl font-bold flex flex-row py-1 mx-2 rounded-md items-center justify-center">
+          <span className="bg-turquoise text-black text-xl font-bold flex flex-row py-1 mx-2 rounded-md items-center justify-center">
             4
           </span>
-          <div className="border-[#656566] h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
+          <div className="border-convo-bar h-full w-1/2 border-r-4 mt-4 flex flex-row items-center justify-center rounded-sm" />
         </div>
 
-        <div className="col-span-11 bg-[#252526] h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
+        <div className="col-span-11 bg-convo-bg h-fit p-4 rounded-lg drop-shadow-[0_4px_4px_rgba(0,0,0,0.5)]">
           <div className="grid grid-cols-6">
             <div className="col-span-2 flex flex-col gap-5">
               <div className="font-semibold text-xl">
-                <div className="text-[#97979d]">ACA-7</div>
+                <div className="text-muted-gray">ACA-7</div>
                 Request to attack
               </div>
               <div className="font-normal">Approval for kinetic attack</div>
@@ -60,6 +59,7 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
           </div>
         </div>
 
+        {/* to be removed */}
         <div className="col-span-1 flex flex-col h-full">
           <span className="bg-[#2d2d30] text-white text-xl font-bold flex flex-row py-1 mx-3 rounded-md items-center justify-center">
             3
diff --git a/tailwind.config.js b/tailwind.config.js
index 31b1a64..984ed9e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,7 @@ const tailwindConfig =  {
       "muted-gray": "#97979d",
       convo: {
         bar: "#656566",
+        bg: "#252526",
       },
     },
   },