add distinct styles for UrlButton

Author: steven-mercatante

src/components/UrlButton.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from './Button';
+import styled from 'styled-components';
+
+const UrlButtonContainer = styled.a(props => props.theme.urlButton);
 
 export default function UrlButton({ href, target, children }) {
   const extraProps = {};
@@ -9,9 +11,9 @@ export default function UrlButton({ href, target, children }) {
   }
 
   return (
-    <Button as="a" href={href} className="url-button" {...extraProps}>
+    <UrlButtonContainer href={href} className="url-button" {...extraProps}>
       {children}
-    </Button>
+    </UrlButtonContainer>
   );
 }
 

src/themes/default.js

@@ -3,12 +3,6 @@ const defaultTheme = {
     fontSize: '1rem',
     fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
   Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
-    a: {
-      color: '#EC24B5',
-      '&.url-button': {
-        color: '#fff',
-      },
-    },
   },
   timelineTrack: {
     position: 'absolute',
@@ -36,7 +30,6 @@ const defaultTheme = {
     maxWidth: '560px',
   },
   button: {
-    display: 'inline-block',
     fontSize: '14px',
     backgroundColor: 'rebeccapurple',
     borderRadius: '4px',
@@ -47,6 +40,17 @@ const defaultTheme = {
     textDecoration: 'none',
     cursor: 'pointer',
   },
+  urlButton: {
+    display: 'inline-block',
+    fontSize: '14px',
+    backgroundColor: 'rebeccapurple',
+    borderRadius: '4px',
+    padding: '6px',
+    margin: '10px 5px 5px 0',
+    border: 'none',
+    textDecoration: 'none',
+    color: '#fff',
+  },
   date: {
     backgroundColor: '#ec24b5',
     padding: '4px',