michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ManageWorkspace styles update (#3948)

Browse Source 
* update colors for workspace directory recent added files & remove shadows

* patch styles and loading states

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2025-06-05 08:17:11 -07:00 committed by GitHub
parent 271a682824
commit 8dd328cbea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
View File

@ -230,7 +230,7 @@ function Directory({
</div>
<div className="relative w-[560px] h-[310px] bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
<div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-theme-text-primary text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-md bg-theme-settings-input-bg">
<div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-theme-text-primary text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 light:border-theme-modal-border bg-theme-settings-input-bg">
<p className="col-span-6">Name</p>
</div>

4
frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View File

@ -56,11 +56,11 @@ export default function WorkspaceFileRow({
const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
return (
<div
className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 h-[34px] items-center ${
className={`text-theme-text-primary text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 h-[34px] items-center file-row ${
!disableSelection
? "hover:bg-theme-file-picker-hover cursor-pointer"
: ""
} ${isMovedItem ? "bg-green-800/40" : "file-row"} ${
} ${isMovedItem ? "selected light:text-white" : ""} ${
selected ? "selected light:text-white" : ""
}`}
onClick={toggleRowSelection}

12
frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View File

@ -3,7 +3,7 @@ import { dollarFormat } from "@/utils/numbers";
import WorkspaceFileRow from "./WorkspaceFileRow";
import { memo, useEffect, useState } from "react";
import ModalWrapper from "@/components/ModalWrapper";
import { Eye, PushPin, X } from "@phosphor-icons/react";
import { Eye, PushPin } from "@phosphor-icons/react";
import { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants";
import paths from "@/utils/paths";
import { Link } from "react-router-dom";
@ -96,16 +96,16 @@ function WorkspaceDirectory({
</h3>
</div>
<div className="relative w-[560px] h-[445px] bg-theme-settings-input-bg rounded-2xl mt-5 border border-theme-modal-border">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10 rounded-t-2xl shadow-lg">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 light:border-theme-modal-border bg-theme-settings-input-bg sticky top-0 z-10 rounded-t-2xl">
<div className="col-span-10 flex items-center gap-x-[4px]">
<div className="shrink-0 w-3 h-3" />
<p className="ml-[7px]">Name</p>
<p className="ml-[7px] text-theme-text-primary">Name</p>
</div>
<p className="col-span-2" />
</div>
<div className="w-full h-[calc(100%-40px)] flex items-center justify-center flex-col gap-y-5">
<PreLoader />
<p className="text-white text-sm font-semibold animate-pulse text-center w-1/3">
<p className="text-theme-text-primary text-sm font-semibold animate-pulse text-center w-1/3">
{loadingMessage}
</p>
</div>
@ -129,7 +129,7 @@ function WorkspaceDirectory({
}`}
/>
<div className="relative w-full h-full bg-theme-settings-input-bg rounded-2xl overflow-hidden border border-theme-modal-border">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-theme-settings-input-bg sticky top-0 z-10 shadow-md">
<div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 light:border-theme-modal-border bg-theme-settings-input-bg sticky top-0 z-10">
<div className="col-span-10 flex items-center gap-x-[4px]">
{!hasChanges &&
files.items.some((folder) => folder.items.length > 0) ? (
@ -155,7 +155,7 @@ function WorkspaceDirectory({
) : (
<div className="shrink-0 w-3 h-3" />
)}
<p className="ml-[7px] light:text-theme-text-primary">Name</p>
<p className="ml-[7px] text-theme-text-primary">Name</p>
</div>
<p className="col-span-2" />
</div>

11
frontend/src/index.css
View File

@ -872,6 +872,12 @@ dialog::backdrop {
color: #fff;
}
.file-row {
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.file-row:nth-child(even) {
@apply bg-theme-bg-primary;
background-color: var(--theme-file-row-even);
@ -890,6 +896,11 @@ dialog::backdrop {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .file-row.selected:nth-child(even),
[data-theme="light"] .file-row.selected:nth-child(odd) {
border-bottom: 1px solid rgba(222, 222, 222, 0.5);
}
/* Flex upload modal to be a column when on small screens so that the UI
does not extend the close button beyond the viewport. */
@media (max-width: 1330px) {