Add new page wrapper

src/components/PageWrappers/PageWrapperGradient.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+import './layoutGradient.css'
+
+type PageWrapperShadowProps = {
+  children: ReactNode
+}
+
+const PageWrapperGradient = ({ children }: PageWrapperShadowProps) => {
+  return <div className="layout">{children}</div>
+}
+
+export default PageWrapperGradient

src/components/PageWrappers/layoutGradient.css

@@ -0,0 +1,19 @@
+.layout {
+  background-color: #fff;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.layout::after {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
+}

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -1,15 +1,15 @@
 import { YStack } from 'tamagui'
-import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import { Shadow, Text } from '@status-im/components'
 import FormStepper from './Stepper'
 import Titles from '../../components/General/Titles'
+import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
 
 function ValidatorOnboarding() {
   return (
     <>
-      <PageWrapperShadow>
+      <PageWrapperGradient>
         <YStack>
-          <YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
+          <YStack style={{ width: '100%' }}>
             <Text size={19} weight={'semibold'}>
               Create Nimbus Validator
             </Text>
@@ -36,7 +36,7 @@ function ValidatorOnboarding() {
             </YStack>
           </Shadow>
         </YStack>
-      </PageWrapperShadow>
+      </PageWrapperGradient>
     </>
   )
 }