From 16f69ad718173266bd31b26b49f573cc175aed38 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 10 Dec 2018 11:21:40 +0100 Subject: Refactors --- packages/website/ts/@next/components/icon.tsx | 38 +++++++++++++++++----- packages/website/ts/@next/components/layout.tsx | 5 --- .../website/ts/@next/constants/globalStyle.tsx | 6 ++++ .../website/ts/@next/icons/illustrations/coin.svg | 2 +- packages/website/ts/@next/pages/landing.tsx | 11 +++++-- 5 files changed, 45 insertions(+), 17 deletions(-) (limited to 'packages') 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) => { +const ICONS = { + coin: IconCoin, +}; + +export const Icon: React.FunctionComponent = (props: Props) => { + const IconSVG = ICONS[props.name]; + return ( -
+ + + ); }; -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` 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` 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 ` --defaultParagraph: 18px; --mediumParagraph: 22px; --largeParagraph: 28px; + --smallIcon: 75px; + --mediumIcon: 85px; + --largeIcon: 145px; } } @@ -62,6 +65,9 @@ const GlobalStyles = withTheme(createGlobalStyle ` --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 @@ - \ No newline at end of file + 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<{}> = () => (
- + = () => ( {/* NOTE: this probably should be withComponent as part of a
*/} - + 873,435 @@ -132,6 +137,7 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( $203M @@ -149,6 +155,7 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( 227,372 -- cgit