From 1352b18b5fc55e2fafc66c7ee9c2eca891cb3dbd Mon Sep 17 00:00:00 2001 From: Sean Hatfield <seanhatfield5@gmail.com> Date: Thu, 14 Mar 2024 10:52:35 -0700 Subject: [PATCH] [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 --- .../Documents/Directory/FileRow/index.jsx | 12 ++++++------ .../Documents/Directory/FolderRow/index.jsx | 9 ++++----- .../WorkspaceFileRow/index.jsx | 4 ++-- .../Documents/WorkspaceDirectory/index.jsx | 4 ++-- frontend/src/index.css | 16 ++++++++++++++++ 5 files changed, 30 insertions(+), 15 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 7e2259b22..976c65988 100644 --- a/frontend/src/components/Modals/MangeWorkspace/Documents/Directory/FileRow/index.jsx +++ b/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 ${`${ - 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 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 +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> ); } 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 5b7f1be39..48953ab1f 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,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} 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 3367c7289..f73916290 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 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 2232e746c..68a5005a4 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"> <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"> diff --git a/frontend/src/index.css b/frontend/src/index.css index e2141d8de..b355eb20a 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; +} -- GitLab