From 7efabe0d8e398e1836422ac22d65616ffd0dab5a Mon Sep 17 00:00:00 2001
From: eliabejr <eliabejunior@hotmail.com.br>
Date: Wed, 23 Jan 2019 17:59:30 -0300
Subject: [PATCH] feat(receive-view-design): add border color on app theme

---
 app/components/button.js | 13 ++++++++-----
 app/theme.js             |  2 ++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/button.js b/app/components/button.js
index ddaba5d..f50d00c 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -9,6 +9,9 @@ import { Link } from 'react-router-dom';
 import { darken } from 'polished';
 
 const DefaultButton = styled.button`
+  align-items: center;
+  display: flex;
+  justify-content: center;
   padding: 10px 30px;
   font-family: ${props => props.theme.fontFamily};
   font-weight: ${props => props.theme.fontWeight.bold};
@@ -32,7 +35,7 @@ const Primary = styled(DefaultButton)`
   }
 
   &:disabled {
-    background-color: #3e3c42;
+    background-color: ${props => props.theme.colors.buttonBorderColor};
     cursor: not-allowed;
     opacity: 0.8;
   }
@@ -41,7 +44,7 @@ const Primary = styled(DefaultButton)`
 const Secondary = styled(DefaultButton)`
   background-color: transparent;
   color: ${props => props.theme.colors.secondary};
-  border: 2px solid #3e3c42;
+  border: 2px solid ${props => props.theme.colors.buttonBorderColor};
 
   &:hover {
     border-color: ${props => props.theme.colors.primary};
@@ -50,16 +53,16 @@ const Secondary = styled(DefaultButton)`
   &:disabled {
     background-color: Transparent;
     cursor: not-allowed;
-    color: #3e3c42;
+    color: ${props => props.theme.colors.buttonBorderColor};
 
     &:hover {
-      border-color: #3e3c42;
+      border-color: ${props => props.theme.colors.buttonBorderColor};
     }
   }
 `;
 
 const Icon = styled.img`
-  height: 9px;
+  height: 12px;
   width: 12px;
   margin-right: 10px;
 `;
diff --git a/app/theme.js b/app/theme.js
index 3598acb..4384e13 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -12,6 +12,7 @@ const lightOne = '#ffffff';
 const brandOne = '#000';
 // const brandTwo = '#3B3B3F';
 const brandThree = '#5d5d65';
+const buttonBorderColor = '#3e3c42';
 const activeItem = '#F4B728';
 const text = '#FFF';
 const cardBackgroundColor = '#000';
@@ -71,6 +72,7 @@ const appTheme = {
     selectButtonShadow,
     transactionsDetailsLabel,
     statusPillLabel,
+    buttonBorderColor,
   },
   sidebarWidth: '180px',
   headerHeight: '60px',