Prechádzať zdrojové kódy

style(studio): fix contrast + sidebar font + chat bar size (3rd iteration)

Dark contrast: foreground 0.92→0.95, muted-foreground 0.68→0.75,
  secondary-foreground 0.88→0.92, accent-foreground 0.90→0.93
Sidebar: text-sm→text-base (16px), py-2→py-2.5, width 230→240px,
  inactive items text-foreground/80 (was /60)
System nav: text-sm→text-base, text-foreground/70 (was /50)
Chat bar: removed max-w-3xl constraint on input area,
  py-2.5→py-2, tighter overall
Ma 7 mesiacov pred
rodič
commit
cd3045b7d4

+ 4 - 4
packages/studio/src/components/ChatBar.tsx

@@ -118,13 +118,13 @@ export function ChatBar({ t, sse }: {
     : "Tell InkOS what to do...";
     : "Tell InkOS what to do...";
 
 
   return (
   return (
-    <div className="border border-border/60 bg-card/40 mx-6 mb-4 rounded-md">
+    <div className="border border-border/60 bg-card/40 mx-6 mb-3 rounded-md">
       {/* Expanded message area */}
       {/* Expanded message area */}
       {expanded && messages.length > 0 && (
       {expanded && messages.length > 0 && (
-        <div className="max-w-3xl mx-auto">
+        <div>
           <div
           <div
             ref={scrollRef}
             ref={scrollRef}
-            className="max-h-[200px] overflow-y-auto px-10 py-4 space-y-2.5"
+            className="max-h-[180px] overflow-y-auto px-4 py-3 space-y-2"
           >
           >
             {messages.map((msg, i) => (
             {messages.map((msg, i) => (
               <div
               <div
@@ -151,7 +151,7 @@ export function ChatBar({ t, sse }: {
       )}
       )}
 
 
       {/* Input bar — centered to match main content */}
       {/* Input bar — centered to match main content */}
-      <div className="max-w-3xl mx-auto px-4 py-2.5 flex items-center gap-3">
+      <div className="px-4 py-2 flex items-center gap-3">
         <div className="flex-1 relative">
         <div className="flex-1 relative">
           <input
           <input
             ref={inputRef}
             ref={inputRef}

+ 6 - 6
packages/studio/src/components/Sidebar.tsx

@@ -27,7 +27,7 @@ export function Sidebar({ nav, activePage, t }: {
   const { data: daemon } = useApi<{ running: boolean }>("/daemon");
   const { data: daemon } = useApi<{ running: boolean }>("/daemon");
 
 
   return (
   return (
-    <aside className="w-[230px] shrink-0 border-r border-border bg-card/40 flex flex-col h-full overflow-y-auto">
+    <aside className="w-[240px] shrink-0 border-r border-border bg-card/40 flex flex-col h-full overflow-y-auto">
       {/* Logo — generous vertical breathing room */}
       {/* Logo — generous vertical breathing room */}
       <div className="px-6 pt-7 pb-6">
       <div className="px-6 pt-7 pb-6">
         <button onClick={nav.toDashboard} className="flex items-baseline gap-0.5 hover:opacity-70 transition-opacity">
         <button onClick={nav.toDashboard} className="flex items-baseline gap-0.5 hover:opacity-70 transition-opacity">
@@ -39,7 +39,7 @@ export function Sidebar({ nav, activePage, t }: {
       {/* Books section */}
       {/* Books section */}
       <div className="flex-1 px-4">
       <div className="flex-1 px-4">
         <div className="px-2 mb-3 flex items-center justify-between">
         <div className="px-2 mb-3 flex items-center justify-between">
-          <span className="text-xs uppercase tracking-[0.12em] text-muted-foreground font-medium">{t("nav.books")}</span>
+          <span className="text-sm uppercase tracking-wide text-muted-foreground font-medium">{t("nav.books")}</span>
           <button
           <button
             onClick={nav.toBookCreate}
             onClick={nav.toBookCreate}
             className="w-6 h-6 flex items-center justify-center rounded text-sm text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all"
             className="w-6 h-6 flex items-center justify-center rounded text-sm text-muted-foreground hover:text-primary hover:bg-primary/10 transition-all"
@@ -53,10 +53,10 @@ export function Sidebar({ nav, activePage, t }: {
             <button
             <button
               key={book.id}
               key={book.id}
               onClick={() => nav.toBook(book.id)}
               onClick={() => nav.toBook(book.id)}
-              className={`w-full text-left px-3 py-2 rounded-md text-sm truncate transition-all duration-150 ${
+              className={`w-full text-left px-3 py-2.5 rounded-md text-base truncate transition-all duration-150 ${
                 activePage === `book:${book.id}`
                 activePage === `book:${book.id}`
                   ? "bg-primary/10 text-primary font-medium"
                   ? "bg-primary/10 text-primary font-medium"
-                  : "text-foreground/60 hover:text-foreground hover:bg-muted/40"
+                  : "text-foreground/80 hover:text-foreground hover:bg-muted/40"
               }`}
               }`}
             >
             >
               {book.title}
               {book.title}
@@ -109,10 +109,10 @@ function SidebarItem({ label, icon, active, onClick, badge, badgeColor }: {
   return (
   return (
     <button
     <button
       onClick={onClick}
       onClick={onClick}
-      className={`w-full text-left px-3 py-2 rounded-md text-sm flex items-center gap-2.5 transition-all duration-150 ${
+      className={`w-full text-left px-3 py-2.5 rounded-md text-base flex items-center gap-2.5 transition-all duration-150 ${
         active
         active
           ? "bg-secondary text-foreground font-medium"
           ? "bg-secondary text-foreground font-medium"
-          : "text-foreground/50 hover:text-foreground hover:bg-muted/40"
+          : "text-foreground/70 hover:text-foreground hover:bg-muted/40"
       }`}
       }`}
     >
     >
       <span className="text-sm w-4 text-center opacity-60">{icon}</span>
       <span className="text-sm w-4 text-center opacity-60">{icon}</span>

+ 6 - 6
packages/studio/src/index.css

@@ -63,19 +63,19 @@
 /* ── Dark: midnight study ── */
 /* ── Dark: midnight study ── */
 .dark {
 .dark {
   --background: oklch(0.14 0.01 55);
   --background: oklch(0.14 0.01 55);
-  --foreground: oklch(0.92 0.015 75);
+  --foreground: oklch(0.95 0.01 75);
   --card: oklch(0.18 0.012 55);
   --card: oklch(0.18 0.012 55);
-  --card-foreground: oklch(0.92 0.015 75);
+  --card-foreground: oklch(0.95 0.01 75);
   --popover: oklch(0.18 0.012 55);
   --popover: oklch(0.18 0.012 55);
-  --popover-foreground: oklch(0.92 0.015 75);
+  --popover-foreground: oklch(0.95 0.01 75);
   --primary: oklch(0.75 0.15 65);
   --primary: oklch(0.75 0.15 65);
   --primary-foreground: oklch(0.12 0.01 55);
   --primary-foreground: oklch(0.12 0.01 55);
   --secondary: oklch(0.24 0.015 55);
   --secondary: oklch(0.24 0.015 55);
-  --secondary-foreground: oklch(0.88 0.02 75);
+  --secondary-foreground: oklch(0.92 0.015 75);
   --muted: oklch(0.24 0.012 55);
   --muted: oklch(0.24 0.012 55);
-  --muted-foreground: oklch(0.68 0.02 70);
+  --muted-foreground: oklch(0.75 0.015 70);
   --accent: oklch(0.26 0.018 55);
   --accent: oklch(0.26 0.018 55);
-  --accent-foreground: oklch(0.90 0.02 75);
+  --accent-foreground: oklch(0.93 0.015 75);
   --destructive: oklch(0.62 0.2 25);
   --destructive: oklch(0.62 0.2 25);
   --destructive-foreground: oklch(0.98 0 0);
   --destructive-foreground: oklch(0.98 0 0);
   --border: oklch(0.35 0.02 55);
   --border: oklch(0.35 0.02 55);