Skip to content

N
nexpie-grafana-theme
Commit 0642c526 by ijin08
Options

created new color variables, changed primary to blue, changed success-btns to primary-btns.

parent 6eb69d37
Showing with 212 additions and 243 deletions
packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
...@@ -69,8 +69,8 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel ...@@ -69,8 +69,8 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
} }
render() { render() {
const leftButtonClass = this.state.yaxis === 1 ? 'btn-success' : 'btn-inverse'; const leftButtonClass = this.state.yaxis === 1 ? 'btn-primary' : 'btn-inverse';
const rightButtonClass = this.state.yaxis === 2 ? 'btn-success' : 'btn-inverse'; const rightButtonClass = this.state.yaxis === 2 ? 'btn-primary' : 'btn-inverse';
return ( return (
<div className="p-b-1"> <div className="p-b-1">
......
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
...@@ -29,14 +29,14 @@ ...@@ -29,14 +29,14 @@
&:hover { &:hover {
.panel-options-group__add-circle { .panel-options-group__add-circle {
background-color: $btn-success-bg; background-color: $btn-primary-bg;
color: $text-color-strong; color: $text-color-strong;
} }
} }
} }
.panel-options-group__add-circle { .panel-options-group__add-circle {
@include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color); @include gradientBar($btn-primary-bg, $btn-primary-bg-hl, #fff);
border-radius: 50px; border-radius: 50px;
width: 20px; width: 20px;
......
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
.thresholds-row-add-button { .thresholds-row-add-button {
@include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color); @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl, #fff);
align-self: center; align-self: center;
margin-right: 5px; margin-right: 5px;
......
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
...@@ -20,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> { ...@@ -20,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> {
return ( return (
<div className="empty-list-cta"> <div className="empty-list-cta">
<div className="empty-list-cta__title">{title}</div> <div className="empty-list-cta__title">{title}</div>
<a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success"> <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className={buttonIcon} /> <i className={buttonIcon} />
{buttonTitle} {buttonTitle}
</a> </a>
......
public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap
...@@ -10,7 +10,7 @@ exports[`EmptyListCTA renders correctly 1`] = ` ...@@ -10,7 +10,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
Title Title
</div> </div>
<a <a
className="empty-list-cta__button btn btn-xlarge btn-success" className="empty-list-cta__button btn btn-xlarge btn-primary"
href="http://url/to/destination" href="http://url/to/destination"
onClick={[MockFunction]} onClick={[MockFunction]}
> >
......
public/app/core/components/OrgActionBar/OrgActionBar.tsx
...@@ -35,7 +35,7 @@ export default class OrgActionBar extends PureComponent<Props> { ...@@ -35,7 +35,7 @@ export default class OrgActionBar extends PureComponent<Props> {
<LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} /> <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<a className="btn btn-success" {...linkProps}> <a className="btn btn-primary" {...linkProps}>
{linkButton.title} {linkButton.title}
</a> </a>
</div> </div>
......
public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap
...@@ -29,7 +29,7 @@ exports[`Render should render component 1`] = ` ...@@ -29,7 +29,7 @@ exports[`Render should render component 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<a <a
className="btn btn-success" className="btn btn-primary"
href="some/url" href="some/url"
target="_blank" target="_blank"
> >
......
public/app/core/components/PermissionList/AddPermission.tsx
...@@ -130,7 +130,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> { ...@@ -130,7 +130,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<button data-save-permission className="btn btn-success" type="submit" disabled={!isValid}> <button data-save-permission className="btn btn-primary" type="submit" disabled={!isValid}>
Save Save
</button> </button>
</div> </div>
......
public/app/core/components/SharedPreferences/SharedPreferences.tsx
...@@ -126,7 +126,7 @@ export class SharedPreferences extends PureComponent<Props, State> { ...@@ -126,7 +126,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
/> />
</div> </div>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success"> <button type="submit" className="btn btn-primary">
Save Save
</button> </button>
</div> </div>
......
public/app/core/components/manage_dashboards/manage_dashboards.html
...@@ -5,15 +5,15 @@ ...@@ -5,15 +5,15 @@
<i class="gf-form-input-icon fa fa-search"></i> <i class="gf-form-input-icon fa fa-search"></i>
</label> </label>
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a class="btn btn-success" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave"> <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Dashboard Dashboard
</a> </a>
<a class="btn btn-success" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor"> <a class="btn btn-primary" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Folder Folder
</a> </a>
<a class="btn btn-success" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave"> <a class="btn btn-primary" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Import Import
</a> </a>
......
public/app/features/admin/partials/edit_org.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button> <button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
</div> </div>
</form> </form>
......
public/app/features/admin/partials/edit_user.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button> <button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
</div> </div>
</form> </form>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="setPassword()">Update</button> <button type="submit" class="btn btn-primary" ng-click="setPassword()">Update</button>
</div> </div>
</form> </form>
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="updatePermissions()">Update</button> <button type="submit" class="btn btn-primary" ng-click="updatePermissions()">Update</button>
</div> </div>
</form> </form>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</span> </span>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()">Add</button> <button class="btn btn-primary gf-form-btn" ng-click="addOrgUser()">Add</button>
</div> </div>
</div> </div>
</form> </form>
......
public/app/features/admin/partials/new_user.html
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="create()">Create</button> <button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
</div> </div>
</form> </form>
</div> </div>
public/app/features/admin/partials/orgs.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="page-container page-body"> <div class="page-container page-body">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a class="page-header__cta btn btn-success" href="org/new"> <a class="page-header__cta btn btn-primary" href="org/new">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
New Org New Org
</a> </a>
......
public/app/features/admin/partials/users.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<i class="gf-form-input-icon fa fa-search"></i> <i class="gf-form-input-icon fa fa-search"></i>
</label> </label>
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a class="btn btn-success" href="admin/users/create"> <a class="btn btn-primary" href="admin/users/create">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Add new user Add new user
</a> </a>
......
public/app/features/alerting/partials/notification_edit.html
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</div> </div>
<div class="gf-form-group gf-form-button-row"> <div class="gf-form-group gf-form-button-row">
<button type="submit" ng-click="ctrl.save()" class="btn btn-success width-7">Save</button> <button type="submit" ng-click="ctrl.save()" class="btn btn-primary width-7">Save</button>
<button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary width-7">Send Test</button> <button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary width-7">Send Test</button>
<a href="alerting/notifications" class="btn btn-inverse">Back</a> <a href="alerting/notifications" class="btn btn-inverse">Back</a>
</div> </div>
......
public/app/features/alerting/partials/notifications_list.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="page-action-bar__spacer"> <div class="page-action-bar__spacer">
</div> </div>
<a href="alerting/notification/new" class="btn btn-success"> <a href="alerting/notification/new" class="btn btn-primary">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
New Channel New Channel
</a> </a>
......
public/app/features/annotations/partials/editor.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div ng-if="ctrl.mode === 'list'"> <div ng-if="ctrl.mode === 'list'">
<div class="page-action-bar" ng-if="ctrl.annotations.length > 1"> <div class="page-action-bar" ng-if="ctrl.annotations.length > 1">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a> <a type="button" class="btn btn-primary" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
</div> </div>
<table class="filter-table filter-table--hover"> <table class="filter-table filter-table--hover">
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div ng-if="ctrl.annotations.length === 1" class="p-t-2"> <div ng-if="ctrl.annotations.length === 1" class="p-t-2">
<div class="empty-list-cta"> <div class="empty-list-cta">
<div class="empty-list-cta__title">There are no custom annotation queries added yet</div> <div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success"> <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-annotation"></i> <i class="gicon gicon-add-annotation"></i>
Add Annotation Query Add Annotation Query
</a> </a>
...@@ -105,8 +105,8 @@ ...@@ -105,8 +105,8 @@
<div class="gf-form"> <div class="gf-form">
<div class="gf-form-button-row p-y-0"> <div class="gf-form-button-row p-y-0">
<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button> <button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-primary" ng-click="ctrl.add()">Add</button>
<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button> <button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-primary pull-left" ng-click="ctrl.update()">Update</button>
</div> </div>
</div> </div>
</div> </div>
......
public/app/features/annotations/partials/event_editor.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.save()">Save</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.save()">Save</button>
<button ng-if="ctrl.event.id" type="submit" class="btn btn-danger" ng-click="ctrl.delete()">Delete</button> <button ng-if="ctrl.event.id" type="submit" class="btn btn-danger" ng-click="ctrl.delete()">Delete</button>
<a class="btn-text" ng-click="ctrl.close();">Cancel</a> <a class="btn-text" ng-click="ctrl.close();">Cancel</a>
</div> </div>
......
public/app/features/api-keys/ApiKeysPage.tsx
...@@ -169,7 +169,7 @@ export class ApiKeysPage extends PureComponent<Props, any> { ...@@ -169,7 +169,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
</span> </span>
</div> </div>
<div className="gf-form"> <div className="gf-form">
<button className="btn gf-form-btn btn-success">Add</button> <button className="btn gf-form-btn btn-primary">Add</button>
</div> </div>
</div> </div>
</form> </form>
...@@ -199,7 +199,7 @@ export class ApiKeysPage extends PureComponent<Props, any> { ...@@ -199,7 +199,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
</div> </div>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}> <button className="btn btn-primary pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
<i className="fa fa-plus" /> Add API Key <i className="fa fa-plus" /> Add API Key
</button> </button>
</div> </div>
......
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
...@@ -137,7 +137,7 @@ exports[`Render should render CTA if there are no API keys 1`] = ` ...@@ -137,7 +137,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
className="gf-form" className="gf-form"
> >
<button <button
className="btn gf-form-btn btn-success" className="btn gf-form-btn btn-primary"
> >
Add Add
</button> </button>
......
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
...@@ -142,7 +142,7 @@ export class AddPanelWidget extends React.Component<Props, State> { ...@@ -142,7 +142,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
</button> </button>
</div> </div>
<div className="add-panel-widget__btn-container"> <div className="add-panel-widget__btn-container">
<button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}> <button className="btn-primary btn btn-large" onClick={this.onCreateNewPanel}>
Edit Panel Edit Panel
</button> </button>
{addCopyButton} {addCopyButton}
......
public/app/features/dashboard/components/DashExportModal/template.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</gf-form-switch> </gf-form-switch>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.saveDashboardAsFile()"> <button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()">
<i class="fa fa-save"></i> Save to file <i class="fa fa-save"></i> Save to file
</button> </button>
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()"> <button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()">
......
public/app/features/dashboard/components/DashLinks/editor.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="empty-list-cta__title"> <div class="empty-list-cta__title">
There are no dashboard links added yet There are no dashboard links added yet
</div> </div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success"> <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-link"></i> <i class="gicon gicon-add-link"></i>
Add Dashboard Link Add Dashboard Link
</a> </a>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div ng-if="ctrl.dashboard.links.length > 0"> <div ng-if="ctrl.dashboard.links.length > 0">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="ctrl.setupNew()"> <a type="button" class="btn btn-primary" ng-click="ctrl.setupNew()">
<i class="fa fa-plus"></i> New</a> <i class="fa fa-plus"></i> New</a>
</div> </div>
<table class="filter-table filter-table--hover"> <table class="filter-table filter-table--hover">
...@@ -126,10 +126,10 @@ ...@@ -126,10 +126,10 @@
</div> </div>
</div> </div>
</div> </div>
<button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()"> <button class="btn btn-primary" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
Add Add
</button> </button>
<button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()"> <button class="btn btn-primary" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
Update Update
</button> </button>
</div> </div>
public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx
...@@ -76,7 +76,7 @@ export class DashboardPermissions extends PureComponent<Props, State> { ...@@ -76,7 +76,7 @@ export class DashboardPermissions extends PureComponent<Props, State> {
</div> </div>
</Tooltip> </Tooltip>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}> <button className="btn btn-primary pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
<i className="fa fa-plus" /> Add Permission <i className="fa fa-plus" /> Add Permission
</button> </button>
</div> </div>
......
public/app/features/dashboard/components/DashboardSettings/template.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</a> </a>
<div class="dashboard-settings__aside-actions"> <div class="dashboard-settings__aside-actions">
<button class="btn btn-success" ng-click="ctrl.saveDashboard()" ng-show="ctrl.canSave"> <button class="btn btn-primary" ng-click="ctrl.saveDashboard()" ng-show="ctrl.canSave">
<i class="fa fa-save"></i> Save <i class="fa fa-save"></i> Save
</button> </button>
<button class="btn btn-inverse" ng-click="ctrl.openSaveAsModal()" ng-show="ctrl.canSaveAs"> <button class="btn btn-inverse" ng-click="ctrl.openSaveAsModal()" ng-show="ctrl.canSaveAs">
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-success" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave"> <button class="btn btn-primary" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
<i class="fa fa-save"></i> Save Changes <i class="fa fa-save"></i> Save Changes
</button> </button>
</div> </div>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'make_editable'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'make_editable'">
<h3 class="dashboard-settings__header">Make Editable</h3> <h3 class="dashboard-settings__header">Make Editable</h3>
<button class="btn btn-success" ng-click="ctrl.makeEditable()"> <button class="btn btn-primary" ng-click="ctrl.makeEditable()">
Make Editable Make Editable
</button> </button>
</div> </div>
......
public/app/features/dashboard/components/ExportDataModal/template.html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
<div class="gf-form-button-row text-center"> <div class="gf-form-button-row text-center">
<a class="btn btn-success" ng-click="ctrl.export();">Export</a> <a class="btn btn-primary" ng-click="ctrl.export();">Export</a>
<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a> <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
</div> </div>
</div> </div>
......
public/app/features/dashboard/components/RowOptions/template.html
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Update</button>
<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button> <button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
</div> </div>
</div> </div>
......
public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts
...@@ -32,7 +32,7 @@ const template = ` ...@@ -32,7 +32,7 @@ const template = `
</div> </div>
<div class="gf-form-button-row text-center"> <div class="gf-form-button-row text-center">
<button type="submit" class="btn btn-success" ng-click="ctrl.save()" ng-disabled="!ctrl.isValidFolderSelection">Save</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.save()" ng-disabled="!ctrl.isValidFolderSelection">Save</button>
<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a> <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
</div> </div>
</form> </form>
......
public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts
...@@ -52,8 +52,8 @@ const template = ` ...@@ -52,8 +52,8 @@ const template = `
<button <button
id="saveBtn" id="saveBtn"
type="submit" type="submit"
class="btn btn-success" class="btn btn-primary"
ng-class="{'btn-success--processing': ctrl.isSaving}" ng-class="{'btn-primary--processing': ctrl.isSaving}"
ng-disabled="ctrl.saveForm.$invalid || ctrl.isSaving" ng-disabled="ctrl.saveForm.$invalid || ctrl.isSaving"
> >
<span ng-if="!ctrl.isSaving">Save</span> <span ng-if="!ctrl.isSaving">Save</span>
......
public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts
...@@ -26,7 +26,7 @@ const template = ` ...@@ -26,7 +26,7 @@ const template = `
<code-editor content="ctrl.dashboardJson" data-mode="json" data-max-lines=15></code-editor> <code-editor content="ctrl.dashboardJson" data-mode="json" data-max-lines=15></code-editor>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-success" clipboard-button="ctrl.getJsonForClipboard()"> <button class="btn btn-primary" clipboard-button="ctrl.getJsonForClipboard()">
<i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard <i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard
</button> </button>
<button class="btn btn-secondary" clipboard-button="ctrl.save()"> <button class="btn btn-secondary" clipboard-button="ctrl.save()">
......
public/app/features/dashboard/components/ShareModal/template.html
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
</div> </div>
<div ng-if="step === 1" class="gf-form-button-row"> <div ng-if="step === 1" class="gf-form-button-row">
<button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading"> <button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i> <i class="fa fa-save"></i>
Local Snapshot Local Snapshot
</button> </button>
......
public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts
...@@ -20,7 +20,7 @@ const template = ` ...@@ -20,7 +20,7 @@ const template = `
</div> </div>
<div class="confirm-modal-buttons"> <div class="confirm-modal-buttons">
<button type="button" class="btn btn-success" ng-click="ctrl.save()">Save</button> <button type="button" class="btn btn-primary" ng-click="ctrl.save()">Save</button>
<button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button> <button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button>
<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button> <button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
</div> </div>
......
public/app/features/dashboard/components/VersionHistory/template.html
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
Show more versions Show more versions
</button> </button>
<button type="button" <button type="button"
class="btn btn-success" class="btn btn-primary"
ng-if="ctrl.revisions.length > 1" ng-if="ctrl.revisions.length > 1"
ng-disabled="!ctrl.canCompare" ng-disabled="!ctrl.canCompare"
ng-click="ctrl.getDiff(ctrl.diff)" ng-click="ctrl.getDiff(ctrl.diff)"
......
public/app/features/datasources/settings/ButtonRow.tsx
...@@ -9,7 +9,7 @@ export interface Props { ...@@ -9,7 +9,7 @@ export interface Props {
const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit }) => { const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
return ( return (
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}> <button type="submit" className="btn btn-primary" disabled={isReadOnly} onClick={event => onSubmit(event)}>
Save &amp; Test Save &amp; Test
</button> </button>
<button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}> <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>
......
public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
...@@ -5,7 +5,7 @@ exports[`Render should render component 1`] = ` ...@@ -5,7 +5,7 @@ exports[`Render should render component 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
type="submit" type="submit"
...@@ -34,7 +34,7 @@ exports[`Render should render with buttons enabled 1`] = ` ...@@ -34,7 +34,7 @@ exports[`Render should render with buttons enabled 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
type="submit" type="submit"
......
public/app/features/folders/FolderPermissions.tsx
...@@ -89,7 +89,7 @@ export class FolderPermissions extends PureComponent<Props, State> { ...@@ -89,7 +89,7 @@ export class FolderPermissions extends PureComponent<Props, State> {
</div> </div>
</Tooltip> </Tooltip>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}> <button className="btn btn-primary pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
<i className="fa fa-plus" /> Add Permission <i className="fa fa-plus" /> Add Permission
</button> </button>
</div> </div>
......
public/app/features/folders/FolderSettingsPage.tsx
...@@ -82,7 +82,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> { ...@@ -82,7 +82,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
/> />
</div> </div>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}> <button type="submit" className="btn btn-primary" disabled={!folder.canSave || !folder.hasChanged}>
<i className="fa fa-save" /> Save <i className="fa fa-save" /> Save
</button> </button>
<button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}> <button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>
......
public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
...@@ -41,7 +41,7 @@ exports[`Render should enable save button 1`] = ` ...@@ -41,7 +41,7 @@ exports[`Render should enable save button 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
disabled={false} disabled={false}
type="submit" type="submit"
> >
...@@ -109,7 +109,7 @@ exports[`Render should render component 1`] = ` ...@@ -109,7 +109,7 @@ exports[`Render should render component 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
disabled={true} disabled={true}
type="submit" type="submit"
> >
......
public/app/features/folders/partials/create_folder.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError"> <button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
<i class="fa fa-save"></i> Create <i class="fa fa-save"></i> Create
</button> </button>
</div> </div>
......
public/app/features/manage-dashboards/components/MoveToFolderModal/template.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="gf-form-button-row text-center"> <div class="gf-form-button-row text-center">
<button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid || !ctrl.isValidFolderSelection">Move</button> <button type="submit" class="btn btn-primary" ng-disabled="ctrl.saveForm.$invalid || !ctrl.isValidFolderSelection">Move</button>
<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a> <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
</div> </div>
</form> </form>
......
public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts
...@@ -4,7 +4,7 @@ import angular from 'angular'; ...@@ -4,7 +4,7 @@ import angular from 'angular';
const template = ` const template = `
<input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/> <input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/>
<label class="btn btn-success" for="dashupload"> <label class="btn btn-primary" for="dashupload">
<i class="fa fa-upload"></i> <i class="fa fa-upload"></i>
{{btnText}} {{btnText}}
</label> </label>
......
public/app/features/manage-dashboards/partials/dashboard_import.html
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn btn-success width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()"> <button type="button" class="btn btn-primary width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
<i class="fa fa-save"></i> Import <i class="fa fa-save"></i> Import
</button> </button>
<button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()"> <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
......
public/app/features/org/OrgProfile.tsx
...@@ -32,7 +32,7 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => { ...@@ -32,7 +32,7 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
</div> </div>
</div> </div>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success"> <button type="submit" className="btn btn-primary">
Save Save
</button> </button>
</div> </div>
......
public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap
...@@ -35,7 +35,7 @@ exports[`Render should render component 1`] = ` ...@@ -35,7 +35,7 @@ exports[`Render should render component 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
type="submit" type="submit"
> >
Save Save
......
public/app/features/org/partials/invite.html
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<gf-form-switch class="gf-form" label="Send invite email" checked="ctrl.invite.sendEmail" label-class="width-10"></gf-form-switch> <gf-form-switch class="gf-form" label="Send invite email" checked="ctrl.invite.sendEmail" label-class="width-10"></gf-form-switch>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.sendInvite();">Invite</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.sendInvite();">Invite</button>
<a class="btn btn-inverse" href="org/users">Back</a> <a class="btn btn-inverse" href="org/users">Back</a>
</div> </div>
</form> </form>
......
public/app/features/org/partials/newOrg.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
<br> <br>
<div class="gf-form-buttons-row"> <div class="gf-form-buttons-row">
<button type="submit" class="btn btn-success" ng-click="createOrg()">Create</button> <button type="submit" class="btn btn-primary" ng-click="createOrg()">Create</button>
</div> </div>
</div> </div>
</form> </form>
......
public/app/features/org/partials/select_org.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div style="display: inline-block; width: 400px; margin: 30px 0"> <div style="display: inline-block; width: 400px; margin: 30px 0">
<div ng-repeat="org in orgs"> <div ng-repeat="org in orgs">
<a ng-click="setUsingOrg(org)" class="btn btn-success"> <a ng-click="setUsingOrg(org)" class="btn btn-primary">
{{org.name}} ({{org.role}}) {{org.name}} ({{org.role}})
</a> </a>
</div> </div>
......
public/app/features/playlist/partials/playlist.html
...@@ -95,8 +95,8 @@ ...@@ -95,8 +95,8 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<a class="btn btn-success" ng-show="ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create</a> <a class="btn btn-primary" ng-show="ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create</a>
<a class="btn btn-success" ng-show="!ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a> <a class="btn btn-primary" ng-show="!ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a> <a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
</div> </div>
</div> </div>
public/app/features/playlist/partials/playlists.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div ng-if="ctrl.playlists.length > 0"> <div ng-if="ctrl.playlists.length > 0">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a class="btn btn-success pull-right" href="playlists/create"> <a class="btn btn-primary pull-right" href="playlists/create">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
New Playlist New Playlist
</a> </a>
......
public/app/features/plugins/partials/plugin_edit.html
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
<plugin-component type="app-config-ctrl"></plugin-component> <plugin-component type="app-config-ctrl"></plugin-component>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button> <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
</div> </div>
</div> </div>
......
public/app/features/profile/partials/change_password.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button> <button type="submit" class="btn btn-primary" ng-click="changePassword()">Change Password</button>
<a class="btn-text" href="profile">Cancel</a> <a class="btn-text" href="profile">Cancel</a>
</div> </div>
</form> </form>
......
public/app/features/profile/partials/profile.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<i ng-if="ctrl.readonlyLoginFields" class="fa fa-lock gf-form-icon--right-absolute" bs-tooltip="'Login Details Locked - managed in another system.'"></i> <i ng-if="ctrl.readonlyLoginFields" class="fa fa-lock gf-form-icon--right-absolute" bs-tooltip="'Login Details Locked - managed in another system.'"></i>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Save</button> <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Save</button>
</div> </div>
</form> </form>
......
public/app/features/teams/TeamGroupSync.tsx
...@@ -84,7 +84,7 @@ export class TeamGroupSync extends PureComponent<Props, State> { ...@@ -84,7 +84,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
</Tooltip> </Tooltip>
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
{groups.length > 0 && ( {groups.length > 0 && (
<button className="btn btn-success pull-right" onClick={this.onToggleAdding}> <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
<i className="fa fa-plus" /> Add group <i className="fa fa-plus" /> Add group
</button> </button>
)} )}
...@@ -108,7 +108,7 @@ export class TeamGroupSync extends PureComponent<Props, State> { ...@@ -108,7 +108,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<button className="btn btn-success gf-form-btn" type="submit" disabled={!this.isNewGroupValid()}> <button className="btn btn-primary gf-form-btn" type="submit" disabled={!this.isNewGroupValid()}>
Add group Add group
</button> </button>
</div> </div>
...@@ -120,7 +120,7 @@ export class TeamGroupSync extends PureComponent<Props, State> { ...@@ -120,7 +120,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
!isAdding && ( !isAdding && (
<div className="empty-list-cta"> <div className="empty-list-cta">
<div className="empty-list-cta__title">There are no external groups to sync with</div> <div className="empty-list-cta__title">There are no external groups to sync with</div>
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-success"> <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className="gicon gicon-add-team" /> <i className="gicon gicon-add-team" />
Add Group Add Group
</button> </button>
......
public/app/features/teams/TeamList.tsx
...@@ -103,7 +103,7 @@ export class TeamList extends PureComponent<Props, any> { ...@@ -103,7 +103,7 @@ export class TeamList extends PureComponent<Props, any> {
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<a className="btn btn-success" href="org/teams/new"> <a className="btn btn-primary" href="org/teams/new">
New team New team
</a> </a>
</div> </div>
......
public/app/features/teams/TeamMembers.tsx
...@@ -103,7 +103,7 @@ export class TeamMembers extends PureComponent<Props, State> { ...@@ -103,7 +103,7 @@ export class TeamMembers extends PureComponent<Props, State> {
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
<button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}> <button className="btn btn-primary pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
<i className="fa fa-plus" /> Add a member <i className="fa fa-plus" /> Add a member
</button> </button>
</div> </div>
...@@ -117,7 +117,7 @@ export class TeamMembers extends PureComponent<Props, State> { ...@@ -117,7 +117,7 @@ export class TeamMembers extends PureComponent<Props, State> {
<div className="gf-form-inline"> <div className="gf-form-inline">
<UserPicker onSelected={this.onUserSelected} className="min-width-30" /> <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
{this.state.newTeamMember && ( {this.state.newTeamMember && (
<button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}> <button className="btn btn-primary gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
Add to team Add to team
</button> </button>
)} )}
......
public/app/features/teams/TeamSettings.tsx
...@@ -75,7 +75,7 @@ export class TeamSettings extends React.Component<Props, State> { ...@@ -75,7 +75,7 @@ export class TeamSettings extends React.Component<Props, State> {
</div> </div>
<div className="gf-form-button-row"> <div className="gf-form-button-row">
<button type="submit" className="btn btn-success"> <button type="submit" className="btn btn-primary">
Update Update
</button> </button>
</div> </div>
......
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
...@@ -62,7 +62,7 @@ exports[`Render should render component 1`] = ` ...@@ -62,7 +62,7 @@ exports[`Render should render component 1`] = `
className="gf-form" className="gf-form"
> >
<button <button
className="btn btn-success gf-form-btn" className="btn btn-primary gf-form-btn"
disabled={true} disabled={true}
type="submit" type="submit"
> >
...@@ -81,7 +81,7 @@ exports[`Render should render component 1`] = ` ...@@ -81,7 +81,7 @@ exports[`Render should render component 1`] = `
There are no external groups to sync with There are no external groups to sync with
</div> </div>
<button <button
className="empty-list-cta__button btn btn-xlarge btn-success" className="empty-list-cta__button btn btn-xlarge btn-primary"
onClick={[Function]} onClick={[Function]}
> >
<i <i
...@@ -135,7 +135,7 @@ exports[`Render should render groups table 1`] = ` ...@@ -135,7 +135,7 @@ exports[`Render should render groups table 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<button <button
className="btn btn-success pull-right" className="btn btn-primary pull-right"
onClick={[Function]} onClick={[Function]}
> >
<i <i
...@@ -180,7 +180,7 @@ exports[`Render should render groups table 1`] = ` ...@@ -180,7 +180,7 @@ exports[`Render should render groups table 1`] = `
className="gf-form" className="gf-form"
> >
<button <button
className="btn btn-success gf-form-btn" className="btn btn-primary gf-form-btn"
disabled={true} disabled={true}
type="submit" type="submit"
> >
......
public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
...@@ -63,7 +63,7 @@ exports[`Render should render teams table 1`] = ` ...@@ -63,7 +63,7 @@ exports[`Render should render teams table 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<a <a
className="btn btn-success" className="btn btn-primary"
href="org/teams/new" href="org/teams/new"
> >
New team New team
......
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
...@@ -27,7 +27,7 @@ exports[`Render should render component 1`] = ` ...@@ -27,7 +27,7 @@ exports[`Render should render component 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<button <button
className="btn btn-success pull-right" className="btn btn-primary pull-right"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
> >
...@@ -121,7 +121,7 @@ exports[`Render should render team members 1`] = ` ...@@ -121,7 +121,7 @@ exports[`Render should render team members 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<button <button
className="btn btn-success pull-right" className="btn btn-primary pull-right"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
> >
...@@ -341,7 +341,7 @@ exports[`Render should render team members when sync enabled 1`] = ` ...@@ -341,7 +341,7 @@ exports[`Render should render team members when sync enabled 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<button <button
className="btn btn-success pull-right" className="btn btn-primary pull-right"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
> >
......
public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap
...@@ -46,7 +46,7 @@ exports[`Render should render component 1`] = ` ...@@ -46,7 +46,7 @@ exports[`Render should render component 1`] = `
className="gf-form-button-row" className="gf-form-button-row"
> >
<button <button
className="btn btn-success" className="btn btn-primary"
type="submit" type="submit"
> >
Update Update
......
public/app/features/teams/partials/create_team.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com"> <input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success width-12"> <button type="submit" class="btn btn-primary width-12">
<i class="fa fa-save"></i> Create <i class="fa fa-save"></i> Create
</button> </button>
</div> </div>
......
public/app/features/templating/partials/editor.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div ng-if="variables.length === 0"> <div ng-if="variables.length === 0">
<div class="empty-list-cta"> <div class="empty-list-cta">
<div class="empty-list-cta__title">There are no variables added yet</div> <div class="empty-list-cta__title">There are no variables added yet</div>
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success"> <a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-variable"></i> <i class="gicon gicon-add-variable"></i>
Add variable Add variable
</a> </a>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div ng-if="variables.length"> <div ng-if="variables.length">
<div class="page-action-bar"> <div class="page-action-bar">
<div class="page-action-bar__spacer"></div> <div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="setMode('new');"><i class="fa fa-plus"></i> New</a> <a type="button" class="btn btn-primary" ng-click="setMode('new');"><i class="fa fa-plus"></i> New</a>
</div> </div>
<table class="filter-table filter-table--hover"> <table class="filter-table filter-table--hover">
...@@ -317,8 +317,8 @@ ...@@ -317,8 +317,8 @@
</div> </div>
<div class="gf-form-button-row p-y-0"> <div class="gf-form-button-row p-y-0">
<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button> <button type="submit" class="btn btn-primary" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button> <button type="submit" class="btn btn-primary" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div> </div>
</form> </form>
......
public/app/features/users/UsersActionBar.tsx
...@@ -65,12 +65,12 @@ export class UsersActionBar extends PureComponent<Props> { ...@@ -65,12 +65,12 @@ export class UsersActionBar extends PureComponent<Props> {
)} )}
<div className="page-action-bar__spacer" /> <div className="page-action-bar__spacer" />
{canInvite && ( {canInvite && (
<a className="btn btn-success" href="org/users/invite"> <a className="btn btn-primary" href="org/users/invite">
<span>Invite</span> <span>Invite</span>
</a> </a>
)} )}
{externalUserMngLinkUrl && ( {externalUserMngLinkUrl && (
<a className="btn btn-success" href={externalUserMngLinkUrl} target="_blank"> <a className="btn btn-primary" href={externalUserMngLinkUrl} target="_blank">
<i className="fa fa-external-link-square" /> {externalUserMngLinkName} <i className="fa fa-external-link-square" /> {externalUserMngLinkName}
</a> </a>
)} )}
......
public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap
...@@ -105,7 +105,7 @@ exports[`Render should show external user management button 1`] = ` ...@@ -105,7 +105,7 @@ exports[`Render should show external user management button 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<a <a
className="btn btn-success" className="btn btn-primary"
href="some/url" href="some/url"
target="_blank" target="_blank"
> >
...@@ -143,7 +143,7 @@ exports[`Render should show invite button 1`] = ` ...@@ -143,7 +143,7 @@ exports[`Render should show invite button 1`] = `
className="page-action-bar__spacer" className="page-action-bar__spacer"
/> />
<a <a
className="btn btn-success" className="btn btn-primary"
href="org/users/invite" href="org/users/invite"
> >
<span> <span>
......
public/app/partials/confirm_modal.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="confirm-modal-buttons"> <div class="confirm-modal-buttons">
<button ng-show="onAltAction" type="button" class="btn btn-success" ng-click="dismiss();onAltAction();">{{altActionText}}</button> <button ng-show="onAltAction" type="button" class="btn btn-primary" ng-click="dismiss();onAltAction();">{{altActionText}}</button>
<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();" ng-disabled="!confirmTextValid" give-focus="true">{{yesText}}</button> <button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();" ng-disabled="!confirmTextValid" give-focus="true">{{yesText}}</button>
<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button> <button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
</div> </div>
......
public/app/partials/edit_json.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button> <button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()"> <button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard <i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
</button> </button>
......
public/app/partials/login.html
...@@ -99,7 +99,7 @@ ...@@ -99,7 +99,7 @@
If you skip you will be prompted to change password next time you login. If you skip you will be prompted to change password next time you login.
</info-popover> </info-popover>
</a> </a>
<button type="submit" class="btn btn-large p-x-2" ng-click="changePassword();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-success': loginForm.$valid}"> <button type="submit" class="btn btn-large p-x-2" ng-click="changePassword();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
Save Save
</button> </button>
</div> </div>
......
public/app/partials/reset_password.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username"> <input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid"> <button type="submit" class="btn btn-primary" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
Reset Password Reset Password
</button> </button>
<a href="login" class="btn btn-inverse"> <a href="login" class="btn btn-inverse">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
An email with a reset link has been sent to the email address. <br> An email with a reset link has been sent to the email address. <br>
You should receive it shortly. You should receive it shortly.
<div class="p-t-1"> <div class="p-t-1">
<a href="login" class="btn btn-success p-t-1"> <a href="login" class="btn btn-primary p-t-1">
Login Login
</a> </a>
</div> </div>
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<password-strength password="formModel.newPassword"></password-strength> <password-strength password="formModel.newPassword"></password-strength>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="submitReset();" ng-disabled="!resetForm.$valid"> <button type="submit" class="btn btn-primary" ng-click="submitReset();" ng-disabled="!resetForm.$valid">
Reset Password Reset Password
</button> </button>
</div> </div>
......
public/app/partials/signup_invited.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="submit();" ng-disable="!inviteForm.$valid"> <button type="submit" class="btn btn-primary" ng-click="submit();" ng-disable="!inviteForm.$valid">
Sign Up Sign Up
</button> </button>
</div> </div>
......
public/app/partials/signup_step2.html
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
<div class="gf-form-button-row p-t-3"> <div class="gf-form-button-row p-t-3">
<button type="submit" class="btn btn-success" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid"> <button type="submit" class="btn btn-primary" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
Sign Up Sign Up
</button> </button>
<a href="login" class="btn btn-inverse"> <a href="login" class="btn btn-inverse">
......
public/sass/_variables.dark.scss
...@@ -3,6 +3,18 @@ ...@@ -3,6 +3,18 @@
$theme-name: dark; $theme-name: dark;
// New Colors
// -------------------------
$sapphire-faint: #041126;
$sapphire-bright: #5794F2;
$sapphire-base: #3274D9;
$sapphire-shade: #1F60C4;
$lobster-base: #E02F44;
$lobster-shade: #C4162A;
$forest-light: #96D98D;
$forest-base: #37872D;
$forest-shade: #19730E;
// Grays // Grays
// ------------------------- // -------------------------
$black: #000; $black: #000;
...@@ -30,31 +42,29 @@ $white: #fff; ...@@ -30,31 +42,29 @@ $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #33b5e5; $blue: #33b5e5;
$blue-dark: #005f81;
$green: #299c46; $green: #299c46;
$red: #d44a3a; $red: $lobster-base;
$yellow: #ecbb13; $yellow: #ecbb13;
$pink: #ff4444;
$purple: #9933cc; $purple: #9933cc;
$variable: #32d1df; $variable: #32d1df;
$orange: #eb7b18; $orange: #eb7b18;
$brand-primary: $orange; $brand-primary: $orange;
$brand-success: $green; $brand-success: $forest-base;
$brand-warning: $brand-primary; $brand-warning: $brand-primary;
$brand-danger: $red; $brand-danger: $lobster-base;
$query-red: #e24d42; $query-red: $lobster-base;
$query-green: #74e680; $query-green: $forest-light;
$query-purple: #fe85fc; $query-purple: #fe85fc;
$query-keyword: #66d9ef; $query-keyword: #66d9ef;
$query-orange: $orange; $query-orange: $orange;
// Status colors // Status colors
// ------------------------- // -------------------------
$online: #10a345; $online: $forest-base;
$warn: #f79520; $warn: #f79520;
$critical: #ed2e18; $critical: $lobster-base;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
...@@ -68,7 +78,6 @@ $text-color-weak: $gray-2; ...@@ -68,7 +78,6 @@ $text-color-weak: $gray-2;
$text-color-faint: $dark-5; $text-color-faint: $dark-5;
$text-color-emphasis: $gray-5; $text-color-emphasis: $gray-5;
$text-shadow-strong: 1px 1px 4px $black;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients // gradients
...@@ -87,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); ...@@ -87,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
$link-color: darken($white, 11%); $link-color: darken($white, 11%);
$link-color-disabled: darken($link-color, 30%); $link-color-disabled: darken($link-color, 30%);
$link-hover-color: $white; $link-hover-color: $white;
$external-link-color: $blue; $external-link-color: $sapphire-bright;
// Typography // Typography
// ------------------------- // -------------------------
...@@ -100,8 +109,7 @@ $hr-border-color: $dark-4; ...@@ -100,8 +109,7 @@ $hr-border-color: $dark-4;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: #212124; $panel-bg: #212124;
$panel-border-color: $dark-1; $panel-border: solid 1px $dark-1;
$panel-border: solid 1px $panel-border-color;
$panel-header-hover-bg: $dark-4; $panel-header-hover-bg: $dark-4;
$panel-corner: $panel-bg; $panel-corner: $panel-bg;
...@@ -110,7 +118,7 @@ $page-header-bg: linear-gradient(90deg, #292a2d, black); ...@@ -110,7 +118,7 @@ $page-header-bg: linear-gradient(90deg, #292a2d, black);
$page-header-shadow: inset 0px -4px 14px $dark-2; $page-header-shadow: inset 0px -4px 14px $dark-2;
$page-header-border-color: $dark-4; $page-header-border-color: $dark-4;
$divider-border-color: #555; $divider-border-color: $gray-1;
// Graphite Target Editor // Graphite Target Editor
$tight-form-bg: $dark-3; $tight-form-bg: $dark-3;
...@@ -153,29 +161,20 @@ $table-bg-hover: $dark-3; ...@@ -153,29 +161,20 @@ $table-bg-hover: $dark-3;
// Buttons // Buttons
// ------------------------- // -------------------------
$btn-primary-bg: #ff6600; $btn-primary-bg: $sapphire-base;
$btn-primary-bg-hl: #bc3e06; $btn-primary-bg-hl: $sapphire-shade;
$btn-secondary-bg-hl: lighten($blue-dark, 5%);
$btn-secondary-bg: $blue-dark;
$btn-success-bg: $green; $btn-secondary-bg: $sapphire-base;
$btn-success-bg-hl: darken($green, 6%); $btn-secondary-bg-hl: $sapphire-shade;
$btn-warning-bg: $brand-warning; $btn-danger-bg: $lobster-base;
$btn-warning-bg-hl: lighten($brand-warning, 8%); $btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: $red;
$btn-danger-bg-hl: darken($red, 8%);
$btn-inverse-bg: $dark-3; $btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 4%); $btn-inverse-bg-hl: lighten($dark-3, 4%);
$btn-inverse-text-color: $link-color; $btn-inverse-text-color: $link-color;
$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
$btn-active-bg: $gray-4;
$btn-active-text-color: $blue-dark;
$btn-link-color: $gray-3; $btn-link-color: $gray-3;
$iconContainerBackground: $black; $iconContainerBackground: $black;
...@@ -281,11 +280,11 @@ $toolbar-bg: $input-black; ...@@ -281,11 +280,11 @@ $toolbar-bg: $input-black;
// ------------------------- // -------------------------
$warning-text-color: $warn; $warning-text-color: $warn;
$error-text-color: #e84d4d; $error-text-color: #e84d4d;
$success-text-color: #12d95a; $success-text-color: $forest-light;
$info-text-color: $blue-dark; //$info-text-color: $blue-dark;
$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $alert-success-bg: linear-gradient(90deg, $forest-base, $forest-shade);
$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
...@@ -317,7 +316,7 @@ $tooltipBackgroundBrand: $brand-primary; ...@@ -317,7 +316,7 @@ $tooltipBackgroundBrand: $brand-primary;
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';
// info box // info box
$info-box-border-color: darken($blue, 12%); $info-box-border-color: $sapphire-base;
// footer // footer
$footer-link-color: $gray-2; $footer-link-color: $gray-2;
...@@ -348,8 +347,8 @@ $diff-arrow-color: $white; ...@@ -348,8 +347,8 @@ $diff-arrow-color: $white;
$diff-json-bg: $dark-4; $diff-json-bg: $dark-4;
$diff-json-fg: $gray-5; $diff-json-fg: $gray-5;
$diff-json-added: #457740; $diff-json-added: $sapphire-shade;
$diff-json-deleted: #a04338; $diff-json-deleted: $lobster-shade;
$diff-json-old: #a04338; $diff-json-old: #a04338;
$diff-json-new: #457740; $diff-json-new: #457740;
...@@ -360,21 +359,21 @@ $diff-json-changed-num: $text-color; ...@@ -360,21 +359,21 @@ $diff-json-changed-num: $text-color;
$diff-json-icon: $gray-7; $diff-json-icon: $gray-7;
//Submenu //Submenu
$variable-option-bg: $blue-dark; $variable-option-bg: $sapphire-shade;
//Switch Slider //Switch Slider
// ------------------------- // -------------------------
$switch-bg: $input-bg; $switch-bg: $input-bg;
$switch-slider-color: $dark-2; $switch-slider-color: $dark-2;
$switch-slider-off-bg: $gray-1; $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; $switch-slider-shadow: 0 0 3px black;
//Checkbox //Checkbox
// ------------------------- // -------------------------
$checkbox-bg: $dark-1; $checkbox-bg: $dark-1;
$checkbox-border: 1px solid $gray-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; $checkbox-color: $dark-1;
//Panel Edit //Panel Edit
...@@ -385,24 +384,24 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); ...@@ -385,24 +384,24 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
$panel-editor-toolbar-view-bg: $input-black; $panel-editor-toolbar-view-bg: $input-black;
$panel-editor-viz-item-shadow: 0 0 8px $dark-5; $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
$panel-editor-viz-item-border: 1px solid $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-shadow-hover: 0 0 4px $sapphire-shade;
$panel-editor-viz-item-border-hover: 1px solid $blue; $panel-editor-viz-item-border-hover: 1px solid $sapphire-shade;
$panel-editor-viz-item-bg: $input-black; $panel-editor-viz-item-bg: $input-black;
$panel-editor-tabs-line-color: #e3e3e3; $panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue, 47%); $panel-editor-viz-item-bg-hover: $sapphire-faint;
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%); $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
$panel-options-group-border: none; $panel-options-group-border: none;
$panel-options-group-header-bg: $gray-blue; $panel-options-group-header-bg: $gray-blue;
$panel-grid-placeholder-bg: darken($blue, 47%); $panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue; $panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
// logs // logs
$logs-color-unkown: $gray-2; $logs-color-unkown: $gray-2;
// toggle-group // 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-active-shadow: inset 0 0 4px $black;
$button-toggle-group-btn-seperator-border: 1px solid $page-bg; $button-toggle-group-btn-seperator-border: 1px solid $page-bg;
......
public/sass/_variables.light.scss
...@@ -7,6 +7,19 @@ ...@@ -7,6 +7,19 @@
$theme-name: light; $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;
$purple-shade: #8F3BB8;
$yellow-base: #F2CC0C;
// Grays // Grays
// ------------------------- // -------------------------
$black: #000; $black: #000;
...@@ -31,32 +44,29 @@ $white: #fff; ...@@ -31,32 +44,29 @@ $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #0083b3; $blue: #0083b3;
$blue-dark: #005f81;
$blue-light: #00a8e6;
$green: #3aa655; $green: #3aa655;
$red: #d44939; $red: $lobster-base;
$yellow: #ff851b; $yellow: #ff851b;
$orange: #ff7941; $orange: #ff7941;
$pink: #e671b8;
$purple: #9954bb; $purple: #9954bb;
$variable: $blue; $variable: $purple-shade;
$brand-primary: $orange; $brand-primary: $orange;
$brand-success: $green; $brand-success: $green;
$brand-warning: $orange; $brand-warning: $orange;
$brand-danger: $red; $brand-danger: $lobster-base;
$query-red: $red; $query-red: $lobster-base;
$query-green: $green; $query-green: $green;
$query-purple: $purple; $query-purple: $purple;
$query-orange: $orange; $query-orange: $orange;
$query-keyword: $blue; $query-keyword: $sapphire-base;
// Status colors // Status colors
// ------------------------- // -------------------------
$online: #01a64f; $online: $green-shade;
$warn: #f79520; $warn: #f79520;
$critical: #ec2128; $critical: $lobster-shade;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
...@@ -70,9 +80,7 @@ $text-color-weak: $gray-2; ...@@ -70,9 +80,7 @@ $text-color-weak: $gray-2;
$text-color-faint: $gray-4; $text-color-faint: $gray-4;
$text-color-emphasis: $dark-5; $text-color-emphasis: $dark-5;
$text-shadow-strong: none;
$text-shadow-faint: none; $text-shadow-faint: none;
$textShadow: none;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
...@@ -84,7 +92,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); ...@@ -84,7 +92,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
$link-color: $gray-1; $link-color: $gray-1;
$link-color-disabled: lighten($link-color, 30%); $link-color-disabled: lighten($link-color, 30%);
$link-hover-color: darken($link-color, 20%); $link-hover-color: darken($link-color, 20%);
$external-link-color: $blue-light; $external-link-color: $sapphire-shade;
// Typography // Typography
// ------------------------- // -------------------------
...@@ -98,8 +106,7 @@ $hr-border-color: $dark-3 !default; ...@@ -98,8 +106,7 @@ $hr-border-color: $dark-3 !default;
// ------------------------- // -------------------------
$panel-bg: $white; $panel-bg: $white;
$panel-border-color: $gray-5; $panel-border: solid 1px $gray-5;
$panel-border: solid 1px $panel-border-color;
$panel-header-hover-bg: $gray-6; $panel-header-hover-bg: $gray-6;
$panel-corner: $gray-4; $panel-corner: $gray-4;
...@@ -150,29 +157,20 @@ $scrollbarBorder: $gray-4; ...@@ -150,29 +157,20 @@ $scrollbarBorder: $gray-4;
// Buttons // Buttons
// ------------------------- // -------------------------
$btn-primary-bg: $brand-primary; $btn-primary-bg: $sapphire-base;
$btn-primary-bg-hl: lighten($brand-primary, 8%); $btn-primary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $blue;
$btn-secondary-bg-hl: lighten($blue, 4%);
$btn-success-bg: lighten($green, 3%); $btn-secondary-bg: rgba(0,0,0,0);
$btn-success-bg-hl: darken($green, 3%); $btn-secondary-bg-hl: rgba(0,0,0,0);
$btn-warning-bg: lighten($orange, 3%); $btn-danger-bg: $lobster-base;
$btn-warning-bg-hl: darken($orange, 3%); $btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: $gray-6; $btn-inverse-bg: $gray-6;
$btn-inverse-bg-hl: darken($gray-6, 5%); $btn-inverse-bg-hl: darken($gray-6, 5%);
$btn-inverse-text-color: $gray-1; $btn-inverse-text-color: $gray-1;
$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
$btn-active-bg: $white;
$btn-active-text-color: $blue;
$btn-link-color: $gray-1; $btn-link-color: $gray-1;
$btn-divider-left: $gray-4; $btn-divider-left: $gray-4;
...@@ -189,8 +187,8 @@ $input-bg-disabled: $gray-5; ...@@ -189,8 +187,8 @@ $input-bg-disabled: $gray-5;
$input-color: $dark-3; $input-color: $dark-3;
$input-border-color: $gray-5; $input-border-color: $gray-5;
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: $blue !default; $input-border-focus: $sapphire-light !default;
$input-box-shadow-focus: $blue !default; $input-box-shadow-focus: $sapphire-light !default;
$input-color-placeholder: $gray-4 !default; $input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-5; $input-label-bg: $gray-5;
$input-label-border-color: $gray-5; $input-label-border-color: $gray-5;
...@@ -285,14 +283,14 @@ $navbar-button-border: $gray-4; ...@@ -285,14 +283,14 @@ $navbar-button-border: $gray-4;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$warning-text-color: lighten($orange, 10%); $warning-text-color: lighten($orange, 10%);
$error-text-color: lighten($red, 10%); $error-text-color: $lobster-shade;
$success-text-color: lighten($green, 10%); $success-text-color: lighten($green, 10%);
$info-text-color: $blue; $info-text-color: $sapphire-shade;
$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); $alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-info-bg: $blue; $alert-info-bg: $sapphire-base;
// popover // popover
$popover-bg: $page-bg; $popover-bg: $page-bg;
...@@ -300,7 +298,7 @@ $popover-color: $text-color; ...@@ -300,7 +298,7 @@ $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $blue; $popover-help-bg: $sapphire-base;
$popover-help-color: $gray-6; $popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
...@@ -321,7 +319,7 @@ $tooltipBackgroundBrand: $brand-primary; ...@@ -321,7 +319,7 @@ $tooltipBackgroundBrand: $brand-primary;
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
// info box // info box
$info-box-border-color: lighten($blue, 20%); $info-box-border-color: $sapphire-base;
// footer // footer
$footer-link-color: $gray-3; $footer-link-color: $gray-3;
...@@ -332,16 +330,16 @@ $footer-link-hover: $dark-5; ...@@ -332,16 +330,16 @@ $footer-link-hover: $dark-5;
// json explorer // json explorer
$json-explorer-default-color: black; $json-explorer-default-color: black;
$json-explorer-string-color: green; $json-explorer-string-color: green;
$json-explorer-number-color: blue; $json-explorer-number-color: $sapphire-base;
$json-explorer-boolean-color: red; $json-explorer-boolean-color: $lobster-base;
$json-explorer-null-color: #855a00; $json-explorer-null-color: #855a00;
$json-explorer-undefined-color: rgb(202, 11, 105); $json-explorer-undefined-color: rgb(202, 11, 105);
$json-explorer-function-color: #ff20ed; $json-explorer-function-color: #ff20ed;
$json-explorer-rotate-time: 100ms; $json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6; $json-explorer-toggler-opacity: 0.6;
$json-explorer-bracket-color: blue; $json-explorer-bracket-color: $sapphire-base;
$json-explorer-key-color: #00008b; $json-explorer-key-color: #00008b;
$json-explorer-url-color: blue; $json-explorer-url-color: $sapphire-base;
// Changelog and diff // Changelog and diff
// ------------------------- // -------------------------
...@@ -355,34 +353,34 @@ $diff-arrow-color: $dark-3; ...@@ -355,34 +353,34 @@ $diff-arrow-color: $dark-3;
$diff-group-bg: $gray-7; $diff-group-bg: $gray-7;
$diff-json-bg: $gray-5; $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-added: $sapphire-shade;
$diff-json-deleted: desaturate($red, 35%); $diff-json-deleted: $lobster-shade;
$diff-json-old: #5a372a; $diff-json-old: #5a372a;
$diff-json-new: #664e33; $diff-json-new: #664e33;
$diff-json-changed-fg: $gray-6; $diff-json-changed-fg: $gray-7;
$diff-json-changed-num: $gray-4; $diff-json-changed-num: $gray-4;
$diff-json-icon: $gray-4; $diff-json-icon: $gray-4;
//Submenu //Submenu
$variable-option-bg: $blue-light; $variable-option-bg: $sapphire-light;
//Switch Slider //Switch Slider
// ------------------------- // -------------------------
$switch-bg: $white; $switch-bg: $white;
$switch-slider-color: $gray-7; $switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5; $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; $switch-slider-shadow: 0 0 3px $dark-5;
//Checkbox //Checkbox
// ------------------------- // -------------------------
$checkbox-bg: $gray-6; $checkbox-bg: $gray-6;
$checkbox-border: 1px solid $gray-3; $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; $checkbox-color: $gray-7;
//Panel Edit //Panel Edit
...@@ -393,18 +391,18 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); ...@@ -393,18 +391,18 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
$panel-editor-toolbar-view-bg: $white; $panel-editor-toolbar-view-bg: $white;
$panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
$panel-editor-viz-item-border: 1px solid $gray-3; $panel-editor-viz-item-border: 1px solid $gray-3;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; $panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
$panel-editor-viz-item-border-hover: 1px solid $blue-light; $panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
$panel-editor-viz-item-bg: $white; $panel-editor-viz-item-bg: $white;
$panel-editor-tabs-line-color: $dark-5; $panel-editor-tabs-line-color: $dark-5;
$panel-editor-viz-item-bg-hover: lighten($blue, 62%); $panel-editor-viz-item-bg-hover: $sapphire-faint;
$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%); $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
$panel-options-group-border: none; $panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5; $panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: lighten($blue, 62%); $panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light; $panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
// logs // logs
$logs-color-unkown: $gray-5; $logs-color-unkown: $gray-5;
......
public/sass/base/_type.scss
...@@ -59,13 +59,13 @@ a.text-error:focus { ...@@ -59,13 +59,13 @@ a.text-error:focus {
color: darken($error-text-color, 10%); color: darken($error-text-color, 10%);
} }
.text-info { /*.text-info {
color: $info-text-color; color: $info-text-color;
} }
a.text-info:hover, a.text-info:hover,
a.text-info:focus { a.text-info:focus {
color: darken($info-text-color, 10%); color: darken($info-text-color, 10%);
} }*/
.text-success { .text-success {
color: $success-text-color; color: $success-text-color;
......
public/sass/components/_buttons.scss
...@@ -89,35 +89,12 @@ ...@@ -89,35 +89,12 @@
.btn-secondary { .btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @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 // Danger and error appear as red
.btn-danger { .btn-danger {
@include buttonBackground($btn-danger-bg, $btn-danger-bg-hl); @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 // Info appears as a neutral blue
.btn-secondary { .btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
...@@ -138,20 +115,15 @@ ...@@ -138,20 +115,15 @@
@include button-outline-variant($btn-primary-bg); @include button-outline-variant($btn-primary-bg);
} }
.btn-outline-secondary { .btn-outline-secondary {
@include button-outline-variant($btn-secondary-bg); @include button-outline-variant($btn-secondary-bg-hl);
} }
.btn-outline-inverse { .btn-outline-inverse {
@include button-outline-variant($btn-inverse-bg); @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 { .btn-outline-danger {
@include button-outline-variant($btn-danger-bg); @include button-outline-variant(green);
} }
.btn-outline-disabled { .btn-outline-disabled {
@include button-outline-variant($gray-1); @include button-outline-variant($gray-1);
@include box-shadow(none); @include box-shadow(none);
......
public/sass/components/_navbar.scss
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
} }
&--primary { &--primary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
} }
} }
......
public/sass/components/_panel_gettingstarted.scss
...@@ -118,7 +118,7 @@ $path-position: $marker-size-half - ($path-height / 2); ...@@ -118,7 +118,7 @@ $path-position: $marker-size-half - ($path-height / 2);
.progress-step-cta { .progress-step-cta {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius); @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; display: none;
} }
......
public/vendor/angular-ui/ui-bootstrap-tpls.js
...@@ -1245,7 +1245,7 @@ angular.module("template/datepicker/popup.html", []).run(["$templateCache", func ...@@ -1245,7 +1245,7 @@ angular.module("template/datepicker/popup.html", []).run(["$templateCache", func
" <button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\" ng-disabled=\"isDisabled('today')\">{{ getText('current') }}</button>\n" + " <button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\" ng-disabled=\"isDisabled('today')\">{{ getText('current') }}</button>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n" + " <button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n" +
" </span>\n" + " </span>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" + " <button type=\"button\" class=\"btn btn-sm btn-primary pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" +
" </li>\n" + " </li>\n" +
"</ul>\n" + "</ul>\n" +
""); "");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment