diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js index 3dc44b44..2ab8553c 100644 --- a/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js +++ b/apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js @@ -1,12 +1,25 @@ +import styled from 'styled-components'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + export default function IpynbDownloadLink({ url, sourcePath }) { // get the filename from the sourcePath const filename = sourcePath.split('/').pop(); return ( -

- - Download notebook + + + Download notebook -

+ ); } + +const StyledP = styled.p` + margin-top: 1rem; +`; + +const StyledFontAwesomeIcon = styled(FontAwesomeIcon)` + margin-right: 0.2em; + font-size: 1em; + color: ${(props) => props.color || 'inherit'}; +`; diff --git a/apps/squareone/src/styles/icons.js b/apps/squareone/src/styles/icons.js index f51f2980..eac8a248 100644 --- a/apps/squareone/src/styles/icons.js +++ b/apps/squareone/src/styles/icons.js @@ -13,6 +13,7 @@ import { faCircleCheck, faCircleMinus, faCodeCommit, + faDownload, } from '@fortawesome/free-solid-svg-icons'; import { faGithub } from '@fortawesome/free-brands-svg-icons'; @@ -25,4 +26,5 @@ library.add(faCircleXmark); library.add(faCircleCheck); library.add(faCircleMinus); library.add(faCodeCommit); +library.add(faDownload); library.add(faGithub);