Misc improvements

danaugrs · Sep 16, 2023 · 5241a00 · 5241a00
1 parent 9a78ff4
commit 5241a00
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
   "deno.enable": true,
   "deno.lint": true,
-  "editor.defaultFormatter": "denoland.vscode-deno"
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  }
 }
diff --git a/islands/App.tsx b/islands/App.tsx
@@ -123,7 +123,7 @@ export default function App() {
         class="w-screen h-screen p-2 flex flex-col"
         style={{
           color: theme.value === "light" ? "#000D" : "#FFFD",
-          background: theme.value === "light" ? "#FFF" : "#000D",
+          background: theme.value === "light" ? "#FAFAFA" : "#222",
           fontFamily:
             "Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif",
         }}
@@ -147,24 +147,19 @@ export default function App() {
         </div>
         <p class="mb-4">Type a λ-calculi expression below. Backslash = λ.</p>
         <div class="flex gap-2 w-full flex-col flex-1 bg-inherit">
-          <div class="flex flex-row gap-2 items-stretch">
-            <input
-              placeholder="Type a λ-calculi expression"
-              onBlur={() => {
-                expression.value = cleanExpr(expression.value);
-              }}
-              class="border-1 w-full rounded p-2 text-xl"
-              style={{
-                borderColor: theme.value === "light" ? "#000D" : "#FFF6",
-                background: theme.value === "light" ? "#EEED" : "#0006",
-                color: expression.value.length && ast.value?.errs.length
-                  ? "red"
-                  : "inherit",
-              }}
-              value={expression.value}
-              onInput={onInput}
-            />
-          </div>
+          <input
+            placeholder="Type a λ-calculi expression"
+            onBlur={() => {
+              expression.value = cleanExpr(expression.value);
+            }}
+            class="border-1 w-full rounded p-2 text-xl h-[42px]"
+            style={{
+              borderColor: theme.value === "light" ? "#000D" : "#FFF6",
+              background: theme.value === "light" ? "white" : "#1A1A1A",
+            }}
+            value={expression.value}
+            onInput={onInput}
+          />
           <LambdaGraph theme={theme.value} />
         </div>
       </div>

diff --git a/islands/Graph.tsx b/islands/Graph.tsx
@@ -108,7 +108,7 @@ export function Graph({ theme }: { theme: "light" | "dark" }) {
       class="rounded flex-1 w-full h-full bg-transparent border-1 select-none cursor-pointer"
       style={{
         borderColor: theme === "light" ? "#000D" : "#FFF6",
-        backgroundColor: "inherit",
+        background: theme === "light" ? "white" : "#1A1A1A",
       }}
     >
       <g id="zoom" transform={`scale(${scale.value})`}>

diff --git a/lib/graph.ts b/lib/graph.ts
@@ -40,7 +40,7 @@ export function drawNode(
     .append("circle")
     .attr("cx", x)
     .attr("cy", y)
-    .attr("fill", theme === "light" ? "#FFF" : "#222")
+    .attr("fill", theme === "light" ? "#FFF" : "#1A1A1A")
     .attr("r", 15);
   svg
     .append("text")