Removed the background gradients from the app

2023-12-01 12:07:55 +00:00
parent 8c60ea3c64
commit 00746aed7e
8 changed files with 8 additions and 58 deletions
@@ -1,12 +0,0 @@
-import gradientBackground from "~/assets/images/gradient-background.png";
-
-export function PageGradient({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className="-mt-4 h-full w-full bg-cover bg-no-repeat pt-20"
-      style={{ backgroundImage: `url("${gradientBackground}")` }}
-    >
-      {children}
-    </div>
-  );
-}
@@ -1,42 +1,8 @@
 import { cn } from "~/utils/cn";
-import gradientPath from "./app-container-gradient.svg";

 /** This container is used to surround the entire app, it correctly places the nav bar */
-export function AppContainer({
-  children,
-  showBackgroundGradient,
-}: {
-  children: React.ReactNode;
-  showBackgroundGradient?: boolean;
-}) {
-  return (
-    <BackgroundGradient showBackgroundGradient={showBackgroundGradient}>
-      <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>
-    </BackgroundGradient>
-  );
-}
-
-export function BackgroundGradient({
-  children,
-  showBackgroundGradient,
-}: {
-  children: React.ReactNode;
-  showBackgroundGradient?: boolean;
-}) {
-  return (
-    <div
-      className={cn("h-full w-full bg-contain bg-right-top bg-no-repeat")}
-      style={
-        showBackgroundGradient
-          ? {
-              backgroundImage: `url(${gradientPath})`,
-            }
-          : undefined
-      }
-    >
-      {children}
-    </div>
-  );
+export function AppContainer({ children }: { children: React.ReactNode }) {
+  return <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>;
 }

 /** This container should be placed around the content on a page */
@@ -71,7 +71,7 @@ export function ErrorBoundary() {
          <Links />
        </head>
        <body className="h-full overflow-hidden bg-darkBackground">
-          <AppContainer showBackgroundGradient={true}>
+          <AppContainer>
            <MainCenteredContainer>
              <RouteErrorDisplay />
            </MainCenteredContainer>
@@ -3,7 +3,6 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson } from "remix-typedjson";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
-import { useIsOrgChildPage } from "~/hooks/useIsOrgChildPage";
 import { clearRedirectTo, commitSession } from "~/services/redirectTo.server";
 import { requireUser } from "~/services/session.server";
 import { confirmBasicDetailsPath } from "~/utils/pathBuilder";
@@ -22,11 +21,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 };

 export default function App() {
-  const isOrgChildPage = useIsOrgChildPage();
-  const showBackgroundGradient = !isOrgChildPage;
-
  return (
-    <AppContainer showBackgroundGradient={showBackgroundGradient}>
+    <AppContainer>
      <Outlet />
    </AppContainer>
  );
@@ -35,7 +31,7 @@ export default function App() {
 export function ErrorBoundary() {
  return (
    <>
-      <AppContainer showBackgroundGradient={true}>
+      <AppContainer>
        <MainCenteredContainer>
          <RouteErrorDisplay />
        </MainCenteredContainer>
@@ -123,7 +123,7 @@ export default function Page() {
  });

  return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
      <MainCenteredContainer>
        <FormTitle LeadingIcon="user" title="Profile" />
        <Form method="post" {...form.props} className="max-w-md">
@@ -137,7 +137,7 @@ export default function Page() {
  const shouldShowConfirm = user.email !== enteredEmail || user.email === "";

  return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
      <MainCenteredContainer className="max-w-[22rem]">
        <Form method="post" {...form.props}>
          <FormTitle
@@ -97,7 +97,7 @@ export default function Page() {
  });

  return (
-    <AppContainer showBackgroundGradient={true}>
+    <AppContainer>
      <MainCenteredContainer>
        <div>
          <FormTitle