WIP Style Time Machine

ui/src/ifql/components/BodyBuilder.tsx

@@ -21,8 +21,8 @@ class BodyBuilder extends PureComponent<Props> {
         return b.declarations.map(d => {
           if (d.funcs) {
             return (
-              <div key={b.id}>
-                <div className="func-node--name">{d.name} =</div>
+              <div className="declaration" key={b.id}>
+                <div className="variable-name">{d.name}</div>
                 <ExpressionNode
                   key={b.id}
                   bodyID={b.id}
@@ -35,8 +35,8 @@ class BodyBuilder extends PureComponent<Props> {
           }
 
           return (
-            <div className="func-node--name" key={b.id}>
-              {b.source}
+            <div className="declaration" key={b.id}>
+              <div className="variable-name">{b.source}</div>
             </div>
           )
         })

ui/src/ifql/components/ExpressionNode.tsx

@@ -21,7 +21,7 @@ class ExpressionNode extends PureComponent<Props> {
       <IFQLContext.Consumer>
         {({onDeleteFuncNode, onAddNode, onChangeArg, onGenerateScript}) => {
           return (
-            <div className="func-nodes-container">
+            <div className="expression-node">
               {funcs.map(func => (
                 <FuncNode
                   key={func.id}

ui/src/ifql/components/FuncNode.tsx

@@ -53,9 +53,7 @@ export default class FuncNode extends PureComponent<Props, State> {
             onGenerateScript={onGenerateScript}
           />
         )}
-        <div className="btn btn-danger btn-square" onClick={this.handleDelete}>
-          <span className="icon-trash" />
-        </div>
+        <div className="func-node--delete" onClick={this.handleDelete} />
       </div>
     )
   }

ui/src/ifql/containers/IFQLPage.tsx

@@ -69,24 +69,20 @@ export class IFQLPage extends PureComponent<Props, State> {
       <IFQLContext.Provider value={this.handlers}>
         <KeyboardShortcuts onControlEnter={this.handleSubmitScript}>
           <div className="page hosts-list-page">
-            <div className="page-header">
+            <div className="page-header full-width">
               <div className="page-header__container">
                 <div className="page-header__left">
                   <h1 className="page-header__title">Time Machine</h1>
                 </div>
               </div>
             </div>
-            <div className="page-contents">
-              <div className="container-fluid">
-                <TimeMachine
-                  script={script}
-                  body={this.state.body}
-                  suggestions={suggestions}
-                  onSubmitScript={this.handleSubmitScript}
-                  onChangeScript={this.handleChangeScript}
-                />
-              </div>
-            </div>
+            <TimeMachine
+              script={script}
+              body={this.state.body}
+              suggestions={suggestions}
+              onSubmitScript={this.handleSubmitScript}
+              onChangeScript={this.handleChangeScript}
+            />
           </div>
         </KeyboardShortcuts>
       </IFQLContext.Provider>

ui/src/style/components/func-node.scss

@@ -1,31 +1,49 @@
-.func-nodes-container {
-  display: inline-flex;
+.declaration {
+  width: 500px;
+  margin-bottom: 30px;
+}
+
+.variable-name {
+  font-size: 13px;
+  font-family: $code-font;
+  color: $c-honeydew;
+  padding: 5px 10px;
+  background-color: $g3-castle;
+  border-radius: $radius;
+  margin-bottom: 2px;
+  width: 100%;
+}
+
+
+.expression-node {
+  width: 100%;
+  display: flex;
   flex-direction: column;
 }
 
 .func-node {
+  width: 100%;
   display: flex;
+  align-items: stretch;
+  position: relative;
+  margin-bottom: 2px;
 }
 
 .func-node--name {
-  background: #252b35;
-  border-radius: $radius-small;
-  padding: 10px;
-  width: auto;
-  display: flex;
+  background-color: $g4-onyx;
+  padding: 10px;  
   color: $ix-text-default;
-  margin-bottom: $ix-marg-a;
-  font-family: $ix-text-font;
-  font-weight: 500;
-  cursor: pointer;
+  font-size: 13px;
+  border-radius: $radius 0 0 $radius;
+  font-weight: 600;
+  width: 130px;
 }
 
 .func-args {
-  background: #252b35;
-  border-radius: $radius-small;
+  background-color: $g3-castle;
+  border-radius: 0 $radius $radius 0;
   padding: 10px;
-  margin-bottom: $ix-marg-a;
-  width: auto;
+  flex: 1 0 0;
   display: flex;
   align-items: stretch;
   flex-direction: column;
@@ -37,3 +55,24 @@
 .func-arg {
   display: flex;
 }
+
+.func-node--delete {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  top: 0;
+  right: -26px;
+  border-radius: 50%;
+  background-color: $c-curacao;
+  opacity: 0;
+  transition: background-color 0.25s ease, opacity 0.25s ease;
+
+  &:hover {
+    background-color: $c-dreamsicle;
+    cursor: pointer;
+  }
+
+  .func-node:hover & {
+    opacity: 1;
+  }
+}