From b51428fc07d52563868e0bb3a8dbfc41dfe795d8 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 12 Mar 2024 15:40:06 -0700
Subject: [PATCH 1/5] implement alternating color rows for file picker

---
 .../Documents/Directory/FileRow/index.jsx        | 15 ++++++++++-----
 .../Documents/Directory/FolderRow/index.jsx      | 11 ++++++-----
 .../MangeWorkspace/Documents/Directory/index.jsx |  2 +-
 frontend/src/index.css                           | 16 ++++++++++++++++
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
index 7e2259b2284..5e48ebfa6d4 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
@@ -9,6 +9,7 @@ import System from "@/models/system";
 import debounce from "lodash.debounce";
 
 export default function FileRow({
+  index,
   item,
   folderName,
   selected,
@@ -53,12 +54,16 @@ export default function FileRow({
 
   const handleMouseEnter = debounce(handleShowTooltip, 500);
   const handleMouseLeave = debounce(handleHideTooltip, 500);
+
+  const lightColorRow = selected ? "bg-sky-500/20" : "";
+  const darkColorRow = selected ? "bg-sky-500/10" : "";
+
   return (
-    <div
+    <tr
       onClick={() => toggleSelection(item)}
-      className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer ${`${
-        selected ? "bg-sky-500/20" : ""
-      } ${expanded ? "bg-sky-500/10" : ""}`}`}
+      className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer file-row ${
+        selected ? "selected" : ""
+      }`}
     >
       <div className="pl-2 col-span-5 flex gap-x-[4px] items-center">
         <div
@@ -105,6 +110,6 @@ export default function FileRow({
           className="text-base font-bold w-4 h-4 ml-2 flex-shrink-0 cursor-pointer"
         />
       </div>
-    </div>
+    </tr>
   );
 }
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
index 5b7f1be393b..1ead4d875c7 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -47,10 +47,10 @@ export default function FolderRow({
 
   return (
     <>
-      <div
+      <tr
         onClick={onRowClick}
-        className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer w-full ${
-          selected ? "bg-sky-500/20" : ""
+        className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#2C2C2C] hover:bg-sky-500/20 cursor-pointer w-full file-row:0 ${
+          selected ? "selected" : ""
         }`}
       >
         <div className="col-span-6 flex gap-x-[4px] items-center">
@@ -88,12 +88,13 @@ export default function FolderRow({
             />
           )}
         </div>
-      </div>
+      </tr>
       {expanded && (
         <div className="col-span-full">
-          {item.items.map((fileItem) => (
+          {item.items.map((fileItem, index) => (
             <FileRow
               key={fileItem.id}
+              index={index}
               item={fileItem}
               folderName={item.name}
               selected={isSelected(fileItem.id)}
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index 95a1ecd07b5..bd66d9a3e61 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -104,7 +104,7 @@ function Directory({
         </div>
 
         <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl">
-          <div className="rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900 sticky top-0 z-10">
+          <div className="rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-white/20 shadow-lg bg-zinc-900 sticky top-0 z-10">
             <p className="col-span-5">Name</p>
             <p className="col-span-3">Date</p>
             <p className="col-span-2">Kind</p>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e2141d8debc..b355eb20a80 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -597,3 +597,19 @@ dialog::backdrop {
   font-weight: 600;
   color: #fff;
 }
+
+.file-row:nth-child(odd) {
+  @apply bg-[#1C1E21];
+}
+
+.file-row:nth-child(even) {
+  @apply bg-[#2C2C2C];
+}
+
+.file-row.selected:nth-child(odd) {
+  @apply bg-sky-500/20;
+}
+
+.file-row.selected:nth-child(even) {
+  @apply bg-sky-500/10;
+}

From b2564c9bf6e5f8df8ac3abe2a64f4bbcf9931246 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 12 Mar 2024 15:46:54 -0700
Subject: [PATCH 2/5] implement alternating colors for workspace directory

---
 .../Modals/MangeWorkspace/Documents/Directory/index.jsx       | 2 +-
 .../Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx   | 4 ++--
 .../MangeWorkspace/Documents/WorkspaceDirectory/index.jsx     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
index bd66d9a3e61..95a1ecd07b5 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/index.jsx
@@ -104,7 +104,7 @@ function Directory({
         </div>
 
         <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl">
-          <div className="rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-white/20 shadow-lg bg-zinc-900 sticky top-0 z-10">
+          <div className="rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900 sticky top-0 z-10">
             <p className="col-span-5">Name</p>
             <p className="col-span-3">Date</p>
             <p className="col-span-2">Kind</p>
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index 3367c7289ce..dfca2e74c0d 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -53,8 +53,8 @@ export default function WorkspaceFileRow({
   const handleMouseLeave = debounce(handleHideTooltip, 500);
   return (
     <div
-      className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-b border-white/20 hover:bg-sky-500/20 cursor-pointer
-          ${isMovedItem ? "bg-green-800/40" : ""}`}
+      className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer
+          ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
     >
       <div className="col-span-5 flex gap-x-[4px] items-center">
         <File
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
index 2232e746c6a..b9dedc2305a 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -29,7 +29,7 @@ function WorkspaceDirectory({
           </h3>
         </div>
         <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
-          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20">
+          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-white/20">
             <p className="col-span-5">Name</p>
             <p className="col-span-3">Date</p>
             <p className="col-span-2">Kind</p>
@@ -148,7 +148,7 @@ const PinAlert = memo(() => {
     <ModalWrapper isOpen={showAlert}>
       <div className="relative w-full max-w-2xl max-h-full">
         <div className="relative bg-main-gradient rounded-lg shadow">
-          <div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
+          <div className="flex items-start justify-between p-4 rounded-t border-gray-500/50">
             <div className="flex items-center gap-2">
               <PushPin className="text-red-600 text-lg w-6 h-6" weight="fill" />
               <h3 className="text-xl font-semibold text-white">

From 1d44181829cad955a89f66e2e35bba5ab53e6325 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 12 Mar 2024 15:49:46 -0700
Subject: [PATCH 3/5] remove unneeded props/variables

---
 .../MangeWorkspace/Documents/Directory/FileRow/index.jsx     | 5 -----
 .../MangeWorkspace/Documents/Directory/FolderRow/index.jsx   | 3 +--
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
index 5e48ebfa6d4..da1e2ba009b 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
@@ -9,12 +9,10 @@ import System from "@/models/system";
 import debounce from "lodash.debounce";
 
 export default function FileRow({
-  index,
   item,
   folderName,
   selected,
   toggleSelection,
-  expanded,
   fetchKeys,
   setLoading,
   setLoadingMessage,
@@ -55,9 +53,6 @@ export default function FileRow({
   const handleMouseEnter = debounce(handleShowTooltip, 500);
   const handleMouseLeave = debounce(handleHideTooltip, 500);
 
-  const lightColorRow = selected ? "bg-sky-500/20" : "";
-  const darkColorRow = selected ? "bg-sky-500/10" : "";
-
   return (
     <tr
       onClick={() => toggleSelection(item)}
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
index 1ead4d875c7..ad0660e2dee 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -91,10 +91,9 @@ export default function FolderRow({
       </tr>
       {expanded && (
         <div className="col-span-full">
-          {item.items.map((fileItem, index) => (
+          {item.items.map((fileItem) => (
             <FileRow
               key={fileItem.id}
-              index={index}
               item={fileItem}
               folderName={item.name}
               selected={isSelected(fileItem.id)}

From 36907d93b22f9ad71f9d8ae96b94c16451eff3f5 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 12 Mar 2024 15:55:39 -0700
Subject: [PATCH 4/5] remove unused border classes

---
 .../Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx | 2 +-
 .../Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx     | 2 +-
 .../MangeWorkspace/Documents/WorkspaceDirectory/index.jsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
index da1e2ba009b..976c6598820 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx
@@ -56,7 +56,7 @@ export default function FileRow({
   return (
     <tr
       onClick={() => toggleSelection(item)}
-      className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer file-row ${
+      className={`transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
         selected ? "selected" : ""
       }`}
     >
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index dfca2e74c0d..f73916290f3 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -53,7 +53,7 @@ export default function WorkspaceFileRow({
   const handleMouseLeave = debounce(handleHideTooltip, 500);
   return (
     <div
-      className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 border-white/20 hover:bg-sky-500/20 cursor-pointer
+      className={`items-center transition-all duration-200 text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
           ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
     >
       <div className="col-span-5 flex gap-x-[4px] items-center">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
index b9dedc2305a..68a5005a4a9 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -29,7 +29,7 @@ function WorkspaceDirectory({
           </h3>
         </div>
         <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
-          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-white/20">
+          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
             <p className="col-span-5">Name</p>
             <p className="col-span-3">Date</p>
             <p className="col-span-2">Kind</p>

From 2458a978cdbe88f36b8ad3a545cbe9f1f9b57497 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 13 Mar 2024 09:30:34 -0700
Subject: [PATCH 5/5] remove unneeded expanded prop from filerow component

---
 .../MangeWorkspace/Documents/Directory/FolderRow/index.jsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
index ad0660e2dee..48953ab1ff9 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -97,7 +97,6 @@ export default function FolderRow({
               item={fileItem}
               folderName={item.name}
               selected={isSelected(fileItem.id)}
-              expanded={expanded}
               toggleSelection={toggleSelection}
               fetchKeys={fetchKeys}
               setLoading={setLoading}