restyle action buttons

TheSavior · Jul 1, 2019 · b2ede31 · b2ede31
1 parent 3540058
commit b2ede31
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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;
 }