WIP: reconstruct layouts

* on-edit configuration-dropdown

resource/js/components/PageEditor/OptionsSelector.js

@@ -159,8 +159,9 @@ export default class OptionsSelector extends React.Component {
 
     return (
       <MenuItem onClick={this.onClickStyleActiveLine}>
-        <span className="icon-container"><i className={iconClassName}></i></span>
-        Show active line
+        <span className="icon-container"></span>
+        <span className="menuitem-label">Show active line</span>
+        <i className={iconClassName}></i>
       </MenuItem>
     )
   }
@@ -181,14 +182,18 @@ export default class OptionsSelector extends React.Component {
 
     return (
       <MenuItem onClick={this.onClickRenderMathJaxInRealtime}>
-        <span className="icon-container"><i className={iconClassName}></i></span>
-        MathJax Rendering
+        <span className="icon-container"><img src="/images/icons/fx.svg" width="14px"></img></span>
+        <span className="menuitem-label">MathJax Rendering</span>
+        <i className={iconClassName}></i>
       </MenuItem>
     )
   }
 
   render() {
-    return <span>{this.renderThemeSelector()} {this.renderConfigurationDropdown()}</span>
+    return <span>
+      <span className="m-l-5">{this.renderThemeSelector()}</span>
+      <span className="m-l-5">{this.renderConfigurationDropdown()}</span>
+    </span>
   }
 }
 

resource/styles/scss/_on-edit.scss

@@ -272,6 +272,16 @@ body.on-edit {
         display: inline-block;
         width: 20px;
       }
+      .dropdown-menu > li > a {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .menuitem-label {
+          flex: 1;
+          margin-right: 10px;
+        }
+      }
     }
 
     @media (max-width: $screen-xs-max) { // {{{ less than smartphone size