mol-plugin: added a little color to the UI

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

@@ -9,6 +9,9 @@
     text-align: center;
     font-weight: bold;
     background: $default-background;
+    // border-right: $control-spacing solid $entity-color-Group; // TODO separate color
+    border-top: 1px solid $entity-color-Group; // TODO separate color
+    // border-bottom: 1px solid $entity-color-Group; // TODO separate color
 }
 
 .msp-btn-row-group {

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

@@ -44,6 +44,7 @@
 
 .msp-transform-header {
     position: relative;
+    border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
 
     > button {
         text-align: left;

src/mol-plugin/ui/state.tsx

@@ -148,7 +148,7 @@ class RemoteStateSnapshotList extends PluginComponent<{ serverUrl: string }, { e
 
     render() {
         return <div>
-            <button title='Click to Refresh' style={{fontWeight: 'bold'}} className='msp-btn msp-btn-block msp-form-control' onClick={this.refresh} disabled={this.state.isFetching}>↻ Remote Snapshots</button>
+            <button title='Click to Refresh' style={{fontWeight: 'bold'}} className='msp-btn msp-btn-block msp-form-control msp-section-header' onClick={this.refresh} disabled={this.state.isFetching}>↻ Remote Snapshots</button>
 
             <ul style={{ listStyle: 'none' }} className='msp-state-list'>
                 {this.state.entries.valueSeq().map(e =><li key={e!.id}>