Theme: Reworking button styling (#16362)

* added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex

* set fixed height to large button, removed xlarge button and replaced with large button

* removed button-mini and replaced with button-small, set fixed height to default button and button-small

* fixed padding for default and large button, fixed height for navbar button, fixed snapshots

* fixed padding and margin on navbar buttons

* gave special height to login btn-primary

* readded btn-mini class with same styling as btn-small and a deprecated notice

* fixed add panel widget buttons
This commit is contained in:
Patrick O'Carroll
2019-04-08 09:48:15 +02:00
committed by Torkel Ödegaard
parent 9b39dbc2fb
commit 128fb8fa7e
35 changed files with 130 additions and 100 deletions

View File

@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui';
import { CallToActionCard, LargeLinkButton, ThemeContext } from '@grafana/ui';
import { css } from 'emotion';
export interface Props {
model: any;
@@ -37,9 +37,9 @@ const EmptyListCTA: React.FunctionComponent<Props> = props => {
: '';
const ctaElement = (
<ExtraLargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
<LargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
{buttonTitle}
</ExtraLargeLinkButton>
</LargeLinkButton>
);
return <CallToActionCard message={title} footer={footer} callToActionElement={ctaElement} theme={theme} />;

View File

@@ -29,10 +29,10 @@ const template = `
<td>{{org.name}}</td>
<td>{{org.role}}</td>
<td class="text-right">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === ctrl.currentOrgId">
<span class="btn btn-primary btn-small" ng-show="org.orgId === ctrl.currentOrgId">
Current
</span>
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== ctrl.currentOrgId">
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== ctrl.currentOrgId">
Switch to
</a>
</td>