lambdabricks · pel-daniel · May 24, 2016 · May 13, 2016 · May 16, 2016 · May 17, 2016
diff --git a/dist/index.html b/dist/index.html
@@ -5,6 +5,12 @@
 
 		<link rel="stylesheet" type="text/css" href="styles.css">
 		<link rel="stylesheet" type="text/css" href="react-joyride-compiled.css">
+
+		<link
+			href='https://fonts.googleapis.com/css?family=Open+Sans'
+			rel='stylesheet'
+			type='text/css'
+		>
 	</head>
 	<body>
 		<div id="main">

diff --git a/dist/styles.css b/dist/styles.css
@@ -1,44 +1,254 @@
 html, body {
+  color: #4f5f6f;
+  font-family: 'Open Sans', sans-serif;
+  height: 100%;
   margin: 0;
+  min-height: 100%;
+  overflow-x: hidden;
   padding: 0;
 }
 
-html, body, #main {
+body {
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: normal;
+}
+
+h2, h3 {
+  font-size: 14px;
+}
+
+a {
+  color: #59c2e6;
+  text-decoration: none;
+  transition: color 0.13s;
+}
+
+a:hover {
+  color: #0b98ca;
+}
+
+ol, ul {
+  padding-left: 15px;
+}
+
+button {
+  background-color: #0b98ca;
+  border: 0;
+  color: white;
+  cursor: pointer;
+  padding: 6px 12px;
+  transition: background-color 0.13s;
+}
+
+button:hover {
+  background-color: #219FCA;
+}
+
+label {
+  display: inline-block;
+  width: 45px;
+}
+
+select, input {
+  background-color: white;
+  border: 0;
+  font-size: 14px;
+  height: 26px;
+  padding: 3px 3px;
+  width: 200px;
+}
+
+hr {
+  border-style: groove;
+}
+
+::-webkit-scrollbar {
+  height: 7px;
+  width: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #767D86;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #2d363f;
+  border-radius: 0;
+}
+
+#main {
   height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+}
+
+.app {
+  background-color: #f0f3f6;
+  box-sizing: border-box;
+  /*box-shadow: 0 0 3px #ccc;*/
+  left: 0;
+  /*margin: 0 auto;*/
+  min-height: 100vh;
+  padding: 10px 10px 10px 240px;
+  position: relative;
+  transition: left 0.3s ease, padding-left 0.3s ease;
+  width: 100%;
+}
+
+#logo {
+  background-color: #3a4651;
+  box-sizing: border-box;
+  color: white;
+  font-size: 16px;
+  left: 0;
+  line-height: 70px;
+  padding-left: 15px;
+  position: fixed;
+  top: 0;
+  width: 230px;
+}
+
+.brick {
+  float: left;
+  height: 40px;
+  padding-top: 18px;
+  width: 50px;
+}
+
+.brick rect {
+  fill: #79D1EF;
+}
+
+#library {
+  background-color: #3a4651;
+  bottom: 0;
+  color: white;
+  font-size: 14px;
+  left: 0;
+  overflow-y: auto;
+  position: fixed;
+  top: 70px;
+  transition: left 0.3s ease;
+  width: 230px;
+}
+
+#library h2 {
+  padding-left: 20px;
+}
+
+.nav h3, .nav h4 {
+  color: white;
+  font-size: 14px;
+  margin: 0;
+}
+
+.nav h3 {
+  background-color: #0b98ca;
+  padding: 15px 10px 15px 20px;
+}
+
+.nav h4 {
+  background-color: #2d363f;
+  padding: 15px 10px 15px 40px;
+}
+
+.nav ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+.nav li {
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  margin: 0;
+  padding: 10px 0 10px 40px;
+  transition: color 0.13s;
+}
+
+.nav li:hover {
+  color: white;
+  background-color: #2d363f;
+}
+
+#instructions {
+  background-color: #2d363f;
+  bottom: 0;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.6);
+  left: 0;
+  overflow-y: auto;
+  padding: 10px;
+  position: fixed;
+  top: 70px;
+  width: 250px;
+}
+
+.tutorial.app {
+  padding-left: 490px;
+}
+
+.tutorial #logo {
+  width: 480px;
+}
+
+.tutorial #library {
+  left: 250px;
+}
+
+.selectedElementDialog {
+  background-color: rgba(58, 70, 81, 0.9);
+  border-radius: 4px;
+  color: white;
+  padding: 20px 14px 10px;
+  position: absolute;
 }
 
 #customValueInput input[type=radio] {
   display: none;
 }
 
 #customValueInput input[type=radio] + label {
-  padding: 2px;
   border: 3px solid rgba(0, 0, 0, 0);
   color: white;
   display: inline-block;
   font-weight: bold;
-  margin: 3px 3px 0 0;
+  height: 20px;
+  margin-right: 3px;
+  padding-left: 3px;
 }
 
 #customValueInput input[type=radio]:checked + label {
   border: 3px solid orange;
 }
 
 .closeBtn {
-  color: #551A8B;
+  color: white;
   font-size: 15px;
   line-height: 10px;
   position: absolute;
   right: 6px;
   text-decoration: none;
-  top: 6px
+  top: 6px;
 }
 
 .closeBtn:hover, .closeBtn:focus, .closeBtn:active {
-  color: #551A8B;
+  color: white;
   text-decoration: none;
 }
 
+.topMargin {
+  margin-top: 5px;
+}
+
 .code {
+  color: rgba(255, 255, 255, 0.9);
   font-weight: bold;
 }
diff --git a/src/components/ElementDetails/MainBrickDetails.js b/src/components/ElementDetails/MainBrickDetails.js
@@ -20,7 +20,7 @@ export default class MainBrickDetails extends Component {
           />
         </div>
         { totalUnitTests > 1 &&
-          <div>
+          <div className="topMargin">
             <DialogButton
               onClick={ () => deleteUnitTest(workspaceIndex) }
               message="deleteUnitTest"

diff --git a/src/components/ElementDetails/PrimitiveDetails.js b/src/components/ElementDetails/PrimitiveDetails.js
@@ -29,6 +29,7 @@ export default class PrimitiveDetails extends Component {
           value={ value }
           workspaceIndex={ workspaceIndex }
         />
+        <hr/>
         <DialogButton
           onClick={ () => deleteElement(id) }
           message="delete"

diff --git a/src/components/ElementDetails/TestNodeDetails.js b/src/components/ElementDetails/TestNodeDetails.js
@@ -7,10 +7,6 @@ import {
 import CustomValueInput from './CustomValueInput'
 import TypesSelect from './TypesSelect'
 
-const styles = {
-  width: 300
-}
-
 export default class TestNodeDetails extends Component {
   render() {
     const {
@@ -24,7 +20,7 @@ export default class TestNodeDetails extends Component {
     } = this.props
 
     return (
-      <div style={ styles} >
+      <div>
         <TypesSelect
           handleChange={ changeTestNodeType }
           id={ id }
@@ -33,14 +29,16 @@ export default class TestNodeDetails extends Component {
           workspaceIndex={ workspaceIndex }
         />
         { type != "null" &&
-          <CustomValueInput
-            handleChange={ changeTestNodeValue }
-            id={ id }
-            primitives={ primitives }
-            type={ type }
-            value={ value }
-            workspaceIndex={ workspaceIndex }
-          />
+          <div className="topMargin">
+            <CustomValueInput
+              handleChange={ changeTestNodeValue }
+              id={ id }
+              primitives={ primitives }
+              type={ type }
+              value={ value }
+              workspaceIndex={ workspaceIndex }
+            />
+          </div>
         }
       </div>
     )

diff --git a/src/components/LambdaBricksApp.js b/src/components/LambdaBricksApp.js
@@ -2,18 +2,16 @@ import React, { Component, PropTypes } from 'react'
 
 import { UNIT_TEST } from './constants'
 import Library from '../containers/Library'
+import Logo from './Logo'
 import Workspace from '../containers/Workspace'
 
-const styles = {
-  display: 'flex'
-}
-
 export default class LambdaBricksApp extends Component {
   render() {
     const { libraryId, workspaceType } = this.props
 
     return (
-      <div style={ styles }>
+      <div className="app">
+        <Logo />
         <Library id={ libraryId }/>
         <Workspace type={ workspaceType } />
       </div>