aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 20:47:40 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 20:47:40 +0800
commitee380316962c1a09944f2ac62125551dc49feffd (patch)
tree70b5528d30907e3215aea937593824fd37351b85
parent8948029dd78cad2a984853a1123ecd7416b5459d (diff)
downloaddexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.gz
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.bz2
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.lz
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.xz
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.tar.zst
dexon-sol-tools-ee380316962c1a09944f2ac62125551dc49feffd.zip
Fixes borders in why page sections
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/pages/why.tsx35
2 files changed, 24 insertions, 13 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index fb7c913a5..397bf39cd 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -21,7 +21,7 @@ interface ButtonInterface {
type?: string;
to?: string;
onClick?: () => any;
- theme: ThemeInterface;
+ theme?: ThemeInterface;
}
export const Button = (props: ButtonInterface) => {
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index bb9b058e2..6010b9c8a 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -136,7 +136,7 @@ export class NextWhy extends React.PureComponent {
<Column width="55%" maxWidth="826px">
<Column width="100%" maxWidth="560px" padding="0 30px 0 0">
<SectionWrap id="benefits">
- <Heading size="medium" marginBottom="60px">What 0x offers</Heading>
+ <SectionTitle size="medium" marginBottom="60px">What 0x offers</SectionTitle>
{_.map(offersData, (item, index) => (
<Definition
@@ -150,7 +150,7 @@ export class NextWhy extends React.PureComponent {
</SectionWrap>
<SectionWrap id="cases" isNotRelative={true}>
- <Heading size="medium" marginBottom="60px">Use Cases</Heading>
+ <SectionTitle size="medium" marginBottom="60px">Use Cases</SectionTitle>
<Slider>
{_.map(useCaseSlides, (item, index) => (
<Slide
@@ -164,7 +164,7 @@ export class NextWhy extends React.PureComponent {
</SectionWrap>
<SectionWrap id="functionality">
- <Heading size="medium" marginBottom="60px">Exchange Functionality</Heading>
+ <SectionTitle size="medium" marginBottom="60px">Exchange Functionality</SectionTitle>
{_.map(functionalityData, (item, index) => (
<Definition
@@ -203,15 +203,6 @@ const SectionWrap = styled.div<SectionProps>`
margin-top: 60px;
}
- & + &:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- height: 1px;
- background-color: #3d3d3d;
- }
-
@media (min-width: 768px) {
& + &:before {
width: 100vw;
@@ -227,6 +218,26 @@ const SectionWrap = styled.div<SectionProps>`
}
`;
+const SectionTitle = styled(Heading)`
+ position: relative;
+
+ &:before {
+ content: '';
+ width: 100vw;
+ position: absolute;
+ top: -30px;
+ left: 0;
+ height: 1px;
+ background-color: #3d3d3d;
+ }
+
+ @media (max-width: 768px) {
+ &:before {
+ width: calc(100vw - 60px);
+ }
+ }
+`;
+
const NavStickyWrap = styled(WrapSticky)`
padding-left: 60px;
z-index: 15;