job card corrections

Fixed: Company Name, JobCard Design
WomenInSoftwareEngineeringJP · Aug 31, 2024 · a944fed · a944fed
1 parent 410783a
commit a944fed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/src/components/JobCard/JobCard.tsx b/src/components/JobCard/JobCard.tsx
@@ -18,17 +18,23 @@ const JobCard: FC<JobCardProps> = ({ job }) => {
 
     return <Card sx={{ bgcolor: 'primary.dark', width: '100%' }}>
         <CardContent>
-            <Grid container spacing={1} alignItems="center">
+            <Grid item xs={12} md={2} display={{ xs: 'flex', sm: 'flex', md: 'none' }} alignItems="center" justifyContent="right"  sx={{ marginBottom: { xs: 4, sm: 4 }, marginRight: 2 }}>
+                <AccessTimeIcon sx={{ marginRight: 1 }} />
+                <Typography fontSize="body2">
+                    {job.publicationDate}
+                </Typography>
+            </Grid>
+            <Grid container alignItems="center">
                 <Grid item xs={12} sm={12} md={2} display="flex" justifyContent="center">
                     <Avatar
-                        sx={{ bgcolor: 'white', width: 100, height: 100, borderRadius: 2,  img: {objectFit: 'contain', width: '90%', height: '100%'}
+                        sx={{ bgcolor: 'white', width: 135, height: 135, borderRadius: 2,  img: {objectFit: 'contain', width: '90%', height: '100%'}
                         }}
                         alt={`${job.company} logo`}
                         src={job.logoUrl}
                     />
                 </Grid>
                 <Grid item xs={12} sm={12} md={8} mt={2}>
-                    <Typography variant="h5" mb={2} component="div" sx={{ textAlign: 'left' }}>
+                    <Typography variant="h5" mb={2} mt={2} component="div" sx={{ textAlign: 'left' }}>
                         {job.title}
                     </Typography>
                     <Grid container spacing={2}>
@@ -40,32 +46,34 @@ const JobCard: FC<JobCardProps> = ({ job }) => {
                             <LocationOnIcon />
                             <Typography fontSize="body2" sx={{ ml: 1 }}>{job.location}</Typography>
                         </Grid>
-                        <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
-                            <AccountBalanceWalletIcon />
-                            <Typography fontSize="body2" sx={{ ml: 1 }}>{job.salary}</Typography>
-                        </Grid>
+                        {job.salary != '' &&
+                            <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
+                                <AccountBalanceWalletIcon />
+                                <Typography fontSize="body2" sx={{ ml: 1 }}>{job.salary}</Typography>
+                            </Grid>
+                        }
                     </Grid>
                     <Grid direction='row' spacing={1} mt={2} justifyContent="flex-start" flexWrap="wrap">
                         {job.tags.map((tag, index) => (
                             <Chip key={index} label={tag} sx={{ bgcolor: 'secondary.dark', height: 32, borderRadius: '8px', mt: { xs: 2, sm: 0 }, ml: { xs: 1, sm: 1 }, flexShrink: 0 }} />
                         ))}
                     </Grid>
                 </Grid>
-                <Grid item xs={12} sm={12} md={2} paddingRight={2} sx={{ order: { xs: -1, sm: -1, md: 0 }, alignSelf: { sm: 'flex-start' } }} display="flex" alignItems="center" justifyContent="right">
-                    <AccessTimeIcon sx={{ marginRight: 2 }} />
-                    <Typography fontSize="body2">
-                        { job.publicationDate }
-                    </Typography>
-                </Grid>
-                <Grid container spacing={1} justifyContent="right">
-                    <Grid item>
+                <Grid container xs={12} sm={12} md={2} paddingRight={2} sx={{ alignItems: 'flex-end', justifyContent: 'flex-start', flexDirection: 'column' }}>
+                    <Grid item display={{ xs: 'none', sm: 'none', md: 'flex' }}  alignItems="center" justifyContent="right" paddingBottom={3}>
+                        <AccessTimeIcon sx={{ marginRight: 2 }} />
+                        <Typography fontSize="body2">
+                            {job.publicationDate}
+                        </Typography>
+                    </Grid>
+                    <Grid item display="flex-end" sx={{ marginTop:{xs: 3}, paddingLeft: {md: 3} }}>
                         <Button
                             variant="contained"
-                            color='tertiary'
+                            color="tertiary"
                             onClick={handleReadMoreClick}
                             sx={{
-                                mt: 1,
                                 padding: '4px 8px',
+                                transform: { md:'translateY(40px)' } ,
                             }}
                         >
                             Read More

diff --git a/src/routes/JobBoard/jobs.json b/src/routes/JobBoard/jobs.json
@@ -1,31 +1,31 @@
 [
     {
         "title": "Sr. Software Development Engineer, Japan Pricing and Promotions",
-        "company": "Amazon Web Services",
+        "company": "Amazon Japan",
         "logoUrl": "/Amazon-logo.png",
         "location": "Tokyo, Japan",
         "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2719073/sr-software-development-engineer-japan-pricing-and-promotions",
-        "salary": "-",
+        "salary": "",
         "publicationDate": "2024/08/25",
         "tags": ["Full Time", "Senior Level", "English"]
     },
     {
         "title": "Software Development Engineer, Amazon Points, JP Points CX",
-        "company": "Amazon Web Services",
+        "company": "Amazon Japan",
         "logoUrl": "/Amazon-logo.png",
         "location": "Tokyo, Japan",
         "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2725444/software-development-engineer-amazon-points-jp-points-cx",
-        "salary": "-",
+        "salary": "",
         "publicationDate": "2024/08/25",
         "tags": ["Full Time", "English"]
     },
     {
         "title": "Senior Business Intelligence Engineer, JP Retail Science",
-        "company": "Amazon Web Services",
+        "company": "Amazon Japan",
         "logoUrl": "/Amazon-logo.png",
         "location": "Tokyo, Japan",
         "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2560382/senior-business-intelligence-engineer-jp-retail-science",
-        "salary": "-",
+        "salary": "",
         "publicationDate": "2024/08/25",
         "tags": ["Full Time", "Senior Level", "SQL skills", "English"]
     }

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -36,6 +36,7 @@ const theme = createTheme({
         },
         divider: lightBlue[300]
     },
+
     typography
 })