Style the commit box and buttons

dist/think-editor.css

@@ -3,7 +3,13 @@
     --half-spacing: calc(0.5 * var(--spacing));
     --double-spacing: calc(2 * var(--spacing));
 
+    --radius: 0.2em;
+
     --editor-size: 50%;
+
+    --background: white;
+    --color: black;
+    --button-bg: #ddd;
 }
 
 * {
@@ -19,6 +25,9 @@ body {
     min-height: 100vh;
     margin: 0;
     padding: var(--half-spacing);
+
+    background: var(--background);
+    color: var(--color);
     
     & > header {
         padding: var(--spacing);
@@ -31,8 +40,9 @@ body {
 
 @media (prefers-color-scheme: dark) {
   body {
-    background: black;
+    --background: black;
-    color: white;
+    --color: white;
+    --button-bg: #333;
   }
 }
 
@@ -53,6 +63,50 @@ header {
 }
 
 
+button {
+    border: thin solid currentColor;
+    --button-background: var(--button-bg);
+    --highlight: white;
+    --highlight-amount: 0%;
+    --darken: black;
+    --darken-amount: 0%;
+    background-color: 
+      color-mix(in oklab, 
+        color-mix(in oklab,
+          var(--button-background), 
+          var(--darken) var(--darken-amount)
+        ),
+        var(--highlight) var(--highlight-amount)
+      );
+
+    &:focus {
+      --highlight-amount: 40%;
+    }
+
+    &:hover {
+      --highlight-amount: 60%;
+    }
+    
+    &:active {
+      --highlight-amount: 0%;
+      --darken-amount: 10%;
+    }
+}
+
+button[value="cancel"] {
+  --button-background: color-mix(in oklab, var(--button-bg), var(--background) 50%);
+}
+
+input ~ button {
+    border-radius: 0 var(--radius) var(--radius) 0;
+    border-left: none;
+    border-left: none;
+}
+
+input {
+    border: thin solid currentColor;
+}
+
 .think-editor {
     display: grid;
     gap: var(--spacing);
@@ -195,6 +249,29 @@ header {
     overflow: auto;
     max-width: 100%;
 }
+
+dialog h2:first-child {
+  margin-top: 0;
+}
+
+#jj-status {
+  max-height: 10em;
+  width: 100%;
+  overflow: auto;
+}
+
+dialog textarea {
+  width: 100%;
+  height: 6em;
+  resize-x: none;
+}
+
+dialog p:last-child {
+  display: flex;
+  justify-content: end;
+  gap: var(--spacing);
+}
+
 @media (max-width: 100ch) {
     html {
         font-size: min(3vw, 16px);

src/App.elm

@@ -170,7 +170,7 @@ decode_file_info =
     (JD.field "is_dir" JD.bool)
     (JD.field "path" JD.string)
 
-decode_command_response =aq
+decode_command_response =
   JD.oneOf
     [ JD.field "error" JD.string |> JD.map Err
     , JD.map2 (\stdout stderr -> Ok { stdout = stdout, stderr = stderr })
@@ -684,19 +684,25 @@ commit_modal model =
           )
         , HA.method "dialog"
         ]
-        [ H.textarea
+        [ H.label
+            [ HA.for "commit-message" ]
+            [ H.text "Commit message" ]
+        , H.textarea
           [ HA.value model.commit_message
           , HE.onInput SetCommitMessage
           ]
           []
-        , H.button
+        , H.p
-          [ HA.value "cancel"
+            [ HA.class "modal-controls" ]
-          , HA.attribute "formmethod" "dialog"
+            [ H.button
-          ]
+              [ HA.value "cancel"
-          [ H.text "Cancel"]
+              , HA.attribute "formmethod" "dialog"
-        , H.button
+              ]
-          [ HA.type_ "submit"
+              [ H.text "Cancel"]
-          ]
+            , H.button
-          [ H.text "Commit"]
+              [ HA.type_ "submit"
+              ]
+              [ H.text "Commit"]
+            ]
         ]
       ]