From fe35a503df1a1d98d2a1ed47f9a61ab8d476ffbe Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Wed, 3 Jun 2020 23:14:38 -0400
Subject: [PATCH] Styling y boton de volver en noroute

---
 src/index.jsx       | 13 ++++++++-----
 src/styles/main.css | 42 ++++++++++++++++++++++++++++--------------
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/index.jsx b/src/index.jsx
index 590584c..b67afd5 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -16,11 +16,14 @@ const Main = (props) => (
     </Fragment>
 )
 
-const NoRoute = () => (
-    <div>
-        <h1>Esa pagina no existe</h1>
-    </div>
-)
+const NoRoute = (props) => {
+    return (
+        <div>
+            <h1>Esa pagina no existe</h1>
+            <button className='link' onClick={() => props.history.goBack()}>Volver</button>
+        </div>
+    );
+}
 
 const App = () => (
     <main>
diff --git a/src/styles/main.css b/src/styles/main.css
index e188b61..deb0b49 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,9 +1,11 @@
 :root {
-    --light-gray: hsl(0, 0%, 95%);
-    --gray: hsl(0, 0%, 85%);
-    --dark-gray: hsl(0, 0%, 30%);
+    --white: hsl(0, 0%, 99%);
+    --gray-1: hsl(0, 0%, 95%);
+    --gray-2: hsl(0, 0%, 85%);
+    --gray-3: hsl(0, 0%, 30%);
     --black: hsl(0, 0%, 20%);
-    --emerald: hsl(138, 70%, 60%);
+
+    --red: hsl(354, 81%, 56%);
 }
 
 body {
@@ -15,19 +17,31 @@ body {
 }
 
 input {
-    border: 1px var(--gray) solid;
+    border: 1px var(--gray-2) solid;
     padding: .3em;
 }
 
 button {
-    border: 1px var(--gray) solid;
+    border: 1px var(--gray-2) solid;
 }
 
-a {
-    color: var(--emerald);
+button.link {
+    display: inline;
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    cursor: pointer;
+}
+
+a, button.link {
+    color: var(--red);
     text-decoration: none;
 }
 
+a:hover, button.link:hover {
+    text-decoration: underline;
+}
+
 .nav {
     display: flex;
     min-height: 3.25em;
@@ -51,7 +65,7 @@ ul.pagination {
 }
 
 .page-item {
-    border: 1px solid var(--gray);
+    border: 1px solid var(--gray-2);
 }
 
 .page-link {
@@ -61,8 +75,9 @@ ul.pagination {
 }
 
 .page-item.active {
-    background-color: var(--emerald);
+    background-color: var(--red);
 }
+
 .page-item.active a {
     color: white;
 }
@@ -84,7 +99,6 @@ ul.pagination {
     background: white;
 }
 
-
 ul.entity_list {
     display: flex;
     flex-direction: column;
@@ -93,7 +107,7 @@ ul.entity_list {
 
 li.entity {
     height: 4em;
-    border: 1px var(--gray) solid;
+    border: 1px var(--gray-2) solid;
 }
 
 li.entity:not(:first-child) {
@@ -101,7 +115,7 @@ li.entity:not(:first-child) {
 }
 
 li.entity:hover {
-    background-color: var(--light-gray)
+    background-color: var(--gray-1)
 }
 
 li.entity a {
@@ -118,6 +132,6 @@ li.entity a {
 
 li.entity a .small {
     font-size: .8em;
-    color: var(--dark-gray);
+    color: var(--gray-3);
 }