ui: tweaks

src/client/index.scss

@@ -133,7 +133,6 @@ select {
   color: #ffffff;
   cursor: pointer;
   font-size: 0.75em;
-  margin: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   padding: 0.5em;

src/client/types/condition.raw.scss

@@ -6,7 +6,7 @@
 }
 
 .operator {
-  margin: 0;
+  margin: 0 0 0.125em 0;
   text-align: center;
   text-align-last: center;
 }

src/client/types/expression.raw.scss

@@ -6,11 +6,11 @@
 
 .label {
   color: #999;
-  font-size: 0.8em;
+  font-size: 0.6em;
-  left: -2.5em;
+  left: -1.25em;
   position: absolute;
   writing-mode: vertical-lr;
-  top: -1em;
+  top: 0.125em;
 }
 
 .key {
@@ -24,16 +24,18 @@
 }
 
 .args {
-  margin-left: 2em;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .arg {
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   margin-left: 1.5em;
-  padding: 0.5em;
+  margin-bottom: 0.125em;
-  &:not(:last-of-type) {
+  padding: 0.125em 0.125em 0.125em 0;
-    border-bottom: none;
+  &:last-of-type {
+    margin-bottom: 0;
   }
   &:nth-of-type(2n) {
     background-color: rgba(0, 0, 0, 0.025);
@@ -44,13 +46,25 @@
 }
 
 .arg label {
-  padding: 0;
+  min-height: auto;
+  padding: 0.0125em 0 0;
+  position: relative;
+  > .text {
+    position: absolute;
+    top: -0.75em;
+    font-size: 0.7em;
+    z-index: 2;
+  }
 }
 
 .arg .expression {
   display: flex;
 }
 
+.arg .op {
+  margin: 0 0 0 0.125em;
+}
+
 .paren {
   color: #999999;
   line-height: 1.75em;
@@ -59,11 +73,15 @@
 .invoke {
   display: flex;
   flex-direction: column;
+  &.empty {
+    flex-direction: row;
+  }
 }
 
 .assign {
   display: flex;
   align-items: center;
+  margin: 0.125em;
 }
 
 .eql {
@@ -74,8 +92,5 @@
 
 .op {
   align-self: flex-start;
-  margin-right: 0.125em;
+  margin: 0.125em 0 0.125em 0.125em;
-  &:last-of-type {
-    margin-right: 0;
-  }
 }

src/client/types/expression.type-renderer.jsx

@@ -4,6 +4,7 @@ import {
   description as typeDescription,
 } from '@avocado/behavior';
 import {compose} from '@avocado/core';
+import classnames from 'classnames';
 import contempo from 'contempo';
 import React from 'react';
 
@@ -104,17 +105,26 @@ const Expression = (props) => {
                 case 'invoke': {
                   const description = descriptionFromOps(context, ops.slice(0, i + 1));
                   const args = description.args || [];
-                  const argSpecs = Object.values(args).map(([, argSpec]) => argSpec);
+                  const argSpecs = Object.values(args).map(([name, argSpec]) => ({
+                    ...argSpec,
+                    name,
+                  }));
                   return (
-                    <div className="invoke">
+                    <div
+                      className={classnames(
+                        'invoke',
+                        {empty: 0 === args.length},
+                      )}
+                    >
                       <span className="paren open">(</span>
+                      <div className="args">
                         {op.args.map((arg, j) => {
                           const argSpec = argSpecs[j] || {type: 'any'};
                           return (
                             // eslint-disable-next-line react/no-array-index-key
                             <div className="arg" key={j}>
                               <label>
-                              {arg.label}
+                                <span className="text">{argSpec.name}</span>
                                 <Value.Component
                                   context={context}
                                   onChange={(argValue, event) => (
@@ -143,6 +153,7 @@ const Expression = (props) => {
                             </div>
                           );
                         })}
+                      </div>
                       <span className="paren close">)</span>
                     </div>
                   );

src/client/types/expressions.raw.scss

@@ -1,6 +1,9 @@
 :scope {
   font-size: 0.8em;
-  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
   @media(min-width: 48em) {
     font-size: 1em;
   }
@@ -8,10 +11,10 @@
 
 li {
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-bottom: none;
+  padding: 0;
-  padding: 1em;
+  margin-bottom: 0.5em;
   &:last-child {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 0;
   }
   &:nth-of-type(2n) {
     background-color: rgba(0, 0, 0, 0.025);

src/client/types/literal.raw.scss

@@ -5,5 +5,5 @@
 }
 
 select {
-  margin-right: 0.125em;
+  margin: 0 0.125em
 }

src/client/types/routines.raw.scss

@@ -1,3 +1,4 @@
 .routine > label .text {
   font-size: 0.9em;
+  margin-right: 1.5em;
 }