Readme fixes and global colors

README.md

@@ -9,7 +9,7 @@
 [Laminar](https://www.lmnr.ai) is an all-in-one open-source platform for engineering AI products. Trace, evaluate, label, and analyze LLM data.
 
 - [x] Tracing
-    - [x] OpenTelemetry-based automatic tracing of common AI frameworks and SDKs (LangChain, OpenAI, Anthropic ...) with just 2 lines of code. (powered by an amazing [OpenLLMetry](https://github.com/traceloop/openllmetry)).
+    - [x] OpenTelemetry-based automatic tracing of common AI frameworks and SDKs (LangChain, OpenAI, Anthropic ...) with just 2 lines of code. (powered by amazing [OpenLLMetry](https://github.com/traceloop/openllmetry)).
     - [x] Trace input/output, latency, cost, token count.
     - [x] Function tracing with `observe` decorator/wrapper.
     - [x] Image tracing.
@@ -49,7 +49,7 @@ docker compose up -d
 ```
 
 This will spin up a lightweight version of the stack with Postgres, app-server, and frontend. This is good for a quickstart 
-or for lightweight usage.
+or for lightweight usage. You can access the UI at http://localhost:3000 in your browser.
 
 For production environment, we recommend using our [managed platform](https://www.lmnr.ai/projects) or `docker compose -f docker-compose-full.yml up -d`. 
 
@@ -59,7 +59,7 @@ For production environment, we recommend using our [managed platform](https://ww
 - rabbitmq – message queue for reliable trace processing
 - qdrant – vector database
 - semantic-search-service – gRPC service for embedding text and storing/retrieving it from qdrant
-- frontend – NextJS frontend and backend
+- frontend – Next.js frontend and backend
 - python-executor – gRPC service with lightweight Python sandbox that can run arbitrary code.
 - postgres – Postgres database for all the application data
 - clickhouse – columnar OLAP database for more efficient trace and label analytics

frontend/app/globals.css

@@ -35,20 +35,20 @@
 
     --radius: 0.5rem; */
 
-    --background: 240 0% 6%;
-    --foreground: 240 8% 95%;
+    --background: 0 0% 8%;
+    --foreground: 0 8% 90%;
 
-    --card: 240 8% 10%;
+    --card: 240 4% 12%;
     --card-foreground: 240 8% 80%;
 
-    --popover: 240 0% 6%;
-    --popover-foreground: 240 8% 80%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 8% 90%;
 
     --primary: 16 83% 59%;
     --primary-foreground: 16 0% 91%;
 
-    --secondary: 240 4% 11%;
-    --secondary-foreground: 240 8% 70%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 4% 70%;
 
     --muted: 240 6% 16%;
     --muted-foreground: 215 20.2% 65.1%;

frontend/components/ui/code-editor.tsx

@@ -61,10 +61,10 @@ export default function CodeEditor({
   }
 
   return (
-    <div className={cn('w-full h-full flex flex-col p-2 bg-secondary text-foreground', className)}>
+    <div className={cn('w-full h-full flex flex-col p-2 bg-card text-foreground', className)}>
       <CodeMirror
         placeholder={placeholder}
-        className="border-none bg-secondary"
+        className="border-none bg-card"
         theme={myTheme}
         extensions={extensions}
         editable={editable}