mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-23 19:05:16 +02:00
refactor(styles): unify panel and sidebar colors for consistent theming; update hover effects for buttons in the right panel and sidebar
This commit is contained in:
Anish Sarkar
parent
2e1367b00e
commit
cdce6a8f14
7 changed files with 44 additions and 26 deletions
|
|
@ -61,7 +61,7 @@ function CollapseButton({ onClick }: { onClick: () => void }) {
|
|||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClick}
|
||||
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
|
||||
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
|
||||
>
|
||||
<PanelRight className="h-4 w-4" />
|
||||
<span className="sr-only">Collapse panel</span>
|
||||
|
|
@ -102,7 +102,7 @@ export function RightPanelExpandButton() {
|
|||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => startTransition(() => setCollapsed(false))}
|
||||
className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
|
||||
className="h-8 w-8 shrink-0 -m-0.5 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
|
||||
>
|
||||
<PanelRight className="h-4 w-4" />
|
||||
<span className="sr-only">Expand panel</span>
|
||||
|
|
@ -203,7 +203,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
|
|||
return (
|
||||
<aside
|
||||
style={{ width: targetWidth }}
|
||||
className="flex h-full shrink-0 flex-col border-l border-b bg-sidebar text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
|
||||
className="flex h-full shrink-0 flex-col border-l border-b bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
|
||||
>
|
||||
<div className="relative flex-1 min-h-0 overflow-hidden">
|
||||
{effectiveTab === "sources" && documentsOpen && documentsPanel && (
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ function MainContentPanel({
|
|||
rightActions={<RightPanelExpandButton />}
|
||||
className="min-w-0"
|
||||
/>
|
||||
<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-main-panel overflow-hidden min-w-0">
|
||||
<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-panel overflow-hidden min-w-0">
|
||||
<Header />
|
||||
|
||||
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
|
||||
|
|
@ -247,7 +247,7 @@ export function LayoutShell({
|
|||
return (
|
||||
<SidebarProvider value={sidebarContextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div className={cn("flex h-screen w-full flex-col bg-main-panel", className)}>
|
||||
<div className={cn("flex h-screen w-full flex-col bg-panel", className)}>
|
||||
<Header
|
||||
mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
|
||||
/>
|
||||
|
|
@ -369,9 +369,12 @@ export function LayoutShell({
|
|||
<SidebarProvider value={sidebarContextValue}>
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<div
|
||||
className={cn("flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-muted/40", className)}
|
||||
className={cn(
|
||||
"flex h-screen w-full gap-2 px-2 py-0 overflow-hidden bg-rail",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="hidden md:flex overflow-hidden border-r border-border/60 -mr-2 pr-2">
|
||||
<div className="hidden md:flex overflow-hidden border-r -mr-2 pr-2 bg-rail">
|
||||
<IconRail
|
||||
searchSpaces={searchSpaces}
|
||||
activeSearchSpaceId={activeSearchSpaceId}
|
||||
|
|
@ -396,8 +399,8 @@ export function LayoutShell({
|
|||
{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content. Negative right margin closes the flex gap so the sidebar sits flush against the main panel, separated only by a border. */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative hidden md:flex shrink-0 z-20 -mr-2 border-r border-border/60",
|
||||
!isCollapsed && "bg-sidebar"
|
||||
"relative hidden md:flex shrink-0 z-20 -mr-2 border-r",
|
||||
!isCollapsed && "bg-panel"
|
||||
)}
|
||||
>
|
||||
{!isCollapsed && (
|
||||
|
|
@ -437,13 +440,18 @@ export function LayoutShell({
|
|||
/>
|
||||
)}
|
||||
|
||||
{/* Invisible drag hit-area straddling the right border — provides resize affordance without any visible UI */}
|
||||
{/* Drag hit-area straddling the right border — wider for a forgiving grab,
|
||||
z-50 + pointer-events-auto to beat any neighboring stacking context. */}
|
||||
{!isCollapsed && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Resize sidebar"
|
||||
onMouseDown={onResizeMouseDown}
|
||||
className="absolute top-0 right-0 h-full w-2 translate-x-1/2 cursor-col-resize z-30 bg-transparent border-0 p-0 focus:outline-none"
|
||||
className={cn(
|
||||
"absolute top-0 right-0 h-full w-4 translate-x-1/2 cursor-col-resize z-50 pointer-events-auto select-none bg-transparent border-0 p-0 focus:outline-none",
|
||||
"after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors",
|
||||
isResizing && "after:bg-border"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export function Sidebar({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
|
||||
"relative flex h-full flex-col bg-panel text-sidebar-foreground overflow-hidden select-none",
|
||||
isCollapsed ? "w-[60px] transition-[width] duration-200" : "",
|
||||
!isCollapsed && !isResizing ? "transition-[width] duration-200" : "",
|
||||
className
|
||||
|
|
@ -296,7 +296,7 @@ export function Sidebar({
|
|||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-auto border-t border-border/60">
|
||||
<div className="mt-auto border-t">
|
||||
{/* Platform navigation */}
|
||||
{footerNavItems.length > 0 && (
|
||||
<NavSection
|
||||
|
|
@ -346,7 +346,7 @@ function SidebarUsageFooter({
|
|||
|
||||
const containerClass = cn(
|
||||
"px-3 py-3 space-y-3",
|
||||
hasNavSectionAbove && "border-t border-border/60"
|
||||
hasNavSectionAbove && "border-t"
|
||||
);
|
||||
|
||||
if (isAnonymous) {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export function SidebarCollapseButton({
|
|||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onToggle}
|
||||
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-muted/40"
|
||||
className="h-8 w-8 shrink-0 text-muted-foreground hover:text-muted-foreground hover:bg-accent"
|
||||
>
|
||||
<PanelLeft className="h-4 w-4" />
|
||||
<span className="sr-only">{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}</span>
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export function TabBar({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b border-border/60",
|
||||
"mb-0 flex h-12 items-center shrink-0 px-1 gap-0.5 select-none border-b bg-panel",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
|
@ -195,9 +195,9 @@ export function TabBar({
|
|||
className={cn(
|
||||
// Solid bg + soft left-fade so tabs scrolling underneath the
|
||||
// + button get visually masked into the bar's background.
|
||||
"sticky right-0 z-10 flex h-full shrink-0 items-center bg-main-panel pl-3 pr-1",
|
||||
"sticky right-0 z-10 flex h-full shrink-0 items-center bg-panel pl-3 pr-1",
|
||||
"before:content-[''] before:absolute before:inset-y-0 before:-left-4 before:w-4 before:pointer-events-none",
|
||||
"before:bg-gradient-to-r before:from-transparent before:to-main-panel"
|
||||
"before:bg-gradient-to-r before:from-transparent before:to-panel"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue