From 0ffa0c72f210e9507490864d98049d50e9d9d549 Mon Sep 17 00:00:00 2001
From: ash-t-luu <ashleyluu87@gmail.com>
Date: Sat, 9 Dec 2023 13:48:34 -0800
Subject: [PATCH 1/4] Co-authored-by: Louis <Louka3@users.noreply.github.com>
 Co-authored-by: ChristinaRaether <ChristinaRaether@users.noreply.github.com>
 Co-authored-by: Johnny Arroyo <johnnydrycreek@gmail.com>

---
 src/webview/flowBuilder.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/webview/flowBuilder.js b/src/webview/flowBuilder.js
index a96906a..be82bf6 100644
--- a/src/webview/flowBuilder.js
+++ b/src/webview/flowBuilder.js
@@ -17,16 +17,18 @@ class FlowBuilder {
   buildNodesArray(parsedData, x = this.x, y = this.y) {
     if (!parsedData) return;
 
+
     parsedData.forEach((item) => {
       const node = {
         id: (++this.id).toString(),
-        data: {
+        data: { // `py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 flex justify-center place-items-center 
           label: (
-            <div className={`-mx-2.5 -my-2.5 py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 ${(item.isClientComponent) ? 'bg-orange-300' : 'bg-blue-300'}`}>
-              <div className="flex justify-center place-items-center" key={this.id}>
-                <div className="text-sm font-medium">{item.fileName}</div>
-              </div>
-            </div>
+            // <div className={`${(item.isClientComponent) ? 'bg-orange-300' : 'bg-blue-300'}`} key={this.id}>
+            <div className="text-sm font-medium" key={this.id}>{item.fileName}</div>
+            //   {/* <div className="flex justify-center place-items-center" key={this.id}> */}
+            //   {/* <div className="text-sm font-medium">{item.fileName}</div> */}
+            //   {/* </div> */}
+            // // </div>
           )
         },
         // type: item.depth === 0 ? 'input' : '',
@@ -34,9 +36,14 @@ class FlowBuilder {
         type: 'default',
         position: { x: x += 40, y: y += 30 },
         style: {
-          border: 'none',
-          borderRadius: "6px"
-        }
+          borderRadius: '6px',
+          borderWidth: '2px',
+          borderColor: '#6b7280',
+          display: 'flex',
+          justifyContent: 'center',
+          placeItems: 'center',
+          backgroundColor: `${(item.isClientComponent) ? '#fdba74' : '#93C5FD'}`,
+        },
       };
       this.initialNodes.push(node);
       if (item.children) {

From 4cc6be0beb5cf0dddd9150c5a0c6d47ae5423032 Mon Sep 17 00:00:00 2001
From: ChristinaRaether <christinarae860@gmail.com>
Date: Sat, 9 Dec 2023 14:07:52 -0800
Subject: [PATCH 2/4] added text overflow

---
 src/webview/flowBuilder.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/webview/flowBuilder.js b/src/webview/flowBuilder.js
index be82bf6..1e54e4f 100644
--- a/src/webview/flowBuilder.js
+++ b/src/webview/flowBuilder.js
@@ -23,12 +23,7 @@ class FlowBuilder {
         id: (++this.id).toString(),
         data: { // `py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 flex justify-center place-items-center 
           label: (
-            // <div className={`${(item.isClientComponent) ? 'bg-orange-300' : 'bg-blue-300'}`} key={this.id}>
-            <div className="text-sm font-medium" key={this.id}>{item.fileName}</div>
-            //   {/* <div className="flex justify-center place-items-center" key={this.id}> */}
-            //   {/* <div className="text-sm font-medium">{item.fileName}</div> */}
-            //   {/* </div> */}
-            // // </div>
+            <div className="text-sm font-medium text-ellipsis overflow-hidden ..." key={this.id}>{item.fileName}</div>
           )
         },
         // type: item.depth === 0 ? 'input' : '',

From 35f784ea896f633ec38db7651b224acbc1b1d603 Mon Sep 17 00:00:00 2001
From: Francisco Lopez <franciscoglopez49@gmail.com>
Date: Sat, 9 Dec 2023 17:11:55 -0500
Subject: [PATCH 3/4] Add dev command to package.json for recompiling bundle
 during development. npm run webpack now builds for production

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index dd1ccea..b392c05 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "lint": "eslint .",
     "pretest": "npm run lint",
     "test": "node ./test/runTest.js",
+    "dev": "webpack --watch",
     "webpack": "webpack"
   },
   "devDependencies": {

From fec07f56f0340f8394f842fd30288d8dc57bca71 Mon Sep 17 00:00:00 2001
From: ash-t-luu <ashleyluu87@gmail.com>
Date: Sat, 9 Dec 2023 14:15:38 -0800
Subject: [PATCH 4/4] edited text color and took out comments

---
 src/webview/Flow.jsx       | 4 ++--
 src/webview/flowBuilder.js | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/webview/Flow.jsx b/src/webview/Flow.jsx
index 065a130..96be6ec 100644
--- a/src/webview/Flow.jsx
+++ b/src/webview/Flow.jsx
@@ -73,9 +73,9 @@ const OverviewFlow = () => {
         nodeBorderRadius={2}
       />
       <Panel position="top-left">
-        <div className="border-1 border-gray-500">
+        <div className="text-black">
           <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
-            <p className="pl-2 pr-2 py-2">Client: <span className="border-1 border-gray-500 bg-orange-300 text-transparent rounded-full">00</span></p>
+            <p className="pl-2 pr-2 py-2">Client: <span className="bg-orange-300 text-transparent rounded-full">00</span></p>
           </div>
           <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
             <p className="pl-2 pr-2 pb-2">Server: <span className="bg-blue-300 text-transparent  rounded-full">00</span></p>
diff --git a/src/webview/flowBuilder.js b/src/webview/flowBuilder.js
index 1e54e4f..62fd030 100644
--- a/src/webview/flowBuilder.js
+++ b/src/webview/flowBuilder.js
@@ -21,13 +21,12 @@ class FlowBuilder {
     parsedData.forEach((item) => {
       const node = {
         id: (++this.id).toString(),
-        data: { // `py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 flex justify-center place-items-center 
+        data: {
           label: (
             <div className="text-sm font-medium text-ellipsis overflow-hidden ..." key={this.id}>{item.fileName}</div>
           )
         },
         // type: item.depth === 0 ? 'input' : '',
-        // type: item.isClientComponent ? 'input' : 'output',
         type: 'default',
         position: { x: x += 40, y: y += 30 },
         style: {