diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index 4cb8c15c002..5fdad9c43cf 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -69,8 +69,8 @@ export class AxisSelector extends React.PureComponent diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss index 993bf086c95..4ce9c5264ea 100644 --- a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss +++ b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss @@ -29,14 +29,14 @@ &:hover { .panel-options-group__add-circle { - background-color: $btn-success-bg; + background-color: $btn-primary-bg; color: $white; } } } .panel-options-group__add-circle { - @include gradientBar($btn-success-bg, $btn-success-bg-hl); + @include gradientBar($btn-success-bg, $btn-success-bg-hl, #fff); border-radius: 50px; width: 20px; diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss index 490b452234f..8ef59bf08af 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss +++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss @@ -21,7 +21,7 @@ } .thresholds-row-add-button { - @include buttonBackground($btn-success-bg, $btn-success-bg-hl); + @include buttonBackground($btn-success-bg, $btn-success-bg-hl, #fff); align-self: center; margin-right: 5px; diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index d63af72ae4d..6b5c6ebb7ca 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -20,7 +20,7 @@ class EmptyListCTA extends Component { return (
{title}
- + {buttonTitle} diff --git a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap index b85660bcc6f..21c2ed294b4 100644 --- a/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap +++ b/public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap @@ -10,7 +10,7 @@ exports[`EmptyListCTA renders correctly 1`] = ` Title
diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.tsx index 8fc34a018e1..b6b2046736f 100644 --- a/public/app/core/components/OrgActionBar/OrgActionBar.tsx +++ b/public/app/core/components/OrgActionBar/OrgActionBar.tsx @@ -35,7 +35,7 @@ export default class OrgActionBar extends PureComponent { onSetLayoutMode(mode)} />
- + {linkButton.title}
diff --git a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap b/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap index dc53e7863ea..25de037930a 100644 --- a/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap +++ b/public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap @@ -29,7 +29,7 @@ exports[`Render should render component 1`] = ` className="page-action-bar__spacer" /> diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx index 30219371257..80afcedf873 100644 --- a/public/app/core/components/PermissionList/AddPermission.tsx +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -130,7 +130,7 @@ class AddPermissions extends Component {
-
diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index 33aca1de2aa..171e0e8109e 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx @@ -126,7 +126,7 @@ export class SharedPreferences extends PureComponent { />
-
diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index 6fbd65afaf5..4ef2d7c9a66 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -5,16 +5,13 @@
- - - Dashboard + + New Dashboard - - - Folder + + New Folder - - + Import diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 975d663e9b0..911181ef999 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -10,7 +10,7 @@
- +
diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 5b0efa8bdf3..7e6457a8a76 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -21,7 +21,7 @@
- +
@@ -34,7 +34,7 @@
- +
@@ -46,7 +46,7 @@
- +
@@ -65,7 +65,7 @@
- +
diff --git a/public/app/features/admin/partials/new_user.html b/public/app/features/admin/partials/new_user.html index 5199d957c33..e3374d080ca 100644 --- a/public/app/features/admin/partials/new_user.html +++ b/public/app/features/admin/partials/new_user.html @@ -24,7 +24,7 @@
- +
diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index d28cf4dc967..b40aed6faab 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -3,7 +3,7 @@
- + New Org diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 806c10851e5..08704dc0459 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -7,7 +7,7 @@
- + Add new user diff --git a/public/app/features/alerting/partials/notification_edit.html b/public/app/features/alerting/partials/notification_edit.html index b2cd2f21e4d..5e7201cdfdd 100644 --- a/public/app/features/alerting/partials/notification_edit.html +++ b/public/app/features/alerting/partials/notification_edit.html @@ -68,7 +68,7 @@
- + Back
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 246cb45b4db..ce4fea9ff49 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -7,8 +7,7 @@
- - + New Channel
diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 65ee7e52bd0..9a7a8cb738a 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -9,7 +9,7 @@
- New + New
@@ -48,7 +48,7 @@
There are no custom annotation queries added yet
- + Add Annotation Query @@ -105,8 +105,8 @@
- - + +
diff --git a/public/app/features/annotations/partials/event_editor.html b/public/app/features/annotations/partials/event_editor.html index 529434755f1..286decb34ce 100644 --- a/public/app/features/annotations/partials/event_editor.html +++ b/public/app/features/annotations/partials/event_editor.html @@ -26,7 +26,7 @@
- + Cancel
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index f0d6fa8d267..2627b1a6862 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -169,7 +169,7 @@ export class ApiKeysPage extends PureComponent {
- +
@@ -199,8 +199,8 @@ export class ApiKeysPage extends PureComponent {
-
diff --git a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap index 9a9daab76c3..2deb7fa5e7f 100644 --- a/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap +++ b/public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap @@ -134,7 +134,7 @@ exports[`Render should render CTA if there are no API keys 1`] = ` className="gf-form" > diff --git a/public/app/features/dashboard/components/DashExportModal/template.html b/public/app/features/dashboard/components/DashExportModal/template.html index 3c14c4b184d..e399d166d04 100644 --- a/public/app/features/dashboard/components/DashExportModal/template.html +++ b/public/app/features/dashboard/components/DashExportModal/template.html @@ -12,7 +12,7 @@
-
@@ -126,10 +126,10 @@ - - diff --git a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx index ce6a866ce57..e5fb0da71fc 100644 --- a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx +++ b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx @@ -76,9 +76,7 @@ export class DashboardPermissions extends PureComponent {
- +
diff --git a/public/app/features/dashboard/components/DashboardSettings/template.html b/public/app/features/dashboard/components/DashboardSettings/template.html index 97002f7bf92..99edc035bd5 100644 --- a/public/app/features/dashboard/components/DashboardSettings/template.html +++ b/public/app/features/dashboard/components/DashboardSettings/template.html @@ -10,7 +10,7 @@
-
-
@@ -128,7 +128,7 @@

Make Editable

-
diff --git a/public/app/features/dashboard/components/ExportDataModal/template.html b/public/app/features/dashboard/components/ExportDataModal/template.html index 8b766889c33..f59bd629e03 100644 --- a/public/app/features/dashboard/components/ExportDataModal/template.html +++ b/public/app/features/dashboard/components/ExportDataModal/template.html @@ -29,7 +29,7 @@
- Export + Export Cancel
diff --git a/public/app/features/dashboard/components/RowOptions/template.html b/public/app/features/dashboard/components/RowOptions/template.html index 3d5c6116679..13e00b631ed 100644 --- a/public/app/features/dashboard/components/RowOptions/template.html +++ b/public/app/features/dashboard/components/RowOptions/template.html @@ -22,7 +22,7 @@
- +
diff --git a/public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts b/public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts index 6a470785fdb..60fa031f71c 100644 --- a/public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts +++ b/public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts @@ -32,7 +32,7 @@ const template = `
- + Cancel
diff --git a/public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts b/public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts index 88fba13f711..ed187befb95 100644 --- a/public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts +++ b/public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts @@ -52,8 +52,8 @@ const template = ` diff --git a/public/app/features/dashboard/components/TimePicker/template.html b/public/app/features/dashboard/components/TimePicker/template.html index 168d2036a7f..481082a2cf6 100644 --- a/public/app/features/dashboard/components/TimePicker/template.html +++ b/public/app/features/dashboard/components/TimePicker/template.html @@ -48,7 +48,7 @@
-
@@ -65,7 +65,7 @@
-
@@ -81,7 +81,7 @@
- +
diff --git a/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts b/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts index cb83a1baa0c..b08a733d877 100644 --- a/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts +++ b/public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts @@ -20,7 +20,7 @@ const template = `
- +
diff --git a/public/app/features/dashboard/components/VersionHistory/template.html b/public/app/features/dashboard/components/VersionHistory/template.html index 5a053c46cc6..c7e94682d28 100644 --- a/public/app/features/dashboard/components/VersionHistory/template.html +++ b/public/app/features/dashboard/components/VersionHistory/template.html @@ -64,7 +64,7 @@ Show more versions diff --git a/public/app/features/folders/FolderSettingsPage.tsx b/public/app/features/folders/FolderSettingsPage.tsx index 08bc84775dc..efd2802178f 100644 --- a/public/app/features/folders/FolderSettingsPage.tsx +++ b/public/app/features/folders/FolderSettingsPage.tsx @@ -82,7 +82,7 @@ export class FolderSettingsPage extends PureComponent { />
-
-
diff --git a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html index 8a67517aa92..fd805465a55 100644 --- a/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html +++ b/public/app/features/manage-dashboards/components/MoveToFolderModal/template.html @@ -26,7 +26,7 @@
- + Cancel
diff --git a/public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts b/public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts index 0c38a1247f1..44f831af0c2 100644 --- a/public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts +++ b/public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts @@ -4,7 +4,7 @@ import angular from 'angular'; const template = ` -
@@ -317,8 +317,8 @@
- - + +
diff --git a/public/app/features/users/UsersActionBar.tsx b/public/app/features/users/UsersActionBar.tsx index 28ed4754d01..c7ce8c6f894 100644 --- a/public/app/features/users/UsersActionBar.tsx +++ b/public/app/features/users/UsersActionBar.tsx @@ -65,12 +65,12 @@ export class UsersActionBar extends PureComponent { )}
{canInvite && ( - + Invite )} {externalUserMngLinkUrl && ( - + {externalUserMngLinkName} )} diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap index e69accb011b..a73d298581e 100644 --- a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap +++ b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap @@ -105,7 +105,7 @@ exports[`Render should show external user management button 1`] = ` className="page-action-bar__spacer" /> @@ -143,7 +143,7 @@ exports[`Render should show invite button 1`] = ` className="page-action-bar__spacer" /> diff --git a/public/app/partials/confirm_modal.html b/public/app/partials/confirm_modal.html index d0b0d260f78..5d80f59a41f 100644 --- a/public/app/partials/confirm_modal.html +++ b/public/app/partials/confirm_modal.html @@ -26,7 +26,7 @@
- +
diff --git a/public/app/partials/edit_json.html b/public/app/partials/edit_json.html index 91552f95d41..fb411e662fc 100644 --- a/public/app/partials/edit_json.html +++ b/public/app/partials/edit_json.html @@ -15,7 +15,7 @@
- + diff --git a/public/app/partials/login.html b/public/app/partials/login.html index d629244e0ae..674c9581ce5 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -99,7 +99,7 @@ If you skip you will be prompted to change password next time you login. -
diff --git a/public/app/partials/reset_password.html b/public/app/partials/reset_password.html index bba38af0235..085cc34d111 100644 --- a/public/app/partials/reset_password.html +++ b/public/app/partials/reset_password.html @@ -16,7 +16,7 @@
- @@ -29,7 +29,7 @@ An email with a reset link has been sent to the email address.
You should receive it shortly.
- + Login
@@ -47,7 +47,7 @@
-
diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index c4c08c9ded8..966dba2d352 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -30,7 +30,7 @@
-
diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html index b01c8160b16..5fae3563600 100644 --- a/public/app/partials/signup_step2.html +++ b/public/app/partials/signup_step2.html @@ -37,7 +37,7 @@
- diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 149a1247b8e..6181590985f 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -3,6 +3,21 @@ $theme-name: dark; +// New Colors +// ------------------------- +$sapphire-faint: #041126; +$sapphire-light: #5794F2; +$sapphire-base: #3274D9; +$sapphire-shade: #1F60C4; +$lobster-base: #E02F44; +$lobster-shade: #C4162A; +$forest-light: #96D98D; +$forest-base: #37872D; +$forest-shade: #19730E; +$green-base: #299C46; +$green-shade: #23843B; + + // Grays // ------------------------- $black: #000; @@ -26,30 +41,29 @@ $white: #fff; // Accent colors // ------------------------- $blue: #33b5e5; -$blue-dark: #005f81; $green: #299c46; -$red: #d44a3a; +$red: $lobster-base; $yellow: #ecbb13; $purple: #9933cc; $variable: #32d1df; $orange: #eb7b18; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: #e24d42; -$query-green: #74e680; +$query-red: $lobster-base; +$query-green: $forest-light; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; // Status colors // ------------------------- -$online: #10a345; +$online: $green-base; $warn: #f79520; -$critical: #ed2e18; +$critical: $lobster-base; // Scaffolding // ------------------------- @@ -82,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); $link-color: darken($white, 11%); $link-color-disabled: darken($link-color, 30%); $link-hover-color: $white; -$external-link-color: $blue; +$external-link-color: $sapphire-light; // Typography // ------------------------- @@ -144,20 +158,18 @@ $table-bg-hover: $dark-3; // Buttons // ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; $btn-inverse-bg: $dark-3; $btn-inverse-bg-hl: lighten($dark-3, 4%); @@ -257,13 +269,12 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; +$success-text-color: $forest-light; -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade); // popover $popover-bg: $page-bg; @@ -292,7 +303,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: darken($blue, 12%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-2; @@ -323,8 +334,8 @@ $diff-arrow-color: $white; $diff-json-bg: $dark-4; $diff-json-fg: $gray-5; -$diff-json-added: #457740; -$diff-json-deleted: #a04338; +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -335,21 +346,21 @@ $diff-json-changed-num: $text-color; $diff-json-icon: $gray-7; //Submenu -$variable-option-bg: $blue-dark; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $input-bg; $switch-slider-color: $dark-2; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a); $checkbox-color: $dark-1; //Panel Edit @@ -358,23 +369,24 @@ $panel-editor-shadow: 0 0 20px black; $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); $panel-editor-viz-item-shadow: 0 0 8px $dark-5; $panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light; +$panel-editor-viz-item-border-hover: 1px solid $sapphire-light; $panel-editor-viz-item-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; // logs $logs-color-unkown: $gray-2; // toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; $button-toggle-group-btn-seperator-border: 1px solid $page-bg; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 97d7a374765..f0e0a535653 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -3,6 +3,21 @@ $theme-name: light; +// New Colors +// ------------------------- +$sapphire-faint: #F5F9FF; +$sapphire-light: #A8CAFF; +$sapphire-base: #3274D9; +$sapphire-shade: #1F60C4; +$lobster-base: #E02F44; +$lobster-shade: #C4162A; +$green-base: #37872D; +$green-shade: #19730E; +$green-base: #3EB15B; +$green-shade: #369B4F; +$purple-shade: #8F3BB8; +$yellow-base: #F2CC0C; + // Grays // ------------------------- $black: #000; @@ -25,28 +40,28 @@ $white: #fff; $blue: #0083b3; $blue-light: #00a8e6; $green: #3aa655; -$red: #d44939; +$red: $lobster-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $blue; +$variable: $purple-shade; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: $red; +$query-red: $lobster-base; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $blue; +$query-keyword: $sapphire-base; // Status colors // ------------------------- -$online: #01a64f; +$online: $green-shade; $warn: #f79520; -$critical: #ec2128; +$critical: $lobster-shade; // Scaffolding // ------------------------- @@ -61,7 +76,6 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; -$textShadow: none; // gradients $brand-gradient: linear-gradient( @@ -79,7 +93,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); $link-color: $gray-1; $link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); -$external-link-color: $blue-light; +$external-link-color: $sapphire-shade; // Typography // ------------------------- @@ -141,20 +155,17 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $blue; -$btn-secondary-bg-hl: lighten($blue, 4%); +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); - -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; $btn-inverse-bg: $gray-6; $btn-inverse-bg-hl: darken($gray-6, 5%); @@ -178,8 +189,8 @@ $input-bg-disabled: $gray-5; $input-color: $dark-3; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; +$input-border-focus: $sapphire-light !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -253,14 +264,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); +$error-text-color: $lobster-shade; $success-text-color: lighten($green, 10%); -$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue; +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); +$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); +$alert-info-bg: $sapphire-base; // popover $popover-bg: $page-bg; @@ -268,7 +278,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue; +$popover-help-bg: $sapphire-base; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -289,7 +299,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: lighten($blue, 20%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-3; @@ -298,16 +308,16 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; +$json-explorer-number-color: $sapphire-base; +$json-explorer-boolean-color: $lobster-base; $json-explorer-null-color: #855a00; $json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-function-color: #ff20ed; $json-explorer-rotate-time: 100ms; $json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: blue; +$json-explorer-bracket-color: $sapphire-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: blue; +$json-explorer-url-color: $sapphire-base; // Changelog and diff // ------------------------- @@ -318,35 +328,35 @@ $diff-arrow-color: $dark-3; $diff-group-bg: $gray-7; $diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; +$diff-json-fg: $gray-1; -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-6; +$diff-json-changed-fg: $gray-7; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $blue-light; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-on-bg: linear-gradient(90deg, #FF9830, #E55400); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-checked-bg: linear-gradient(0deg, #FF9830, #E55400); $checkbox-color: $gray-7; //Panel Edit @@ -359,13 +369,11 @@ $panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-bg: $white; $panel-editor-tabs-line-color: $dark-5; -$panel-editor-viz-item-bg-hover: lighten($blue, 62%); - -$panel-options-group-border: none; +$panel-editor-viz-item-bg-hover: lighten($blue, 62%);$panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: lighten($blue, 62%); -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; // logs $logs-color-unkown: $gray-5; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 1a005b0d511..9919a370a87 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -59,14 +59,6 @@ a.text-error:focus { color: darken($error-text-color, 10%); } -.text-info { - color: $info-text-color; -} -a.text-info:hover, -a.text-info:focus { - color: darken($info-text-color, 10%); -} - .text-success { color: $success-text-color; } diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 710c4d1ec0f..1c4f1b7fcb7 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -6,7 +6,7 @@ // ------------------------- .alert { - padding: 1.25rem 2rem 1.25rem 1.5rem; + padding: 15px 20px; margin-bottom: $panel-margin / 2; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5); background: $alert-error-bg; @@ -16,6 +16,7 @@ border-radius: $border-radius; display: flex; flex-direction: row; + align-items: center; } // Alternate styles @@ -62,7 +63,6 @@ .alert-title { font-weight: $font-weight-semi-bold; - padding-bottom: 2px; } .alert-icon { diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 4e032d7b9d1..0c1ac726690 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -83,41 +83,20 @@ // Set the backgrounds // ------------------------- +.btn-success, .btn-primary { @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); } + .btn-secondary { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } -// Warning appears are orange -.btn-warning { - @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl); -} // Danger and error appear as red .btn-danger { @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl); } -// Success appears as green -.btn-success { - @include buttonBackground($btn-success-bg, $btn-success-bg-hl); - &--processing { - @include button-outline-variant($gray-1); - @include box-shadow(none); - cursor: default; - - &:hover, - &:active, - &:active:hover, - &:focus, - &:disabled { - color: $gray-1; - background-color: transparent; - border-color: $gray-1; - } - } -} // Info appears as a neutral blue .btn-secondary { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @@ -138,20 +117,15 @@ @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { - @include button-outline-variant($btn-secondary-bg); + @include button-outline-variant($btn-secondary-bg-hl); } .btn-outline-inverse { @include button-outline-variant($btn-inverse-bg); } -.btn-outline-success { - @include button-outline-variant($btn-success-bg); -} -.btn-outline-warning { - @include button-outline-variant($btn-warning-bg); -} .btn-outline-danger { - @include button-outline-variant($btn-danger-bg); + @include button-outline-variant(green); } + .btn-outline-disabled { @include button-outline-variant($gray-1); @include box-shadow(none); diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index ce0fb45051e..2bf16bd2d43 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -117,7 +117,8 @@ .navbar-button { @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); - display: inline-block; + display: flex; + align-items: center; font-weight: $btn-font-weight; padding: 6px 11px; line-height: 16px; @@ -154,7 +155,7 @@ } &--primary { - @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); + @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); } } diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index 5bbc4ba29ca..b51bd3a9ef9 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -118,7 +118,7 @@ $path-position: $marker-size-half - ($path-height / 2); .progress-step-cta { @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius); - @include buttonBackground($btn-success-bg, $btn-success-bg-hl); + @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); display: none; } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index 6f075c4d92e..d25d85b3d74 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -10,6 +10,10 @@ .gf-timepicker-nav-btn { text-overflow: ellipsis; overflow: hidden; + + .fa-clock-o { + margin-right: 4px; + } } .gf-timepicker-dropdown { @@ -48,7 +52,6 @@ } .gf-timepicker-utc { - background-color: $tight-form-func-bg; color: $orange; font-size: 75%; padding: 3px; diff --git a/public/vendor/angular-ui/ui-bootstrap-tpls.js b/public/vendor/angular-ui/ui-bootstrap-tpls.js index 87120b66ce1..ad6f3b4b4bc 100644 --- a/public/vendor/angular-ui/ui-bootstrap-tpls.js +++ b/public/vendor/angular-ui/ui-bootstrap-tpls.js @@ -1245,7 +1245,7 @@ angular.module("template/datepicker/popup.html", []).run(["$templateCache", func " \n" + " \n" + " \n" + - " \n" + + " \n" + " \n" + "\n" + "");