Merge pull request #1092 from civictechindex/1044-share-clickable-card

1044 share clickable card

Author: bruceplai

src/pages/Share/index.js

@@ -19,22 +19,19 @@ const StarMediaSection = () => {
 
   const CardSection = ({ image, title, cardContent, link = '' }) => {
     return (
-      <Card className={classes.card}>
-        <CardActionArea
-          className={`${classes.link} ${classes.media}`}
-          href={link}
-          target='_blank'
-        >
+      <CardActionArea className={classes.link} href={link} target='_blank'>
+        <Card className={classes.card}>
           <CardMedia className={classes.media} image={image} title={title} />
-        </CardActionArea>
-        <CardContent>
-          <Typography variant='h6' className={classes.cardTypo}>
-            {cardContent}
-          </Typography>
-        </CardContent>
-      </Card>
+          <CardContent>
+            <Typography variant='h6' className={classes.cardTypo}>
+              {cardContent}
+            </Typography>
+          </CardContent>
+        </Card>
+      </CardActionArea>
     );
   };
+
   return (
     <Grid
       container
@@ -44,24 +41,30 @@ const StarMediaSection = () => {
       className={classes.starMediaSection}
     >
       <Grid item md={4}>
-        <Card variant='outlined' className={classes.card}>
-          <CardActions>
-            <GitHubButton
-              href='https://github.com/civictechindex/CTI-website-frontend'
-              data-icon='octicon-star'
-              data-size='large'
-              data-show-count='true'
-              aria-label='Star civictechindex/CTI-website-frontend on GitHub'
-            >
-              Star
-            </GitHubButton>
-          </CardActions>
-          <CardContent>
-            <Typography variant='h6' className={classes.cardTypo}>
-              Don’t forget to star our repository
-            </Typography>
-          </CardContent>
-        </Card>
+        <CardActionArea
+          className={classes.link}
+          href='https://github.com/civictechindex/CTI-website-frontend'
+          target='_blank'
+        >
+          <Card className={classes.card}>
+            <CardActions className={classes.media}>
+              <GitHubButton
+                href='https://github.com/civictechindex/CTI-website-frontend'
+                data-icon='octicon-star'
+                data-size='large'
+                data-show-count='true'
+                aria-label='Star civictechindex/CTI-website-frontend on GitHub'
+              >
+                Star
+              </GitHubButton>
+            </CardActions>
+            <CardContent>
+              <Typography variant='h6' className={classes.cardTypo}>
+                Don’t forget to star our repository
+              </Typography>
+            </CardContent>
+          </Card>
+        </CardActionArea>
       </Grid>
       <Grid item md={4}>
         <CardSection
@@ -74,6 +77,7 @@ const StarMediaSection = () => {
     </Grid>
   );
 };
+
 const SocialMediaPostSection = () => {
   const classes = useStyles();
   return (
@@ -93,6 +97,7 @@ const SocialMediaPostSection = () => {
     </Grid>
   );
 };
+
 const SocialMediaSection = () => {
   const classes = useStyles();
   return (

src/pages/Share/styles.js

@@ -43,22 +43,27 @@ const useStyles = makeStyles((theme) => ({
   },
   card: {
     backgroundColor: '#FFFFFF',
-    height: '186px',
+    height: theme.spacing(23),
+    width: '100%',
     border: '1px solid',
-    borderRadius: '4px',
+    padding: theme.spacing(3),
+    borderRadius: theme.spacing(0.5),
     borderColor: theme.palette.background.darkGray,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
     boxSizing: 'border-box',
     boxShadow: '0px 6px 30px rgba(4, 45, 95, 0.08)',
   },
   cardTypo: {
     textAlign: 'center',
-    width: '218px',
+    width: theme.spacing(27),
   },
   media: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     height: '64px',
     width: '64px',
   },
@@ -71,7 +76,7 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'hidden',
     backgroundColor: '#FFFFFF',
     display: 'flex',
-    marginLeft: '0px',
+    marginLeft: '0',
     marginTop: '-85px',
     alignItems: 'center',
     boxSizing: 'border-box',
@@ -95,7 +100,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '4px',
     borderColor: theme.palette.background.darkGray,
     boxShadow: '0px 6px 30px rgba(4, 45, 95, 0.08)',
-    width: '600px',
+    width: theme.spacing(80),
   },
   sectionHeadTypography: {
     textAlign: 'center',
@@ -108,6 +113,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   link: {
+    width: '100%',
     '& .MuiCardActionArea-focusHighlight': {
       backgroundColor: 'transparent',
     },