devtools-client - styling improvements

CrimsonChi · Apr 11, 2024 · 45a4c58 · 45a4c58
1 parent 746a300
commit 45a4c58
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 16 deletions.
diff --git a/packages/devtools-client/src/App.tsx b/packages/devtools-client/src/App.tsx
@@ -15,15 +15,15 @@ export function App() {
 
   return (
     <>
-      <header className="p-2 bg-neutral-700 border-b border-black border-opacity-30">
+      <header className="p-2 bg-neutral-800 border-b border-black border-opacity-30">
         <Select
-          className="bg-neutral-800 text-white rounded"
+          className="bg-neutral-700 text-white rounded"
           options={[
             { text: "Select App", key: "" },
             ...apps.map((app) => app.name),
           ]}
           value={selectedApp?.name ?? ""}
-          onchange={(name) =>
+          onChange={(name) =>
             setSelectedApp(apps.find((a) => a.name === name)!)
           }
         />

diff --git a/packages/devtools-client/src/components/AppView.tsx b/packages/devtools-client/src/components/AppView.tsx
@@ -20,7 +20,9 @@ export function AppView() {
 
   return (
     <div className="flex-grow p-2 sticky top-0">
-      <h2 className="font-bold">App View</h2>
+      <h2 className="font-bold mb-2 pb-2 border-b-2 border-neutral-800">
+        App View
+      </h2>
       <NodeListItem node={app?.rootNode} />
     </div>
   )

diff --git a/packages/devtools-client/src/components/NodeListItem.tsx b/packages/devtools-client/src/components/NodeListItem.tsx
@@ -30,14 +30,14 @@ export function NodeListItem({
       </>
     )
 
+  const isSelected = selectedNode === node
+
   return (
     <>
-      <div className="pl-2">
+      <div className="pl-4 mb-1">
         <h2
-          onclick={() =>
-            setSelectedNode(selectedNode === node ? null : (node as any))
-          }
-          className={`flex gap-2 items-center cursor-pointer ${selectedNode === node ? "font-bold bg-primary" : ""}`}
+          onclick={() => setSelectedNode(isSelected ? null : (node as any))}
+          className={`flex gap-2 items-center cursor-pointer mb-1 ${isSelected ? "font-medium bg-primary" : ""}`}
         >
           <Chevron
             className="cursor-pointer transform"
@@ -50,7 +50,13 @@ export function NodeListItem({
               setCollapsed((prev) => !prev)
             }}
           />
-          {"<" + getNodeName(node) + ">"}
+          <div>
+            <span className={isSelected ? "" : "text-neutral-400"}>{"<"}</span>
+            <span className={isSelected ? "" : "text-primary"}>
+              {getNodeName(node)}
+            </span>
+            <span className={isSelected ? "" : "text-neutral-400"}>{">"}</span>
+          </div>
         </h2>
         {collapsed ? null : <NodeListItem node={node.child} />}
       </div>

diff --git a/packages/devtools-client/src/components/Select.tsx b/packages/devtools-client/src/components/Select.tsx
@@ -12,16 +12,16 @@ type SelectOption =
 interface SelectProps {
   value?: string
   options: SelectOption[]
-  onchange?: (value: string) => void
+  onChange?: (value: string) => void
 }
 
 export function Select(
   props: SelectProps & Omit<ElementProps<"select">, "onchange">
 ) {
-  const { className, value, onchange, options, ...rest } = props
+  const { className, value, onChange, options, ...rest } = props
   function handleChange(e: Event) {
     const target = e.target as HTMLSelectElement
-    onchange?.(target.value)
+    onChange?.(target.value)
   }
 
   return (

diff --git a/packages/devtools-client/src/components/SelectedNodeView.tsx b/packages/devtools-client/src/components/SelectedNodeView.tsx
@@ -27,9 +27,10 @@ export function SelectedNodeView() {
   if (selectedNode === null) return null
   const props = { ...selectedNode.props } as Record<string, any>
   delete props.children
+
   return (
     <div className="flex-grow p-2 sticky top-0">
-      <h2 className="font-bold border-b border-neutral-800">
+      <h2 className="font-bold mb-2 pb-2 border-b-2 border-neutral-800">
         {"<" + getNodeName(selectedNode) + ">"}
       </h2>
       <NodeDataSection title="props">

diff --git a/packages/devtools-client/src/index.css b/packages/devtools-client/src/index.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 body {
-  background-color: #222;
+  min-width: fit-content;
+  background-color: #171616;
   color: #fff;
   min-height: 100vh;
   display: flex;

diff --git a/packages/devtools-client/src/store.ts b/packages/devtools-client/src/store.ts
@@ -6,7 +6,7 @@ const initialApps = (kaiokenGlobal?.apps ?? []).filter(
   (app) => !isDevtoolsApp(app)
 )
 const initialApp = (initialApps[0] ?? null) as AppContext | null
-console.log({ initialApps, initialApp })
+
 export const useDevtoolsStore = createStore(
   {
     apps: initialApps,