fix(LoginPageLayout): no longer sets theme to is-paper (#1251)

BREAKING CHANGE: LoginPageLayout no longer sets theme to is-paper

Author: ethanashaw

src/components/LoginPageLayout/LoginPageLayout.test.tsx

@@ -1,8 +1,7 @@
-import React, { useLayoutEffect, useState } from "react";
+import React from "react";
 import { render, screen, within } from "@testing-library/react";
 
 import LoginPageLayout from "./LoginPageLayout";
-import userEvent from "@testing-library/user-event";
 
 it("should display the default logo", () => {
   render(<LoginPageLayout title="Login page" />);
@@ -33,54 +32,3 @@ it("should display the title", () => {
     screen.getByRole("heading", { name: "Login page" }),
   ).toBeInTheDocument();
 });
-
-it("should add and then remove is-paper class to body if initially is-paper wasn't present", async () => {
-  const NoInitialIsPaperComponent = () => {
-    const [displayLogin, setDisplayLogin] = useState(false);
-    return (
-      <div>
-        {displayLogin ? (
-          <>
-            <LoginPageLayout title="Login page" />
-            <button onClick={() => setDisplayLogin(false)}>Remove login</button>
-          </>
-        ) : (
-          <button onClick={() => setDisplayLogin(true)}>Display login</button>
-        )}
-      </div>
-    );
-  };
-  render(<NoInitialIsPaperComponent />);
-  expect(document.querySelector("body")).not.toHaveClass("is-paper");
-  await userEvent.click(screen.getByRole("button", { name: "Display login" }));
-  expect(document.querySelector("body")).toHaveClass("is-paper");
-  await userEvent.click(screen.getByRole("button", { name: "Remove login" }));
-  expect(document.querySelector("body")).not.toHaveClass("is-paper");
-});
-
-it("shouldn't remove is-paper class to body if initially is-paper was present", async () => {
-  const InitialIsPaperComponent = () => {
-    const [displayLogin, setDisplayLogin] = useState(false);
-    useLayoutEffect(() => {
-      document.querySelector("body")?.classList.add("is-paper");
-    }, []);
-    return (
-      <div>
-        {displayLogin ? (
-          <>
-            <LoginPageLayout title="Login page" />
-            <button onClick={() => setDisplayLogin(false)}>Remove login</button>
-          </>
-        ) : (
-          <button onClick={() => setDisplayLogin(true)}>Display login</button>
-        )}
-      </div>
-    );
-  };
-  render(<InitialIsPaperComponent />);
-  expect(document.querySelector("body")).toHaveClass("is-paper");
-  await userEvent.click(screen.getByRole("button", { name: "Display login" }));
-  expect(document.querySelector("body")).toHaveClass("is-paper");
-  await userEvent.click(screen.getByRole("button", { name: "Remove login" }));
-  expect(document.querySelector("body")).toHaveClass("is-paper");
-});

src/components/LoginPageLayout/LoginPageLayout.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useLayoutEffect } from "react";
+import React, { FC, ReactNode } from "react";
 import Card from "components/Card";
 import Col from "components/Col";
 import Navigation from "components/Navigation";
@@ -27,20 +27,6 @@ const LoginPageLayout: FC<Props> = ({
   title,
   logo = defaultLogo,
 }) => {
-  useLayoutEffect(() => {
-    const bodyInitiallyContainsIsPaper = document
-      .querySelector("body")
-      ?.classList.contains("is-paper");
-    if (!bodyInitiallyContainsIsPaper) {
-      document.querySelector("body")?.classList.add("is-paper");
-    }
-    return () => {
-      if (!bodyInitiallyContainsIsPaper) {
-        document.querySelector("body")?.classList.remove("is-paper");
-      }
-    };
-  }, []);
-
   return (
     <Row className="p-strip page-row">
       <Col emptyLarge={4} size={6}>