fix onboarding game height, fix matrix animation

MetaFam · Nov 30, 2023 · 7fac319 · 7fac319
1 parent ac21353
commit 7fac319
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/packages/web/components/Landing/Onboard.tsx b/packages/web/components/Landing/Onboard.tsx
@@ -32,7 +32,7 @@ export const Onboard: React.FC = () => {
           <OnboardingGame />
         </GameContextProvider>
       </Container>
-      <Rain top={-12} effectOpacity={0.3} />
+      <Rain top={2} effectOpacity={0.3} />
     </FullPageContainer>
   );
 };
diff --git a/packages/web/components/Landing/OnboardingGame/Rain.tsx b/packages/web/components/Landing/OnboardingGame/Rain.tsx
@@ -84,6 +84,7 @@ export function Rain({
         right={0}
         bottom={0}
         width="100%"
+        minHeight="100vh"
         height="100%"
         zIndex={z ?? 0}
         opacity={effectOpacity ?? 0.5}

diff --git a/packages/web/components/Landing/OnboardingGame/index.tsx b/packages/web/components/Landing/OnboardingGame/index.tsx
@@ -423,7 +423,8 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
       position="relative"
       display="flex"
       flexDirection="column"
-      height="100vh"
+      minHeight="50vh"
+      height="100%"
       width="100%"
       fontFamily="onboarding"
       justifyContent={isLoading ? 'center' : 'flex-start'}
@@ -466,10 +467,10 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
               className="step"
               display="flex"
               flexDirection="column"
-              justifyContent="space-between"
+              justifyContent="flex-start"
               alignItems="flex-start"
               flexGrow={1}
-              height="full"
+              height="100%"
               opacity={onScreen ? 1 : noMotion ? 1 : 0}
               transition="opacity 0.5s 0.2s ease-in"
               sx={{
@@ -520,7 +521,7 @@ export const OnboardingGame: React.FC = (): JSX.Element => {
                   p: {
                     display: 'block',
                     fontSize: { base: 'sm', md: 'sm', '2xl': 'lg' },
-                    marginBottom: { base: 2, '2xl': 5 },
+                    marginBottom: { base: 3, '2xl': 6 },
                   },
                   blockquote: {
                     position: 'relative',