Skip to content

Commit d9c0d49

Browse files
gkorlandgkorland
authored
Merge pull request #616 from FalkorDB/ui/falkordb-design-alignment
Align UI with FalkorDB design language
2 parents 97b6113 + 899f11d commit d9c0d49

16 files changed

Lines changed: 482 additions & 230 deletions

‎app/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
7-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Oswald:wght@400;500;700&display=swap" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
88
<title>Code Graph by FalkorDB</title>
99
</head>
1010
<body>

‎app/src/App.tsx‎

Lines changed: 144 additions & 109 deletions
Large diffs are not rendered by default.

‎app/src/components/Input.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
149149
}
150150
}}
151151
onKeyDown={handleKeyDown}
152-
className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
152+
className={cn("w-full border p-2 rounded-md pointer-events-auto bg-background text-foreground focus:border-primary focus:ring-1 focus:ring-primary/50 focus-visible:outline-none transition-colors", className)}
153153
placeholder="Search for nodes in the graph"
154154
value={node?.name || ""}
155155
onChange={(e) => {
@@ -175,7 +175,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
175175
open &&
176176
<div
177177
ref={containerRef}
178-
className="z-10 w-full bg-white absolute flex flex-col pointer-events-auto border rounded-md md:max-h-[50dvh] h-[25dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
178+
className="z-10 w-full bg-background absolute flex flex-col pointer-events-auto border rounded-md md:max-h-[50dvh] h-[25dvh] overflow-y-auto overflow-x-hidden p-2 gap-2"
179179
data-name='search-bar-list'
180180
style={{
181181
top: inputHeight + 16
@@ -201,7 +201,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
201201
<button
202202
className={cn(
203203
"w-full flex gap-3 p-1 items-center rounded-md",
204-
selectedOption === index && "bg-gray-100"
204+
selectedOption === index && "bg-muted"
205205
)}
206206
onMouseEnter={() => setSelectedOption(index)}
207207
onClick={() => {
@@ -216,7 +216,7 @@ export default function Input({ onValueChange, handleSubmit, graph, icon, node,
216216
<p className="truncate" title={name}>
217217
{name}
218218
</p>
219-
<p className="truncate p-1 text-xs font-medium text-gray-400" title={path}>
219+
<p className="truncate p-1 text-xs font-medium text-muted-foreground" title={path}>
220220
{path}
221221
</p>
222222
</div>

‎app/src/components/chat.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Graph, GraphData, Node } from "./model";
77
import { cn, GraphRef } from "@/lib/utils";
88
import { TypeAnimation } from "react-type-animation";
99
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
10+
import { Button } from "@/components/ui/button";
1011

1112
const AUTH_HEADERS: HeadersInit = import.meta.env.VITE_SECRET_TOKEN
1213
? { 'Authorization': `Bearer ${import.meta.env.VITE_SECRET_TOKEN}` }
@@ -548,7 +549,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
548549
value={path?.start?.name || ""}
549550
placeholder="Start typing starting point"
550551
type="text"
551-
icon={<ChevronDown color="gray" />}
552+
icon={<ChevronDown className="text-muted-foreground" />}
552553
node={path?.start}
553554
scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
554555
/>
@@ -559,7 +560,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
559560
onValueChange={({ name, id }) => setPath(prev => ({ end: { name, id }, start: prev?.start }))}
560561
placeholder="Start typing end point"
561562
type="text"
562-
icon={<ChevronDown color="gray" />}
563+
icon={<ChevronDown className="text-muted-foreground" />}
563564
node={path?.end}
564565
scrollToBottom={() => containerRef.current?.scrollTo(0, containerRef.current?.scrollHeight)}
565566
/>
@@ -578,7 +579,7 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
578579
p.nodes.length === selectedPath?.nodes.length &&
579580
selectedPath?.nodes.every(node => p?.nodes.some((n) => n.id === node.id)) &&
580581
"border-[#ffde21] bg-[#ffde2133]",
581-
message.graphName !== graph.Id && "opacity-50 bg-gray-200"
582+
message.graphName !== graph.Id && "opacity-50 bg-secondary"
582583
)}
583584
title={message.graphName !== graph.Id ? `Move to graph ${message.graphName} to use this path` : undefined}
584585
disabled={message.graphName !== graph.Id}
@@ -642,19 +643,19 @@ export function Chat({ messages, setMessages, query, setQuery, selectedPath, set
642643
<footer className="flex gap-4 px-4 overflow-hidden min-h-fit">
643644
<DropdownMenu open={sugOpen} onOpenChange={setSugOpen}>
644645
<DropdownMenuTrigger asChild>
645-
<button data-name="lightbulb" className="p-4 border rounded-md hover:border-[#FF66B3] hover:bg-[#FFF0F7]">
646+
<button data-name="lightbulb" className="p-4 border rounded-md hover:border-primary hover:bg-primary/5 transition-colors">
646647
<Lightbulb />
647648
</button>
648649
</DropdownMenuTrigger>
649650
<DropdownMenuContent align="start" className="flex flex-col gap-2 mb-4 w-[81.51dvw] md:w-[20dvw] overflow-y-auto" side="top">
650651
{getTip("!w-full")}
651652
</DropdownMenuContent>
652653
</DropdownMenu>
653-
<form className="grow flex items-center border rounded-md px-2" onSubmit={sendQuery}>
654-
<input className="w-1 grow p-4 rounded-md focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
655-
<button disabled={isSendMessage} className={`bg-gray-200 p-2 rounded-md ${!isSendMessage && 'hover:bg-gray-300'}`}>
656-
<ArrowRight color="white" />
657-
</button>
654+
<form className="grow flex items-center border rounded-md px-2 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/50 transition-colors" onSubmit={sendQuery}>
655+
<input className="w-1 grow p-4 rounded-md bg-transparent focus-visible:outline-none" placeholder="Ask your question" onChange={handleQueryInputChange} value={query} />
656+
<Button disabled={isSendMessage} variant="default" size="icon" className="shrink-0">
657+
<ArrowRight />
658+
</Button>
658659
</form>
659660
</footer>
660661
</div>

‎app/src/components/code-graph.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Graph, GraphData, Node, Link } from "./model";
33
import { Toolbar } from "./toolbar";
44
import { Labels } from "./labels";
55
import { Download, GitFork, Search, X } from "lucide-react";
6+
import { Button } from "@/components/ui/button";
67
import ElementMenu from "./elementMenu";
78
import Combobox from "./combobox";
89
import { toast } from '@/components/ui/use-toast';
@@ -346,9 +347,9 @@ export function CodeGraph({
346347
}
347348

348349
return (
349-
<div className="grow md:h-full w-full flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-gray-100">
350+
<div className="grow md:h-full w-full flex flex-col gap-4 p-4 pt-0 md:p-8 md:bg-muted">
350351
<header className="flex flex-col gap-4 relative">
351-
<div className="absolute md:hidden inset-x-0 top-8 h-[50%] bg-gray-100 -mx-8 -mt-8 px-8 border-b border-gray-400" />
352+
<div className="absolute md:hidden inset-x-0 top-8 h-[50%] bg-muted -mx-8 -mt-8 px-8 border-b border-border" />
352353
<Combobox
353354
options={options}
354355
setOptions={setOptions}
@@ -357,7 +358,7 @@ export function CodeGraph({
357358
/>
358359
</header>
359360
<div className='h-1 grow flex flex-col'>
360-
<main ref={containerRef} className="bg-white h-1 grow">
361+
<main ref={containerRef} className="bg-background h-1 grow">
361362
{
362363
graph.Id ?
363364
<div className="h-full relative border flex flex-col md:block">
@@ -377,8 +378,10 @@ export function CodeGraph({
377378
<div className="flex gap-2">
378379
{
379380
(isPathResponse || isPathResponse === undefined) &&
380-
<button
381-
className='bg-[#ECECEC] hover:bg-[#D3D3D3] p-2 rounded-md flex gap-2 items-center pointer-events-auto'
381+
<Button
382+
variant="secondary"
383+
size="sm"
384+
className='pointer-events-auto'
382385
onClick={() => {
383386
const canvas = canvasRef.current
384387

@@ -406,13 +409,15 @@ export function CodeGraph({
406409
}}
407410
>
408411
<X size={15} />
409-
<p>Reset Graph</p>
410-
</button>
412+
Reset Graph
413+
</Button>
411414
}
412415
{
413416
hasHiddenElements &&
414-
<button
415-
className='bg-[#ECECEC] hover:bg-[#D3D3D3] p-2 rounded-md flex gap-2 items-center pointer-events-auto'
417+
<Button
418+
variant="secondary"
419+
size="sm"
420+
className='pointer-events-auto'
416421
onClick={() => {
417422
const canvas = canvasRef.current;
418423

@@ -435,8 +440,8 @@ export function CodeGraph({
435440
}}
436441
>
437442
<X size={15} />
438-
<p>Unhide Nodes</p>
439-
</button>
443+
Unhide Nodes
444+
</Button>
440445
}
441446
</div>
442447
</div>
@@ -476,15 +481,15 @@ export function CodeGraph({
476481
zoomedNodes={zoomedNodes}
477482
/>
478483
<div data-name="canvas-info-panel" className="w-full md:absolute md:bottom-0 md:left-0 md:flex md:justify-between md:items-center md:p-4 z-10 pointer-events-none">
479-
<div data-name="metrics-panel" className="flex gap-4 justify-center bg-gray-100 md:bg-transparent md:text-gray-500 p-2 md:p-0">
484+
<div data-name="metrics-panel" className="flex gap-4 justify-center bg-muted md:bg-transparent md:text-muted-foreground p-2 md:p-0">
480485
<p>{nodesCount} Nodes</p>
481486
<p className="md:hidden">|</p>
482487
<p>{edgesCount} Edges</p>
483488
</div>
484489
<div className='hidden md:flex gap-4'>
485490
{
486491
commitIndex !== commits.length &&
487-
<div className='bg-white flex gap-2 border rounded-md p-2 pointer-events-auto'>
492+
<div className='bg-background flex gap-2 border rounded-md p-2 pointer-events-auto'>
488493
<div className='flex gap-2 items-center'>
489494
<Checkbox
490495
className='h-5 w-5 bg-gray-500 data-[state true]'
@@ -511,8 +516,8 @@ export function CodeGraph({
511516
</div>
512517
</div>
513518
</div>
514-
: <div className="flex flex-col items-center justify-center h-full text-gray-400">
515-
<GitFork className="md:w-24 md:h-24 w-16 h-16" color="gray" />
519+
: <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
520+
<GitFork className="md:w-24 md:h-24 w-16 h-16" />
516521
<h1 className="md:text-4xl text-2xl text-center">Select a repo to show its graph here</h1>
517522
</div>
518523
}

‎app/src/components/combobox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function Combobox({ options, setOptions, selectedValue, onSelecte
5858

5959
return (
6060
<Select open={open} onOpenChange={setOpen} value={selectedValue} onValueChange={onSelectedValue}>
61-
<SelectTrigger className="z-10 md:z-0 rounded-md border border-gray-400 md:border-gray-100 focus:ring-0 focus:ring-offset-0">
61+
<SelectTrigger className="z-10 md:z-0 rounded-md border border-border focus:ring-1 focus:ring-primary">
6262
<SelectValue placeholder="Select a repo" />
6363
</SelectTrigger>
6464
<SelectContent>

0 commit comments

Comments
 (0)