style: update button

Signed-off-by: Logan McAnsh <[email protected]>

components/button.tsx

@@ -1,85 +1,63 @@
-import { UrlObject } from 'url';
 import React from 'react';
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
 import styled from 'styled-components';
+import Ink from 'react-ink';
 
-interface Props
-  extends React.DetailedHTMLProps<
-    React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {
-  text: string;
-  link: string | UrlObject;
-  textColor?: string;
-  background?: string;
-  hoverTextColor?: string;
-  hoverBackground?: string;
+interface Props extends LinkProps {
+  children: React.ReactNode;
+  target?: string;
+  rel?: string;
 }
 
-type StyledLinkProps = Pick<
-  Props,
-  'textColor' | 'background' | 'hoverTextColor' | 'hoverBackground'
->;
-
-const StyledLink = styled.a<StyledLinkProps>`
-  margin: 3rem 0 0 0;
-  color: ${props => props.textColor};
+const StyledLink = styled.a`
+  appearance: none;
+  position: relative;
   display: inline-flex;
-  width: 20rem;
-  height: 5rem;
-  font-size: 1.2rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
   text-align: center;
+  text-decoration: none;
+  line-height: 3.8rem;
+  white-space: nowrap;
+  font-weight: 500;
+  min-width: 20rem;
+  height: 4rem;
+  padding: 0 2.5rem;
+  border-radius: 0.5rem;
+  font-size: 1.4rem;
+  flex-shrink: 0;
+  color: #888;
+  background-color: #000;
+  border: 1px solid #333;
+  transition: all 0.2s ease;
   user-select: none;
-  position: relative;
-  background: ${props => props.background};
-  border-width: 0.2rem;
-  border-style: solid;
-  border-color: ${props => props.background};
-  border-image: initial;
+  cursor: pointer;
   overflow: hidden;
-  transition: border 200ms, background 200ms, color 200ms ease-out;
-  border-radius: 0.5rem;
-  justify-content: center;
-  align-items: center;
+  outline: none;
 
   &:hover {
-    color: ${props => props.hoverTextColor};
-    border-color: ${props => props.hoverTextColor};
-    border-image: initial;
-    background: ${props => props.hoverBackground};
+    color: white;
+    border: 1px solid white;
+    background: black;
+  }
+
+  span {
+    z-index: 1;
+    position: relative;
+    line-height: 1.5;
   }
 `;
 
-const Button = ({
-  text,
-  link,
-  textColor,
-  background,
-  hoverTextColor,
-  hoverBackground,
-}: Props) => {
+const Button = ({ children, ...nextProps }: Props) => {
   return (
-    <Link href={link} passHref>
-      <StyledLink
-        background={background}
-        hoverBackground={hoverBackground}
-        hoverTextColor={hoverTextColor}
-        textColor={textColor}
-      >
-        {text}
+    <Link {...nextProps} passHref>
+      <StyledLink>
+        <span>{children}</span>
+        <Ink />
       </StyledLink>
     </Link>
   );
 };
 
-Button.defaultProps = {
-  textColor: 'white',
-  background: 'black',
-  hoverTextColor: 'white',
-  hoverBackground: 'transparent',
-};
-
 export default Button;

components/header/index.tsx

@@ -83,12 +83,13 @@ const Header = ({ title, url, image, date }: Props) => {
         {date && <DateHeading date={date} />}
         {url && (
           <Button
-            text="Read More"
-            link={{
+            href={{
               pathname: url,
               query: isAmp ? { ...query, amp: 1 } : query,
             }}
-          />
+          >
+            Read More
+          </Button>
         )}
       </HeaderContent>
       <Image image={image} />

components/styles/global-style.tsx

@@ -16,7 +16,7 @@ const GlobalStyles = createGlobalStyle`
 
 
   body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-family: 'SF Pro',-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
     font-weight: 400;
     margin: 0;
     background: ${props => props.theme.background};

package.json

@@ -54,6 +54,7 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-ga": "2.6.0",
+    "react-ink": "6.4.0",
     "react-simple-img": "2.3.3",
     "react-spring": "8.0.27",
     "somebody": "2.0.0",

yarn.lock

@@ -9283,6 +9283,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.6.0.tgz#c3fe830ead2ad25117e1d33280d9698de9b28496"
   integrity sha512-GWHBWZDFjDGMkIk1LzroIn0mNTygKw3adXuqvGvheFZvlbpqMPbHsQsTdQBIxRRdXGQM/Zq+dQLRPKbwIHMTaw==
 
+[email protected]:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-ink/-/react-ink-6.4.0.tgz#fa1573104237d3c08bcbf06108f3197b16762f76"
+  integrity sha512-CucEgFtGVFd0yJ8a+fic7FRHPv8QDba7UOoTvg4ezaRLGA7/FitwiQMIydBfiaZ7v+mrCsqWaH2ZpmthZRMxgQ==
+
 [email protected]:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"