Applying UI updates from Lego (#322)

docs/static/backgrounds/simulator.svg

@@ -9,14 +9,14 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="101.07757"
+   width="76.47757"
-   height="100.57249"
+   height="75.972496"
-   viewBox="0 0 101.07757 100.57249"
+   viewBox="0 0 76.477571 75.972499"
    id="svg4138"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
    sodipodi:docname="simulator.svg"
-   inkscape:export-filename="/Users/sam/pxt-ev3/docs/static/backgrounds/simulator.png"
+   inkscape:export-filename="C:\Users\samelh\pxt-ev3\docs\static\backgrounds\simulator.png"
    inkscape:export-xdpi="50.11311"
    inkscape:export-ydpi="50.11311">
   <defs
@@ -29,20 +29,20 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:zoom="4"
-     inkscape:cx="134.33221"
+     inkscape:cx="60.782211"
-     inkscape:cy="8.1953909"
+     inkscape:cy="-4.104587"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     fit-margin-top="28.3"
+     fit-margin-top="16"
-     fit-margin-left="28.3"
+     fit-margin-left="16"
-     fit-margin-right="28.3"
+     fit-margin-right="16"
-     fit-margin-bottom="28.3"
+     fit-margin-bottom="16"
      units="px"
-     inkscape:window-width="2556"
+     inkscape:window-width="3000"
-     inkscape:window-height="1395"
+     inkscape:window-height="1875"
-     inkscape:window-x="4"
+     inkscape:window-x="-13"
-     inkscape:window-y="1"
+     inkscape:window-y="-13"
      inkscape:window-maximized="1" />
   <metadata
      id="metadata4143">
@@ -60,9 +60,9 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-68.659229,-124.25339)">
+     transform="translate(-80.959229,-136.55339)">
     <ellipse
-       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.31372549"
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.47058824"
        id="path4699"
        cx="119.19801"
        cy="174.53964"

pxtarget.json

@@ -127,7 +127,8 @@
         "invertedMenu": false,
         "invertedMonaco": false,
         "monacoToolbox": true,
-        "invertedToolbox": true,
+        "invertedToolbox": false,
+        "coloredToolbox": true,
         "hasAudio": true,
         "usbHelp": [],
         "extendEditor": true,

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;
+@blocklyToolboxColor: #FFF; /*#FAC80A;*/
-@trashIconColor: white;
+@trashIconColor: #FAC80A; /*white*/
 
 
 /*-------------------

theme/style.less

@@ -29,11 +29,23 @@
     &:extend(.ui.primary.button all);
 }
 
-.ui.button.editortools-btn {
+@buttonBackgroundColor: white;
-    &:extend(.ui.blue.button all);
+@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 */