From 0840a5026bcb54fa285a8c10d9753eb70715a3a1 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 20 Jun 2020 03:41:50 -0500
Subject: [PATCH] flow: ui

---
 src/client/components/traits.jsx           |  2 +-
 src/client/components/traits.raw.scss      |  4 ++++
 src/client/components/types/steps.jsx      | 22 +++++++++++++---------
 src/client/components/types/value.raw.scss |  4 ++--
 src/client/index.scss                      |  5 +----
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/client/components/traits.jsx b/src/client/components/traits.jsx
index c8d5961..e584e3f 100644
--- a/src/client/components/traits.jsx
+++ b/src/client/components/traits.jsx
@@ -94,7 +94,7 @@ const makeTabSelector = (context, type) => createSelector(
     return TraitComponent
       ? <TraitComponent params={params} state={state} />
       : (
-        <form>
+        <form className="trait-component-builtin">
           {renderComponents(paramsDescription, params)}
           {renderComponents(stateDescription, state)}
         </form>
diff --git a/src/client/components/traits.raw.scss b/src/client/components/traits.raw.scss
index a85fd21..5fa4ba9 100644
--- a/src/client/components/traits.raw.scss
+++ b/src/client/components/traits.raw.scss
@@ -30,3 +30,7 @@ form {
 .unrenderable {
   font-size: 2em;
 }
+
+.trait-component-builtin {
+  font-size: 1em;
+}
diff --git a/src/client/components/types/steps.jsx b/src/client/components/types/steps.jsx
index 6cd7c09..4d092ce 100644
--- a/src/client/components/types/steps.jsx
+++ b/src/client/components/types/steps.jsx
@@ -60,17 +60,21 @@ const Steps = (props) => {
             return (
               <div className="invoke">
                 <span className="paren open">(</span>
+                  {console.log(steps)}
                   {step.args.map((arg) => (
                     <div className="arg">
-                      <Value.component
-                        context={context}
-                        type={
-                          arg.steps
-                            ? typeFromSteps(context, arg.steps)
-                            : typeFromLiteral(arg)
-                        }
-                        value={arg}
-                      />
+                      <label>
+                        {arg.label}
+                        <Value.component
+                          context={context}
+                          type={
+                            arg.steps
+                              ? typeFromSteps(context, arg.steps)
+                              : typeFromLiteral(arg)
+                          }
+                          value={arg}
+                        />
+                      </label>
                     </div>
                   ))}
                 <span className="paren close">)</span>
diff --git a/src/client/components/types/value.raw.scss b/src/client/components/types/value.raw.scss
index f17d327..e83e0ab 100644
--- a/src/client/components/types/value.raw.scss
+++ b/src/client/components/types/value.raw.scss
@@ -7,6 +7,6 @@
   align-items: center;
 }
 
-.literal select {
-  margin-right: 0.25em;
+.literal select:first-child {
+  border-right: none;
 }
diff --git a/src/client/index.scss b/src/client/index.scss
index 0431190..65a25d9 100644
--- a/src/client/index.scss
+++ b/src/client/index.scss
@@ -78,7 +78,7 @@ label {
   flex-direction: column;
   flex-wrap: wrap;
   font-family: "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
-  font-size: 0.6em;
+  font-size: 1em;
   min-height: 3em;
   padding: 0.5em 0.5em 0.5em 1em;
   user-select: none;
@@ -87,9 +87,6 @@ label {
     flex-direction: row;
     justify-content: space-between;
   }
-  @media(min-width: 32em) {
-    font-size: 0.8em;
-  }
 }
 
 label:nth-of-type(2n+1) {