Adds a background to the choose plan page

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx

@@ -1,6 +1,7 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
-import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
+import { AppContainer } from "~/components/layout/AppLayout";
 import { Header1 } from "~/components/primitives/Headers";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
@@ -48,16 +49,22 @@ export default function ChoosePlanPage() {
     useTypedLoaderData<typeof loader>();
 
   return (
-    <MainCenteredContainer className="flex max-w-[80rem] flex-col items-center gap-8 p-3">
-      <Header1 className="text-center">Subscribe for full access</Header1>
-      <PricingPlans
-        plans={plans}
-        subscription={v3Subscription}
-        organizationSlug={organizationSlug}
-        hasPromotedPlan
-        showGithubVerificationBadge
-        periodEnd={periodEnd}
-      />
-    </MainCenteredContainer>
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-8 p-3">
+          <Header1 className="text-center">Subscribe for full access</Header1>
+          <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+            <PricingPlans
+              plans={plans}
+              subscription={v3Subscription}
+              organizationSlug={organizationSlug}
+              hasPromotedPlan
+              showGithubVerificationBadge
+              periodEnd={periodEnd}
+            />
+          </div>
+        </div>
+      </BackgroundWrapper>
+    </AppContainer>
   );
 }