From b29027dd423258d6acce78496a7b37a3e2de4662 Mon Sep 17 00:00:00 2001
From: Lindsey <lindseycadwell.dev@gmail.com>
Date: Mon, 20 Sep 2021 11:21:43 -0400
Subject: [PATCH] Add hover styles to button. Make input use shared variables
 for padding, border-radius

---
 src/App.tsx            |  2 +-
 src/shared/styles.js   |  2 ++
 src/stories/Button.tsx | 30 ++++++++++++++++++++++++------
 src/stories/Input.tsx  |  4 ++--
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f32795a..5d0a644 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -48,7 +48,7 @@ function App() {
         <input type="text" name="testInput2" style={{ width: "100%" }} />
         <Spacer />
         <SpaceBetweenContainer>
-          <Button variant="secondary" onClick={() => {}}>
+          <Button variant="primary" onClick={() => {}}>
             Hello World
           </Button>
           <Button variant="secondary" onClick={() => {}}>
diff --git a/src/shared/styles.js b/src/shared/styles.js
index 8043eff..f667762 100644
--- a/src/shared/styles.js
+++ b/src/shared/styles.js
@@ -23,4 +23,6 @@ export const typography = {
 
 export const input = {
   padding: "2rem",
+  borderRadius: "12px",
+  fontSize: "1.6rem",
 };
diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
index c33d367..02b1856 100644
--- a/src/stories/Button.tsx
+++ b/src/stories/Button.tsx
@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import CSS from "csstype";
+import { darken } from "polished";
 
 import { color, typography } from "../shared/styles";
 
@@ -41,12 +42,29 @@ const StyledButton = styled.button<ButtonProps>`
   transition: all 150ms ease-out;
   transform: translate3d(0, 0, 0);
 
-  color: ${(props) =>
-    props.variant === "primary" ? color.white : color.black};
-  background-color: ${(props) =>
-    props.variant === "primary" ? color.primary : color.secondary};
-
   &:hover {
     transform: translateY(-2px);
   }
+
+  ${(props) =>
+    props.variant === "primary" &&
+    css`
+      color: ${color.white};
+      background-color: ${color.primary};
+
+      &:hover {
+        background-color: ${darken(0.05, color.primary)};
+      }
+    `}
+
+  ${(props) =>
+    props.variant === "secondary" &&
+    css`
+      color: ${color.black};
+      background-color: ${color.secondary};
+
+      &:hover {
+        background-color: ${darken(0.1, color.secondary)};
+      }
+    `}
 `;
diff --git a/src/stories/Input.tsx b/src/stories/Input.tsx
index 4dbe249..49d1393 100644
--- a/src/stories/Input.tsx
+++ b/src/stories/Input.tsx
@@ -45,12 +45,12 @@ const Input: FC<InputProps> = ({
 export default Input;
 
 const StyledInput = styled.input<InputProps>`
-  border-radius: 12px;
+  border-radius: ${input.borderRadius};
   border: none;
   padding: ${input.padding};
   width: 100%;
 
-  font-size: 1.6rem;
+  font-size: ${input.fontSize};
   font-family: ${typography.primary};
   font-weight: ${typography.weight.regular};