From db12818d2540497a1fb9d63686a61f94e6640afb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 1 Apr 2021 21:52:20 +0200
Subject: [PATCH] GettingStarted: Fixes backgrounds in welcome and getting
 started (#32613)

---
 public/app/plugins/panel/gettingstarted/GettingStarted.tsx   | 5 +----
 public/app/plugins/panel/welcome/Welcome.tsx                 | 5 +----
 .../getting_started_bg_dark.svg}                             | 0
 .../getting_started_bg_light.svg}                            | 0
 4 files changed, 2 insertions(+), 8 deletions(-)
 rename public/{app/plugins/panel/gettingstarted/img/Onboarding_Panel_dark.svg => img/getting_started_bg_dark.svg} (100%)
 rename public/{app/plugins/panel/gettingstarted/img/Onboarding_Panel_light.svg => img/getting_started_bg_light.svg} (100%)

diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
index f6d793f8e5c..fe81929c998 100644
--- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
+++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx
@@ -8,8 +8,6 @@ import { contextSrv } from 'app/core/core';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 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 { Card, SetupStep } from './types';
 
@@ -121,13 +119,12 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
 
 const getStyles = stylesFactory(() => {
   const { theme } = config;
-  const backgroundImage = theme.isDark ? imageDark : imageLight;
   return {
     container: css`
       display: flex;
       flex-direction: column;
       height: 100%;
-      background: url(${backgroundImage}) no-repeat;
+      background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat;
       background-size: cover;
       padding: ${theme.spacing.xl} ${theme.spacing.md} 0;
     `,
diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx
index 1a9571f334c..2afcb26822c 100644
--- a/public/app/plugins/panel/welcome/Welcome.tsx
+++ b/public/app/plugins/panel/welcome/Welcome.tsx
@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '@grafana/ui';
-import lightBackground from './img/background_light.svg';
 
 const helpOptions = [
   { 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 backgroundImage = theme.isDark ? 'public/img/login_background_dark.svg' : lightBackground;
-
   return {
     container: css`
       display: flex;
-      background: url(${backgroundImage}) no-repeat;
+      background: url(public/img/login_background_${theme.type}.svg) no-repeat;
       background-size: cover;
       height: 100%;
       align-items: center;
diff --git a/public/app/plugins/panel/gettingstarted/img/Onboarding_Panel_dark.svg b/public/img/getting_started_bg_dark.svg
similarity index 100%
rename from public/app/plugins/panel/gettingstarted/img/Onboarding_Panel_dark.svg
rename to public/img/getting_started_bg_dark.svg
diff --git a/public/app/plugins/panel/gettingstarted/img/Onboarding_Panel_light.svg b/public/img/getting_started_bg_light.svg
similarity index 100%
rename from public/app/plugins/panel/gettingstarted/img/Onboarding_Panel_light.svg
rename to public/img/getting_started_bg_light.svg