From 098809a17cb122a3ea1df78998f35b234771d92e Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Fri, 19 Jun 2020 11:12:35 -0400
Subject: [PATCH] Issue #5 Boton de Agregar a la lista

---
 src/components/AddToList.jsx  |  4 ++-
 src/components/AddToList.scss |  5 ++++
 src/components/Button.jsx     | 10 ++++++++
 src/components/Button.scss    | 47 +++++++++++++++++++++++++++++++++++
 src/styles/main.scss          | 32 +-----------------------
 5 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 src/components/AddToList.scss
 create mode 100644 src/components/Button.jsx
 create mode 100644 src/components/Button.scss

diff --git a/src/components/AddToList.jsx b/src/components/AddToList.jsx
index a2f1f61..55067b6 100644
--- a/src/components/AddToList.jsx
+++ b/src/components/AddToList.jsx
@@ -1,5 +1,7 @@
 import React from "react";
+import {Button} from './Button';
+import './AddToList.scss';
 
 export const AddToList = (props) => {
-  return <button className='button'>Agregar a mi lista</button>
+  return <Button className='add-to-list' text='Agregar a mi lista'/>
 }
diff --git a/src/components/AddToList.scss b/src/components/AddToList.scss
new file mode 100644
index 0000000..7d21382
--- /dev/null
+++ b/src/components/AddToList.scss
@@ -0,0 +1,5 @@
+.add-to-list {
+  --color: var(--accent);
+  --line-width: 3px;
+  font-size: 1.2em;
+}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
new file mode 100644
index 0000000..70859ef
--- /dev/null
+++ b/src/components/Button.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.scss'
+
+export const Button = (props) => {
+  const className = props.className;
+  const text = props.text;
+  const type = props.type ? props.type : 'button'
+
+  return <button className={`${type} ${className}`}>{text}</button>
+}
diff --git a/src/components/Button.scss b/src/components/Button.scss
new file mode 100644
index 0000000..5cd060d
--- /dev/null
+++ b/src/components/Button.scss
@@ -0,0 +1,47 @@
+// Base
+.button {
+  --color: var(--black);
+
+  padding: .4em 1em;
+  border: none;
+  outline: none;
+
+  background-color: var(--white);
+  color: var(--color);
+
+  font-weight: 500;
+
+  cursor: pointer;
+
+  &.disabled, &[disabled] {
+    color: var(--gray-3);
+    cursor: not-allowed;
+  }
+}
+
+
+// Border
+.button {
+  --width: var(--line-width);
+
+  box-shadow: 0px 0px 0px var(--width) var(--color);
+  transition: box-shadow 200ms ease-in-out;
+
+  &:hover { --width: calc(2 * var(--line-width)); }
+  &:active { --color: var(--accent) }
+}
+
+
+.link {
+  display: inline;
+  border: none;
+  background-color: inherit;
+  padding: 0;
+  cursor: pointer;
+  color: var(--accent);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7624579..245c5d5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -44,19 +44,7 @@ input {
   padding: .3em .5em;
 }
 
-button {
-  border: 1px var(--gray-2) solid;
-
-  &.link {
-    display: inline;
-    border: none;
-    background-color: inherit;
-    padding: 0;
-    cursor: pointer;
-  }
-}
-
-a, button.link {
+a {
   color: var(--accent);
   text-decoration: none;
 
@@ -96,24 +84,6 @@ small, .text_small {
   font-size: var(--font-6);
 }
 
-button.button {
-  border: none;
-  box-shadow: inset 0 0 0 var(--line-width) var(--accent);
-  background-color: var(--white);
-  padding: .5em 1em;
-
-  font-weight: 500;
-  font-size: var(--font-5);
-  color: var(--accent);
-  white-space: nowrap;
-
-  cursor: pointer;
-
-  &:hover {
-    transition: .2s ease-in-out;
-    box-shadow: inset 0 0 0 calc(var(--line-width) + 2px) var(--accent);
-  }
-}
 
 figure {
   height: 100%;