Refactors <Icon>

5 files changed, 45 insertions, 17 deletions

diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 28a8b3c60..2775601b0 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,23 +1,43 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import IconCoin from 'ts/@next/icons/illustrations/coin.svg';
 
 interface Props {
-    icon: any;
+    name: string;
     size?: string;
 }
 
-export const IconClass: React.FunctionComponent<Props> = (props: Props) => {
+const ICONS = {
+    coin: IconCoin,
+};
+
+export const Icon: React.FunctionComponent<Props> = (props: Props) => {
+    const IconSVG = ICONS[props.name];
+
     return (
-        <div />
+        <StyledIcon {...props}>
+            <IconSVG />
+        </StyledIcon>
     );
 };
 
-export const Icon = styled(IconClass)`
-    margin: auto;
+const _getSize = (size: string | number = 'small'): string => {
+    if (isNaN(size)) {
+        return `var(--${size}Icon)`;
+    }
+
+    return `${size}px`;
+};
+
+const StyledIcon = styled.figure`
+    width: ${props => _getSize(props.size)};
+    height: ${props => _getSize(props.size)};
+    margin: 0;
     flex-shrink: 0;
 
-    ${(props: Props) => props.size && `
-        width: ${props.size};
-        height: auto;
-    `}
+    svg {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 `;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 1fa145368..48b8ec074 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -33,7 +33,6 @@ interface ColumnProps {
     isNoPadding?: boolean;
     isPadLarge?: boolean;
     bgColor?: string;
-    borderColor?: string;
 }
 
 interface GetColWidthArgs {
@@ -67,7 +66,6 @@ const COLUMN_WIDTHS: ColumnWidths = {
 };
 
 export const Main = styled.main`
-    border: 1px dotted rgba(0, 0, 255, 0.3);
     width: calc(100% - 0);
     max-width: ${MAX_WIDTH}px;
     margin: 0 auto;
@@ -87,7 +85,6 @@ export const Section = styled.section<SectionProps>`
     margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
     margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
-    border: 1px dotted rgba(0, 255, 0, 0.15);
 
     @media (min-width: 1560px) {
         width: ${props => props.isFullWidth && '100vw'};
@@ -133,9 +130,7 @@ export const WrapGrid = styled(WrapBase)`
 
 export const Column = styled.div<ColumnProps>`
     padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
-    border: 1px dotted rgba(255, 0, 0, 0.15);
     background-color: ${props => props.bgColor};
-    border-color: ${props => props.borderColor && `${props.borderColor}`};
 
     @media (min-width: ${BREAKPOINTS.mobile}) {
         width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index f30f8e2b1..8ddf78922 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -45,6 +45,9 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
             --defaultParagraph: 18px;
             --mediumParagraph: 22px;
             --largeParagraph: 28px;
+            --smallIcon: 75px;
+            --mediumIcon: 85px;
+            --largeIcon: 145px;
         }
     }
 
@@ -62,6 +65,9 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
             --defaultParagraph: 16px; // TO DO
             --mediumParagraph: 16px; // TO DO
             --largeParagraph: 18px; // TO DO
+            --smallIcon: 45px;
+            --mediumIcon: 55px;
+            --largeIcon: 115px;
         }
     }
 
diff --git a/packages/website/ts/@next/icons/illustrations/coin.svg b/packages/website/ts/@next/icons/illustrations/coin.svg
index cd296ebe2..a1fb123a4 100644
--- a/packages/website/ts/@next/icons/illustrations/coin.svg
+++ b/packages/website/ts/@next/icons/illustrations/coin.svg
@@ -1 +1 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 87c23.748 0 43-19.252 43-43S67.748 1 44 1 1 20.252 1 44s19.252 43 43 43z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M43.999 78.4c18.998 0 34.4-15.401 34.4-34.4 0-18.998-15.401-34.4-34.4-34.4S9.599 25.002 9.599 44C9.599 63 25 78.4 43.999 78.4z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M35.1 57.76v1h20.529v-7.395h-6.098V26.738H42.36l-.254.173-6.568 4.456-.438.298v8.906l1.561-1.06 5.006-3.397v15.251H35.1v6.395z" stroke="#00AE99" stroke-width="2"/><path d="M9.597 43.766c7.115-1.173 12.588-7.271 12.588-14.777 0-3.362-1.095-6.41-2.971-8.913-5.864 6.177-9.538 14.542-9.617 23.69zM9.597 44.234c.079 9.226 3.753 17.513 9.617 23.69a14.719 14.719 0 0 0 2.97-8.913c0-7.506-5.472-13.682-12.587-14.777zM78.399 43.766c-7.115-1.173-12.587-7.271-12.587-14.777 0-3.362 1.094-6.41 2.97-8.913 5.864 6.177 9.539 14.542 9.617 23.69zM78.399 44.235c-.079 9.225-3.753 17.512-9.617 23.689a14.718 14.718 0 0 1-2.97-8.913c0-7.506 5.472-13.682 12.587-14.776z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 87c23.748 0 43-19.252 43-43S67.748 1 44 1 1 20.252 1 44s19.252 43 43 43z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M43.999 78.4c18.998 0 34.4-15.401 34.4-34.4 0-18.998-15.401-34.4-34.4-34.4S9.599 25.002 9.599 44C9.599 63 25 78.4 43.999 78.4z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/><path d="M35.1 57.76v1h20.529v-7.395h-6.098V26.738H42.36l-.254.173-6.568 4.456-.438.298v8.906l1.561-1.06 5.006-3.397v15.251H35.1v6.395z" stroke="#00AE99" stroke-width="2"/><path d="M9.597 43.766c7.115-1.173 12.588-7.271 12.588-14.777 0-3.362-1.095-6.41-2.971-8.913-5.864 6.177-9.538 14.542-9.617 23.69zM9.597 44.234c.079 9.226 3.753 17.513 9.617 23.69a14.719 14.719 0 0 0 2.97-8.913c0-7.506-5.472-13.682-12.587-14.777zM78.399 43.766c-7.115-1.173-12.587-7.271-12.587-14.777 0-3.362 1.094-6.41 2.97-8.913 5.864 6.177 9.539 14.542 9.617 23.69zM78.399 44.235c-.079 9.225-3.753 17.512-9.617 23.689a14.718 14.718 0 0 1-2.97-8.913c0-7.506 5.472-13.682 12.587-14.776z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/></svg>
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index fd6b5345b..d4ad55b9d 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import {colors} from 'ts/style/colors';
 
 import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {Icon} from 'ts/@next/components/icon';
 import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -93,7 +94,7 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
 
         <Section bgColor={colors.backgroundDark} isPadLarge={true}>
             <WrapCentered width="narrow">
-                <ProtocolIcon/>
+                <Icon name="coin" size="small" />
 
                 <Paragraph
                     size="large"
@@ -115,7 +116,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
             <Wrap padding={['large', 0, 0, 0]}>
                 {/* NOTE: this probably should be withComponent as part of a <dl> */}
                 <Column colWidth="1/3" isNoPadding={true}>
-                    <Heading size="medium" isCentered={true}>
+                    <Heading
+                        size="medium"
+                        isCentered={true}
+                        isNoMargin={true}
+                    >
                         873,435
                     </Heading>
 
@@ -132,6 +137,7 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                     <Heading
                         size="medium"
                         isCentered={true}
+                        isNoMargin={true}
                     >
                         $203M
                     </Heading>
@@ -149,6 +155,7 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
                     <Heading
                         size="medium"
                         isCentered={true}
+                        isNoMargin={true}
                     >
                         227,372
                     </Heading>