React Dashboard Guide add Social links to landing

Author: keydunov

Diff for: guides/react-dashboard/src/components/Hero/Hero.jsx

@@ -6,6 +6,7 @@ import theme, { sharedStyles } from '../../theme';
 import DashboardImg from './dashboard-sample.png';
 import browserControls from './browser-controls.svg';
 import cover from './react-dashboard-cover.jpg';
+import Social from "../Social/Social";
 
 const Container = styled.div`
   background-color: ${theme.colors.lightBlue};
@@ -115,6 +116,7 @@ const SecondaryButton = styled.a`
 const ButtonsContainer = styled.div`
   display: flex;
   margin-top: 45px;
+  margin-bottom: 25px;
   justify-content: space-between;
   flex-wrap: wrap;
   ${media.lessThan("small")`
@@ -137,6 +139,7 @@ const Hero = ({ startUrl }) => (
           <PrimaryButton to={startUrl}>Start Learning</PrimaryButton>
           <SecondaryButton href="https://react-dashboard-demo.cube.dev">Demo</SecondaryButton>
         </ButtonsContainer>
+        <Social align="flex-start" />
       </CopyContainer>
       <MediaContainer>
         <video muted autoPlay playsInline loop preload="auto" poster={cover}>

Diff for: guides/react-dashboard/src/components/Social/Social.jsx

@@ -13,23 +13,30 @@ import {
 import styled from 'styled-components'
 import config from "../../../data/SiteConfig";
 import theme from '../../theme';
+import media from "styled-media-query";
 
 const Container = styled.div`
   margin-top: 20px;
   display: flex;
-  justify-content: center;
+  justify-content: ${props => props.align};
+  ${media.lessThan("medium")`
+    justify-content: center;
+  `}
 
   & > div {
     cursor: pointer;
     margin: 0 15px;
+    &:first-child {
+      margin-left: 0;
+    }
   }
 `
 
-const Social = ({ path, title, iconSize }) => {
+const Social = ({ path, title, iconSize, align }) => {
   const url = urljoin(config.siteUrl, config.pathPrefix, path);
-  const fullTitle = `${config.siteTitle}: ${title}`
+  const fullTitle = [config.siteTitle, title].filter(v => !!v).join(": ")
   return (
-    <Container>
+    <Container align={align}>
       <RedditShareButton url={url} title={fullTitle}>
         <RedditIcon round size={iconSize} />
       </RedditShareButton>
@@ -44,7 +51,10 @@ const Social = ({ path, title, iconSize }) => {
 }
 
 Social.defaultProps = {
-  iconSize: 40
+  iconSize: 40,
+  title: undefined,
+  path: "",
+  align: "center"
 }
 
 export default Social;