Make admin header and edit bar prettier (#3989)

* remember when you could just edit css files? [ci skip]

* fix font sizes and colors, reorder userland buttons

* fix dropdown menu colors

frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx

@@ -23,7 +23,7 @@ const PermissionsEditor = ({ grid, onUpdatePermission, onSave, onCancel, isDirty
                             action={onCancel}
                             content="No changes to permissions will be made."
                         >
-                            <button className="Button Button--borderless">
+                            <button className="Button Button--borderless Button--small text-white text-white-hover">
                                 Cancel
                             </button>
                         </Confirm>,
@@ -33,7 +33,7 @@ const PermissionsEditor = ({ grid, onUpdatePermission, onSave, onCancel, isDirty
                             content={<PermissionsConfirm diff={diff} />}
                             triggerClasses={cx({ disabled: !isDirty })}
                         >
-                            <button className={cx("Button")}>Save Changes</button>
+                            <button className={cx("Button Button--primary Button--small text-bold text-white-hover")}>Save Changes</button>
                         </Confirm>
                     ]}
                 />

frontend/src/metabase/css/admin.css

 :root {
-    --admin-nav-bg-color: #6F7A8B;
+    --admin-nav-bg-color: #8091AB;
+    --admin-nav-bg-color-tint: #9AA7BC;
     --admin-nav-item-text-color: rgba(255, 255, 255, 0.63);
     --admin-nav-item-text-active-color: #fff;
     --page-header-padding: 2.375rem;
@@ -36,11 +37,11 @@
 
 .AdminNav .NavDropdown.open .NavDropdown-button,
 .AdminNav .NavDropdown .NavDropdown-content-layer {
-    background-color: #8993A1;
+    background-color: var(--admin-nav-bg-color-tint);
 }
 
 .AdminNav .Dropdown-item:hover {
-    background-color: #6F7A8B;
+    background-color: var(--admin-nav-bg-color);
 }
 
 /* utility to get a simple common hover state for admin items */

frontend/src/metabase/css/components/buttons.css

@@ -45,7 +45,7 @@
 }
 
 .Button--small {
-    padding: 0.4rem 0.75rem;
+    padding: 0.45rem 1rem;
     font-size: 0.6rem;
 }
 

frontend/src/metabase/css/components/header.css

@@ -39,7 +39,7 @@
 }
 
 .EditHeader.EditHeader--admin {
-    background-color: #8C95A2;
+    background-color: var(--admin-nav-bg-color-tint);
 }
 
 .EditHeader-title {
@@ -52,28 +52,29 @@
 }
 
 .EditHeader .Button {
-    color: var(--brand-color);
+    color: white;
     border: none;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    background-color: rgba(255,255,255,0.5);
-    font-weight: normal;
+    font-size: 1em;
+    text-transform: capitalize;
+    background-color: rgba(255,255,255,0.1);
     margin-left: 0.75em;
 }
 
 .EditHeader .Button--primary {
     background-color: white;
+    color: var(--brand-color);
 }
 
-.EditHeader .Button:hover {
-    color: white;
-    background-color: var(--brand-color);
+.EditHeader.EditHeader--admin .Button--primary {
+  background-color: white;
+  color: var(--70-percent-black);
 }
 
-.EditHeader.EditHeader--admin .Button {
+.EditHeader .Button:hover {
     color: white;
+    background-color: var(--brand-color);
 }
 
-.EditHeader.EditHeader--admin .Button.Button--primary {
-    color: var(--brand-color);
+.EditHeader.EditHeader--admin .Button:hover {
+  background-color: var(--admin-nav-bg-color);
 }

frontend/src/metabase/css/core/text.css

 :root {
   --body-text-color: #8E9BA9;
+  --70-percent-black: #444444;
 }
 
 /* center */

frontend/src/metabase/dashboard/components/DashboardHeader.jsx

@@ -97,22 +97,13 @@ export default class DashboardHeader extends Component {
 
     getEditingButtons() {
         return [
-            <ActionButton
-                key="save"
-                actionFn={() => this.onSave()}
-                className="Button Button--small Button--primary text-uppercase"
-                normalText="Save"
-                activeText="Saving…"
-                failedText="Save failed"
-                successText="Saved"
-            />,
-            <a data-metabase-event="Dashboard;Cancel Edits" key="cancel" className="Button Button--small text-uppercase" onClick={() => this.onCancel()}>
+            <a data-metabase-event="Dashboard;Cancel Edits" key="cancel" className="Button Button--small" onClick={() => this.onCancel()}>
                 Cancel
             </a>,
             <ModalWithTrigger
                 key="delete"
                 ref="deleteDashboardModal"
-                triggerClasses="Button Button--small text-uppercase"
+                triggerClasses="Button Button--small"
                 triggerElement="Delete"
             >
                 <DeleteDashboardModal
@@ -120,7 +111,16 @@ export default class DashboardHeader extends Component {
                     onClose={() => this.refs.deleteDashboardModal.toggle()}
                     onDelete={() => this.onDelete()}
                 />
-            </ModalWithTrigger>
+            </ModalWithTrigger>,
+            <ActionButton
+                key="save"
+                actionFn={() => this.onSave()}
+                className="Button Button--small Button--primary"
+                normalText="Save"
+                activeText="Saving…"
+                failedText="Save failed"
+                successText="Saved"
+            />
         ];
     }
 

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -73,10 +73,10 @@ export default class Navbar extends Component {
                 <div className="wrapper flex align-center">
                     <div className="NavTitle flex align-center">
                         <Icon name={'gear'} className="AdminGear" size={22}></Icon>
-                        <span className="NavItem-text ml1 hide sm-show">Site Administration</span>
+                        <span className="NavItem-text ml1 hide sm-show text-bold">Metabase Admin Panel</span>
                     </div>
 
-                    <ul className="sm-ml4 flex flex-full">
+                    <ul className="sm-ml4 flex flex-full text-strong">
                         <AdminNavItem name="Settings"    path="/admin/settings"     currentPath={this.props.path} />
                         <AdminNavItem name="People"      path="/admin/people"       currentPath={this.props.path} />
                         <AdminNavItem name="Data Model"  path="/admin/datamodel"    currentPath={this.props.path} />