aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:26:51 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-11 19:26:51 +0800
commit96ebad7568a7e1642d4aa8eac73eea9035cf353a (patch)
treec85c2279888c5a49ea3f6720f0be735a49293341 /packages/website/ts/@next
parent3fb74be4ba4bbb085b4fa70e119cf507a0c503f9 (diff)
downloaddexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.gz
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.bz2
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.lz
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.xz
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.tar.zst
dexon-sol-tools-96ebad7568a7e1642d4aa8eac73eea9035cf353a.zip
Fix layout, Adds button hovers
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/button.tsx9
-rw-r--r--packages/website/ts/@next/components/layout.tsx1
2 files changed, 8 insertions, 2 deletions
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'};
}
`;