Listing Screen (Hardcoded)

Shrink elements

src/components/Badge/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BadgeContainer, Content } from './styles';
+
+export const Badge = ({ children, ...props }) => {
+  return (
+    <BadgeContainer {...props}>
+      <Content>{children}</Content>
+    </BadgeContainer>
+  );
+};

src/components/Badge/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import theme from '../../theme';
+
+export const BadgeContainer = styled.TouchableOpacity`
+  border-radius: 4px;
+  padding: 2px 6px;
+  background-color: ${theme.colors.mediumSlateBlue};
+  align-self: flex-start;
+
+  ${props => props.primary && `background-color: ${theme.colors.primary};`};
+`;
+
+export const Content = styled.Text`
+  font-size: 12px;
+  font-family: 'SFProDisplay-Bold';
+  color: white;
+`;

src/components/JobCard/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Badge } from '../Badge';
+import {
+  Card,
+  CategoryContainer,
+  Company,
+  CompanyContainer,
+  InfoContainer,
+  LocationText,
+  Logo,
+  LogoContainer,
+  RemoteContainer,
+  Row,
+  Title,
+  TitleContainer,
+} from './styles';
+
+export const JobCard = props => {
+  const {
+    Title: title,
+    CompanyName,
+    CompanyLogoUrl,
+    IsRemote,
+    JobType,
+    Location,
+  } = props;
+
+  return (
+    <Card>
+      <Row>
+        <TitleContainer logo={CompanyLogoUrl !== null}>
+          <Title>{title}</Title>
+        </TitleContainer>
+        <LogoContainer>
+          {CompanyLogoUrl && (
+            <Logo source={{ uri: CompanyLogoUrl }} resizeMode="contain" />
+          )}
+        </LogoContainer>
+      </Row>
+      <Row>
+        <InfoContainer>
+          <Row>
+            {IsRemote && (
+              <RemoteContainer>
+                <Badge primary>Remoto</Badge>
+              </RemoteContainer>
+            )}
+
+            <CompanyContainer>
+              <Company>{CompanyName}</Company>
+            </CompanyContainer>
+          </Row>
+          <Row>
+            <LocationText>
+              <Ionicons name="md-pin" size={14} /> {Location}
+            </LocationText>
+          </Row>
+        </InfoContainer>
+        <CategoryContainer>
+          <Badge>{JobType}</Badge>
+        </CategoryContainer>
+      </Row>
+    </Card>
+  );
+};

src/components/JobCard/styles.js

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import theme from '../../theme';
+
+export const Card = styled.View`
+  padding: 6px;
+  background-color: white;
+  margin-bottom: 5px;
+  border-radius: 4px;
+`;
+
+/* Title */
+export const TitleContainer = styled.View`
+  flex: 5;
+  /* If the post has no logo, a little margin is added between the title and the information container. */
+  ${props => !props.logo && 'margin-bottom: 4px;'}
+`;
+
+export const Title = styled.Text`
+  font-size: 18px;
+  font-family: 'SFProDisplay-Medium';
+`;
+
+/* Logo */
+export const LogoContainer = styled.View`
+  flex: 0 1 auto;
+`;
+
+export const Logo = styled.Image`
+  width: 50px;
+  height: 50px;
+`;
+
+/* Info = Remote + Company + Location */
+export const InfoContainer = styled.View`
+  flex: 1 0 auto;
+`;
+
+/* Remote Badge */
+export const RemoteContainer = styled.View`
+  flex: 0 1 auto;
+  flex-flow: column wrap;
+  margin-right: 4px;
+`;
+
+/* Company */
+export const CompanyContainer = styled.View`
+  flex: 1 0 auto;
+  flex-flow: column wrap;
+`;
+
+export const Company = styled.Text`
+  font-size: 14px;
+  font-family: 'SFProDisplay-Medium';
+`;
+
+/* Location */
+export const LocationText = styled.Text`
+  margin-top: 2px;
+  font-family: 'SFProDisplay-Regular';
+  font-size: 14px;
+  color: ${theme.colors.secondary};
+  flex: 1;
+`;
+
+/* Category */
+export const CategoryContainer = styled.View`
+  flex-flow: column wrap;
+  flex: 0 1 auto;
+  align-self: flex-end;
+  flex-direction: row-reverse;
+`;
+
+export const Row = styled.View`
+  flex: 1 0 auto;
+  flex-flow: row wrap;
+`;

src/navigation/index.js

@@ -42,7 +42,7 @@ const App = createBottomTabNavigator(
     }),
     tabBarOptions: {
       activeTintColor: theme.colors.primary,
-      inactiveTintColor: theme.colors.gray,
+      inactiveTintColor: theme.colors.secondary,
       style: {
         borderTopWidth: 0,
         paddingBottom: 10,

src/navigation/search.stack.js

@@ -13,12 +13,12 @@ export const SearchStack = createStackNavigator(
   {
     defaultNavigationOptions: {
       headerStyle: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: theme.colors.white,
       },
-      headerTintColor: theme.colors.white,
+      headerTintColor: theme.colors.black,
       title: SCREENS.Search.title,
     },
-    headerMode: 'none',
+
     cardStyle: {
       backgroundColor: theme.colors.background,
       height: '100%',

src/screens/Listing/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const SearchResult = styled.ScrollView`
+  flex-direction: column;
+  margin-top: 0px;
+  margin-right: -20px;
+  padding-right: 20px;
+`;
+
+export const ResultsTitle = styled.Text`
+  font-size: 26px;
+  font-family: 'SFProDisplay-Bold';
+  margin-top: 20px;
+  margin-bottom: 20px;
+`;

src/screens/Search/index.js

@@ -37,7 +37,7 @@ const SearchScreen = () => {
           placeholder="Keywords"
           onChangeText={text => setQuery(text)}
         />
-        <Ionicons name="md-search" size={28} />
+        <Ionicons onPress={search} name="md-search" size={28} />
       </SearchBox>
       <Subtitle>Buscar por categoría</Subtitle>
       <CategoryList />
@@ -61,4 +61,9 @@ const SearchScreen = () => {
   );
 };
 
+SearchScreen.navigationOptions = () => ({
+  headerMode: 'none',
+  header: null,
+});
+
 export default SearchScreen;

src/theme/colors.js

@@ -1,9 +1,16 @@
 export const defaultColors = {
   primary: '#13BAC3',
   secondary: '#94A1B2',
-  input: '#13bac3',
-  white: '#ffffff',
   background: '#f8f8f8',
-  cardBackground: '#fff',
-  gray: '#9eabba',
+  white: '#ffffff',
+  black: '#000000',
+  darkPink: '#EF476F',
+  darkSlateBlue: '#3D3D8C',
+  mediumSlateBlue: '#8075FF',
+  frenchBlue: '#0061C3',
+  spiroDiscoBall: '#32C5FF',
+  blue: '#119DA4',
+  mantis: '#74BE58',
+  mustard: '#FFC857',
+  atomicTangerine: '#FF9C57',
 };