setup dashbaord ui components. setup google maps address lookup

client/package.json

@@ -30,6 +30,7 @@
     "react-apollo": "^2.5.6",
     "react-apollo-hooks": "^0.4.5",
     "react-dom": "16.8.6",
+    "react-load-script": "^0.0.6",
     "react-native": "0.59.5",
     "react-native-web": "^0.11.4",
     "react-router-dom": "^5.0.0",

client/src/components/Box/Box.tsx

@@ -8,14 +8,12 @@ export enum Variants {
 
 interface BoxProps {
   width?: string
-  height?: number
   variant?: Variants
 }
 
 const Box = styled(View)<BoxProps>`
   flex: 1;
   width: ${props => props.width || '100%'};
-  height: ${props => props.height || 240}px;
   ${props => {
     switch (props.variant) {
       case Variants.login:

client/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ export enum Variants {
   primary = 'primary',
 }
 
-const Wrapper = styled(TouchableOpacity)<{ variant?: Variants }>`
+const Wrapper = styled(TouchableOpacity)<{ variant?: Variants; disabled?: boolean }>`
   background: ${props => {
     switch (props.variant) {
       case Variants.primary:
@@ -19,6 +19,7 @@ const Wrapper = styled(TouchableOpacity)<{ variant?: Variants }>`
   text-align: center;
   box-shadow: 0 20px 30px 0 rgba(87, 91, 126, 0.3);
   padding: 17px 45px;
+  ${props => (props.disabled ? 'opacity: 0.6;' : '')}
 `
 
 const Label = styled(Text)`

client/src/components/Input/Input.tsx

@@ -1,16 +1,39 @@
 import * as React from 'react'
-import { View, Text, TextInput, TextInputIOSProps } from 'react-native'
-import styled from 'styled-components'
+import {
+  View,
+  Text,
+  TextInput,
+  TextInputIOSProps,
+  NativeSyntheticEvent,
+  TextInputKeyPressEventData,
+} from 'react-native'
+import styled, { css } from 'styled-components'
 
-const Base = styled(TextInput)<{ name?: string }>`
+const Base = styled(TextInput)<{
+  name?: string
+  focused?: boolean
+  focusable?: boolean
+  innerRef: any
+}>`
+  font-family: AvantGardePro;
   background: var(--white);
   padding: 12px 20px;
-  box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.04);
+  box-shadow: 0 13px 27px 0
+    rgba(0, 0, 0, ${props => (props.focused && props.focusable ? '0.1' : '0.04')});
   border-radius: 2.67px;
   font-size: 20px;
   font-weight: 900;
   color: var(--dark-blue);
   letter-spacing: -0.91px;
+  transition: box-shadow 0.3s ease;
+
+  ${props =>
+    props.focusable &&
+    css`
+      &:hover {
+        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
+      }
+    `}
 `
 
 const Label = styled(Text)`
@@ -24,40 +47,61 @@ const Label = styled(Text)`
 
 interface InputProps {
   style?: any
+  inputStyle?: any
   name?: string
   label?: string
   placeholder?: string
   value?: string
   onChangeText: (text: string) => void
   onBlur?: (e: any) => void
+  onFocus?: (e: any) => void
+  onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void
   secure?: boolean
+  focused?: boolean
+  focusable?: boolean
   textContentType?: TextInputIOSProps['textContentType']
 }
 
-const Input = ({
-  style,
-  name,
-  label,
-  placeholder,
-  value,
-  onChangeText,
-  onBlur,
-  secure,
-  textContentType,
-}: InputProps) => (
-  <View style={style}>
-    {label && <Label>{label}</Label>}
-    <Base
-      name={name}
-      value={value}
-      onChangeText={onChangeText}
-      onBlur={onBlur}
-      placeholder={placeholder}
-      placeholderTextColor="var(--dark-moderate-blue-30)"
-      textContentType={textContentType}
-      secureTextEntry={secure}
-    />
-  </View>
+const Input = React.forwardRef(
+  (
+    {
+      style,
+      inputStyle,
+      name,
+      label,
+      placeholder,
+      value,
+      onChangeText,
+      onBlur,
+      onFocus,
+      onKeyPress,
+      secure,
+      focused,
+      focusable,
+      textContentType,
+    }: InputProps,
+    ref
+  ) => (
+    <View style={style}>
+      {label && <Label>{label}</Label>}
+      <Base
+        innerRef={ref}
+        style={inputStyle}
+        name={name}
+        value={value}
+        onChangeText={onChangeText}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onKeyPress={onKeyPress}
+        placeholder={placeholder}
+        placeholderTextColor="var(--dark-moderate-blue-30)"
+        textContentType={textContentType}
+        secureTextEntry={secure}
+        focused={focused}
+        focusable={focusable}
+      />
+    </View>
+  )
 )
 
 export default Input

client/src/index.css

@@ -43,6 +43,7 @@ body {
   --dark-blue-40: rgba(87, 91, 126, 0.4);
   --very-dark-blue: #201c3d;
   --light-grayish-blue: #edeef3;
+  --dark-moderate-blue-10: rgba(67, 91, 126, 0.1);
   --dark-moderate-blue-30: rgba(67, 91, 126, 0.3);
   --desaturated-blue: #8594be;
   --cyan: #55b6ab;
@@ -51,4 +52,5 @@ body {
   --black: #000000;
   --black-10: rgba(0, 0, 0, 0.1);
   --black-20: rgba(0, 0, 0, 0.2);
+  --black-60: rgba(0, 0, 0, 0.4);
 }

client/src/react-app-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+declare module 'react-load-script'

client/src/screens/Home/Home.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { View, Text } from 'react-native'
 import styled from 'styled-components'
-import { Flex, Box as FlexBox } from '@rebass/grid'
 import { SidebarContext } from '../../components/MainLayout'
-import ContentBox, { Variants as ContentBoxVariants } from './components/ContentBox'
+import Dashboard from './components/Dashboard'
+import OnboardBox from './components/OnboardBox'
 
 const Wrapper = styled(View)<{ sidebarOpen: boolean }>`
   flex: 1;
@@ -26,43 +26,12 @@ const Title = styled(Text)`
 const Home = () => {
   const { sidebarOpen } = React.useContext(SidebarContext)
   const firstName = 'Jason'
+  const isOnboarded = false
   return (
     <Wrapper sidebarOpen={sidebarOpen}>
       <View style={{ width: '75%' }}>
         <Title>{`Hello, ${firstName}!`}</Title>
-        <Flex
-          width={1}
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={50}
-        >
-          <FlexBox width={1} pr="15px">
-            <ContentBox
-              title="4.8"
-              subtitle="Your Renter Rating"
-              variant={ContentBoxVariants.rating}
-            />
-          </FlexBox>
-          <FlexBox width={1} px="15px">
-            <ContentBox title="$8420" subtitle="Total Savings" />
-          </FlexBox>
-          <FlexBox width={1} pl="15px">
-            <ContentBox title="$4210" subtitle="Savings from Landlord" />
-          </FlexBox>
-        </Flex>
-        <Flex width={1} flexDirection="row" justifyContent="space-between" alignItems="center">
-          <FlexBox width={2 / 3} pr="10px">
-            <ContentBox title="4.8" subtitle="Your Renter Rating" />
-          </FlexBox>
-          <FlexBox width={1 / 3} pl="15px">
-            <ContentBox
-              title="$262"
-              subtitle="Earned Interest"
-              variant={ContentBoxVariants.cyanTitle}
-            />
-          </FlexBox>
-        </Flex>
+        {isOnboarded ? <Dashboard /> : <OnboardBox />}
       </View>
     </Wrapper>
   )

client/src/screens/Home/components/ContentBox.tsx

@@ -83,7 +83,7 @@ interface ContentBoxProps {
 
 const ContentBox = ({ variant, title, subtitle }: ContentBoxProps) => {
   return (
-    <Box variant={getBoxVariant(variant)}>
+    <Box variant={getBoxVariant(variant)} style={{ height: 240 }}>
       <Wrapper>
         {variant === Variants.rating && <StarIcon source={{ uri: starIcon }} />}
         <Title variant={getTitleVariant(variant)}>{title}</Title>

client/src/screens/Home/components/Dashboard.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { View } from 'react-native'
+import { Flex, Box as FlexBox } from '@rebass/grid'
+import ContentBox, { Variants as ContentBoxVariants } from './ContentBox'
+
+const Dashboard = () => (
+  <View>
+    <Flex width={1} flexDirection="row" justifyContent="space-between" alignItems="center" mb={50}>
+      <FlexBox width={1} pr="15px">
+        <ContentBox title="4.8" subtitle="Your Renter Rating" variant={ContentBoxVariants.rating} />
+      </FlexBox>
+      <FlexBox width={1} px="15px">
+        <ContentBox title="$8420" subtitle="Total Savings" />
+      </FlexBox>
+      <FlexBox width={1} pl="15px">
+        <ContentBox title="$4210" subtitle="Savings from Landlord" />
+      </FlexBox>
+    </Flex>
+    <Flex width={1} flexDirection="row" justifyContent="space-between" alignItems="center">
+      <FlexBox width={2 / 3} pr="10px">
+        <ContentBox title="4.8" subtitle="Your Renter Rating" />
+      </FlexBox>
+      <FlexBox width={1 / 3} pl="15px">
+        <ContentBox
+          title="$262"
+          subtitle="Earned Interest"
+          variant={ContentBoxVariants.cyanTitle}
+        />
+      </FlexBox>
+    </Flex>
+  </View>
+)
+
+export default Dashboard