diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx
index 973464077d7d520287ba53a47532573b8159cb16..b602f5b3df21b99e99723b3361bad9b7e11b204a 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsEditor.jsx
+++ b/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>
]}
/>
diff --git a/frontend/src/metabase/css/admin.css b/frontend/src/metabase/css/admin.css
index f8a2d1f063383cc8af7ca01a9d0c0c918e077de6..9ebfe602072bf1051d0c31cd6cb25789fa5be7d8 100644
--- a/frontend/src/metabase/css/admin.css
+++ b/frontend/src/metabase/css/admin.css
@@ -1,5 +1,6 @@
: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 */
diff --git a/frontend/src/metabase/css/components/buttons.css b/frontend/src/metabase/css/components/buttons.css
index bc391150739ed2b4baa3238b327d985c0183668d..45275e8d3d145ba35f8f80625d07fb6245963a84 100644
--- a/frontend/src/metabase/css/components/buttons.css
+++ b/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;
}
diff --git a/frontend/src/metabase/css/components/header.css b/frontend/src/metabase/css/components/header.css
index e3fb14b9504a985ae834ddaa690a09cf838878c8..d835233c7bc189a992b830b026604c8cc428ef13 100644
--- a/frontend/src/metabase/css/components/header.css
+++ b/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);
}
diff --git a/frontend/src/metabase/css/core/text.css b/frontend/src/metabase/css/core/text.css
index 13541831fad980919ae70951b506d8ce9f5ee718..900539540b8d2ae245eadbe07ea9935b47dd0ba3 100644
--- a/frontend/src/metabase/css/core/text.css
+++ b/frontend/src/metabase/css/core/text.css
@@ -1,5 +1,6 @@
:root {
--body-text-color: #8E9BA9;
+ --70-percent-black: #444444;
}
/* center */
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx b/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
index 6705b4ecb8b8339bb502b959f5b251aebe62c951..7c6e5ce7ec10262ef055d3a3841f305a36e2bc34 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
+++ b/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"
+ />
];
}
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 36459efe3ed45c632fd0e160bc0a3e150d64c116..8eeadee30b64c7f39b09d2b0ca6b5afefb1dd0c7 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/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} />