From 5cab4011b93f5ac405f3d93ed081133d11591590 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 10 Jul 2018 16:05:52 +0200
Subject: [PATCH] button component

---
 src/components/atoms/Button.jsx               | 15 ++++++
 src/components/atoms/Button.module.scss       | 48 +++++++++++++++++++
 src/components/molecules/ProjectLinks.jsx     |  5 +-
 .../molecules/ProjectLinks.module.scss        | 43 -----------------
 .../molecules/ProjectTechstack.module.scss    |  3 +-
 5 files changed, 68 insertions(+), 46 deletions(-)
 create mode 100644 src/components/atoms/Button.jsx
 create mode 100644 src/components/atoms/Button.module.scss

diff --git a/src/components/atoms/Button.jsx b/src/components/atoms/Button.jsx
new file mode 100644
index 0000000..1f0f1ea
--- /dev/null
+++ b/src/components/atoms/Button.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Button.module.scss'
+
+const Button = props => (
+  <a className={styles.button} {...props}>
+    {props.children}
+  </a>
+)
+
+Button.propTypes = {
+  children: PropTypes.node
+}
+
+export default Button
diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss
new file mode 100644
index 0000000..0f6f882
--- /dev/null
+++ b/src/components/atoms/Button.module.scss
@@ -0,0 +1,48 @@
+@import 'variables';
+
+.button {
+    display: block;
+    width: 100%;
+    color: $brand-cyan;
+    text-align: center;
+    border-radius: .25rem;
+    padding: $spacer / 4 $spacer / 2;
+    transition-property: all;
+    background: rgba(#fff, .15);
+    border: .05rem solid rgba($brand-cyan, .75);
+    font-size: $font-size-small;
+    text-transform: uppercase;
+
+    svg {
+        fill: $brand-grey-light;
+        margin-right: $spacer / 3;
+        transition: .2s ease-out;
+        margin-bottom: -.1rem;
+        width: $font-size-small;
+        height: $font-size-small;
+    }
+
+    &:hover,
+    &:focus {
+        color: lighten($brand-cyan, 10%);
+        border-color: rgba(lighten($brand-cyan, 10%), .75);
+        transform: translate3d(0, -.1rem, 0);
+        box-shadow: 0 6px 10px rgba($brand-main, .1),
+            0 10px 25px rgba($brand-main, .05);
+    }
+
+    &:active {
+        transition: none;
+        background: rgba(#fff, .15);
+    }
+
+    :global(.dark) & {
+        background: darken($body-background-color--dark, 1%);
+
+        &:hover,
+        &:focus {
+            box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
+                0 10px 25px rgba(darken($brand-main, 20%), .2);
+        }
+    }
+}
diff --git a/src/components/molecules/ProjectLinks.jsx b/src/components/molecules/ProjectLinks.jsx
index 4c0eae7..1e1fafe 100644
--- a/src/components/molecules/ProjectLinks.jsx
+++ b/src/components/molecules/ProjectLinks.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Button from '../atoms/Button'
 import Link from '../svg/Link'
 import Download from '../svg/Download'
 import Info from '../svg/Info'
@@ -42,10 +43,10 @@ const ProjectLinks = ({ links }) => (
 
         return (
           <li key={title}>
-            <a href={url}>
+            <Button href={url}>
               <LinkIcon title={title} className={icons.icon} />
               {title}
-            </a>
+            </Button>
           </li>
         )
       })}
diff --git a/src/components/molecules/ProjectLinks.module.scss b/src/components/molecules/ProjectLinks.module.scss
index 7f015d2..57843f9 100644
--- a/src/components/molecules/ProjectLinks.module.scss
+++ b/src/components/molecules/ProjectLinks.module.scss
@@ -16,49 +16,6 @@
         margin-left: $spacer / 2;
         margin-bottom: $spacer / 2;
     }
-
-    svg {
-        margin-right: $spacer / 3;
-        transition: .2s ease-out;
-        margin-bottom: -.1rem;
-    }
-
-    a {
-        display: block;
-        width: 100%;
-        color: $brand-cyan;
-        text-align: center;
-        border-radius: .25rem;
-        padding: $spacer / 4 $spacer / 2;
-        transition-property: all;
-        background: rgba(#fff, .15);
-
-        svg {
-            fill: $brand-grey-light;
-        }
-
-        &:hover,
-        &:focus {
-            transform: translate3d(0, -.1rem, 0);
-            box-shadow: 0 6px 10px rgba($brand-main, .1),
-                0 10px 25px rgba($brand-main, .1);
-        }
-
-        &:active {
-            transition: none;
-            background: rgba(#fff, .15);
-        }
-
-        :global(.dark) & {
-            background: darken($body-background-color--dark, 1%);
-
-            &:hover,
-            &:focus {
-                box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1),
-                    0 10px 25px rgba(darken($brand-main, 20%), .1);
-            }
-        }
-    }
 }
 
 .title {
diff --git a/src/components/molecules/ProjectTechstack.module.scss b/src/components/molecules/ProjectTechstack.module.scss
index a8228a1..d309462 100644
--- a/src/components/molecules/ProjectTechstack.module.scss
+++ b/src/components/molecules/ProjectTechstack.module.scss
@@ -16,11 +16,12 @@
         text-align: center;
         background: rgba(#fff, .15);
         border-radius: .25rem;
+        border: .05rem solid transparent;
         color: $brand-grey-light;
         margin-left: $spacer / 2;
         margin-bottom: $spacer / 2;
         flex: 0 0 calc(50% - #{$spacer / 2});
-        font-size: $font-size-base;
+        font-size: $font-size-small;
 
         :global(.dark) & {
             background: darken($body-background-color--dark, 1%);