aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/definition.tsx8
-rw-r--r--packages/website/ts/@next/components/hero.tsx6
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx1
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx2
-rw-r--r--packages/website/ts/@next/components/slider/slider.tsx6
-rw-r--r--packages/website/ts/@next/components/text.tsx2
7 files changed, 17 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 721ac8498..377d1d820 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -30,7 +30,7 @@ export const Button = styled.button<ButtonInterface>`
border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`};
display: inline-block;
background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
- border-color: ${props => (props.isTransparent && !props.isWithArrow) && '#6a6a6a'};
+ border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
text-align: center;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 54fd56cde..cab153361 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
import {Link} from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
+import { Paragraph } from 'ts/@next/components/text';
interface Action {
label: string;
@@ -34,7 +35,7 @@ export const Definition = (props: Props) => (
{props.title}
</Title>
- <Paragraph>
+ <Paragraph isMuted={true}>
{props.description}
</Paragraph>
@@ -97,11 +98,6 @@ const Title = styled.h2`
margin-bottom: 15px;
`;
-const Paragraph = styled.p`
- font-size: 17px;
- opacity: 0.75;
-`;
-
const LinkWrap = styled.div`
display: inline-flex;
margin-top: 60px;
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index d5a503337..9ba67df91 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -84,9 +84,13 @@ const Description = styled.p`
font-size: 22px;
line-height: 31px;
padding: 0;
- margin-bottom: 30px;
+ margin-bottom: 50px;
color: rgba(255, 255, 255, 0.75);
${addFadeInAnimation('0.5s', '0.15s')}
+
+ @media (max-width: 1024px) {
+ margin-bottom: 30px;
+ }
`;
const Content = styled.div`
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 0d55a4522..d8b58d07c 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -23,6 +23,7 @@ export const SectionLandingAbout = () => (
<Paragraph
size="large"
isCentered={true}
+ isMuted={1}
padding={['large', 0, 'default', 0]}
>
0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 93869f16c..92ae76235 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -29,7 +29,7 @@ const GLOBAL_THEMES: ThemeInterface = {
darkBgColor: '#111A19',
lightBgColor: '#003831',
textColor: '#FFFFFF',
- paragraphColor: '#777777',
+ paragraphColor: '#FFFFFF',
linkColor: colors.brandLight,
mobileNavBgUpper: '#003831',
mobileNavBgLower: '#022924',
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx
index 710351566..96d3960a3 100644
--- a/packages/website/ts/@next/components/slider/slider.tsx
+++ b/packages/website/ts/@next/components/slider/slider.tsx
@@ -77,6 +77,7 @@ const StyledSlider = styled.div`
}
.flickity-button {
+ cursor: pointer;
position: absolute;
width: 74px;
height: 74px;
@@ -86,12 +87,17 @@ const StyledSlider = styled.div`
top: calc(50% - 37px);
border: 0;
padding: 0;
+ transition: background-color .30s ease-in-out;
&:disabled {
opacity: 0;
visibility: hidden;
}
+ &:hover {
+ background-color: hsla(0, 0%, 10%, 1);
+ }
+
&.previous {
left: 0;
}
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 9e801003f..54d4764f3 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -41,7 +41,7 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
const {
asElement = 'h1',
children,
- ...style,
+ ...style
} = props;
const Component = StyledHeading.withComponent(asElement);