Applying UI updates from Lego (#322)

theme/blockly.less

@@ -31,6 +31,7 @@ span.blocklyTreeIcon {
     /*box-shadow: inset 0px 0px 0px 2px #D3A805;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;*/
+    box-shadow: 3px 0 1px -2px @legoGreyLight;
 }
 
 div.blocklyTreeRow {
@@ -39,10 +40,14 @@ div.blocklyTreeRow {
     /*-webkit-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
     -moz-box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);
     box-shadow: inset 0px 0px 0px 3px rgba(0,0,0,0.2);*/
+
+    border: none !important;
+    border-bottom: 1px solid #EBEBEB !important;
 }
 
 div.blocklyTreeSeparator {
-    border-bottom: solid #CEA403 2px;
+    border: none;
+    /*border-bottom: solid #CEA403 2px;*/
 }
 
 /* Remove shadow around blockly blocks */
@@ -66,9 +71,9 @@ span.blocklyTreeLabel {
 }
 .blocklySearchInputField {
     border-radius: 1rem !important;
+    border: 1px solid #ebebeb !important;
 }
 
-
 /* Square shaped corners */
 .blocklyDropDownDiv {
     border-radius: 0px !important;

theme/site/collections/menu.overrides

@@ -8,6 +8,6 @@
 }
 
 #mainmenu {
-    background: #f4f7f9;
+    background: @legoGreyLight;
     border-bottom: 5px solid #00a5c8;
 }

theme/site/globals/site.variables

@@ -27,9 +27,11 @@
 @orange: #fa7f2a;
 @green: @brightYellowishGreen;
 
-@legoGreyLight: #eaeeef;
+@legoGreyLight: #F4F1F4;
 @legoGreyDark: #f4f7f9;
 
+@grey: @legoGreyLight;
+
 /* Lego official colors */
 
 /* Solid */
@@ -126,7 +128,7 @@
 --------------------*/
 
 @simulatorBackground: #D6EDFF; /* #FFF */ /* #fcfbfa; */
-@editorToolsBackground: #fff; /* #fcfbfa; */
+@editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */
 @blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/ 
 
 @homeScreenBackground: #EAEEEF;
@@ -149,8 +151,8 @@
    Editor
 --------------------*/
 
-@blocklyToolboxColor: #FAC80A;
-@trashIconColor: white;
+@blocklyToolboxColor: #FFF; /*#FAC80A;*/
+@trashIconColor: #FAC80A; /*white*/
 
 
 /*-------------------

theme/style.less

@@ -29,11 +29,23 @@
     &:extend(.ui.primary.button all);
 }
 
-.ui.button.editortools-btn {
-    &:extend(.ui.blue.button all);
+@buttonBackgroundColor: white;
+@buttonForegroundColor: #5E5E5E;
+
+.ui.button.editortools-btn, .simtoolbar .ui.button,
+    .ui.button.collapse-button, .ui.button.collapsed-button {
+    background-color: @buttonBackgroundColor;
+    color: @buttonForegroundColor;
+    border: none !important;
+    box-shadow: none !important;
+}
+.ui.button.editortools-btn:hover, 
+.ui.button.editortools-btn:focus {
+    color: darken(@buttonForegroundColor, 0.2) !important;
 }
 
-.projectname-input {
+.ui.input.projectname-input input {
+    box-shadow: none; border: none !important;
 }
 
 .ui.button.getting-started-btn {
@@ -93,7 +105,7 @@
 }
 
 #downloadArea {
-    background: white;
+    background: @legoGreyLight;
 }
 
 /* Mobile */
@@ -109,15 +121,18 @@
 
 /* Small Monitor */
 @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-    #editortools, #downloadArea {
-        background: #828A95;
-    }
+
 }
 
 /* Large Monitor */
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-    #editortools, #downloadArea {
-        background: #828A95;
+
+}
+
+/* >= Small Monitor (Small Monitor + Large Monitor + Wide Monitor) */
+@media only screen and (min-width: @computerBreakpoint) {
+    .fullscreensim #boardview {    
+        background: @simulatorBackground data-uri("../docs/static/backgrounds/simulator.png") 0 0 repeat !important;
     }
 }
 /* Mobile, Tablet AND thin screen */