From 07b063a0a7500c2a3b477115ef1a18bae44874b5 Mon Sep 17 00:00:00 2001
From: fdnklg <mail@fabiandinklage.com>
Date: Tue, 6 Oct 2020 12:11:39 +0200
Subject: [PATCH] final css styles applied

---
 website/src/assets/icons/Line 26.svg       |  3 +++
 website/src/assets/icons/arrow_right.svg   |  9 +++-----
 website/src/components/Button/index.js     |  1 +
 website/src/components/CodeBlock/Mdx.js    |  2 +-
 website/src/components/CodeBlock/index.js  |  1 +
 website/src/components/Header/index.js     |  2 +-
 website/src/components/TeaserFlow/index.js | 17 +++++++++++++--
 website/src/pages/index.js                 | 24 +++++++++++++++++-----
 website/src/styles/global.css              |  2 ++
 9 files changed, 46 insertions(+), 15 deletions(-)
 create mode 100644 website/src/assets/icons/Line 26.svg

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 @@
+<svg width="20" height="3" viewBox="0 0 20 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="8.74228e-08" y1="1.5" x2="20" y2="1.5" stroke="#FF0072" stroke-width="2"/>
+</svg>
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 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 21 21">
-  <g fill="none" fill-rule="evenodd" stroke="#2A2E3B" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 6)">
-  <polyline points="12.329 7.328 12.328 1.67 6.671 1.669" transform="scale(1 -1) rotate(45 20.36 0)"/>
-  <line x1="13.5" x2=".5" y1="4.5" y2="4.5"/>
-  </g>
-</svg>
\ No newline at end of file
+<svg width="23" height="15" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path className="nostroke" fill-rule="evenodd" clip-rule="evenodd" d="M18.4535 6.49989L13.3195 1.73268L14.6805 0.26709L21.6805 6.76709L22.4696 7.49988L21.6805 8.23268L14.6805 14.7327L13.3195 13.2671L18.4535 8.49989L0 8.49988V6.49988L18.4535 6.49989Z" fill="#1A192B"/>
+</svg>
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 }) => (
   <DescriptionWrapper width={[1, 1, 0.35]}>
     <H2>{title}</H2>
-    <Text>{description}</Text>
+    <Text style={{ opacity: 0.7 }}>{description}</Text>
     <DocsLink to="/docs">
       Documentation{'  '}
-      <Icon width={24} name="arrow_right" colorizeStroke strokeColor="red" />
+      <Icon width={42} name="arrow_right" colorizeStroke strokeColor="red" />
     </DocsLink>
   </DescriptionWrapper>
 );
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 = () => {
                 <ExampleButton to="/examples/">
                   Examples
                   <Icon
-                    width="24px"
+                    width="40px"
                     name="arrow_right"
                     colorizeStroke
                     strokeColor="text"
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index ee9af968..55a34d23 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -43,6 +43,8 @@
 
 .react-flow {
   font-family: 'jetbrains-mono';
+  text-transform: uppercase;
+  font-size: 24px;
 }
 
 .react-flow__controls-button {