gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design sweep - improved light mode onboarding (#401)

Browse source 
* tweaking colors

* minimal diff for layout wrapper

* scrolling fix
This commit is contained in:
Cole Goldsmith 2025-11-13 16:21:25 -06:00 • committed by GitHub
parent 441f28a9f4
commit 5aad7c50dd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/chat/components/chat-input.tsx
View file

@ -94,7 +94,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
<div className="w-full"> <div className="w-full">
<form onSubmit={onSubmit} className="relative"> <form onSubmit={onSubmit} className="relative">
{/* Outer container - flex-col to stack file preview above input */} {/* Outer container - flex-col to stack file preview above input */}
<div className="flex flex-col w-full gap-2 rounded-xl border border-input focus-within:ring-1 focus-within:ring-ring p-2"> <div className="flex flex-col w-full gap-2 rounded-xl border border-input hover:[&:not(:focus-within)]:border-muted-foreground focus-within:border-foreground p-2 transition-colors">
{/* File Preview Section - Always above */} {/* File Preview Section - Always above */}
{uploadedFile && ( {uploadedFile && (
<FilePreview <FilePreview

2
frontend/src/app/layout.tsx
View file

@ -38,7 +38,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body <body
className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden bg-black`} className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased overflow-hidden bg-white dark:bg-black`}
> >
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"

8
frontend/src/app/onboarding/components/onboarding-card.tsx
View file

@ -308,7 +308,7 @@ const OnboardingCard = ({
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "anthropic" modelProvider === "anthropic"
? "bg-[#D97757]" ? "bg-[#D97757]"
: "bg-muted", : "bg-muted",
@ -341,7 +341,7 @@ const OnboardingCard = ({
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "openai" ? "bg-white" : "bg-muted", modelProvider === "openai" ? "bg-white" : "bg-muted",
)} )}
> >
@ -371,7 +371,7 @@ const OnboardingCard = ({
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "watsonx" modelProvider === "watsonx"
? "bg-[#1063FE]" ? "bg-[#1063FE]"
: "bg-muted", : "bg-muted",
@ -403,7 +403,7 @@ const OnboardingCard = ({
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "ollama" ? "bg-white" : "bg-muted", modelProvider === "ollama" ? "bg-white" : "bg-muted",
)} )}
> >

2
frontend/src/app/onboarding/components/progress-bar.tsx
View file

@ -14,7 +14,7 @@ export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProp
<div className="w-full flex items-center px-6 gap-4"> <div className="w-full flex items-center px-6 gap-4">
<div className="flex-1" /> <div className="flex-1" />
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-48 h-1 bg-background rounded-full overflow-hidden"> <div className="w-48 h-1 bg-background dark:bg-muted rounded-full overflow-hidden">
<div <div
className="h-full transition-all duration-300 ease-in-out" className="h-full transition-all duration-300 ease-in-out"
style={{ style={{

2
frontend/src/app/settings/components/watsonx-settings-dialog.tsx
View file

@ -137,7 +137,7 @@ const WatsonxSettingsDialog = ({
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
<DialogFooter> <DialogFooter className="mt-4">
<Button <Button
variant="outline" variant="outline"
type="button" type="button"

34
frontend/src/app/settings/page.tsx
View file

@ -1009,22 +1009,20 @@ function KnowledgeSourcesPage() {
rows={6} rows={6}
className={`resize-none ${ className={`resize-none ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "border-red-500 focus:border-red-500" ? "!border-destructive focus:border-destructive"
: "" : ""
}`} }`}
/> />
<div className="flex justify-start">
<span
className={`text-xs ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "text-red-500"
: "text-muted-foreground"
}`}
>
{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
</span>
</div>
</LabelWrapper> </LabelWrapper>
<span
className={`text-xs ${
systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
? "text-destructive"
: "text-muted-foreground"
}`}
>
{systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
</span>
</div> </div>
<div className="flex justify-end pt-2"> <div className="flex justify-end pt-2">
<Button <Button
@ -1147,7 +1145,7 @@ function KnowledgeSourcesPage() {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<LabelWrapper id="chunk-size" label="Chunk size"> <LabelWrapper id="chunk-size" label="Chunk size">
<div className="relative"> <div className="relative [&:has(input:hover):not(:has(input:focus))_button]:border-muted-foreground [&:has(input:focus)_button]:border-foreground">
<Input <Input
id="chunk-size" id="chunk-size"
type="number" type="number"
@ -1163,7 +1161,7 @@ function KnowledgeSourcesPage() {
<div className="flex flex-col"> <div className="flex flex-col">
<Button <Button
aria-label="Increase value" aria-label="Increase value"
className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative transition-colors"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onClick={() =>
@ -1174,7 +1172,7 @@ function KnowledgeSourcesPage() {
</Button> </Button>
<Button <Button
aria-label="Decrease value" aria-label="Decrease value"
className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative transition-colors"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onClick={() =>
@ -1190,7 +1188,7 @@ function KnowledgeSourcesPage() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<LabelWrapper id="chunk-overlap" label="Chunk overlap"> <LabelWrapper id="chunk-overlap" label="Chunk overlap">
<div className="relative"> <div className="relative [&:has(input:hover):not(:has(input:focus))_button]:border-muted-foreground [&:has(input:focus)_button]:border-foreground">
<Input <Input
id="chunk-overlap" id="chunk-overlap"
type="number" type="number"
@ -1206,7 +1204,7 @@ function KnowledgeSourcesPage() {
<div className="flex flex-col"> <div className="flex flex-col">
<Button <Button
aria-label="Increase value" aria-label="Increase value"
className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative transition-colors"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onClick={() =>
@ -1219,7 +1217,7 @@ function KnowledgeSourcesPage() {
</Button> </Button>
<Button <Button
aria-label="Decrease value" aria-label="Decrease value"
className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative" className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative transition-colors"
variant="outline" variant="outline"
size="iconSm" size="iconSm"
onClick={() => onClick={() =>

7
frontend/src/components/chat-renderer.tsx
View file

@ -143,7 +143,7 @@ export function ChatRenderer({
animate={{ animate={{
width: showLayout ? "100%" : "850px", width: showLayout ? "100%" : "850px",
borderRadius: showLayout ? "0" : "16px", borderRadius: showLayout ? "0" : "16px",
border: showLayout ? "0" : "1px solid #27272A", border: showLayout ? "0" : "1px solid hsl(var(--border))",
height: showLayout ? "100%" : "800px", height: showLayout ? "100%" : "800px",
x: x, x: x,
y: y, y: y,
@ -156,7 +156,7 @@ export function ChatRenderer({
}} }}
className={cn( className={cn(
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto", "flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
!showLayout && "absolute max-h-[calc(100vh-190px)]", !showLayout && "absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
showLayout && !isOnChatPage && "bg-background", showLayout && !isOnChatPage && "bg-background",
)} )}
> >
@ -165,8 +165,7 @@ export function ChatRenderer({
"h-full bg-background w-full", "h-full bg-background w-full",
showLayout && !isOnChatPage && "p-6 container", showLayout && !isOnChatPage && "p-6 container",
showLayout && isSmallWidthPath && "max-w-[850px] ml-0", showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
!showLayout && !showLayout && "p-0 py-2",
"w-full bg-card rounded-lg shadow-2xl p-0 py-2",
)} )}
> >
<motion.div <motion.div

4
frontend/src/components/layout-wrapper.tsx
View file

@ -66,10 +66,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
// For all other pages, render with Langflow-styled navigation and task menu // For all other pages, render with Langflow-styled navigation and task menu
return ( return (
<div className="h-screen w-screen flex items-center justify-center"> <div className="h-screen w-screen flex items-center justify-center bg-muted dark:bg-black">
<div <div
className={cn( className={cn(
"app-grid-arrangement bg-black relative", "app-grid-arrangement relative",
isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open", isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
isMenuOpen && "notifications-open" isMenuOpen && "notifications-open"
)} )}

3
frontend/tailwind.config.ts
View file

@ -224,6 +224,9 @@ const config = {
fontSize: "0.875rem", fontSize: "0.875rem",
textAlign: "left", textAlign: "left",
textOverflow: "ellipsis", textOverflow: "ellipsis",
transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
transitionDuration: "150ms",
"&::placeholder": { "&::placeholder": {
color: "hsl(var(--muted-foreground))", color: "hsl(var(--muted-foreground))",
}, },