packages/ui: remove layout params from Background

apps/web: remove Background component usage from pages

apps/web/app/ius/[slug]/conditions/page.tsx

@@ -5,7 +5,6 @@ import type { PageProps } from '@/types/page';
 import { withError } from '@/utils/error';
 import { getPageUrlParams, makeCreateUrl } from '@/utils/url';
 import type { Metadata } from 'next';
-import { Background } from 'ui';
 
 export async function generateMetadata(pageProps: PageProps): Promise<Metadata> {
   const pageUrlParams = getPageUrlParams(pageProps);
@@ -30,11 +29,7 @@ export default async function Page(pageProps: PageProps) {
       const createUrl = makeCreateUrl(pageUrlParams);
       const conditions = await apiIUS.getConditions({ createUrl });
 
-      return (
-        <Background className="justify-center">
-          <Conditions html={conditions} />
-        </Background>
-      );
+      return <Conditions html={conditions} />;
     },
   });
 }

apps/web/app/ius/[slug]/page.tsx

@@ -4,7 +4,6 @@ import type { PageProps } from '@/types/page';
 import { withError } from '@/utils/error';
 import { getPageUrlParams, makeCreateUrl } from '@/utils/url';
 import type { Metadata } from 'next';
-import { Background } from 'ui';
 
 export async function generateMetadata(pageProps: PageProps): Promise<Metadata> {
   const pageUrlParams = getPageUrlParams(pageProps);
@@ -35,11 +34,7 @@ export default async function Page(pageProps: PageProps) {
       ]).then(([data, metaData, { title }]) => {
         const props = { data, metaData, pageUrlParams, title };
 
-        return (
-          <Background>
-            <Form {...props} />
-          </Background>
-        );
+        return <Form {...props} />;
       });
     },
   });

apps/web/components/Conditions.tsx

@@ -1,10 +1,15 @@
-/* eslint-disable react/no-danger */
+/* eslint-disable react/forbid-component-props */
+import { Background } from 'ui';
+
 type Props = {
   readonly html: string;
 };
 
 export function Conditions({ html }: Props) {
   return (
-    <div dangerouslySetInnerHTML={{ __html: html }} className="justify-center font-[calibri]" />
+    <Background
+      dangerouslySetInnerHTML={{ __html: html }}
+      className="lg:w-standard grid w-full justify-center p-5 font-[calibri]"
+    />
   );
 }

apps/web/components/Form/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/forbid-component-props */
 'use client';
 import { Buttons } from './Buttons';
 import { FormContextProvider } from './context/form-context';
@@ -5,19 +6,21 @@ import { Elements } from './Elements';
 import { Header } from './Header';
 import type { Props } from './types';
 import { makeCreateUrl } from '@/utils/url';
-import { Divider } from 'ui';
+import { Background, Divider } from 'ui';
 
 export function Form(props: Props) {
   const { pageUrlParams, title } = props;
   const createUrl = makeCreateUrl(pageUrlParams);
 
   return (
-    <FormContextProvider pageUrlParams={pageUrlParams} createUrl={createUrl}>
-      <Header title={title} link={'/ius' + createUrl('/conditions')} />
-      <Elements {...props} />
-      <Divider />
-      <Buttons />
-    </FormContextProvider>
+    <Background className="lg:w-standard grid w-full gap-2 p-5">
+      <FormContextProvider pageUrlParams={pageUrlParams} createUrl={createUrl}>
+        <Header title={title} link={'/ius' + createUrl('/conditions')} />
+        <Elements {...props} />
+        <Divider />
+        <Buttons />
+      </FormContextProvider>
+    </Background>
   );
 }
 

packages/ui/background.tsx

@@ -3,9 +3,7 @@ import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 import { forwardRef, type HTMLAttributes } from 'react';
 
-const variants = cva(
-  'grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 lg:w-standard'
-);
+const variants = cva('rounded-sm border border-slate-100 bg-white');
 
 export type BackgroundProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof variants>;