Wip

packages/web/pages/brand/index.tsx

@@ -1,3 +1,3 @@
-import Intro from 'src/brandkit/Index'
+import Intro from 'src/brandkit/Intro'
 
 export default Intro

packages/web/src/brandkit/Color.tsx

@@ -5,7 +5,11 @@ import { colors } from 'src/styles'
 
 export default withNamespaces()(
   React.memo(function Color() {
-    return <View style={styles.container}>{}</View>
+    return (
+      <View style={styles.container}>
+        <Text>COLOR</Text>
+      </View>
+    )
   })
 )
 

packages/web/src/brandkit/Intro.tsx

@@ -0,0 +1,20 @@
+import { Text, View, StyleSheet } from 'react-native'
+import { withNamespaces, Namespace } from 'react-i18next'
+import * as React from 'react'
+import { colors } from 'src/styles'
+import { H1 } from 'src/fonts/Fonts'
+import Fade from 'react-reveal/Fade'
+
+export default withNamespaces()(
+  React.memo(function Intro() {
+    return (
+      <View style={styles.container}>
+        <H1>Welcome To Celo Brand Kit</H1>
+      </View>
+    )
+  })
+)
+
+const styles = StyleSheet.create({
+  container: { height: '100%' },
+})

packages/web/src/brandkit/Page.tsx

@@ -6,7 +6,7 @@ import { Cell, GridRow, Spans } from 'src/layout/GridRow'
 import Topbar from 'src/brandkit/TopBar'
 import { SingletonRouter, withRouter } from 'next/router'
 import { withScreenSize, ScreenProps, ScreenSizes } from 'src/layout/ScreenSize'
-import { colors } from 'src/styles'
+import { colors, standardStyles } from 'src/styles'
 
 import MobileMenu from 'src/brandkit/MobileMenu'
 import { HEADER_HEIGHT } from 'src/shared/Styles'
@@ -80,21 +80,17 @@ class Page extends React.Component<Props & ScreenProps, State> {
     const isMobile = screen === ScreenSizes.MOBILE
     return (
       <View style={styles.conatiner}>
-        <View
-          style={{
-            position: 'fixed',
-            width: '100%',
-            borderBottomColor: colors.gray,
-            zIndex: 10,
-          }}
-        >
+        <View style={styles.topbar}>
           <Topbar />
         </View>
         <View style={{ marginTop: 70 }} />
         {isMobile && (
           <MobileMenu pages={PAGES} pathname={router.pathname} routeHash={this.state.routeHash} />
         )}
-        <GridRow mobileStyle={styles.mobileMain}>
+        <GridRow
+          mobileStyle={styles.mobileMain}
+          desktopStyle={[styles.desktopMain, standardStyles.sectionMarginTop]}
+        >
           <Cell span={Spans.fourth}>
             {!isMobile && (
               <Sidebar
@@ -123,8 +119,15 @@ const styles = StyleSheet.create({
   // @ts-ignore creates a stacking context
   conatiner: { isolation: 'isolate' },
   mobileMain: { zIndex: -5 },
+  desktopMain: {},
+  topbar: {
+    position: 'fixed',
+    width: '100%',
+    borderBottomColor: colors.gray,
+    zIndex: 10,
+  },
   footer: { zIndex: -10 },
-  childrenArea: { minHeight: `calc(100vh - ${HEADER_HEIGHT + 100}px)` },
+  childrenArea: { minHeight: `calc(100vh - ${HEADER_HEIGHT + 70}px)` },
 })
 
 export default withScreenSize(withRouter(Page))

packages/web/src/brandkit/TopBar.tsx

@@ -9,10 +9,12 @@ import { colors, fonts, standardStyles } from 'src/styles'
 export default withNamespaces(NameSpaces.common)(function TopBar({ t }: I18nProps) {
   return (
     <View style={[standardStyles.row, styles.container]}>
-      <TouchableOpacity style={standardStyles.row}>
-        <LogoLightBg height={30} />
-        <Text style={[fonts.h3, styles.title]}>Brand Kit</Text>
-      </TouchableOpacity>
+      <a href="/brand">
+        <TouchableOpacity style={standardStyles.row}>
+          <LogoLightBg height={30} />
+          <Text style={[fonts.h3, styles.title]}>Brand Kit</Text>
+        </TouchableOpacity>
+      </a>
       <Button
         kind={BTN.NAV}
         href={CeloLinks.gitHub}