standardize and fix branding on new resources auth pages

src/components/BrandedAuthSurface.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+
+type BrandedAuthSurfaceProps = {
+    primaryColor?: string | null;
+    children: React.ReactNode;
+};
+
+export default function BrandedAuthSurface({
+    primaryColor,
+    children
+}: BrandedAuthSurfaceProps) {
+    const { isUnlocked } = useLicenseStatusContext();
+
+    return (
+        <div
+            style={{
+                // @ts-expect-error CSS variable
+                "--primary": isUnlocked() ? primaryColor : null
+            }}
+        >
+            {children}
+        </div>
+    );
+}