Login: Refactoring how login background is rendered (#21446)

* Login: Refactoring how login background is rendered

* Tweak

public/app/core/components/Branding/Branding.tsx

 import React, { FC } from 'react';
+import { css, cx } from 'emotion';
 
 export interface BrandComponentProps {
   className?: string;
+  children?: JSX.Element | JSX.Element[];
 }
 
 export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
@@ -13,11 +15,21 @@ export const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
   );
 };
 
+export const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
+  const background = css`
+    background: url(public/img/heatmap_bg_test.svg);
+    background-size: cover;
+  `;
+
+  return <div className={cx(background, className)}>{children}</div>;
+};
+
 export const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
   return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
 };
 
 export class Branding {
   static LoginLogo = LoginLogo;
+  static LoginBackground = LoginBackground;
   static MenuLogo = MenuLogo;
 }

public/app/core/components/Login/LoginPage.tsx

+// Libraries
 import React, { FC } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+// Components
 import { UserSignup } from './UserSignup';
 import { LoginServiceButtons } from './LoginServiceButtons';
 import LoginCtrl from './LoginCtrl';
 import { LoginForm } from './LoginForm';
 import { ChangePassword } from './ChangePassword';
-import { CSSTransition } from 'react-transition-group';
 import { Branding } from 'app/core/components/Branding/Branding';
 
 export const LoginPage: FC = () => {
   return (
-    <div className="login container">
+    <Branding.LoginBackground className="login container">
       <div className="login-content">
         <div className="login-branding">
           <Branding.LoginLogo className="logo-icon" />
@@ -59,6 +62,6 @@ export const LoginPage: FC = () => {
 
         <div className="clearfix" />
       </div>
-    </div>
+    </Branding.LoginBackground>
   );
 };

public/sass/pages/_login.scss

@@ -10,8 +10,6 @@ $login-border: #8daac5;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-image: url(../img/heatmap_bg_test.svg);
-  background-size: cover;
   color: #d8d9da;
 
   & a {