mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GettingStarted: Fixes backgrounds in welcome and getting started (#32613)
This commit is contained in:
@@ -8,8 +8,6 @@ import { contextSrv } from 'app/core/core';
|
|||||||
import { backendSrv } from 'app/core/services/backend_srv';
|
import { backendSrv } from 'app/core/services/backend_srv';
|
||||||
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
|
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
|
||||||
import { Step } from './components/Step';
|
import { Step } from './components/Step';
|
||||||
import imageDark from './img/Onboarding_Panel_dark.svg';
|
|
||||||
import imageLight from './img/Onboarding_Panel_light.svg';
|
|
||||||
import { getSteps } from './steps';
|
import { getSteps } from './steps';
|
||||||
import { Card, SetupStep } from './types';
|
import { Card, SetupStep } from './types';
|
||||||
|
|
||||||
@@ -121,13 +119,12 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
|||||||
|
|
||||||
const getStyles = stylesFactory(() => {
|
const getStyles = stylesFactory(() => {
|
||||||
const { theme } = config;
|
const { theme } = config;
|
||||||
const backgroundImage = theme.isDark ? imageDark : imageLight;
|
|
||||||
return {
|
return {
|
||||||
container: css`
|
container: css`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url(${backgroundImage}) no-repeat;
|
background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding: ${theme.spacing.xl} ${theme.spacing.md} 0;
|
padding: ${theme.spacing.xl} ${theme.spacing.md} 0;
|
||||||
`,
|
`,
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import React, { FC } from 'react';
|
|||||||
import { css } from '@emotion/css';
|
import { css } from '@emotion/css';
|
||||||
import { GrafanaTheme } from '@grafana/data';
|
import { GrafanaTheme } from '@grafana/data';
|
||||||
import { stylesFactory, useTheme } from '@grafana/ui';
|
import { stylesFactory, useTheme } from '@grafana/ui';
|
||||||
import lightBackground from './img/background_light.svg';
|
|
||||||
|
|
||||||
const helpOptions = [
|
const helpOptions = [
|
||||||
{ value: 0, label: 'Documentation', href: 'https://grafana.com/docs/grafana/latest' },
|
{ value: 0, label: 'Documentation', href: 'https://grafana.com/docs/grafana/latest' },
|
||||||
@@ -38,12 +37,10 @@ export const WelcomeBanner: FC = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||||
const backgroundImage = theme.isDark ? 'public/img/login_background_dark.svg' : lightBackground;
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
container: css`
|
container: css`
|
||||||
display: flex;
|
display: flex;
|
||||||
background: url(${backgroundImage}) no-repeat;
|
background: url(public/img/login_background_${theme.type}.svg) no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user