add background to canvas icons for legibility with different render background colors

src/mol-plugin/skin/base/components/temp.scss

@@ -225,13 +225,13 @@
         float: left;
         margin-right: $control-spacing;
         position: relative;
-        // background-color: $msp-form-control-background;
+        background: $default-background;
 
         .msp-animation-viewport-controls-select {
             width: 290px;
             position: absolute;
             left: 0;
-            top: $row-height + $control-spacing;
+            margin-top: $control-spacing;
             background: $control-background;
 
             .msp-control-row:first-child {

src/mol-plugin/skin/base/components/viewport.scss

@@ -34,6 +34,7 @@
     right: $control-spacing;
     top: $control-spacing;
     width: 32px;
+    background: $default-background;
 }
 
 .msp-viewport-controls-buttons {
@@ -45,14 +46,6 @@
         width: $row-height;
     }
 
-    > button:last-child {
-        margin-left: $control-spacing;
-    }
-
-    // .msp-btn-link, .msp-btn-link-toggle-on {
-    //     color: #eee;
-    // }
-
     .msp-btn-link-toggle-off {
         color: $msp-btn-link-toggle-off-font-color;
     }
@@ -69,6 +62,7 @@
     right: 0px;
     position: absolute;
     background: $control-background;
+    margin-top: $control-spacing;
 
     .msp-control-group-wrapper:first-child {
         padding-top: 0;
@@ -82,7 +76,7 @@
     right: $control-spacing;
     bottom: $control-spacing;
     max-width: 95%;
-    
+
     z-index: 10000;
 }
 
@@ -91,7 +85,7 @@
     padding: $info-vertical-padding $control-spacing;
     background: $default-background; //$highlight-info-background;
 
-    min-height: $row-height;    
+    min-height: $row-height;
     text-align: right;
 
     @include non-selectable;

src/mol-plugin/skin/base/layout/common.scss

@@ -13,7 +13,6 @@
 
 .msp-layout-region {
     overflow: hidden;
-    // background: $default-background;
 }
 
 .msp-layout-static, .msp-layout-scrollable {

src/mol-plugin/ui/viewport.tsx

@@ -76,10 +76,10 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
     render() {
         return <div className={'msp-viewport-controls'} onMouseMove={this.onMouseMove}>
             <div className='msp-viewport-controls-buttons'>
-                {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}<br/>
-                {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}<br/>
-                {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}<br />
-                {!this.props.hideSettingsIcon && this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}<br/>
+                {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
+                {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
+                {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
+                {!this.props.hideSettingsIcon && this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}
             </div>
             {this.state.isSettingsExpanded && <div className='msp-viewport-controls-scene-options'>
                 <ControlGroup header='Layout' initialExpanded={true}>