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

packages/grafana-ui/src/components/Button/AbstractButton.tsx

@@ -65,35 +65,28 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
     background,
     fontSize,
     iconDistance,
+    height,
     fontWeight = theme.typography.weight.semibold;
 
   switch (size) {
-    case ButtonSize.ExtraSmall:
-      padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
-      fontSize = theme.typography.size.xs;
-      iconDistance = theme.spacing.xs;
-      break;
     case ButtonSize.Small:
       padding = `${theme.spacing.xs} ${theme.spacing.sm}`;
       fontSize = theme.typography.size.sm;
       iconDistance = theme.spacing.xs;
+      height = theme.height.sm;
       break;
     case ButtonSize.Large:
       padding = `${theme.spacing.md} ${theme.spacing.lg}`;
       fontSize = theme.typography.size.lg;
       fontWeight = theme.typography.weight.regular;
       iconDistance = theme.spacing.sm;
-      break;
+      height = theme.height.lg;
-    case ButtonSize.ExtraLarge:
-      padding = `${theme.spacing.md} ${theme.spacing.lg}`;
-      fontSize = theme.typography.size.lg;
-      fontWeight = theme.typography.weight.regular;
-      iconDistance = theme.spacing.sm;
       break;
     default:
       padding = `${theme.spacing.sm} ${theme.spacing.md}`;
       iconDistance = theme.spacing.sm;
       fontSize = theme.typography.size.base;
+      height = theme.height.md;
   }
 
   switch (variant) {
@@ -133,7 +126,8 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
   return {
     button: css`
       label: button;
-      display: inline-block;
+      display: flex;
+      align-items: center;
       font-weight: ${fontWeight};
       font-size: ${fontSize};
       font-family: ${theme.typography.fontFamily.sansSerif};
@@ -143,6 +137,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
       vertical-align: middle;
       cursor: pointer;
       border: none;
+      height: ${height};
       border-radius: ${borderRadius};
       ${background};
 
@@ -161,6 +156,7 @@ const getButtonStyles = (theme: GrafanaTheme, size: ButtonSize, variant: ButtonV
     icon: css`
       label: button-icon;
       margin-right: ${iconDistance};
+      filter: brightness(100);
     `,
   };
 };

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -48,7 +48,7 @@ ButtonStories.add('with icon', () => {
       Plus: 'fa fa-plus',
       User: 'fa fa-user',
       Gear: 'fa fa-gear',
-      Annotation: 'gicon gicon-add-annotation',
+      Annotation: 'gicon gicon-annotation',
     },
     'fa fa-plus'
   );

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -176,6 +176,11 @@ exports[`Render should render with base threshold 1`] = `
                               "white": "#ffffff",
                               "yellow": "#ecbb13",
                             },
+                            "height": Object {
+                              "lg": "48px",
+                              "md": "32px",
+                              "sm": "24px",
+                            },
                             "name": "Grafana Dark",
                             "panelPadding": Object {
                               "horizontal": 16,
@@ -334,6 +339,11 @@ exports[`Render should render with base threshold 1`] = `
                                     "white": "#ffffff",
                                     "yellow": "#ecbb13",
                                   },
+                                  "height": Object {
+                                    "lg": "48px",
+                                    "md": "32px",
+                                    "sm": "24px",
+                                  },
                                   "name": "Grafana Dark",
                                   "panelPadding": Object {
                                     "horizontal": 16,

packages/grafana-ui/src/themes/_variables.scss.tmpl.ts

@@ -87,6 +87,12 @@ $container-max-widths: (
 $grid-columns: 12 !default;
 $grid-gutter-width: ${theme.spacing.gutter} !default;
 
+// Component heights
+// -------------------------
+$height-sm: ${theme.height.sm};
+$height-md: ${theme.height.md};
+$height-lg: ${theme.height.lg};
+
 // Typography
 // -------------------------
 

packages/grafana-ui/src/themes/default.ts

@@ -67,6 +67,11 @@ const theme: GrafanaThemeCommons = {
       sm: '1px',
     },
   },
+  height: {
+    sm: '24px',
+    md: '32px',
+    lg: '48px',
+  },
   panelPadding: {
     horizontal: 16,
     vertical: 8,

packages/grafana-ui/src/types/theme.ts

@@ -72,6 +72,11 @@ export interface GrafanaThemeCommons {
       sm: string;
     };
   };
+  height: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
   panelPadding: {
     horizontal: number;
     vertical: number;

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -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} />;

public/app/core/components/org_switcher.ts

@@ -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>

public/app/features/admin/partials/edit_org.html

@@ -35,7 +35,7 @@
         </div>
 			</td>
 			<td style="width: 1%">
-				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
+				<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
 					<i class="fa fa-remove"></i>
 				</a>
 			</td>

public/app/features/admin/partials/edit_user.html

@@ -91,7 +91,7 @@
         </div>
 			</td>
 			<td style="width: 1%">
-				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
+				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
 					<i class="fa fa-remove"></i>
 				</a>
 			</td>

public/app/features/alerting/StateHistory.tsx

@@ -72,7 +72,7 @@ class StateHistory extends PureComponent<Props, State> {
         {stateHistoryItems.length > 0 && (
           <div className="p-b-1">
             <span className="muted">Last 50 state changes</span>
-            <button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
+            <button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
               <i className="fa fa-trash" /> {` Clear history`}
             </button>
           </div>

public/app/features/alerting/partials/notifications_list.html

@@ -47,7 +47,7 @@
   <div ng-if="ctrl.notifications.length === 0">
     <empty-list-cta model="{
       title: 'There are no notification channels defined yet',
-      buttonIcon: 'gicon gicon-add-alert-notification-channel',
+      buttonIcon: 'gicon gicon-alert-notification-channel',
       buttonLink: 'alerting/notification/new',
       buttonTitle: 'Add channel',
       proTip: 'You can include images in your alert notifications.',

public/app/features/annotations/partials/editor.html

@@ -36,7 +36,7 @@
 					<td style="width: 1%"><i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
 					<td style="width: 1%"><i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
 					<td style="width: 1%">
-						<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
+						<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
 							<i class="fa fa-remove"></i>
 						</a>
 					</td>
@@ -48,8 +48,8 @@
 		<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
 			<div class="empty-list-cta">
 				<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-primary">
+				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
-					<i class="gicon gicon-add-annotation"></i>
+					<i class="gicon gicon-annotation"></i>
 					Add Annotation Query
 				</a>
 				<div class="grafana-info-box">

public/app/features/api-keys/ApiKeysPage.tsx

@@ -113,7 +113,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
           <EmptyListCTA
             model={{
               title: "You haven't added any API Keys yet.",
-              buttonIcon: 'fa fa-plus',
+              buttonIcon: 'gicon gicon-apikeys',
               buttonLink: '#',
               onClick: this.onToggleAdding,
               buttonTitle: ' New API Key',

public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
     <EmptyListCTA
       model={
         Object {
-          "buttonIcon": "fa fa-plus",
+          "buttonIcon": "gicon gicon-apikeys",
           "buttonLink": "#",
           "buttonTitle": " New API Key",
           "onClick": [Function],

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -37,7 +37,9 @@
 
 .add-panel-widget__link {
   margin: 0 $space-sm;
-  width: 154px;
+  width: 160px;
+  height: 88px !important;
+  flex-direction: column !important;
 }
 
 .add-panel-widget__icon {

public/app/features/dashboard/components/DashLinks/editor.html

@@ -10,8 +10,8 @@
       <div class="empty-list-cta__title">
         There are no dashboard links added yet
       </div>
-      <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
+      <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
-        <i class="gicon gicon-add-link"></i>
+        <i class="gicon gicon-link"></i>
         Add Dashboard Link
       </a>
       <div class="grafana-info-box">
@@ -61,7 +61,7 @@
             <i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
           </td>
           <td style="width: 1%">
-            <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
+            <a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
               <i class="fa fa-remove"></i>
             </a>
           </td>

public/app/features/datasources/DataSourcesListItem.tsx

@@ -21,7 +21,7 @@ export class DataSourcesListItem extends PureComponent<Props> {
             <div className="card-item-details">
               <div className="card-item-name">
                 {dataSource.name}
-                {dataSource.isDefault && <span className="btn btn-secondary btn-mini card-item-label">default</span>}
+                {dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>}
               </div>
               <div className="card-item-sub-name">{dataSource.url}</div>
             </div>

public/app/features/datasources/DataSourcesListPage.tsx

@@ -39,7 +39,7 @@ export interface Props {
 
 const emptyListModel = {
   title: 'There are no data sources defined yet',
-  buttonIcon: 'gicon gicon-add-datasources',
+  buttonIcon: 'gicon gicon-datasources',
   buttonLink: 'datasources/new',
   buttonTitle: 'Add data source',
   proTip: 'You can also define data sources through configuration files.',

public/app/features/explore/NoDataSourceCallToAction.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { css } from 'emotion';
-import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui';
+import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui';
 
 export const NoDataSourceCallToAction = () => {
   const theme = useContext(ThemeContext);
@@ -22,9 +22,9 @@ export const NoDataSourceCallToAction = () => {
   );
 
   const ctaElement = (
-    <ExtraLargeLinkButton href="/datasources/new" icon="gicon gicon-add-datasources">
+    <LargeLinkButton href="/datasources/new" icon="gicon gicon-datasources">
       Add data source
-    </ExtraLargeLinkButton>
+    </LargeLinkButton>
   );
 
   const cardClassName = css`

public/app/features/manage-dashboards/partials/snapshot_list.html

@@ -20,13 +20,13 @@
         <span class="query-keyword" ng-if="snapshot.external">External</span>
       </td>
       <td class="text-center">
-        <a href="{{snapshot.url}}" class="btn btn-inverse btn-mini">
+        <a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
           <i class="fa fa-eye"></i>
           View
         </a>
       </td>
       <td  class="text-right">
-        <a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
+        <a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-small">
           <i class="fa fa-remove"></i>
         </a>
       </td>

public/app/features/playlist/partials/playlist.html

@@ -34,13 +34,13 @@
 				</td>
 
 				<td class="selected-playlistitem-settings">
-					<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
+					<button class="btn btn-inverse btn-small" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
 						<i class="fa fa-arrow-up"></i>
 					</button>
-					<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
+					<button class="btn btn-inverse btn-small" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
 						<i class="fa fa-arrow-down"></i>
 					</button>
-					<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
+					<button class="btn btn-inverse btn-small" ng-click="ctrl.removePlaylistItem(playlistItem)">
 						<i class="fa fa-remove"></i>
 					</button>
 				</td>
@@ -64,7 +64,7 @@
 						<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
 					</td>
 					<td class="add-dashboard">
-						<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
+						<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
 							<i class="fa fa-plus"></i>
 							Add to playlist
 						</button>
@@ -82,7 +82,7 @@
 						</a>
 					</td>
 					<td class="add-dashboard">
-						<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
+						<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
 							<i class="fa fa-plus"></i>
 							Add to playlist
 						</button>

public/app/features/profile/partials/profile.html

@@ -63,10 +63,10 @@
           <td>{{org.name}}</td>
           <td>{{org.role}}</td>
           <td class="text-right">
-            <span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
+            <span class="btn btn-primary btn-small" ng-show="org.orgId === contextSrv.user.orgId">
               Current
             </span>
-            <a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
+            <a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== contextSrv.user.orgId">
               Select
             </a>
           </td>

public/app/features/teams/TeamGroupSync.tsx

@@ -63,7 +63,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
       <tr key={group.groupId}>
         <td>{group.groupId}</td>
         <td style={{ width: '1%' }}>
-          <a className="btn btn-danger btn-mini" onClick={() => this.onRemoveGroup(group)}>
+          <a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
             <i className="fa fa-remove" />
           </a>
         </td>
@@ -121,8 +121,8 @@ export class TeamGroupSync extends PureComponent<Props, State> {
         {groups.length === 0 && !isAdding && (
           <div className="empty-list-cta">
             <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-primary">
+            <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-large btn-primary">
-              <i className="gicon gicon-add-team" />
+              <i className="gicon gicon-team" />
               Add Group
             </button>
             <div className="empty-list-cta__pro-tip">

public/app/features/teams/TeamList.tsx

@@ -73,20 +73,18 @@ export class TeamList extends PureComponent<Props, any> {
 
   renderEmptyList() {
     return (
-      <div className="page-container page-body">
+      <EmptyListCTA
-        <EmptyListCTA
+        model={{
-          model={{
+          title: "You haven't created any teams yet.",
-            title: "You haven't created any teams yet.",
+          buttonIcon: 'gicon gicon-team',
-            buttonIcon: 'fa fa-plus',
+          buttonLink: 'org/teams/new',
-            buttonLink: 'org/teams/new',
+          buttonTitle: ' New team',
-            buttonTitle: ' New team',
+          proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
-            proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
+          proTipLink: '',
-            proTipLink: '',
+          proTipLinkTitle: '',
-            proTipLinkTitle: '',
+          proTipTarget: '_blank',
-            proTipTarget: '_blank',
+        }}
-          }}
+      />
-        />
-      </div>
     );
   }
 

public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap

@@ -81,11 +81,11 @@ exports[`Render should render component 1`] = `
       There are no external groups to sync with
     </div>
     <button
-      className="empty-list-cta__button btn btn-xlarge btn-primary"
+      className="empty-list-cta__button btn btn-large btn-primary"
       onClick={[Function]}
     >
       <i
-        className="gicon gicon-add-team"
+        className="gicon gicon-team"
       />
       Add Group
     </button>
@@ -225,7 +225,7 @@ exports[`Render should render groups table 1`] = `
             }
           >
             <a
-              className="btn btn-danger btn-mini"
+              className="btn btn-danger btn-small"
               onClick={[Function]}
             >
               <i
@@ -248,7 +248,7 @@ exports[`Render should render groups table 1`] = `
             }
           >
             <a
-              className="btn btn-danger btn-mini"
+              className="btn btn-danger btn-small"
               onClick={[Function]}
             >
               <i
@@ -271,7 +271,7 @@ exports[`Render should render groups table 1`] = `
             }
           >
             <a
-              className="btn btn-danger btn-mini"
+              className="btn btn-danger btn-small"
               onClick={[Function]}
             >
               <i

public/app/features/teams/partials/create_team.html

@@ -18,8 +18,8 @@
 			<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
 		</div>
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-primary width-12">
+			<button type="submit" class="btn btn-primary">
-				<i class="fa fa-save"></i> Create
+				Create
 			</button>
 		</div>
 	</form>

public/app/features/templating/partials/editor.html

@@ -11,8 +11,8 @@
 		<div ng-if="variables.length === 0">
 			<div class="empty-list-cta">
 				<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-primary">
+				<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-large btn-primary">
-					<i class="gicon gicon-add-variable"></i>
+					<i class="gicon gicon-variable"></i>
 					Add variable
 				</a>
 				<div class="grafana-info-box">
@@ -58,12 +58,12 @@
 						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
 						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
 						<td style="width: 1%">
-							<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
+							<a ng-click="duplicate(variable)" class="btn btn-inverse btn-small">
 								Duplicate
 							</a>
 						</td>
 						<td style="width: 1%">
-							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
+							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-small">
 								<i class="fa fa-remove"></i>
 							</a>
 						</td>

public/app/features/users/InviteeRow.tsx

@@ -27,7 +27,7 @@ class InviteeRow extends PureComponent<Props> {
         <td>{invitee.email}</td>
         <td>{invitee.name}</td>
         <td className="text-right">
-          <button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
+          <button className="btn btn-inverse btn-small" onClick={this.copyToClipboard}>
             <textarea
               readOnly={true}
               value={invitee.url}
@@ -39,7 +39,7 @@ class InviteeRow extends PureComponent<Props> {
           &nbsp;
         </td>
         <td>
-          <button className="btn btn-danger btn-mini" onClick={() => revokeInvite(invitee.code)}>
+          <button className="btn btn-danger btn-small" onClick={() => revokeInvite(invitee.code)}>
             <i className="fa fa-remove" />
           </button>
         </td>

public/app/features/users/UsersTable.tsx

@@ -52,7 +52,7 @@ const UsersTable: FC<Props> = props => {
                 </div>
               </td>
               <td>
-                <div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-mini">
+                <div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-small">
                   <i className="fa fa-remove" />
                 </div>
               </td>

public/app/features/users/__snapshots__/UsersTable.test.tsx.snap

@@ -115,7 +115,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i
@@ -178,7 +178,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i
@@ -241,7 +241,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i
@@ -304,7 +304,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i
@@ -367,7 +367,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i
@@ -430,7 +430,7 @@ exports[`Render should render users table 1`] = `
       </td>
       <td>
         <div
-          className="btn btn-danger btn-mini"
+          className="btn btn-danger btn-small"
           onClick={[Function]}
         >
           <i

public/sass/_variables.generated.scss

@@ -90,6 +90,12 @@ $container-max-widths: (
 $grid-columns: 12 !default;
 $grid-gutter-width: 30px !default;
 
+// Component heights
+// -------------------------
+$height-sm: 24px;
+$height-md: 32px;
+$height-lg: 48px;
+
 // Typography
 // -------------------------
 

public/sass/components/_buttons.scss

@@ -7,7 +7,9 @@
 
 // Core
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-weight: $btn-font-weight;
   line-height: $btn-line-height;
   font-size: $font-size-base;
@@ -15,8 +17,9 @@
   vertical-align: middle;
   cursor: pointer;
   border: none;
+  height: $height-md;
 
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $border-radius-sm);
+  @include button-size($btn-padding-y, $space-md, $font-size-base, $border-radius-sm);
 
   &,
   &:active,
@@ -51,29 +54,28 @@
 
 // Button Sizes
 // --------------------------------------------------
-// XLarge
-.btn-xlarge {
-  @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $border-radius-sm);
-  font-weight: normal;
-  padding-bottom: $btn-padding-y-xl - 3;
-  .gicon {
-    font-size: 31px;
-    margin-right: $space-md;
-  }
-}
 
 // Large
 .btn-large {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $border-radius-sm);
+  @include button-size($btn-padding-y-lg, $space-lg, $font-size-lg, $border-radius-sm);
   font-weight: normal;
+  height: $height-lg;
+  .gicon {
+    //font-size: 31px;
+    margin-right: $space-sm;
+    filter: brightness(100);
+  }
 }
 
 .btn-small {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
+  @include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
+  height: $height-sm;
 }
 
+// Deprecated, only used by old plugins
 .btn-mini {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $border-radius-sm);
+  @include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
+  height: $height-sm;
 }
 
 .btn-link {

public/sass/components/_navbar.scss

@@ -112,12 +112,11 @@
   display: flex;
   align-items: center;
   font-weight: $btn-font-weight;
-  padding: 6px 11px;
+  padding: 6px $space-sm;
   line-height: 16px;
-  height: 30px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
-  margin-left: 3px;
+  margin-left: $space-xs;
   white-space: nowrap;
 
   .gicon {

public/sass/pages/_login.scss

@@ -20,6 +20,7 @@ $login-border: #8daac5;
 
   & .btn-primary {
     @include buttonBackground(#ff6600, #bc3e06);
+    height: 40px;
   }
 }