Fix home and auth backgrounds (#21953)

frontend/src/metabase/auth/components/Auth/Auth.tsx

-import React, { Fragment, ReactNode } from "react";
-
-export interface AuthProps {
-  children?: ReactNode;
-}
-
-const Auth = ({ children }: AuthProps): JSX.Element => {
-  return <Fragment>{children}</Fragment>;
-};
-
-export default Auth;

frontend/src/metabase/auth/components/Auth/Auth.unit.spec.tsx

-import React from "react";
-import { render, screen } from "@testing-library/react";
-import Auth from "./Auth";
-
-describe("Auth", () => {
-  it("should render content", () => {
-    render(<Auth>Content</Auth>);
-
-    expect(screen.getByText("Content")).toBeInTheDocument();
-  });
-});

frontend/src/metabase/auth/components/Auth/index.ts

-export { default } from "./Auth";

frontend/src/metabase/auth/components/AuthLayout/AuthLayout.styled.tsx

 import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
 
-export const LayoutRoot = styled.div`
-  position: relative;
+export interface LayoutProps {
+  showScene?: boolean;
+}
+
+const sceneStyles = css`
+  background-color: ${color("bg-light")};
+  background-image: url("app/img/bridge.svg");
+  background-size: max(2592px, 100%) auto;
+  background-repeat: no-repeat;
+  background-position: right bottom;
+`;
+
+export const LayoutRoot = styled.div<LayoutProps>`
   min-height: 100vh;
+  background-color: ${color("bg-light")};
+  ${props => props.showScene && sceneStyles};
 `;
 
 export const LayoutBody = styled.div`
@@ -24,34 +38,3 @@ export const LayoutCard = styled.div`
   box-shadow: 0 1px 15px ${color("shadow")};
   border-radius: 6px;
 `;
-
-export const LayoutScene = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-`;
-
-export const LayoutSceneImage = styled.img`
-  position: relative;
-  left: -1240px;
-  bottom: -3px;
-
-  @media screen and (min-width: 800px) {
-    left: -1040px;
-  }
-
-  @media screen and (min-width: 1200px) {
-    left: -840px;
-  }
-
-  @media screen and (min-width: 1600px) {
-    left: -640px;
-  }
-
-  @media screen and (min-width: 1920px) {
-    left: 0;
-    width: 100%;
-  }
-`;

frontend/src/metabase/auth/components/AuthLayout/AuthLayout.tsx

 import React, { ReactNode } from "react";
 import LogoIcon from "metabase/components/LogoIcon";
-import {
-  LayoutBody,
-  LayoutCard,
-  LayoutRoot,
-  LayoutScene,
-  LayoutSceneImage,
-} from "./AuthLayout.styled";
+import { LayoutBody, LayoutCard, LayoutRoot } from "./AuthLayout.styled";
 
 export interface AuthLayoutProps {
   showScene: boolean;
@@ -15,15 +9,7 @@ export interface AuthLayoutProps {
 
 const AuthLayout = ({ showScene, children }: AuthLayoutProps): JSX.Element => {
   return (
-    <LayoutRoot>
-      {showScene && (
-        <LayoutScene>
-          <LayoutSceneImage
-            src="app/img/bridge.png"
-            srcSet="app/img/bridge.png 1x, app/img/bridge@2x.png 2x, app/img/bridge@3x.png 3x"
-          />
-        </LayoutScene>
-      )}
+    <LayoutRoot showScene={showScene}>
       <LayoutBody>
         <LogoIcon height={65} />
         <LayoutCard>{children}</LayoutCard>

frontend/src/metabase/auth/components/AuthLayout/AuthLayout.unit.spec.tsx

-import React from "react";
-import AuthLayout from "./AuthLayout";
-import { render, screen } from "@testing-library/react";
-
-describe("AuthLayout", () => {
-  it("should render the auth scene if enabled", () => {
-    render(<AuthLayout showScene={true} />);
-
-    expect(screen.getByRole("img")).toBeInTheDocument();
-  });
-
-  it("should no render the auth scene if not enabled", () => {
-    render(<AuthLayout showScene={false} />);
-
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
-  });
-});

frontend/src/metabase/auth/containers/AuthApp/AuthApp.tsx

-import { withLogoBackground } from "metabase/hoc/Background";
-import Auth from "../../components/Auth";
-
-export default withLogoBackground(Auth);

frontend/src/metabase/auth/containers/AuthApp/index.ts

-export { default } from "./AuthApp";

frontend/src/metabase/hoc/Background.jsx

@@ -18,31 +18,3 @@ export const withBackground = className => ComposedComponent => {
     }
   };
 };
-
-import { connect } from "react-redux";
-import { PLUGIN_SELECTORS } from "metabase/plugins";
-
-export const withLogoBackground = ComposedComponent => {
-  const mapStateToProps = (state, props) => ({
-    bgClassName: PLUGIN_SELECTORS.getLogoBackgroundClass(state, props),
-  });
-  return connect(mapStateToProps)(
-    class extends Component {
-      static displayName = "BackgroundApplicator";
-
-      UNSAFE_componentWillMount() {
-        document.body.classList.add(this.props.bgClassName);
-      }
-
-      componentWillUnmount() {
-        document.body.classList.remove(this.props.bgClassName);
-      }
-
-      render() {
-        // eslint-disable-next-line no-unused-vars
-        const { bgClassName, ...props } = this.props;
-        return <ComposedComponent {...props} />;
-      }
-    },
-  );
-};

frontend/src/metabase/home/homepage/components/HomeLayout/HomeLayout.styled.tsx

@@ -14,23 +14,16 @@ export interface LayoutProps {
 const sceneStyles = css`
   background-color: ${color("bg-light")};
   background-image: url("app/img/bridge.svg");
-  background-size: max(1728px, 100%) auto;
+  background-size: max(min(1728px, 260vh), 100%) auto;
   background-repeat: no-repeat;
   background-position: bottom;
 `;
 
-const gradientStyles = css`
-  background: linear-gradient(
-    to bottom,
-    ${color("white")},
-    ${alpha("brand", 0.2)}
-  );
-`;
-
 export const LayoutRoot = styled.div<LayoutProps>`
   min-height: 100%;
   padding: 1rem;
-  ${props => (props.showScene ? sceneStyles : gradientStyles)};
+  background-color: ${color("bg-light")};
+  ${props => props.showScene && sceneStyles};
 
   ${breakpointMinMedium} {
     padding: 3rem 4rem;

frontend/src/metabase/routes.jsx

@@ -16,7 +16,6 @@ import App from "metabase/App.tsx";
 import ActivityApp from "metabase/home/containers/ActivityApp";
 
 // auth containers
-import AuthApp from "metabase/auth/containers/AuthApp";
 import ForgotPasswordApp from "metabase/auth/containers/ForgotPasswordApp";
 import LoginApp from "metabase/auth/containers/LoginApp";
 import LogoutApp from "metabase/auth/containers/LogoutApp";
@@ -184,7 +183,7 @@ export const getRoutes = store => (
       }}
     >
       {/* AUTH */}
-      <Route path="/auth" component={AuthApp}>
+      <Route path="/auth">
         <IndexRedirect to="/auth/login" />
         <Route component={IsNotAuthenticated}>
           <Route path="login" title={t`Login`} component={LoginApp} />