From 96ebad7568a7e1642d4aa8eac73eea9035cf353a Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Tue, 11 Dec 2018 12:26:51 +0100
Subject: Fix layout, Adds button hovers

---
 packages/website/ts/@next/components/button.tsx | 9 +++++++--
 packages/website/ts/@next/components/layout.tsx | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 06a9f8c7a..074371453 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -25,10 +25,10 @@ interface ButtonInterface {
 
 export const Button = styled.button<ButtonInterface>`
     appearance: none;
-    border: 1px solid transparent;
+    border: ${props => !props.isNoBorder && `1px solid transparent`};
     display: ${props => props.isInline && 'inline-block'};
     background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
-    border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
+    border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
     text-align: center;
@@ -43,6 +43,11 @@ export const Button = styled.button<ButtonInterface>`
     path {
         fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     }
+
+    &:hover {
+        background-color: ${props => !props.isTransparent && '#04BEA8'};
+        border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
+    }
 `;
 
 export const Link = (props: ButtonInterface) => {
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 42468a27f..0559d6e3d 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -110,6 +110,7 @@ export const Wrap = styled(WrapBase)`
     @media (min-width: ${BREAKPOINTS.mobile}) {
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap;
         flex-direction: ${props => props.isReversed && 'row-reverse'};
     }
 `;
-- 
cgit v1.2.3