Feedback from harry

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);