diff --git a/website/src/assets/icons/Line 26.svg b/website/src/assets/icons/Line 26.svg
new file mode 100644
index 00000000..e5f766db
--- /dev/null
+++ b/website/src/assets/icons/Line 26.svg
@@ -0,0 +1,3 @@
+
diff --git a/website/src/assets/icons/arrow_right.svg b/website/src/assets/icons/arrow_right.svg
index 5d3313fe..b07ebc96 100644
--- a/website/src/assets/icons/arrow_right.svg
+++ b/website/src/assets/icons/arrow_right.svg
@@ -1,6 +1,3 @@
-
\ No newline at end of file
+
diff --git a/website/src/components/Button/index.js b/website/src/components/Button/index.js
index 39b247f2..3433af64 100644
--- a/website/src/components/Button/index.js
+++ b/website/src/components/Button/index.js
@@ -53,6 +53,7 @@ const Button = styled.button`
svg {
.nostroke {
stroke: none;
+ fill: ${getThemeColor('background')};
}
}
}
diff --git a/website/src/components/CodeBlock/Mdx.js b/website/src/components/CodeBlock/Mdx.js
index 6fcd4ba5..984765b2 100644
--- a/website/src/components/CodeBlock/Mdx.js
+++ b/website/src/components/CodeBlock/Mdx.js
@@ -18,7 +18,7 @@ export default ({ children, className = 'javascript', language }) => {
style={{
...style,
overflowX: 'auto',
- padding: 16,
+ padding: 30,
borderRadius: 4,
margin: '20px 0 20px 0',
fontSize: 14,
diff --git a/website/src/components/CodeBlock/index.js b/website/src/components/CodeBlock/index.js
index 2a54f394..9ce484c0 100644
--- a/website/src/components/CodeBlock/index.js
+++ b/website/src/components/CodeBlock/index.js
@@ -9,6 +9,7 @@ import { H4, AttributionText } from 'components/Typo';
const Wrapper = styled(Box)`
max-width: 750px;
margin: 0 auto;
+ padding: 5px 0;
h4 {
margin-bottom: 10px;
diff --git a/website/src/components/Header/index.js b/website/src/components/Header/index.js
index 3f0f85b3..7db4d6c3 100644
--- a/website/src/components/Header/index.js
+++ b/website/src/components/Header/index.js
@@ -117,7 +117,7 @@ const NavItem = styled(Link)`
const GithubButton = styled.a`
font-size: 30px;
display: block;
- padding: ${(p) => (p.isButton ? '8px 16px' : '16px 0')};
+ padding: ${(p) => (p.isButton ? '12px 24px' : '16px 0')} !important;
text-align: center;
color: ${getThemeColor('textLight')};
diff --git a/website/src/components/TeaserFlow/index.js b/website/src/components/TeaserFlow/index.js
index 88b11760..74739f08 100644
--- a/website/src/components/TeaserFlow/index.js
+++ b/website/src/components/TeaserFlow/index.js
@@ -37,8 +37,21 @@ const ReactFlowWrapper = styled(Box)`
const DocsLink = styled(Link)`
display: flex;
+ font-weight: bold;
align-items: center;
margin-top: 16px;
+
+ svg {
+ transform: translateX(0px);
+ transition: all 0.125s ease-in-out;
+ }
+
+ &:hover {
+ svg {
+ transform: translateX(5px);
+ transition: all 0.125s ease-in-out;
+ }
+ }
`;
const DescriptionWrapper = styled(Box)`
@@ -53,10 +66,10 @@ const DescriptionWrapper = styled(Box)`
const Description = ({ title, description }) => (
{title}
- {description}
+ {description}
Documentation{' '}
-
+
);
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 22ec8269..5bbfbf26 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -30,6 +30,7 @@ const metaTags = {
const SectionSubtitle = styled(H4)`
font-weight: 400;
line-height: 1.5;
+ margin: 30px 0;
color: ${getThemeColor('silverDarken30')};
`;
@@ -55,17 +56,30 @@ const DocsButton = styled(Button)`
const ExampleButton = styled(Link)`
pointer-events: all;
display: flex;
+ font-weight: bold;
align-items: center;
&&& {
- color: ${getThemeColor('text')};
+ color: ${getThemeColor('red')};
+
+ svg {
+ transform: translateX(0px);
+ transition: all 0.125s ease-in-out;
+ }
+
+ polyline,
+ path,
+ line {
+ stroke: none;
+ fill: ${getThemeColor('red')};
+ }
&:hover {
color: ${getThemeColor('red')};
- polyline,
- line {
- stroke: ${getThemeColor('red')};
+ svg {
+ transform: translateX(5px);
+ transition: all 0.125s ease-in-out;
}
}
}
@@ -111,7 +125,7 @@ const Home = () => {
Examples