From f6ecded86bf4c1e17841523e260904ffc11d7046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 30 Apr 2021 10:04:01 +0200 Subject: [PATCH] Theme: Page styles move to emotion global styles and design tweaks (#33529) * Theme: Page styles move to emotion global styles and design tweaks * More style tweaks * tweaks * Updating snapshots * Another fix * Another fix * minor fix * More style tweaks to page toolbar and alert rule page * minor polish --- .../src/components/PageLayout/PageToolbar.tsx | 2 +- .../src/themes/GlobalStyles/GlobalStyles.tsx | 7 +- .../src/themes/GlobalStyles/page.ts | 114 ++++++++++++ .../src/themes/_variables.light.scss.tmpl.ts | 2 +- .../components/FilterInput/FilterInput.tsx | 2 +- public/app/core/components/Page/Page.tsx | 16 +- .../PageActionBar/PageActionBar.tsx | 1 - .../__snapshots__/PageActionBar.test.tsx.snap | 3 - .../core/components/PageHeader/PageHeader.tsx | 1 - .../app/features/admin/UserListAdminPage.tsx | 29 ++- .../components/AlertingPageWrapper.tsx | 2 +- .../components/rule-editor/AlertRuleForm.tsx | 44 ++--- .../features/api-keys/ApiKeysActionBar.tsx | 2 - public/app/features/api-keys/ApiKeysPage.tsx | 7 +- .../components/PanelEditor/OptionsPane.tsx | 2 +- .../components/SnapshotListTable.tsx | 2 +- public/app/features/org/OrgDetailsPage.tsx | 2 +- .../OrgDetailsPage.test.tsx.snap | 4 +- public/app/features/plugins/PluginPage.tsx | 20 ++- .../features/profile/ChangePasswordForm.tsx | 2 +- .../features/profile/ChangePasswordPage.tsx | 2 +- .../features/profile/UserOrganizations.tsx | 88 +++++----- .../app/features/profile/UserProfileEdit.tsx | 23 ++- public/app/features/profile/UserSessions.tsx | 4 +- public/app/features/profile/UserTeams.tsx | 64 +++---- .../search/components/DashboardActions.tsx | 12 +- .../search/components/ManageDashboards.tsx | 10 +- public/app/features/teams/TeamList.tsx | 2 - public/app/features/teams/TeamMembers.tsx | 2 - .../__snapshots__/TeamList.test.tsx.snap | 9 - .../__snapshots__/TeamMembers.test.tsx.snap | 6 - public/app/features/users/UsersActionBar.tsx | 23 ++- .../UsersActionBar.test.tsx.snap | 76 ++++---- public/sass/_grafana.scss | 1 - public/sass/_variables.light.generated.scss | 2 +- public/sass/base/_type.scss | 9 + public/sass/components/_page_header.scss | 14 +- public/sass/components/_sidemenu.scss | 1 - public/sass/layout/_page.scss | 165 ------------------ public/sass/pages/_plugins.scss | 23 +++ 40 files changed, 367 insertions(+), 433 deletions(-) create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/page.ts delete mode 100644 public/sass/layout/_page.scss diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index 2b31c922206..3df5e44ea6a 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -135,7 +135,7 @@ const getStyles = (theme: GrafanaThemeV2) => { background: ${theme.colors.background.canvas}; justify-content: flex-end; flex-wrap: wrap; - padding: ${theme.spacing(0, 1, 1, 2)}; + padding: ${theme.spacing(1, 2, 0, 2)}; `, toolbarLeft: css` display: flex; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 3edfeec3b92..f66847dcf02 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -4,10 +4,15 @@ import { useTheme2 } from '..'; import { getElementStyles } from './elements'; import { getCardStyles } from './card'; import { getAgularPanelStyles } from './angularPanelStyles'; +import { getPageStyles } from './page'; /** @internal */ export function GlobalStyles() { const theme = useTheme2(); - return ; + return ( + + ); } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts new file mode 100644 index 00000000000..9b0e5ee7663 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts @@ -0,0 +1,114 @@ +import { css } from '@emotion/react'; +import { GrafanaThemeV2 } from '@grafana/data'; + +export function getPageStyles(theme: GrafanaThemeV2) { + return css` + .grafana-app { + display: flex; + align-items: stretch; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + .main-view { + position: relative; + flex-grow: 1; + } + + .page-scrollbar-wrapper { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + } + + .page-scrollbar-content { + display: flex; + min-height: 100%; + flex-direction: column; + width: 100%; + height: 100%; + } + + .page-container { + flex-grow: 1; + flex-basis: 100%; + padding-left: ${theme.spacing(2)}; + padding-right: ${theme.spacing(2)}; + + ${theme.breakpoints.up('sm')} { + margin: ${theme.spacing(0, 1)}; + } + + ${theme.breakpoints.up('md')} { + margin: ${theme.spacing(0, 2)}; + } + + @media (min-width: ${theme.breakpoints.values.xxl + theme.spacing.gridSize * 2}px) { + max-width: ${theme.breakpoints.values.xxl}px; + margin-left: auto; + margin-right: auto; + width: 100%; + } + } + + .page-full { + margin-left: ${theme.spacing(2)}; + padding-left: ${theme.spacing(2)}; + padding-right: ${theme.spacing(2)}; + } + + .page-body { + padding: ${theme.spacing(1)}; + background: ${theme.components.panel.background}; + border: 1px solid ${theme.components.panel.borderColor}; + margin-bottom: 32px; + + ${theme.breakpoints.up('md')} { + padding: ${theme.spacing(2)}; + } + + ${theme.breakpoints.up('lg')} { + padding: ${theme.spacing(3)}; + } + } + + .page-heading { + font-size: ${theme.typography.h4.fontSize}; + margin-top: 0; + margin-bottom: ${theme.spacing(2)}; + } + + .page-action-bar { + margin-bottom: ${theme.spacing(2)}; + display: flex; + align-items: flex-start; + + > a, + > button { + margin-left: ${theme.spacing(2)}; + } + } + + .page-action-bar--narrow { + margin-bottom: 0; + } + + .page-action-bar__spacer { + width: ${theme.spacing(2)}; + flex-grow: 1; + } + + .page-sub-heading { + margin-bottom: ${theme.spacing(2)}; + } + + .page-sub-heading-icon { + margin-left: ${theme.spacing(1)}; + margin-top: ${theme.spacing(0.5)}; + } + `; +} diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 9d1699609e5..fc66115f09e 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -372,7 +372,7 @@ $panel-editor-viz-item-shadow: 0 0 4px $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-border-hover: 1px solid $blue-light; -$panel-editor-viz-item-bg: $white; +$panel-editor-viz-item-bg: $card-background; $panel-editor-tabs-line-color: $dark-2; $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); diff --git a/public/app/core/components/FilterInput/FilterInput.tsx b/public/app/core/components/FilterInput/FilterInput.tsx index 9efe9939396..097f75e81f4 100644 --- a/public/app/core/components/FilterInput/FilterInput.tsx +++ b/public/app/core/components/FilterInput/FilterInput.tsx @@ -23,7 +23,7 @@ export const FilterInput: FC = ({ value, placeholder, width, onChange, au autoFocus={autoFocus ?? false} prefix={} suffix={suffix} - width={width ?? 40} + width={width} type="text" value={value ? unEscapeStringFromRegex(value) : ''} onChange={(event) => onChange(escapeStringForRegex(event.currentTarget.value))} diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx index d13e67b75ea..20b4a688c6b 100644 --- a/public/app/core/components/Page/Page.tsx +++ b/public/app/core/components/Page/Page.tsx @@ -7,14 +7,13 @@ import PageHeader from '../PageHeader/PageHeader'; import { Footer } from '../Footer/Footer'; import { PageContents } from './PageContents'; import { CustomScrollbar, useStyles2 } from '@grafana/ui'; -import { GrafanaThemeV2, NavModel, ThemeBreakpointsKey } from '@grafana/data'; +import { GrafanaThemeV2, NavModel } from '@grafana/data'; import { Branding } from '../Branding/Branding'; import { css, cx } from '@emotion/css'; interface Props extends HTMLAttributes { children: React.ReactNode; navModel: NavModel; - contentWidth?: ThemeBreakpointsKey; } export interface PageType extends FC { @@ -22,7 +21,7 @@ export interface PageType extends FC { Contents: typeof PageContents; } -export const Page: PageType = ({ navModel, children, className, contentWidth, ...otherProps }) => { +export const Page: PageType = ({ navModel, children, className, ...otherProps }) => { const styles = useStyles2(getStyles); useEffect(() => { @@ -31,10 +30,7 @@ export const Page: PageType = ({ navModel, children, className, contentWidth, .. }, [navModel]); return ( -
+
@@ -53,15 +49,9 @@ export default Page; const getStyles = (theme: GrafanaThemeV2) => ({ wrapper: css` - background: ${theme.colors.background.primary}; bottom: 0; position: absolute; top: 0; width: 100%; `, - contentWidth: (size: ThemeBreakpointsKey) => css` - .page-container { - max-width: ${theme.breakpoints.values[size]}px; - } - `, }); diff --git a/public/app/core/components/PageActionBar/PageActionBar.tsx b/public/app/core/components/PageActionBar/PageActionBar.tsx index fdeb3afb03d..c68713ce69f 100644 --- a/public/app/core/components/PageActionBar/PageActionBar.tsx +++ b/public/app/core/components/PageActionBar/PageActionBar.tsx @@ -24,7 +24,6 @@ export default class PageActionBar extends PureComponent {
-
{linkButton && {linkButton.title}}
); diff --git a/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap b/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap index 447b95e2cb4..28597c2e212 100644 --- a/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap +++ b/public/app/core/components/PageActionBar/__snapshots__/PageActionBar.test.tsx.snap @@ -13,9 +13,6 @@ exports[`Render should render component 1`] = ` value="" />
-
({ headerCanvas: css` background: ${theme.colors.background.canvas}; - border-bottom: 1px solid ${theme.colors.border.weak}; `, }); diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx index 8024fbe1d84..50fe1838a8e 100644 --- a/public/app/features/admin/UserListAdminPage.tsx +++ b/public/app/features/admin/UserListAdminPage.tsx @@ -3,13 +3,14 @@ import { css, cx } from '@emotion/css'; import { hot } from 'react-hot-loader'; import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'; import { NavModel } from '@grafana/data'; -import { Pagination, Tooltip, HorizontalGroup, stylesFactory, LinkButton, Input, Icon } from '@grafana/ui'; +import { Pagination, Tooltip, stylesFactory, LinkButton, Icon } from '@grafana/ui'; import { AccessControlAction, StoreState, UserDTO } from '../../types'; import Page from 'app/core/components/Page/Page'; import { getNavModel } from '../../core/selectors/navModel'; import { fetchUsers, changeQuery, changePage } from './state/actions'; import { TagBadge } from 'app/core/components/TagFilter/TagBadge'; import { contextSrv } from 'app/core/core'; +import { FilterInput } from 'app/core/components/FilterInput/FilterInput'; interface OwnProps {} @@ -42,27 +43,21 @@ const UserListAdminPageUnConnected: React.FC = (props) => { <> -
- - +
+ changeQuery(event.currentTarget.value)} - prefix={} + onChange={(value) => changeQuery(value)} /> - {contextSrv.hasPermission(AccessControlAction.UsersCreate) && ( - - New user - - )} - +
+ {contextSrv.hasPermission(AccessControlAction.UsersCreate) && ( + + New user + + )}
-
diff --git a/public/app/features/alerting/unified/components/AlertingPageWrapper.tsx b/public/app/features/alerting/unified/components/AlertingPageWrapper.tsx index 65bce6a2ced..db50e173e1d 100644 --- a/public/app/features/alerting/unified/components/AlertingPageWrapper.tsx +++ b/public/app/features/alerting/unified/components/AlertingPageWrapper.tsx @@ -16,7 +16,7 @@ export const AlertingPageWrapper: FC = ({ children, pageId, isLoading }) ); return ( - + {children} ); diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index abb3794d0e5..9cc3cc9b415 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -1,6 +1,6 @@ import React, { FC, useMemo } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { PageToolbar, ToolbarButton, useStyles, CustomScrollbar, Spinner, Alert } from '@grafana/ui'; +import { GrafanaThemeV2 } from '@grafana/data'; +import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner, Alert } from '@grafana/ui'; import { css } from '@emotion/css'; import { AlertTypeStep } from './AlertTypeStep'; @@ -24,7 +24,7 @@ type Props = { }; export const AlertRuleForm: FC = ({ existing }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const dispatch = useDispatch(); const defaultValues: RuleFormValues = useMemo(() => { @@ -73,22 +73,22 @@ export const AlertRuleForm: FC = ({ existing }) => { return (
submit(values, false))} className={styles.form}> - + - + - submit(values, false))} disabled={submitState.loading} > {submitState.loading && } Save - - +
@@ -128,15 +128,10 @@ export const AlertRuleForm: FC = ({ existing }) => { ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaThemeV2) => { return { buttonSpinner: css` - margin-right: ${theme.spacing.sm}; - `, - toolbar: css` - padding-top: ${theme.spacing.sm}; - padding-bottom: ${theme.spacing.md}; - border-bottom: solid 1px ${theme.colors.border2}; + margin-right: ${theme.spacing(1)}; `, form: css` width: 100%; @@ -146,19 +141,16 @@ const getStyles = (theme: GrafanaTheme) => { `, contentInner: css` flex: 1; - padding: ${theme.spacing.md}; + padding: ${theme.spacing(2)}; `, contentOuter: css` - background: ${theme.colors.panelBg}; + background: ${theme.colors.background.primary}; + border: 1px solid ${theme.colors.border.weak}; + border-radius: ${theme.shape.borderRadius()}; + margin: ${theme.spacing(2)}; overflow: hidden; flex: 1; `, - formInput: css` - width: 400px; - & + & { - margin-left: ${theme.spacing.sm}; - } - `, flexRow: css` display: flex; flex-direction: row; diff --git a/public/app/features/api-keys/ApiKeysActionBar.tsx b/public/app/features/api-keys/ApiKeysActionBar.tsx index 09c8e557b23..165c4e41abe 100644 --- a/public/app/features/api-keys/ApiKeysActionBar.tsx +++ b/public/app/features/api-keys/ApiKeysActionBar.tsx @@ -15,8 +15,6 @@ export const ApiKeysActionBar: FC = ({ searchQuery, disabled, onAddClick,
- -
diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 6f1b05d9863..38325c351d0 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -11,7 +11,7 @@ import { ApiKeysAddedModal } from './ApiKeysAddedModal'; import config from 'app/core/config'; import appEvents from 'app/core/app_events'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; -import { InlineField, InlineSwitch } from '@grafana/ui'; +import { InlineField, InlineSwitch, VerticalGroup } from '@grafana/ui'; import { rangeUtil } from '@grafana/data'; import { getTimeZone } from 'app/features/profile/state/selectors'; import { setSearchQuery } from './state/reducers'; @@ -150,13 +150,12 @@ export class ApiKeysPageUnconnected extends PureComponent { ) : null} {showTable ? ( - <> -

Existing API keys

+ - + ) : null} ); diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx index fba3cdb9ad4..c10c4ef6f01 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx @@ -74,7 +74,7 @@ const getStyles = (theme: GrafanaTheme) => { min-height: 0; `, vizButtonWrapper: css` - padding: 0 ${theme.spacing.sm} ${theme.spacing.md} 0; + padding: 0 ${theme.spacing.md} ${theme.spacing.md} 0; `, legacyOptions: css` label: legacy-options; diff --git a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx index 5dee15de511..dd6c0eae769 100644 --- a/public/app/features/manage-dashboards/components/SnapshotListTable.tsx +++ b/public/app/features/manage-dashboards/components/SnapshotListTable.tsx @@ -40,7 +40,7 @@ export const SnapshotListTable: FC = () => { ); return ( -
+
diff --git a/public/app/features/org/OrgDetailsPage.tsx b/public/app/features/org/OrgDetailsPage.tsx index 6c4861bd663..c76c50f168c 100644 --- a/public/app/features/org/OrgDetailsPage.tsx +++ b/public/app/features/org/OrgDetailsPage.tsx @@ -38,7 +38,7 @@ export class OrgDetailsPage extends PureComponent { {!isLoading && ( - + diff --git a/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap index 682c28d0482..69c6a3db757 100644 --- a/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap +++ b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap @@ -35,7 +35,9 @@ exports[`Render should render organization and preferences 1`] = ` - + { Update Available! - {/**/} - {/* Update Available!*/} - {/**/} )} @@ -283,11 +280,10 @@ class PluginPage extends PureComponent { } return ( - { {plugin.meta.signature !== PluginSignatureStatus.valid && 'Grafana Labs can’t guarantee the integrity of this unsigned plugin. Ask the plugin author to request it to be signed.'}

- + + Read more about plugins signing. + + ); } diff --git a/public/app/features/profile/ChangePasswordForm.tsx b/public/app/features/profile/ChangePasswordForm.tsx index ae312d6d2ef..174ecc8c85c 100644 --- a/public/app/features/profile/ChangePasswordForm.tsx +++ b/public/app/features/profile/ChangePasswordForm.tsx @@ -62,7 +62,7 @@ export const ChangePasswordForm: FC = ({ user, onChangePassword, isSaving - + Cancel diff --git a/public/app/features/profile/ChangePasswordPage.tsx b/public/app/features/profile/ChangePasswordPage.tsx index 5c3346123fb..edc9905292d 100644 --- a/public/app/features/profile/ChangePasswordPage.tsx +++ b/public/app/features/profile/ChangePasswordPage.tsx @@ -27,7 +27,7 @@ export const ChangePasswordPage: FC = ({ navModel }) => ( ) => { return ( -

Change Your Password

+

Change Your Password

{states.loadUser ? ( ) : ( diff --git a/public/app/features/profile/UserOrganizations.tsx b/public/app/features/profile/UserOrganizations.tsx index 12a9361b2ec..4ade31869a9 100644 --- a/public/app/features/profile/UserOrganizations.tsx +++ b/public/app/features/profile/UserOrganizations.tsx @@ -22,52 +22,52 @@ export class UserOrganizations extends PureComponent { return ; } + if (orgs.length === 0) { + return null; + } + return ( - <> - {orgs.length > 0 && ( - <> -

Organizations

-
-
- - - - -
NameRole +
+

Organizations

+
+ + + + + + + + + {orgs.map((org: UserOrg, index) => { + return ( + + + + - - - {orgs.map((org: UserOrg, index) => { - return ( - - - - - - ); - })} - -
NameRole +
{org.name}{org.role} + {org.orgId === user.orgId ? ( + + ) : ( + + )} +
{org.name}{org.role} - {org.orgId === user.orgId ? ( - - ) : ( - - )} -
-
- - )} - + ); + })} + +
+
+
); } } diff --git a/public/app/features/profile/UserProfileEdit.tsx b/public/app/features/profile/UserProfileEdit.tsx index 135065856cd..94fa8210dfa 100644 --- a/public/app/features/profile/UserProfileEdit.tsx +++ b/public/app/features/profile/UserProfileEdit.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; -import { LoadingPlaceholder } from '@grafana/ui'; +import { LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; import { config } from '@grafana/runtime'; import { NavModel } from '@grafana/data'; import { UserProvider, UserAPI, LoadingStates } from 'app/core/utils/UserProvider'; @@ -34,16 +34,15 @@ export const UserProfileEdit: FC = ({ navModel }) => ( {states.loadUser ? ( ) : ( - - )} - - - {!states.loadUser && ( - <> + + + + + = ({ navModel }) => ( sessions={sessions} user={user!} /> - + )} ); diff --git a/public/app/features/profile/UserSessions.tsx b/public/app/features/profile/UserSessions.tsx index 4f7c95ec5c6..545a0dd5b46 100644 --- a/public/app/features/profile/UserSessions.tsx +++ b/public/app/features/profile/UserSessions.tsx @@ -23,7 +23,7 @@ export class UserSessions extends PureComponent { } return ( - <> +
{sessions.length > 0 && ( <>

Sessions

@@ -59,7 +59,7 @@ export class UserSessions extends PureComponent {
)} - +
); } } diff --git a/public/app/features/profile/UserTeams.tsx b/public/app/features/profile/UserTeams.tsx index 86ee8112101..c9e2ffc4a88 100644 --- a/public/app/features/profile/UserTeams.tsx +++ b/public/app/features/profile/UserTeams.tsx @@ -20,40 +20,40 @@ export class UserTeams extends PureComponent { return ; } + if (teams.length === 0) { + return null; + } + return ( - <> - {teams.length > 0 && ( - <> -

Teams

-
- - - - - - +
+

Teams

+
+
- NameEmailMembers
+ + + + + + + + + {teams.map((team: Team, index) => { + return ( + + + + + - - - {teams.map((team: Team, index) => { - return ( - - - - - - - ); - })} - -
+ NameEmailMembers
+ + {team.name}{team.email}{team.memberCount}
- - {team.name}{team.email}{team.memberCount}
-
- - )} - + ); + })} + + +
+ ); } } diff --git a/public/app/features/search/components/DashboardActions.tsx b/public/app/features/search/components/DashboardActions.tsx index 5360b3579e0..f7b2acc2c25 100644 --- a/public/app/features/search/components/DashboardActions.tsx +++ b/public/app/features/search/components/DashboardActions.tsx @@ -19,10 +19,12 @@ export const DashboardActions: FC = ({ folderId, isEditor, canEdit }) => }; return ( - - {canEdit && New Dashboard} - {!folderId && isEditor && New Folder} - {canEdit && Import} - +
+ + {canEdit && New Dashboard} + {!folderId && isEditor && New Folder} + {canEdit && Import} + +
); }; diff --git a/public/app/features/search/components/ManageDashboards.tsx b/public/app/features/search/components/ManageDashboards.tsx index 5fed03bd3e0..fd31b17d00d 100644 --- a/public/app/features/search/components/ManageDashboards.tsx +++ b/public/app/features/search/components/ManageDashboards.tsx @@ -1,6 +1,6 @@ import React, { FC, memo, useState } from 'react'; import { css } from '@emotion/css'; -import { HorizontalGroup, stylesFactory, useTheme, Spinner } from '@grafana/ui'; +import { stylesFactory, useTheme, Spinner } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { contextSrv } from 'app/core/services/context_srv'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; @@ -93,11 +93,11 @@ export const ManageDashboards: FC = memo(({ folder }) => { return (
-
- +
+
- - +
+
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx index 0be1dfd381e..ba823cd8683 100644 --- a/public/app/features/teams/TeamList.tsx +++ b/public/app/features/teams/TeamList.tsx @@ -101,8 +101,6 @@ export class TeamList extends PureComponent {
-
- New Team diff --git a/public/app/features/teams/TeamMembers.tsx b/public/app/features/teams/TeamMembers.tsx index af6b81cee90..35769505fdb 100644 --- a/public/app/features/teams/TeamMembers.tsx +++ b/public/app/features/teams/TeamMembers.tsx @@ -78,8 +78,6 @@ export class TeamMembers extends PureComponent {
- -
diff --git a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap index 119fe7cbc4b..6ed7bdab9d5 100644 --- a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap @@ -47,9 +47,6 @@ exports[`Render should render teams table 1`] = ` value="" />
-
-
-
-
-
); } diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap index 00318bd1a5f..575a2ef0e61 100644 --- a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap +++ b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap @@ -12,9 +12,6 @@ exports[`Render should render component 1`] = ` placeholder="Search user by login, email or name" value="" /> -
`; @@ -31,32 +28,29 @@ exports[`Render should render pending invites button 1`] = ` placeholder="Search user by login, email or name" value="" /> -
+
- -
-
+
@@ -74,15 +68,12 @@ exports[`Render should show external user management button 1`] = ` placeholder="Search user by login, email or name" value="" /> -
-
+
`; @@ -98,14 +89,11 @@ exports[`Render should show invite button 1`] = ` placeholder="Search user by login, email or name" value="" /> -
- - Invite -
+ + Invite +
`; diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index de3270b081b..046d42b00e3 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -29,7 +29,6 @@ // LAYOUTS @import 'layout/lists'; -@import 'layout/page'; // COMPONENTS @import '../app/features/dashboard/components/AddPanelWidget/AddPanelWidget'; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 9a8f3141ce3..190ad6d3012 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -374,7 +374,7 @@ $panel-editor-viz-item-shadow: 0 0 4px $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-border-hover: 1px solid $blue-light; -$panel-editor-viz-item-bg: $white; +$panel-editor-viz-item-bg: $card-background; $panel-editor-tabs-line-color: $dark-2; $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 13fec6a77ce..a9548d373c6 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -32,6 +32,15 @@ mark, background: $alert-warning-bg; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; +} + // Lists // -------------------------------------------------- diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 970492dd204..0b6e71ae827 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -1,6 +1,4 @@ .page-header { - padding: $space-xl 0 0 0; - .btn { float: right; margin-left: $space-md; @@ -11,12 +9,18 @@ top: 1px; } } + + margin-top: $space-md; + + @include media-breakpoint-up(md) { + margin-top: 0; + } } .page-header__inner { flex-grow: 1; display: flex; - margin-bottom: $space-xl; + padding: $space-lg 0; } .page-header__title { @@ -36,6 +40,7 @@ width: 50px; height: 50px; position: relative; + color: $text-color-weak; &.fa { top: 10px; @@ -51,7 +56,8 @@ } .page-header__logo { - margin: -1px $spacer; + margin: -1px $spacer -1px 0; + color: $text-color-weak; } .page-header__sub-title { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 3bafcffe0f9..db34d817366 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -23,7 +23,6 @@ $mobile-menu-breakpoint: md; @include media-breakpoint-up($mobile-menu-breakpoint) { background: $side-menu-bg; height: auto; - box-shadow: $side-menu-shadow; position: relative; z-index: $zindex-sidemenu; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss deleted file mode 100644 index 59eaafde65a..00000000000 --- a/public/sass/layout/_page.scss +++ /dev/null @@ -1,165 +0,0 @@ -.grafana-app { - display: flex; - align-items: stretch; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.main-view { - position: relative; - flex-grow: 1; - background: $page-bg; -} - -.page-alerting, -.page-explore, -.page-dashboard { - .main-view { - background: $dashboard-bg; - } -} - -.page-scrollbar-wrapper { - position: absolute; - top: 0; - bottom: 0; - width: 100%; -} - -.page-scrollbar-content { - display: flex; - min-height: 100%; - flex-direction: column; - width: 100%; - height: 100%; -} - -.page-container { - flex-grow: 1; - width: 100%; - flex-basis: 100%; - margin-left: auto; - margin-right: auto; - padding-left: $spacer * 2; - padding-right: $spacer * 2; - max-width: 980px; - @include clearfix(); -} - -.page-full { - margin-left: $page-sidebar-margin; - padding-left: $spacer; - padding-right: $spacer; - @include clearfix(); -} - -.scroll-canvas { - position: absolute; - width: 100%; - overflow: auto; - height: 100%; - -webkit-overflow-scrolling: touch; - display: flex; - flex-direction: column; - - &--dashboard { - height: calc(100% - 56px); - } - - > div { - flex-grow: 1; - } - - > .footer { - flex-shrink: 0; - } - - // Render in correct position even ng-view div is not rendered yet - > .footer:first-child { - flex-grow: 1; - display: flex; - - > * { - width: 100%; - align-self: flex-end; - } - } -} - -.page-body { - padding-top: $spacer * 2; - padding-bottom: $spacer * 4; -} - -.page-heading { - font-size: $font-size-h4; - margin-top: 0; - margin-bottom: $spacer; -} - -.page-action-bar { - margin-bottom: $spacer * 2; - display: flex; - align-items: flex-start; - - > a, - > button { - margin-left: $spacer; - } -} - -.page-action-bar--narrow { - margin-bottom: 0; -} - -.page-action-bar__spacer { - width: $spacer * 2; - flex-grow: 1; -} - -.sidebar-content { - width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin -} - -.sidebar-container { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } -} - -.page-sidebar { - @include media-breakpoint-up(md) { - width: $page-sidebar-width; - margin-left: $page-sidebar-margin; - } -} - -.page-sub-heading { - margin-bottom: $spacer; -} - -.page-sub-heading-icon { - margin-left: $spacer; - margin-top: $space-xs; -} - -.page-sidebar { - color: $text-color-weak; - h4 { - font-size: $font-size-base; - font-weight: $font-weight-semi-bold; - } - h5 { - font-size: $font-size-base; - font-weight: $font-weight-semi-bold; - } -} - -.page-sidebar-section { - margin-bottom: $spacer * 2; -} diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index 09ad5658248..eddc6b3eabc 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -1,3 +1,26 @@ +.sidebar-content { + width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin +} + +.sidebar-container { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } +} + +.page-sidebar { + @include media-breakpoint-up(md) { + width: $page-sidebar-width; + margin-left: $page-sidebar-margin; + } +} + +.page-sidebar-section { + margin-bottom: $spacer * 2; +} + .get-more-plugins-link { color: $gray-3; font-size: $font-size-sm;