From c14be0940e6d9774e34d65a3bf394a287bb76082 Mon Sep 17 00:00:00 2001
From: Stewart Allen <sa@grid.space>
Date: Mon, 18 Apr 2022 22:02:36 -0400
Subject: [PATCH] clean up prefs dialog

---
 src/mesh/build.js  | 39 ++++++++++++++++++---------------------
 web/mesh/index.css | 21 +++++++++++++++++++++
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/mesh/build.js b/src/mesh/build.js
index ee48e6a8..7639a18b 100644
--- a/src/mesh/build.js
+++ b/src/mesh/build.js
@@ -226,7 +226,7 @@ api.settings = function() {
     const { surface, normals, space, wireframe } = prefs.map;
     const { dark } = space;
 
-    const col1 = h.div([
+    const set1 = h.div([
         h.label('dark mode'),
         h.input({ type: "checkbox",
             onchange: ev => call.set_darkmode(ev.target.checked),
@@ -244,9 +244,20 @@ api.settings = function() {
         }),
     ]);
 
-    const col2 = h.div([
-        h.label(''),
-        h.label('normal'),
+    const set2 = h.div([
+        h.label({ class: "header", _: 'wire'}),
+        h.label('opacity'),
+        h.input({ type: "text", size: 5, value: parseFloat(wireframe.opacity),
+            onchange: ev => call.set_wireframe_opacity(ev.target.value)
+        }),
+        h.label('fog x'),
+        h.input({ type: "text", size: 5, value: parseFloat(wireframe.fog),
+            onchange: ev => call.set_wireframe_fog(ev.target.value)
+        }),
+    ]);
+
+    const set3 = h.div([
+        h.label({ class: "header", _: 'normal'}),
         h.label('length'),
         h.input({ type: "text", size: 5, value: parseFloat(normals.length),
             onchange: ev => call.set_normals_length(ev.target.value)
@@ -258,9 +269,8 @@ api.settings = function() {
         }),
     ]);
 
-    const col3 = h.div([
-        h.label(''),
-        h.label('surface'),
+    const set4 = h.div([
+        h.label({ class: "header", _: 'surface'}),
         h.label('radians'),
         h.input({ type: "text", size: 5, value: parseFloat(surface.radians),
             onchange: ev => call.set_surface_radians(ev.target.value)
@@ -271,20 +281,7 @@ api.settings = function() {
         }),
     ]);
 
-    const col4 = h.div([
-        h.label(''),
-        h.label('wire'),
-        h.label('opacity'),
-        h.input({ type: "text", size: 5, value: parseFloat(wireframe.opacity),
-            onchange: ev => call.set_wireframe_opacity(ev.target.value)
-        }),
-        h.label('fog x'),
-        h.input({ type: "text", size: 5, value: parseFloat(wireframe.fog),
-            onchange: ev => call.set_wireframe_fog(ev.target.value)
-        }),
-    ]);
-
-    modal.show('settings', h.div({ class: "settings" }, [ col1, col2, col3, col4 ] ));
+    modal.show('settings', h.div({ class: "settings" }, [ set1, set2, set3, set4 ] ));
 }
 
 // create html elements
diff --git a/web/mesh/index.css b/web/mesh/index.css
index c267267a..c121e539 100644
--- a/web/mesh/index.css
+++ b/web/mesh/index.css
@@ -300,11 +300,31 @@ button:hover {
     gap: 5px;
 }
 
+.settings {
+    gap: 5px;
+    display: grid;
+    background-color: #fff;
+    grid: min-content 1fr / min-content 1fr;
+}
+
 .settings > div {
     display: grid;
+    background-color: #f5f5f5;
     grid: min-content 1fr / min-content 1fr;
     white-space: nowrap;
     align-items: center;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+    padding: 3px;
+}
+
+.settings .header {
+    grid-column: 1 / 3;
+    text-align: center;
+    margin-bottom: 5px;
+    border-radius: 3px;
+    background-color: #ccc;
+    padding: 0;
 }
 
 .settings label {
@@ -314,6 +334,7 @@ button:hover {
 .settings input {
     font-family: monospace;
     text-align: center;
+    background: #fff;
 }
 
 /** spinner animation **/