[FEAT] Implement correct highlight colors on document picker (#897)

* implement alternating color rows for file picker

* implement alternating colors for workspace directory

* remove unneeded props/variables

* remove unused border classes

* remove unneeded expanded prop from filerow component

frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx

@@ -13,7 +13,6 @@ export default function FileRow({
   folderName,
   selected,
   toggleSelection,
-  expanded,
   fetchKeys,
   setLoading,
   setLoadingMessage,
@@ -53,12 +52,13 @@ export default function FileRow({
 
   const handleMouseEnter = debounce(handleShowTooltip, 500);
   const handleMouseLeave = debounce(handleHideTooltip, 500);
+
   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 ${`${
+      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 ? "bg-sky-500/20" : ""
+        selected ? "selected" : ""
-      } ${expanded ? "bg-sky-500/10" : ""}`}`}
+      }`}
     >
       <div className="pl-2 col-span-5 flex gap-x-[4px] items-center">
         <div
@@ -105,6 +105,6 @@ export default function FileRow({
           className="text-base font-bold w-4 h-4 ml-2 flex-shrink-0 cursor-pointer"
         />
       </div>
-    </div>
+    </tr>
   );
 }

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 ${
+        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 ? "bg-sky-500/20" : ""
+          selected ? "selected" : ""
         }`}
       >
         <div className="col-span-6 flex gap-x-[4px] items-center">
@@ -88,7 +88,7 @@ export default function FolderRow({
             />
           )}
         </div>
-      </div>
+      </tr>
       {expanded && (
         <div className="col-span-full">
           {item.items.map((fileItem) => (
@@ -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}

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
+      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" : ""}`}
+          ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
     >
       <div className="col-span-5 flex gap-x-[4px] items-center">
         <File

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">
             <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">

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;
+}