ui: tweaks

packages/entity/src/behavior-components/expression.scss

@@ -2,7 +2,6 @@
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  margin-right: 1em;
   button, .button {
     color: #00bdd6;
   }
@@ -14,6 +13,7 @@
 }
 
 .expression__invocation-toggle {
+  margin: 0;
   padding: 0.25em;
   pointer-events: auto;
   &.to {

packages/entity/src/behavior-components/expression/invocation.jsx

@@ -29,19 +29,18 @@ const Invocation = ({
   };
   return (
     <div className="invocation">
-      (
+      <div className="invocation__args-wrapper">
-      {
+        {
-        op.args.map((arg, i) => (
+          op.args.map((arg, i) => (
-          <div
+            <div
-            key={join(path, 'args', i.toString())}
+              key={join(path, 'args', i.toString())}
-            className="invocation__arg"
+              className="invocation__arg"
-          >
+            >
-            {argComponent(arg, i)}
+              {argComponent(arg, i)}
-            {i < op.args.length - 1 && <span className="invocation__arg-sep">, </span>}
+            </div>
-          </div>
+          ))
-        ))
+        }
-      }
+      </div>
-      )
     </div>
   );
 };

packages/entity/src/behavior-components/expression/invocation.scss

@@ -1,16 +1,53 @@
 .invocation {
   align-items: center;
+  background-color: rgba(0, 0, 0, 0.1);
   display: flex;
-  flex-wrap: wrap;
+  // flex-basis: 100%;
+  // flex-wrap: wrap;
+  // margin: 0.5em 0 0 1em;
   margin-left: 1em;
   > .expression {
     margin: 0 0.5em;
   }
+  &:after {
+    color: #00bdd6;
+    content: ')';
+  }
+  &:before {
+    color: #00bdd6;
+    content: '(';
+  }
+}
+
+.invocation__args-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 0.25em;
 }
 
 .invocation__arg {
   align-items: center;
+  background-color: rgba(255, 255, 255, 0.1);
   display: flex;
+  // margin-bottom: 0.5em;
+  padding: 0.5em;
+  position: relative;
+  &:nth-of-type(2n+1) {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  &:after {
+    content: ',';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  &:last-of-type {
+    // margin-bottom: 0;
+    &::after {
+      content: '';
+    }
+  }
 }
 
 .invocation__arg-sep {

packages/entity/src/behavior-components/expressions.scss

@@ -30,7 +30,8 @@
   margin-top: 0.5em;
 }
 
-.expressions > .expression {
+.expressions__expression-wrapper > .expression {
+  margin-right: 1em;
   padding: 0.5em;
 }
 
@@ -45,6 +46,7 @@
 }
 
 .expressions__add-expression {
+  font-size: 0.8em;
   margin-left: 0.5em;
   pointer-events: auto;
 }