From ef6c3a6617bbe439770d44468683b3240359977c Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <samelh@microsoft.com>
Date: Sat, 31 Dec 2016 02:15:21 -0800
Subject: [PATCH] ui changes accompanying changes in pxt, converging where
 possible

---
 theme/style.less | 46 ++++++++++------------------------------------
 1 file changed, 10 insertions(+), 36 deletions(-)

diff --git a/theme/style.less b/theme/style.less
index 585079a7..2b07785b 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -88,12 +88,16 @@
 }
 
 /* Blockly Toolbox Buttons */
-#blocklyToolboxButtons .blocklyAddPackageButton {
+.blocklyToolboxButtons .blocklyAddPackageButton {
+    &:extend(.ui.button all);
+    &:extend(.circular all);
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
 }
 
-#blocklyToolboxButtons .blocklyUndoButton {
+.blocklyToolboxButtons .blocklyUndoButton {
+    &:extend(.ui.button all);
+    &:extend(.circular all);
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
 }
@@ -103,52 +107,22 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: @largestMobileEditorBreakpoint) {
+@media only screen and (max-width: @largestMobileScreen) {
     .blocklyTreeLabel {
         font-size: 0.5rem !important;
     }
-    .organization {
-        top: auto;
-    }
 }
 
 /* Tablet */
-@media only screen and (min-width: @tabletEditorBreakpoint) and (max-width: @largestTabletEditorBreakpoint) {
-    .organization {
-        top: auto;
-    }
-    /* Blockly Toolbox buttons */
-    #blocklyToolboxButtons {
-        margin-right: 0.5rem;
-        margin-left: 0.5rem;
-    }
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
 }
 
 /* Small Monitor */
-@media only screen and (min-width: @computerEditorBreakpoint) and (max-width: @largestSmallMonitorEditorBreakpoint) {
-    .organization {
-        top: auto;
-    }
-    .blocklyTreeRow {
-        width: 230px;
-    }
-    /* Blockly Toolbox buttons */
-    #blocklyToolboxButtons {
-        margin-right: 1rem;
-        margin-left: 1rem;
-    }
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
 }
 
 /* Large Monitor */
-@media only screen and (min-width: @largeMonitorEditorBreakpoint) {
-    .blocklyTreeRow {
-        width: 230px;
-    }
-    /* Blockly Toolbox buttons */
-    #blocklyToolboxButtons {
-        margin-right: 2rem;
-        margin-left: 2rem;
-    }
+@media only screen and (min-width: @largeMonitorBreakpoint) {
 }
 
 /*******************************