From 0d469f70bf732cd3acb88268f86c249524aaf2d2 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Fri, 3 Apr 2026 15:04:10 +0200
Subject: [PATCH] feat: improve styles

---
 .../src/components/editor/PreviewPane.tsx     |   4 +-
 frontend/src/components/editor/ToolBar.tsx    |   2 +-
 frontend/src/routes/DashboardView.tsx         | 160 +++++++++---------
 frontend/src/routes/EditorView.tsx            |   4 +-
 4 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/frontend/src/components/editor/PreviewPane.tsx b/frontend/src/components/editor/PreviewPane.tsx
index 8f5b740..d40992d 100644
--- a/frontend/src/components/editor/PreviewPane.tsx
+++ b/frontend/src/components/editor/PreviewPane.tsx
@@ -23,8 +23,8 @@ export default function PreviewPane() {
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center px-3 py-1.5 border-b-2 border-border shrink-0 gap-2">
-        <span className="text-xs text-muted-foreground flex-1">
+      <div className="flex items-center px-4 py-2 border-b-2 border-border shrink-0 gap-2">
+        <span className="font-medium text-foreground flex-1">
           Preview
           {isDynamic && (
             <span className="ml-1.5 text-primary/60 text-[10px]" title="Dynamic page">⚡</span>
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx
index d3adb35..8cd61c8 100644
--- a/frontend/src/components/editor/ToolBar.tsx
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -24,7 +24,7 @@ export default function ToolBar({
   const navigate = useNavigate();
 
   return (
-    <div className="flex items-center gap-2 px-3 py-1.5 border-b-2 border-border shrink-0">
+    <div className="flex items-center gap-2 px-4 py-2 border-b-2 border-border shrink-0">
       <button
         onClick={() => navigate("/")}
         className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs uppercase tracking-wider"
diff --git a/frontend/src/routes/DashboardView.tsx b/frontend/src/routes/DashboardView.tsx
index bbe6a49..3bc52c4 100644
--- a/frontend/src/routes/DashboardView.tsx
+++ b/frontend/src/routes/DashboardView.tsx
@@ -115,94 +115,94 @@ export default function DashboardView() {
             </Button>
             <Button onClick={() => navigate("/editor/new")}>
               <Plus className="w-4 h-4 mr-2" />
-            New Page
-          </Button>
+              New Page
+            </Button>
+          </div>
         </div>
-      </div>
 
         {/* Table inside bordered container */}
         <Table>
           <TableHeader>
             <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Title</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Size</TableHead>
-            <TableHead className="w-8" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {pages.map((p) => (
-            <TableRow
-              key={p.name}
-              className="cursor-pointer"
-              onClick={() => navigate(`/editor/${p.name}`)}
-            >
-              <TableCell className="font-mono">
-                {p.name}
-                {p.name === "index" && (
-                  <span className="ml-2 text-xs text-primary">homepage</span>
-                )}
-              </TableCell>
-              <TableCell className="text-muted-foreground">
-                {p.title ?? "—"}
-              </TableCell>
-              <TableCell>
-                <StatusBadge published={p.published} hasSource={p.has_source} />
-              </TableCell>
-              <TableCell className="text-muted-foreground">
-                {p.size != null ? `${p.size} B` : "—"}
-              </TableCell>
-              <TableCell className="text-right w-8">
-                <Popover>
-                  <PopoverTrigger
-                    render={
-                      <button
-                        onClick={(e) => e.stopPropagation()}
-                        className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-                      >
-                        <MoreVertical className="w-4 h-4" />
-                      </button>
-                    }
-                  />
-                  <PopoverContent side="bottom" align="end" sideOffset={4}
-                    className="w-36 p-1"
-                  >
-                    <button
-                      onClick={(e) => { e.stopPropagation(); navigate(`/editor/${p.name}`); }}
-                      className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
-                    >Edit</button>
-                    {p.published ? (
-                      <button
-                        onClick={(e) => { e.stopPropagation(); handleUnpublish(p.name); }}
-                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
-                      >Unpublish</button>
-                    ) : (
-                      <button
-                        onClick={(e) => { e.stopPropagation(); handlePublish(p.name); }}
-                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
-                      >Publish</button>
-                    )}
-                    <button
-                      onClick={(e) => { e.stopPropagation(); setPageToDelete(p.name); }}
-                      className="w-full text-left px-3 py-1.5 text-xs text-destructive hover:bg-accent transition-colors cursor-pointer"
-                    >Delete</button>
-                  </PopoverContent>
-                </Popover>
-              </TableCell>
+              <TableHead>Name</TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Size</TableHead>
+              <TableHead className="w-8" />
             </TableRow>
-          ))}
-          {pages.length === 0 && (
-            <TableRow>
-              <TableCell
-                colSpan={5}
-                className="text-center text-muted-foreground py-8"
+          </TableHeader>
+          <TableBody>
+            {pages.map((p) => (
+              <TableRow
+                key={p.name}
+                className="cursor-pointer"
+                onClick={() => navigate(`/editor/${p.name}`)}
               >
-                No pages yet. Create one to get started.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
+                <TableCell className="font-mono">
+                  {p.name}
+                  {p.name === "index" && (
+                    <span className="ml-2 text-xs text-primary">homepage</span>
+                  )}
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {p.title ?? "—"}
+                </TableCell>
+                <TableCell>
+                  <StatusBadge published={p.published} hasSource={p.has_source} />
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {p.size != null ? `${p.size} B` : "—"}
+                </TableCell>
+                <TableCell className="text-right w-8">
+                  <Popover>
+                    <PopoverTrigger
+                      render={
+                        <button
+                          onClick={(e) => e.stopPropagation()}
+                          className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                        >
+                          <MoreVertical className="w-4 h-4" />
+                        </button>
+                      }
+                    />
+                    <PopoverContent side="bottom" align="end" sideOffset={4}
+                      className="w-36 p-1"
+                    >
+                      <button
+                        onClick={(e) => { e.stopPropagation(); navigate(`/editor/${p.name}`); }}
+                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                      >Edit</button>
+                      {p.published ? (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); handleUnpublish(p.name); }}
+                          className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                        >Unpublish</button>
+                      ) : (
+                        <button
+                          onClick={(e) => { e.stopPropagation(); handlePublish(p.name); }}
+                          className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
+                        >Publish</button>
+                      )}
+                      <button
+                        onClick={(e) => { e.stopPropagation(); setPageToDelete(p.name); }}
+                        className="w-full text-left px-3 py-1.5 text-xs text-destructive hover:bg-accent transition-colors cursor-pointer"
+                      >Delete</button>
+                    </PopoverContent>
+                  </Popover>
+                </TableCell>
+              </TableRow>
+            ))}
+            {pages.length === 0 && (
+              <TableRow>
+                <TableCell
+                  colSpan={5}
+                  className="text-center text-muted-foreground py-8"
+                >
+                  No pages yet. Create one to get started.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
         </Table>
       </div>{/* end bordered container */}
 
diff --git a/frontend/src/routes/EditorView.tsx b/frontend/src/routes/EditorView.tsx
index 56d2f96..4ec1d7e 100644
--- a/frontend/src/routes/EditorView.tsx
+++ b/frontend/src/routes/EditorView.tsx
@@ -206,8 +206,8 @@ function SourcePane({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center px-3 py-1.5 border-b-2 border-border shrink-0 gap-2">
-        <span className="text-xs text-muted-foreground flex-1">Source</span>
+      <div className="flex items-center px-4 py-2 border-b-2 border-border shrink-0 gap-2">
+        <span className="font-medium text-foreground flex-1">Source</span>
 
         <Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
           <PopoverTrigger