Styled edit button

frontend/src/metabase/reference/Reference.css

@@ -23,8 +23,19 @@
 
 :local(.saveButton) {
     composes: mx1 from "style";
+    composes: subheaderButton;
 }
 
 :local(.cancelButton) {
+    composes: subheaderButton;
     opacity: 0.5;
 }
+
+:local(.editButton) {
+    color: var(--primary-button-bg-color);
+}
+
+:local(.editButton):hover {
+    color: color(var(--primary-button-border-color) shade(10%));
+    transition: color .3s linear;
+}

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

@@ -88,8 +88,8 @@ export default class EntityItem extends Component {
                                 You are editing this page
                             </div>
                             <div className={R.subheaderButtons}>
-                                <button className={cx("Button", "Button--white", "Button--small", R.subheaderButton, R.saveButton)} type="submit">SAVE</button>
-                                <button className={cx("Button", "Button--white", "Button--small", R.subheaderButton, R.cancelButton)} onClick={endEditing}>CANCEL</button>
+                                <button className={cx("Button", "Button--white", "Button--small", R.saveButton)} type="submit">SAVE</button>
+                                <button className={cx("Button", "Button--white", "Button--small", R.cancelButton)} onClick={endEditing}>CANCEL</button>
                             </div>
                         </div>
                     }
@@ -121,7 +121,7 @@ export default class EntityItem extends Component {
                                 <div className={S.headerButton}>
                                     <a
                                         onClick={startEditing}
-                                        className="Button Button--primary Button--withIcon"
+                                        className={cx("Button", "Button--borderless", R.editButton)}
                                     >
                                         <div className="flex align-center relative">
                                             <Icon name="pencil" width="16px" height="16px" />