fix control bar appearance

web/app/cad/dom/components/ControlBar.jsx

@@ -7,10 +7,10 @@ export default function ControlBar({left, right}) {
 
   return <div className={ls.root}>
     <div className={ls.left}>
-      {right}
+      {left}
     </div>
     <div className={ls.right}>
-      {left}
+      {right}
     </div>
   </div>
 }

web/app/cad/dom/components/ControlBar.less

@@ -12,22 +12,33 @@
 }
 
 .button {
-  display: inline-block;
   cursor: pointer;
-  padding: 0.3em 0.3em 0.4em 0.6em;
+  padding: 0.4em 0.5em;
 
-  @border: 1px solid @border-color;
-  &.left {
-    border-right: @border;
-  }
-  &.right {
-    border-left: @border;
-  }
   &:hover {
     background-color: @work-area-control-bar-bg-color-active;
   }
+  line-height: 1;
 }
 
+.left, .right {
+  display: flex;
+  align-items: baseline;
+}
+
+.right {
+  flex-direction: row-reverse;
+}
+
+@border: 1px solid @border-color;
+.left .button {
+  border-right: @border;
+}
+.right .button {
+  border-left: @border;
+}
+
+
 .button.disabled {
   color: @font-color-suppressed;
   &:hover {

web/app/cad/dom/menu/menuPlugin.js

@@ -16,7 +16,7 @@ export function activate({bus, services}) {
         x: undefined,
         y: undefined
       });
-      if (!appearance) {
+      if (!appearance.label) {
         appearance.label = id;
       }
       showMenuActions.push({

web/app/cad/part/partModellerPlugin.js

@@ -16,7 +16,7 @@ export function activate({bus, services}) {
   bus.dispatch(UI_TOKENS.CONTROL_BAR_RIGHT, [
     ['Info', {label: null}],
     ['RefreshSketches', {label: null}],
-    ['ShowSketches', {label: 'sketches'}], ['DeselectAll', null], ['ToggleCameraMode', null]
+    ['ShowSketches', {label: 'sketches'}], ['DeselectAll', {label: null}], ['ToggleCameraMode', {label: null}]
   ]);
 
   bus.dispatch(UI_TOKENS.TOOLBAR_BAR_LEFT, ['PLANE', 'EditFace', 'EXTRUDE', 'CUT', 'REVOLVE']);