Misc Settings tweaks

resources/frontend_client/app/admin/metadata/components/MetadataHeader.react.js

@@ -68,10 +68,10 @@ export default React.createClass({
     render: function() {
         return (
             <div className="MetadataEditor-header flex align-center">
-                <div className="MetadataEditor-header-section h2">
+                <div className="MetadataEditor-headerSection h2">
                     <span className="text-grey-4">Edit Metadata for</span> {this.renderDbSelector()}
                 </div>
-                <div className="MetadataEditor-header-section flex-align-right flex align-center">
+                <div className="MetadataEditor-headerSection flex-align-right flex align-center">
                     <SaveStatus ref="status" />
                     <span className="mr1">Show original schema</span>
                     <Toggle value={this.props.isShowingSchema} onChange={this.props.toggleShowSchema} />

resources/frontend_client/app/admin/metadata/components/SaveStatus.react.js

@@ -5,8 +5,6 @@ import LoadingIcon from '../../../components/icons/loading.react';
 
 export default React.createClass({
     displayName: "SaveStatus",
-    propTypes: {
-    },
 
     getInitialState: function() {
         return {
@@ -37,7 +35,12 @@ export default React.createClass({
         } else if (this.state.error) {
             return (<div className="SaveStatus mx2 px2 border-right text-error">Error: {this.state.error}</div>)
         } else if (this.state.recentlySavedTimeout != null) {
-            return (<div className="SaveStatus mx2 px2 border-right"><Icon name="check" width="12" height="12" /> Saved</div>)
+            return (
+                <div className="SaveStatus mx2 px2 border-right flex align-center text-success">
+                    <Icon name="check" width="16" height="16" />
+                    <div className="ml1 h3 text-bold">Saved</div>
+                </div>
+            )
         } else {
             return <span />;
         }

resources/frontend_client/app/admin/settings/components/SettingsHeader.react.js

@@ -7,14 +7,14 @@ export default React.createClass({
 
     render: function() {
         return (
-            <div className="MetadataEditor-header flex align-center">
-                <div className="MetadataEditor-header-section h2">
-                    <span className="text-grey-4">Settings</span>
+            <div className="MetadataEditor-header flex align-center relative">
+                <div className="MetadataEditor-headerSection h2 text-grey-4">
+                    Settings
                 </div>
-                <div className="MetadataEditor-header-section flex-align-right flex align-center">
+                <div className="MetadataEditor-headerSection absolute right top bottom flex layout-centered">
                     <SaveStatus ref="status" />
                 </div>
             </div>
         );
     },
-})
+});

resources/frontend_client/app/admin/settings/components/SettingsSetting.react.js

@@ -17,9 +17,10 @@ export default React.createClass({
     },
 
     renderStringInput: function(setting, type="text") {
+        var className = type === "password" ? "SettingsPassword" : "SettingsInput";
         return (
             <Input
-                className="SettingsInput AdminInput bordered rounded h3"
+                className={className + " AdminInput bordered rounded h3"}
                 type={type}
                 value={setting.value}
                 placeholder={setting.placeholder}
@@ -80,8 +81,8 @@ export default React.createClass({
         }
         return (
             <li className="m2 mb4">
-                <div className="text-grey-3 text-bold text-uppercase">{setting.display_name}</div>
-                <div className="text-grey-3 my1">{setting.description}</div>
+                <div className="text-grey-4 text-bold text-uppercase">{setting.display_name}</div>
+                <div className="text-grey-4 my1">{setting.description}</div>
                 <div className="flex">{control}</div>
             </li>
         );

resources/frontend_client/app/css/admin.css

@@ -410,6 +410,10 @@
     border-bottom-left-radius: 0px;
 }
 
+.SaveStatus {
+    line-height: 1;
+}
+
 .SaveStatus:last-child {
     border-right: none !important;
 }
@@ -418,6 +422,6 @@
     width: 400px;
 }
 
-.SettingsInput[type=password] {
+.SettingsPassword {
     width: 200px;
 }