feature: implement mention link in user molecule (#65)

* feature: implement mention link

* style: revert avatar atom changes

* style: revert highlight atom changes

* style: revert user molecule double quotes

* style: revert highlight atom trailing comma removal

* refactor: revert user molecule highlight weight

The 600 weight matches GitHub's version.

* style: use single quotes in user molecule

* fixup! style: use single quote in user molecule

* fixup! style: use single quotes in user molecule

* refactor: use match from decorator for github link

* fixup! refactor: use match from decorator for github link

* style: fix indentation and add trailing comma in user molecule

* style: use proper order of styling in user molecule

Author: johnanisere

src/molecules/user/elements.js

@@ -65,7 +65,8 @@ export const UserDescription = styled.div`
 /**
  * The user's description highlights styles keywords within this description.
  */
-export const UserDescriptionHighlight = styled.strong`
+export const UserDescriptionHighlight = styled.a`
+	text-decoration: none;
 	color: #24292e;
 	font-weight: 600;
 `;

src/molecules/user/user.js

@@ -14,8 +14,19 @@ import {
 } from './elements';
 
 const decorators = {
-	'@': (segment, match, key) => <UserDescriptionHighlight key={key}>{segment}</UserDescriptionHighlight>,
-	'#': (segment, match, key) => <UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>,
+	'@': (segment, match, key) => (
+		<UserDescriptionHighlight
+			key={key}
+			href={`https://github.com/${match}`}
+			target='_blank'
+			rel='noopener noreferrer'
+		>
+			{segment}
+		</UserDescriptionHighlight>
+	),
+	'#': (segment, match, key) => (
+		<UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>
+	)
 };
 
 export default function UserMolecule(props) {