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">
<form onSubmit={onSubmit} className="relative">
{/* 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 */}
{uploadedFile && (
<FilePreview

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

@ -38,7 +38,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<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
attribute="class"

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

@ -308,7 +308,7 @@ const OnboardingCard = ({
>
<div
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"
? "bg-[#D97757]"
: "bg-muted",
@ -341,7 +341,7 @@ const OnboardingCard = ({
>
<div
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",
)}
>
@ -371,7 +371,7 @@ const OnboardingCard = ({
>
<div
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"
? "bg-[#1063FE]"
: "bg-muted",
@ -403,7 +403,7 @@ const OnboardingCard = ({
>
<div
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",
)}
>

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="flex-1" />
<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
className="h-full transition-all duration-300 ease-in-out"
style={{

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

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

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

@ -1009,22 +1009,20 @@ function KnowledgeSourcesPage() {
rows={6}
className={`resize-none ${
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>
<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 className="flex justify-end pt-2">
<Button
@ -1147,7 +1145,7 @@ function KnowledgeSourcesPage() {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<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
id="chunk-size"
type="number"
@ -1163,7 +1161,7 @@ function KnowledgeSourcesPage() {
<div className="flex flex-col">
<Button
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"
size="iconSm"
onClick={() =>
@ -1174,7 +1172,7 @@ function KnowledgeSourcesPage() {
</Button>
<Button
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"
size="iconSm"
onClick={() =>
@ -1190,7 +1188,7 @@ function KnowledgeSourcesPage() {
</div>
<div className="space-y-2">
<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
id="chunk-overlap"
type="number"
@ -1206,7 +1204,7 @@ function KnowledgeSourcesPage() {
<div className="flex flex-col">
<Button
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"
size="iconSm"
onClick={() =>
@ -1219,7 +1217,7 @@ function KnowledgeSourcesPage() {
</Button>
<Button
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"
size="iconSm"
onClick={() =>

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

@ -143,7 +143,7 @@ export function ChatRenderer({
animate={{
width: showLayout ? "100%" : "850px",
borderRadius: showLayout ? "0" : "16px",
border: showLayout ? "0" : "1px solid #27272A",
border: showLayout ? "0" : "1px solid hsl(var(--border))",
height: showLayout ? "100%" : "800px",
x: x,
y: y,
@ -156,7 +156,7 @@ export function ChatRenderer({
}}
className={cn(
"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",
)}
>
@ -165,8 +165,7 @@ export function ChatRenderer({
"h-full bg-background w-full",
showLayout && !isOnChatPage && "p-6 container",
showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
!showLayout &&
"w-full bg-card rounded-lg shadow-2xl p-0 py-2",
!showLayout && "p-0 py-2",
)}
>
<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
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
className={cn(
"app-grid-arrangement bg-black relative",
"app-grid-arrangement relative",
isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
isMenuOpen && "notifications-open"
)}

3
frontend/tailwind.config.ts
View file

@ -224,6 +224,9 @@ const config = {
fontSize: "0.875rem",
textAlign: "left",
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": {
color: "hsl(var(--muted-foreground))",
},