Shrink elements

src/components/JobCard/index.js

@@ -29,7 +29,7 @@ export const JobCard = props => {
   return (
     <Card>
       <Row>
-        <TitleContainer>
+        <TitleContainer logo={CompanyLogoUrl !== null}>
           <Title>{title}</Title>
         </TitleContainer>
         <LogoContainer>
@@ -53,7 +53,7 @@ export const JobCard = props => {
           </Row>
           <Row>
             <LocationText>
-              <Ionicons name="md-pin" size={16} /> {Location}
+              <Ionicons name="md-pin" size={14} /> {Location}
             </LocationText>
           </Row>
         </InfoContainer>

src/components/JobCard/styles.js

@@ -11,7 +11,8 @@ export const Card = styled.View`
 /* Title */
 export const TitleContainer = styled.View`
   flex: 5;
-  margin-bottom: 4px;
+  /* 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`
@@ -21,7 +22,7 @@ export const Title = styled.Text`
 
 /* Logo */
 export const LogoContainer = styled.View`
-  flex: 1;
+  flex: 0 1 auto;
 `;
 
 export const Logo = styled.Image`
@@ -31,18 +32,19 @@ export const Logo = styled.Image`
 
 /* Info = Remote + Company + Location */
 export const InfoContainer = styled.View`
-  flex: 1;
+  flex: 1 0 auto;
 `;
 
 /* Remote Badge */
 export const RemoteContainer = styled.View`
-  flex: 1;
+  flex: 0 1 auto;
   flex-flow: column wrap;
+  margin-right: 4px;
 `;
 
 /* Company */
 export const CompanyContainer = styled.View`
-  flex: 1;
+  flex: 1 0 auto;
   flex-flow: column wrap;
 `;
 
@@ -53,20 +55,22 @@ export const Company = styled.Text`
 
 /* Location */
 export const LocationText = styled.Text`
-  font-size: 16px;
+  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: 1;
+  flex: 0 1 auto;
   align-self: flex-end;
   flex-direction: row-reverse;
 `;
 
 export const Row = styled.View`
-  flex: 1;
+  flex: 1 0 auto;
   flex-flow: row wrap;
 `;

src/screens/Listing/index.js

@@ -4,6 +4,22 @@ import { JobCard } from '../../components/JobCard';
 import { ResultsTitle, SearchResult } from './styles';
 
 export const results = [
+  {
+    Link: '1339',
+    CompanyName: 'Encore',
+    Title: '1 Quality Assurance Lead y 2 Quality Assurance',
+    JobType: 'Tiempo Completo',
+    Location: 'Santo Domingo, RD',
+    PublishedDate: '2019-12-06T15:30:18.223',
+    IsRemote: false,
+    ViewCount: 32,
+    Likes: 0,
+    CompanyLogoUrl: null,
+    Description:
+      "<p>\r\n\r\n</p><p>Bachelor's degree Systems Engineer, Software Development or Software Technologist. Minimum of one year of work-related experience, knowledge of software development languages (like Java, C#.Net, others). Knowledge of Selenium web driver. Knowledge of complete Software Development Life Cycle (SDLC). Database knowledge to work and create testing scenarios (Like MySQL, SQL, Server, others).</p><p>Maine functions are: create detailed comprehensive and well-structured test plans and test cases based on specifications and organization needs, test the program codes, working closely with analysts, designers and developers to understand every possible scenario and support with improvement suggestions. Reviewing current system functionality for possible missed scenarios. Testing the product in a controlled environment, real situations before moving to production.</p>\r\n\r\n<br><p></p>",
+    HowToApply:
+      '<p>\r\n\r\nSend your updated resume by email. Write "Quality Assurance" as a title.\r\n\r\n<br></p>',
+  },
   {
     Link: '1338',
     CompanyName: 'Soluciones GBH',