From 7e0b66ae8ef1201e50768c6b449a95af84922ae8 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Thu, 12 Sep 2019 08:10:55 -0700
Subject: [PATCH] Add linux/windows download buttons

Summary:
There's probably a more elegant way for doing this
so please let me know if you can think of something.

Reviewed By: danielbuechele

Differential Revision: D17318727

fbshipit-source-id: 9afcc30205171cfb07f0a749c552692cb40a3ced
---
 website/pages/en/index.js     | 14 ++++++++++++--
 website/static/css/custom.css | 27 +++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 0438c6a94..9e294138a 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -22,9 +22,19 @@ class Index extends React.Component {
             </h2>
             <div className="row">
               <a
-                className="landing-btn primary"
+                className="landing-btn landing-btn-left primary"
                 href="https://www.facebook.com/fbflipper/public/mac">
-                Download
+                Download Mac
+              </a>
+              <a
+                className="landing-btn landing-btn-middle primary"
+                href="https://www.facebook.com/fbflipper/public/linux">
+                Linux
+              </a>
+              <a
+                className="landing-btn landing-btn-right primary"
+                href="https://www.facebook.com/fbflipper/public/windows">
+                Windows
               </a>
               <a className="landing-btn" href="/docs/features/index.html">
                 Learn more
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 1cbdde70f..b1f77ea45 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -55,18 +55,41 @@ h6 {
 .landing-btn {
   display: inline-block;
   padding: 7px 20px;
-  border-radius: 6px;
   margin: 0 10px;
+  border-radius: 6px;
   border: 1px solid #777;
 }
 
-.landing-btn:hover {
+.landing-btn-left {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: 0;
+  padding-right: 10px;
+}
+
+.landing-btn-middle {
+  border-radius: 0;
+  margin: 0;
+  padding: 7px 10px;
+}
+
+.landing-btn-right {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+  padding-left: 10px;
+}
+
+.landing-btn.primary:hover {
+  background-color: #0066af;
+  border-color: #0066af;
 }
 
 .landing-btn.primary {
   background-color: #008cf2;
   color: white;
   border-color: #008cf2;
+  color: white;
 }
 
 .splash .landing-btn {