Little fixes

celo-org · Nov 6, 2019 · 563cbd2 · 563cbd2
1 parent 5443289
commit 563cbd2
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 30 deletions.
diff --git a/packages/web/src/dev/Engage.tsx b/packages/web/src/dev/Engage.tsx
@@ -1,5 +1,6 @@
 import { I18nProps } from 'next-i18next'
 import * as React from 'react'
+import Fade from 'react-reveal/Fade'
 import { Image, ImageSourcePropType, StyleSheet, Text, View } from 'react-native'
 import { H2, H3, H4 } from 'src/fonts/Fonts'
 import { NameSpaces, withNamespaces } from 'src/i18n'
@@ -110,13 +111,15 @@ const Engage = React.memo(function _Engage({ t, screen }: I18nProps & ScreenProp
               screen === ScreenSizes.MOBILE && standardStyles.blockMarginMobile,
             ]}
           >
-            <AspectRatio ratio={248 / 286} style={styles.cakeContainer}>
-              <Image
-                source={require('src/dev/cakeProtector.png')}
-                style={styles.graphic}
-                resizeMode="contain"
-              />
-            </AspectRatio>
+            <Fade fraction={0.5} bottom={true} distance={'10px'}>
+              <AspectRatio ratio={248 / 286} style={styles.cakeContainer}>
+                <Image
+                  source={require('src/dev/cakeProtector.png')}
+                  style={styles.graphic}
+                  resizeMode="contain"
+                />
+              </AspectRatio>
+            </Fade>
             <H4 style={standardStyles.elementalMarginTop}>{t('engage.secure.title')}</H4>
             <Text style={[fonts.p, standardStyles.elementalMarginBottom]}>
               {t('engage.secure.copy')}
@@ -132,13 +135,17 @@ const Engage = React.memo(function _Engage({ t, screen }: I18nProps & ScreenProp
               screen === ScreenSizes.MOBILE && standardStyles.blockMarginMobile,
             ]}
           >
-            <AspectRatio ratio={248 / 286} style={styles.cakeContainer}>
-              <Image
-                source={require('src/dev/cakeProtector.png')}
-                style={styles.graphic}
-                resizeMode="contain"
-              />
-            </AspectRatio>
+            <Fade fraction={0.5} bottom={true} distance={'10px'}>
+              <AspectRatio ratio={248 / 286} style={styles.cakeContainer}>
+                <Image
+                  source={require('src/dev/cakeProtector.png')}
+                  style={styles.graphic}
+                  resizeMode="contain"
+                />
+              </AspectRatio>
+              ) }}
+            </Fade>
+
             <H4 style={standardStyles.elementalMarginTop}>{t('engage.improve.title')}</H4>
             <Text style={[fonts.p, standardStyles.elementalMarginBottom]}>
               {t('engage.improve.copy')}
@@ -169,13 +176,15 @@ const Content = React.memo(function _Content(props: ContentProps) {
       <H3 style={standardStyles.elementalMarginBottom}>{props.noun}</H3>
       <H4 style={standardStyles.elementalMarginBottom}>{props.verb}</H4>
       <Text style={fonts.h5}>{props.network}</Text>
-      <AspectRatio style={styles.graphicContainer} ratio={290 / 225}>
-        <Image
-          style={styles.graphic}
-          source={require('src/dev/cakeLayering.jpg')}
-          resizeMode="contain"
-        />
-      </AspectRatio>
+      <Fade fraction={0.5} bottom={true} distance={'10px'}>
+        <AspectRatio style={styles.graphicContainer} ratio={290 / 225}>
+          <Image
+            style={styles.graphic}
+            source={require('src/dev/cakeLayering.jpg')}
+            resizeMode="contain"
+          />
+        </AspectRatio>
+      </Fade>
       <Text style={[fonts.p]}>{props.caption}</Text>
       <View style={[standardStyles.row, standardStyles.elementalMarginTop, styles.buttons]}>
         <View style={styles.primaryButtonContainer}>
@@ -227,9 +236,11 @@ const Aside = React.memo(function _Aside({
       ]}
     >
       <View style={styles.asideFrame}>
-        <AspectRatio style={styles.asideGraphic} ratio={1}>
-          <Image source={image} style={styles.graphic} />
-        </AspectRatio>
+        <Fade fraction={0.5} bottom={true} distance={'10px'}>
+          <AspectRatio style={styles.asideGraphic} ratio={1}>
+            <Image source={image} style={styles.graphic} />
+          </AspectRatio>
+        </Fade>
       </View>
       <View style={[styles.asideContent, isMobile && styles.asideContentMobile]}>
         <Text style={fonts.h5}>{title}</Text>

diff --git a/packages/web/src/dev/FullStack.tsx b/packages/web/src/dev/FullStack.tsx
@@ -72,15 +72,15 @@ class FullStack extends React.PureComponent<I18nProps & ScreenProps, State> {
     }
   }, 24)
 
-  setL3 = () => {
+  setL1 = () => {
     this.setState({ selection: Levels.apps })
   }
 
   setL2 = () => {
     this.setState({ selection: Levels.contracts })
   }
 
-  setL1 = () => {
+  setL3 = () => {
     this.setState({ selection: Levels.blockchains })
   }
 
@@ -116,11 +116,11 @@ class FullStack extends React.PureComponent<I18nProps & ScreenProps, State> {
       if (clientRect.bottom - illoHeight - partial + GLASS_CEILING < 0) {
         this.setCode()
       } else if (shouldTurnOnLevelOne) {
-        this.setL1()
+        this.setL3()
       } else if (highestOffScreen) {
         this.setL2()
       } else {
-        this.setL3()
+        this.setL1()
       }
     })
   }

diff --git a/packages/web/src/dev/Racer.tsx b/packages/web/src/dev/Racer.tsx
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
   animatable: {
     animationDuration: '2s',
     animationDelay: '100ms',
-    animationIterationCount: '1',
+    animationIterationCount: 1,
     // animationTimingFunction: 'ease-in',
     animationFillMode: 'both',
   },

diff --git a/packages/web/src/dev/Transceive.tsx b/packages/web/src/dev/Transceive.tsx
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
   animate: {
     animationDuration: `${DURATION}ms`,
     animationFillMode: 'both',
-    animationIterationCount: '1',
+    animationIterationCount: 1,
     animationTimingFunction: 'linear',
   },
   solidify: {

diff --git a/packages/web/static/locales/en/dev.json b/packages/web/static/locales/en/dev.json
@@ -2,6 +2,7 @@
   "aboutTheChallenge": "About the Challenge",
   "aboutChallengeText":
     "We're looking for node operators and admins who can help develop the Celo menu. Spin up a validator or full node, build operational experience, and help the community prepare for opening night.",
+  "aboutTheChallengeButton": "Get Involved",
   "makeWithCelo": "Make With Celo",
   "makeWithCeloSubtitle": "Developer and validator resources to\nlaunch Celo in 2020",
   "greatStakeOff": "The Great Celo Stake Off",