feat(fitch): cooler design for fitch proof

Kaeldehta · Jun 14, 2022 · 0a1aa16 · 0a1aa16
1 parent 54d8361
commit 0a1aa16
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -1,5 +1,7 @@
-const IconButton = (props: any) => {
-  return <button {...props} type="button" className="group-hover:flex hidden items-center justify-center w-10 h-10"></button>;
+import { JSX } from "solid-js";
+
+const IconButton = (props: JSX.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return <button tabIndex={-1} {...props} type="button" class={"group-hover:flex hidden items-center justify-center w-10 h-10 " + props.class}></button>;
 };
 
 export default IconButton
diff --git a/src/components/fitch/FitchProof.tsx b/src/components/fitch/FitchProof.tsx
@@ -12,10 +12,10 @@ const FitchProof = () => {
 
   return <>
     <For each={store} fallback={<button onClick={() => set([{ type: "prem", indentation: 0, formula: "" }])} type="button">Add</button>}>
-      {(line, i) => <>
+      {(line, i) => <div class="flex flex-col group hover:bg-gray-100 rounded-md">
         <FitchProofLine index={i()} line={line} />
         <Inserter index={i()} type={line.type} indentation={line.indentation} />
-      </>
+      </div>
       }
     </For>
     <Submitter values={store} schema={fitchProofSchema} />

diff --git a/src/components/fitch/FitchProofLine.tsx b/src/components/fitch/FitchProofLine.tsx
@@ -49,7 +49,7 @@ const FitchProofLine = (props: FitchProofLineProps) => {
 
   }
 
-  return <div class="group h-16 group min-w-fit flex justify-start gap-2 items-center">
+  return <div class="h-16 min-w-fit flex justify-start gap-2 items-center">
     <div class="shrink-0 flex items-center w-12">{props.index + 1}</div>
     <Indent index={props.index} indentation={props.line.indentation} type={props.line.type} />
     {props.line.type !== "abs" ? <Formula value={props.line.formula} setValue={(formula) => set(props.index, { formula })} /> : <span class="w-52 ">{"\u22A5"}</span>}
@@ -61,7 +61,7 @@ const FitchProofLine = (props: FitchProofLineProps) => {
       <FitchProofFromSelect index={props.index} value={props.line.from[1]} setValue={(from) => set(props.index, "from" as any, 1, from)} />
     </>}
     <IconButton title="Annotate"><Tag /></IconButton>
-    <IconButton tile="Remove" onClick={remove}><MinusCircle /></IconButton>
+    <IconButton title="Remove" onClick={remove} class="text-red-600"><MinusCircle /></IconButton>
   </div>
 }
 

diff --git a/src/components/fitch/Inserter.tsx b/src/components/fitch/Inserter.tsx
@@ -35,12 +35,12 @@ const Inserter = (props: InserterProps) => {
     {(_, indentationOffset) => {
       const newIndentation = props.indentation - indentationOffset;
 
-      return <div class="h-16 group min-w-fit flex justify-start gap-2 items-center">
+      return <div class="h-16 min-w-fit flex justify-start gap-2 items-center">
         <div class="w-12"></div>
         <Index each={Array(newIndentation + 1).fill(0)}>
           {() => <Border />}
         </Index>
-        <div class="w-52 border-2 p-1 border-white border-solid flex justify-evenly">
+        <div class="w-52 p-1 flex justify-center">
           <Show when={props.type !== "prem" || nextType() !== "prem"}>
             <IconButton title="Add Assumption" onClick={() => insert(props.index + 1, { type: "ass", indentation: newIndentation + 1, formula: "" })}><ArrowRightCircle /></IconButton>
             <IconButton title="Add Rule Line" onClick={() => insert(props.index + 1, { type: "rule", indentation: newIndentation, formula: "", rule: "" as any, from: [] })}><ArrowDownCircle /></IconButton>