feat: use box component for create team form

apps/trading/client-pages/competitions/competitions-create-team.tsx

@@ -26,6 +26,7 @@ import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
 import { RainbowButton } from '../../components/rainbow-button';
 import { usePageTitle } from '../../lib/hooks/use-page-title';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { Box } from '../../components/competitions/box';
 
 interface FormFields {
   name: string;
@@ -54,24 +55,26 @@ export const CompetitionsCreateTeam = () => {
           <div className="absolute top-o left-0 w-full h-full bg-gradient-to-t from-white dark:from-vega-cdark-900 to-transparent from-20% to-60%" />
         </div>
         <div className="lg:gap-6 container p-4 mx-auto">
-          <div className=" flex flex-col gap-4 bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto md:w-2/3 max-w-xl rounded-lg p-8">
-            <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
-              {t('Create a team')}
-            </h1>
-            {pubKey && !isReadOnly ? (
-              <CreateTeamFormContainer />
-            ) : (
-              <>
-                <p>
-                  {t(
-                    'Create a team to participate in team based rewards as well as access the discount benefits of the current referral program.'
-                  )}
-                </p>
-                <RainbowButton variant="border" onClick={openWalletDialog}>
-                  {t('Connect wallet')}
-                </RainbowButton>
-              </>
-            )}
+          <div className="mx-auto md:w-2/3 max-w-xl">
+            <Box className="flex flex-col gap-4">
+              <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
+                {t('Create a team')}
+              </h1>
+              {pubKey && !isReadOnly ? (
+                <CreateTeamFormContainer />
+              ) : (
+                <>
+                  <p>
+                    {t(
+                      'Create a team to participate in team based rewards as well as access the discount benefits of the current referral program.'
+                    )}
+                  </p>
+                  <RainbowButton variant="border" onClick={openWalletDialog}>
+                    {t('Connect wallet')}
+                  </RainbowButton>
+                </>
+              )}
+            </Box>
           </div>
         </div>
       </div>

apps/trading/components/competitions/box.tsx

@@ -13,7 +13,7 @@ export const Box = (props: HTMLAttributes<HTMLDivElement>) => {
         BORDER_COLOR,
         GRADIENT,
         'border rounded-lg',
-        'p-6 flex flex-col items-center gap-6 text-center',
+        'p-6',
         props.className
       )}
     />

apps/trading/components/competitions/competitions-cta.tsx

@@ -28,7 +28,7 @@ export const CompetitionsAction = ({
   children?: ReactNode;
 }) => {
   return (
-    <Box>
+    <Box className="flex flex-col items-center gap-6 text-center">
       <DudeBadge variant={variant} />
       <h2 className="text-2xl">{title}</h2>
       {description && <p className="text-muted">{description}</p>}