diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx index b27f7273..a011de9e 100644 --- a/src/components/DocFooter.jsx +++ b/src/components/DocFooter.jsx @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import { ReactComponent as Pencil } from '../images/pencil.svg' import styles from './DocFooter.module.scss' const DocFooter = ({ post }) => ( @@ -9,7 +10,7 @@ const DocFooter = ({ post }) => ( post.parent.relativePath }`} > - Edit on GitHub + Edit this page on GitHub ) diff --git a/src/components/DocFooter.module.scss b/src/components/DocFooter.module.scss index e55890aa..6af86c56 100644 --- a/src/components/DocFooter.module.scss +++ b/src/components/DocFooter.module.scss @@ -13,5 +13,17 @@ font-family: $font-family-button; text-transform: uppercase; color: $brand-grey-light; + + &:hover, + &:focus { + color: $brand-pink; + } + + svg { + display: inline-block; + margin-right: $spacer / 10; + margin-bottom: -1px; + fill: $brand-grey-light; + } } } diff --git a/src/images/pencil.svg b/src/images/pencil.svg new file mode 100644 index 00000000..9a0ed66c --- /dev/null +++ b/src/images/pencil.svg @@ -0,0 +1,3 @@ + + +