aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/icon.tsx38
-rw-r--r--packages/website/ts/@next/components/layout.tsx5
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx6
-rw-r--r--packages/website/ts/@next/icons/illustrations/coin.svg2
-rw-r--r--packages/website/ts/@next/pages/landing.tsx11
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>
generated by cgit (git 2.34.1) at 2024-11-20 14:15:51 +0800