CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-04 14:57:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

style: align chat-history panel top padding; improve projects page contrast

Browse source 
- Add pt-2 to the chat-history panel so its top spacing matches the other
  side panels (agent builder, skills, files, etc.)
- Projects grid + workspace now use the darkest surface for the page
  (surface-primary) with cards, inputs, and the composer one step lighter
  (surface-secondary) and tertiary on hover, so cards read as elevated
  rather than darker than the background
This commit is contained in:
Danny Avila 2026-06-03 10:11:48 -04:00
parent ed1744976b
commit dc6ca403e9
3 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Projects/ProjectWorkspace.tsx
View file

@ -126,7 +126,7 @@ export default function ProjectWorkspace() {
}
return (
<main className="flex h-full min-h-0 flex-col overflow-y-auto bg-presentation text-text-primary">
<main className="flex h-full min-h-0 flex-col overflow-y-auto bg-surface-primary text-text-primary">
<div className="mx-auto flex w-full max-w-3xl flex-1 flex-col px-4 pb-10 pt-4 md:px-6 lg:pt-8">
<button
type="button"
@ -157,12 +157,12 @@ export default function ProjectWorkspace() {
type="button"
onClick={startProjectChat}
className={cn(
'mt-6 flex w-full items-center gap-3 rounded-[26px] border border-border-medium bg-surface-primary px-3.5 py-3 text-left shadow-sm transition-colors',
'hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
'mt-6 flex w-full items-center gap-3 rounded-[26px] border border-border-medium bg-surface-secondary px-3.5 py-3 text-left shadow-sm transition-colors',
'hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
)}
aria-label={localize('com_ui_new_chat_in_project', { name: project.name })}
>
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-secondary text-text-primary">
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-tertiary text-text-primary">
<Plus className="h-4 w-4" aria-hidden="true" />
</span>
<span className="min-w-0 flex-1 truncate text-text-secondary">

10
client/src/components/Projects/ProjectsView.tsx
View file

@ -100,7 +100,7 @@ export default function ProjectsView() {
};
return (
<main className="flex h-full min-h-0 flex-col overflow-auto bg-presentation text-text-primary">
<main className="flex h-full min-h-0 flex-col overflow-auto bg-surface-primary text-text-primary">
<div className="container mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 md:px-6 lg:pt-12">
<div className="flex flex-wrap items-center justify-between gap-3">
<h1 className="text-2xl font-bold tracking-tight text-text-primary md:text-3xl">
@ -122,7 +122,7 @@ export default function ProjectsView() {
<Ariakit.MenuButton
aria-label={localize('com_ui_sort_projects_by')}
className={cn(
'inline-flex h-10 items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-medium bg-surface-primary px-3 text-sm font-medium text-text-primary transition-colors hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary disabled:pointer-events-none disabled:opacity-50 sm:w-44',
'inline-flex h-10 items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-border-medium bg-surface-secondary px-3 text-sm font-medium text-text-primary transition-colors hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary disabled:pointer-events-none disabled:opacity-50 sm:w-44',
isSortMenuOpen && 'bg-surface-hover text-text-primary',
)}
>
@ -155,7 +155,7 @@ export default function ProjectsView() {
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder={localize('com_ui_search_projects')}
className="border-border-medium bg-surface-primary pl-9 text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
className="border-border-medium bg-surface-secondary pl-9 text-text-primary placeholder:text-text-secondary focus-visible:ring-2 focus-visible:ring-ring-primary"
/>
</label>
<div className="flex items-center">
@ -184,8 +184,8 @@ export default function ProjectsView() {
key={project._id}
type="button"
className={cn(
'group/project flex min-h-[8.5rem] flex-col rounded-xl border border-border-light bg-surface-primary p-4 text-left transition-colors',
'hover:border-border-medium hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
'group/project flex min-h-[8.5rem] flex-col rounded-xl border border-border-medium bg-surface-secondary p-4 text-left transition-colors',
'hover:border-border-heavy hover:bg-surface-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary',
)}
onClick={() => navigate(`/projects/${project._id}`)}
>

2
client/src/components/UnifiedSidebar/ConversationsSection.tsx
View file

@ -106,7 +106,7 @@ const ConversationsSection = memo(() => {
return (
<div
className="flex h-full min-h-0 flex-col overflow-hidden pb-3"
className="flex h-full min-h-0 flex-col overflow-hidden pb-3 pt-2"
role="region"
aria-label={localize('com_ui_chat_history')}
>