Styled edit button and title input

frontend/src/metabase/components/List.css

@@ -21,17 +21,26 @@
 }
 
 :local(.header) {
+    composes: flex flex-row from "style";
     composes: mt4 mb2 from "style";
     color: var(--title-color);
     font-size: 24px;
 }
 
+:local(.headerTextInput) {
+    padding: 10px 20px;
+    font-size: 18px;
+    width: 100%;
+    outline-color: var(--subtitle-color);
+}
+
 :local(.headerLink) {
 
 }
 
 :local(.headerButton) {
-
+    composes: flex-align-right from "style";
+    font-size: 14px;
 }
 
 :local(.empty) {
@@ -83,13 +92,14 @@
     font-size: 14px;
     width: 100%;
     min-height: 100px;
-    border-color: var(--subtitle-color);
+    outline-color: var(--subtitle-color);
 }
 
 :local(.icons) {
     composes: flex flex-row align-center from "style";
 }
 :local(.leftIcons) {
+    composes: flex-no-shrink from "style";
     composes: icons;
     width: 50px;
 }

frontend/src/metabase/reference/containers/ReferenceEntity.jsx

@@ -8,6 +8,7 @@ import i from "icepick";
 import S from "metabase/components/List.css";
 import List from "metabase/components/List.jsx";
 import Item from "metabase/components/Item.jsx";
+import Icon from "metabase/components/Icon.jsx";
 
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 
@@ -92,19 +93,25 @@ export default class EntityItem extends Component {
                                 backgroundColor: '#6CAFED'
                             }}
                         >
+                            <button className="Button Button--white Button--small" type="submit">SAVE</button>
                         </div>
                     }
                     <div className="wrapper wrapper--trim">
                         <div className={S.header}>
+                            <div className={S.leftIcons}>
+
+                            </div>
                             { isEditing ?
                                 hasDisplayName ?
                                     <input
+                                        className={S.headerTextInput}
                                         type="text"
                                         placeholder={entity.name}
                                         {...display_name}
                                         defaultValue={entity.display_name}
                                     /> :
                                     <input
+                                        className={S.headerTextInput}
                                         type="text"
                                         placeholder={entity.name}
                                         {...name}
@@ -113,9 +120,20 @@ export default class EntityItem extends Component {
                                 hasDisplayName ?
                                     entity.display_name || entity.name : entity.name
                             }
+                            { !isEditing &&
+                                <div className={S.headerButton}>
+                                    <a
+                                        onClick={startEditing}
+                                        className="Button Button--primary Button--withIcon"
+                                    >
+                                        <div className="flex align-center relative">
+                                            <Icon name="pencil" width="16px" height="16px" />
+                                            <span className="ml1">Edit</span>
+                                        </div>
+                                    </a>
+                                </div>
+                            }
                         </div>
-                        <a onClick={startEditing} className="Button">Edit</a>
-                        <button type="submit" className="Button">Submit</button>
                     </div>
                     <LoadingAndErrorWrapper loading={!error && loading} error={error}>
                     { () =>