Misc metadata editing fixes

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

@@ -45,26 +45,6 @@ export default React.createClass({
     },
 
     render: function() {
-        var typeSelect = (
-            <Select
-                className="TableEditor-field-type"
-                placeholder="Select a field type"
-                value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
-                options={MetabaseCore.field_field_types}
-                onChange={this.onTypeChange}
-            />
-        );
-
-        var specialTypeSelect = (
-            <Select
-                className="TableEditor-field-special-type"
-                placeholder="Select a special type"
-                value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
-                options={MetabaseCore.field_special_types}
-                onChange={this.onSpecialTypeChange}
-            />
-        );
-
         var targetSelect;
         if (this.props.field.special_type === "fk") {
             targetSelect = (
@@ -86,10 +66,22 @@ export default React.createClass({
                     <Input className="AdminInput TableEditor-field-description rounded-bottom" type="text" value={this.props.field.description} onBlurChange={this.onDescriptionChange} placeholder="No table description yet" />
                 </div>
                 <div className="flex-half px1">
-                    {typeSelect}
+                    <Select
+                        className="TableEditor-field-type"
+                        placeholder="Select a field type"
+                        value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
+                        options={MetabaseCore.field_field_types}
+                        onChange={this.onTypeChange}
+                    />
                 </div>
                 <div className="flex-half flex flex-column justify-between px1">
-                    {specialTypeSelect}
+                    <Select
+                        className="TableEditor-field-special-type"
+                        placeholder="Select a special type"
+                        value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
+                        options={MetabaseCore.field_special_types}
+                        onChange={this.onSpecialTypeChange}
+                    />
                     {targetSelect}
                 </div>
             </li>

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

@@ -2,6 +2,7 @@
 /*global _*/
 
 import ProgressBar from './ProgressBar.react';
+import Icon from '../../../query_builder/icon.react';
 
 import cx from 'classnames';
 import Humanize from 'humanize';
@@ -70,13 +71,16 @@ export default React.createClass({
 
         return (
             <div className="MetadataEditor-table-list AdminList">
-                <input
-                    className="AdminList-search AdminInput"
-                    type="text"
-                    placeholder="Find a table"
-                    value={this.state.searchText}
-                    onChange={this.updateSearchText}
-                />
+                <div className="AdminList-search">
+                    <Icon name="search" width="16" height="16"/>
+                    <input
+                        className="AdminInput pl4 border-bottom"
+                        type="text"
+                        placeholder="Find a table"
+                        value={this.state.searchText}
+                        onChange={this.updateSearchText}
+                    />
+                </div>
                 <ul className="AdminList-items">
                     {queryableTablesHeader}
                     {queryableTables}

resources/frontend_client/app/css/admin.css

@@ -222,6 +222,31 @@
     padding-bottom: 0.75em;
 }
 
+.AdminList-search {
+    position: relative;
+}
+
+.AdminList-search .Icon {
+    position: absolute;
+    margin-top: auto;
+    margin-bottom: auto;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    margin-left: 1em;
+    color: #C0C0C0;
+}
+
+.AdminList-search .AdminInput {
+    padding: 0.5em;
+    padding-left: 2em;
+    font-size: 18px;
+    width: 100%;
+    border-top-left-radius: var(--default-border-radius);
+    border-top-right-radius: var(--default-border-radius);
+    border-bottom-color: var(--border-color);
+}
+
 .AdminList-items {
 }
 
@@ -264,15 +289,6 @@
     opacity: 1.0;
 }
 
-.AdminList-search {
-    padding: 0.5em;
-    font-size: 18px;
-    width: 100%;
-    border-top-left-radius: var(--default-border-radius);
-    border-top-right-radius: var(--default-border-radius);
-    border-bottom-color: var(--border-color);
-}
-
 .AdminInput {
     color: var(--default-font-color);
     padding: 0.5em;

resources/frontend_client/app/css/core/base.css

@@ -46,6 +46,10 @@ a {
     color: inherit;
 }
 
+input {
+    font-family: var(--default-font-family), "Helvetica Neue", Helvetica, sans-serif;
+}
+
 .disabled {
   pointer-events: none;
   opacity: 0.4;