From 692df495e215b2efb94037010d2ed0aa0f6c45a7 Mon Sep 17 00:00:00 2001 From: Guy Korland Date: Sat, 14 Mar 2026 12:26:24 +0200 Subject: [PATCH 01/14] Align UI with FalkorDB design language Replace custom Roboto/Oswald fonts and blue/pink/orange palette with FalkorDB standard: Inter font, purple primary accent, clean dark/light mode with theme toggle, and consistent shadcn/ui component usage. - Update CSS variables to purple primary, add full dark mode token set - Rename graph category colors with graph- prefix to separate from theme - Add ThemeProvider (system/light/dark, localStorage) and ThemeToggle - Redesign header: compact layout, icon-only nav with tooltips, remove gradient bar - Replace all hardcoded colors (bg-white, text-black, bg-gray-*, etc.) with semantic tokens (bg-background, text-foreground, bg-muted, etc.) - Standardize buttons/inputs to shadcn Button/focus-ring patterns - Add dark scrollbar styles and panel resize hover states Co-Authored-By: Claude Opus 4.6 --- app/index.html | 2 +- app/src/App.tsx | 251 +++++++++++++++----------- app/src/components/Input.tsx | 8 +- app/src/components/chat.tsx | 19 +- app/src/components/code-graph.tsx | 35 ++-- app/src/components/combobox.tsx | 2 +- app/src/components/dataPanel.tsx | 26 +-- app/src/components/elementMenu.tsx | 22 +-- app/src/components/labels.tsx | 2 +- app/src/components/model.ts | 8 +- app/src/components/theme-provider.tsx | 61 +++++++ app/src/components/theme-toggle.tsx | 20 ++ app/src/globals.css | 58 +++--- app/src/main.tsx | 5 +- app/tailwind.config.ts | 11 +- 15 files changed, 329 insertions(+), 201 deletions(-) create mode 100644 app/src/components/theme-provider.tsx create mode 100644 app/src/components/theme-toggle.tsx diff --git a/app/index.html b/app/index.html index 9ec23a9f..8df98691 100644 --- a/app/index.html +++ b/app/index.html @@ -4,7 +4,7 @@ - + Code Graph by FalkorDB diff --git a/app/src/App.tsx b/app/src/App.tsx index a9ea42ff..42c97d0a 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -17,6 +17,9 @@ import { cn, GraphRef, Message, Path, PathData, PathNode } from '@/lib/utils'; import type { GraphNode } from '@falkordb/canvas'; import { Toaster } from '@/components/ui/toaster'; import GTM from './GTM'; +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; +import { ThemeToggle } from './components/theme-toggle'; const Chat = lazy(() => import('./components/chat').then(mod => ({ default: mod.Chat }))); const CodeGraph = lazy(() => import('./components/code-graph').then(mod => ({ default: mod.CodeGraph }))); @@ -378,108 +381,137 @@ export default function App() {
-
+
FalkorDB -

+

CODE GRAPH

-
    - - -

    Main Website

    -     - - -

    Github

    -     - - -

    Discord

    -     - - - - - -
    - HOW TO USE THE PRODUCT - -
    - { - DESKTOP_TIPS.map((tip, index) => ( -
    -
    -

    {tip.title}

    -

    {tip.keyboardCommand}

    -
    -

    {tip.description}

    + +
      +
    • + + + + + Main Website + +
      • +
    • + + + + + Github + +
      • +
    • + + + + + Discord + +
      • +
    • + + + + + + + + Tips + + +
      + HOW TO USE THE PRODUCT +
      - )) - } -       -       - { - import.meta.env.VITE_LOCAL_MODE && - - - - - - - {!isSubmit ? "CREATE A NEW PROJECT" : "THANK YOU FOR A NEW REQUEST"} - - { - !isSubmit - ? "Please provide the URL of the project to connect and start querying data" - : "Processing your graph, this could take a while. We appreciate your patience" - } - - { - !isSubmit ? -
      - setCreateURL(e.target.value)} - placeholder="Type Project URL (File:// or https://)" - /> -
      - + DESKTOP_TIPS.map((tip, index) => ( +
      +
      +

      {tip.title}

      +

      {tip.keyboardCommand}

      +
      +

      {tip.description}

      - - : - } - -
      - } -
    + )) + } + + + +
  • + +
    • + { + import.meta.env.VITE_LOCAL_MODE && +
  • + + + + + + + {!isSubmit ? "CREATE A NEW PROJECT" : "THANK YOU FOR A NEW REQUEST"} + + + { + !isSubmit + ? "Please provide the URL of the project to connect and start querying data" + : "Processing your graph, this could take a while. We appreciate your patience" + } + + { + !isSubmit ? +
    + setCreateURL(e.target.value)} + placeholder="Type Project URL (File:// or https://)" + /> +
    + +
    +
    + : + } +     +     +
    • + } +
+
-
Loading...
}> @@ -514,7 +546,7 @@ export default function App() { setHasHiddenElements={setHasHiddenElements} /> - +
-
+
FalkorDB - +
+ + +
{menuOpen && ( -
+