From 8b6cd23c2698b61610e0459b1fb1a59d602fdaca Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Thu, 23 Aug 2018 14:01:30 +0200
Subject: [PATCH] Added button styles

---
 src/js/components/Button/index.js | 48 ++++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/js/components/Button/index.js b/src/js/components/Button/index.js
index 6a2db3d1..3ce7418e 100644
--- a/src/js/components/Button/index.js
+++ b/src/js/components/Button/index.js
@@ -13,26 +13,71 @@ const Wrapper = styled.button`
     background: ${colors.GREEN_PRIMARY};
     color: ${colors.WHITE};
     border: 0;
+
     &:hover {
         background: ${colors.GREEN_SECONDARY};
     }
+
     &:active {
         background: ${colors.GREEN_TERTIARY};
     }
+
     ${props => props.disabled && css`
         pointer-events: none;
         color: ${colors.TEXT_SECONDARY};
         background: ${colors.GRAY_LIGHT};
     `}
+
+    ${props => props.blue && css`
+        background: transparent;
+        border: 1px solid ${colors.INFO_PRIMARY};
+        color: ${colors.INFO_PRIMARY};
+        padding: 12px 58px;
+
+        &:hover {
+            color: ${colors.WHITE};
+            background: ${colors.INFO_PRIMARY};
+        }
+    `}
+
+    ${props => props.white && css`
+        background: @color_white;
+        color: ${colors.TEXT_SECONDARY};
+        border: 1px solid ${colors.DIVIDER};
+        
+        &:hover {
+            color: ${colors.TEXT_PRIMARY};
+            border-color: ${colors.TEXT_PRIMARY};
+            background: ${colors.DIVIDER};
+        }
+        
+        &:active {
+            color: ${colors.TEXT_PRIMARY};
+            background: ${colors.DIVIDER};
+        }
+    `}
+
+    ${props => props.transparent && css`
+        background: transparent;
+        border: 0px;
+        color: ${colors.TEXT_SECONDARY};
+
+        &:hover,
+        &:active {
+            color: ${colors.TEXT_PRIMARY};
+            background: transparent;
+        }
+    `}
 `;
 
 const Button = ({
-    text, onClick, disabled, blue, white,
+    text, onClick, disabled, blue, white, transparent,
 }) => (
     <Wrapper
         onClick={onClick}
         disabled={disabled}
         blue={blue}
+        transparent={transparent}
         white={white}
     >{text}
     </Wrapper>
@@ -42,6 +87,7 @@ Button.propTypes = {
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
     blue: PropTypes.bool,
+    transparent: PropTypes.bool,
     white: PropTypes.bool,
     text: PropTypes.string.isRequired,
 };