diff options
Diffstat (limited to 'packages/website/ts')
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); |