From b2ede31830ba0d44362be3a122fd36930d14fd16 Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Mon, 1 Jul 2019 16:19:13 -0700
Subject: [PATCH] restyle action buttons

---
 website/pages/en/index.js                    | 14 +++++++---
 website/siteConfig.js                        |  2 +-
 website/static/css/homepage/ActionButton.css | 27 ++++++++++++++++----
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index ad4af07c979..556b2e13331 100644
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -5,9 +5,9 @@ const MarkdownBlock = CompLibrary.MarkdownBlock;
 const siteConfig = require(process.cwd() + '/siteConfig.js');
 const {baseUrl} = siteConfig;
 
-function ActionButton({href, target, children}) {
+function ActionButton({href, type = 'primary', target, children}) {
   return (
-    <a className="ActionButton" href={href} target={target}>
+    <a className={`ActionButton ${type}`} href={href} target={target}>
       {children}
     </a>
   );
@@ -16,10 +16,16 @@ function ActionButton({href, target, children}) {
 function HomeCallToAction() {
   return (
     <div>
-      <ActionButton href={baseUrl + 'docs/getting-started'} target="_self">
+      <ActionButton
+        type="primary"
+        href={baseUrl + 'docs/getting-started'}
+        target="_self">
         Get started
       </ActionButton>
-      <ActionButton href={baseUrl + 'docs/tutorial'} target="_self">
+      <ActionButton
+        type="secondary"
+        href={baseUrl + 'docs/tutorial'}
+        target="_self">
         Learn basics
       </ActionButton>
     </div>
diff --git a/website/siteConfig.js b/website/siteConfig.js
index 302f25e49ff..d44ba0990c7 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -42,7 +42,7 @@ const siteConfig = {
   favicon: 'img/favicon.png',
   colors: {
     primaryColor: 'rgb(34, 34, 34)',
-    secondaryColor: '#888890',
+    secondaryColor: 'rgba(255, 255, 255, 0.8)',
     tintColor: '#f4f4f8',
     backgroundColor: 'white',
   },
diff --git a/website/static/css/homepage/ActionButton.css b/website/static/css/homepage/ActionButton.css
index 5006aa965bc..e4076cbd11b 100644
--- a/website/static/css/homepage/ActionButton.css
+++ b/website/static/css/homepage/ActionButton.css
@@ -1,15 +1,32 @@
 .ActionButton {
   text-align: center;
-  background-color: $secondaryColor;
-  color: white;
   padding: 0.75rem 1.5rem;
   font-size: 1.25rem;
   font-weight: 300;
-  margin-right: 1.5rem;
   text-decoration: none !important;
 }
 
-.ActionButton:hover {
+.ActionButton.primary {
+  color: $primaryColor;
+  background-color: $secondaryColor;
+}
+
+.ActionButton.primary:hover {
+  color: black;
+  background-color: white;
+}
+
+.ActionButton.secondary {
+  background: none;
+  color: $secondaryColor;
+}
+
+.ActionButton.secondary::after {
+  content: "›";
+  font-size: 24px;
+  margin-left: 5px;
+}
+
+.ActionButton.secondary:hover {
   color: white;
-  background-color: #777780;
 }