Repeat "Metadata editor styling" (#19397) (#19425)

frontend/src/metabase/components/EditBar.jsx

 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
+import Icon from "metabase/components/Icon";
 
 class EditBar extends Component {
   static propTypes = {
@@ -30,6 +31,7 @@ class EditBar extends Component {
         )}
       >
         <div>
+          <Icon name="pencil" size={12} className="text-white mr1" />
           <span className="EditHeader-title">{title}</span>
           {subtitle && (
             <span className="EditHeader-subtitle mx1">{subtitle}</span>

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx

@@ -186,7 +186,7 @@ function DatasetEditor(props) {
   return (
     <React.Fragment>
       <DatasetEditBar
-        title={t`You're editing ${dataset.displayName()}`}
+        title={dataset.displayName()}
         center={
           <EditorTabs
             currentTab={datasetEditorTab}

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.styled.jsx

@@ -28,6 +28,13 @@ export const TableHeaderColumnName = styled.div`
   border: 1px solid ${color("brand")};
   border-radius: 8px;
 
+  transition: all 0.25s;
+
+  &:hover {
+    color: ${color("white")};
+    background-color: ${color("brand")};
+  }
+
   ${props =>
     props.isSelected &&
     css`

frontend/src/metabase/query_builder/components/DatasetEditor/EditorTabs/EditorTabs.styled.tsx

@@ -6,7 +6,7 @@ export const TabBar = styled.ul`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
 `;
 
 function getActiveTabColor() {