From ac911930f72786e3c81e3bee6ac601380b54c636 Mon Sep 17 00:00:00 2001
From: Surendran <surendran@hasura.io>
Date: Tue, 14 May 2019 16:08:02 +0530
Subject: [PATCH] Nav bar arrow update

---
 .../homepage/src/components/Header.js         |  6 ++++
 .../homepage/src/styles/styles.scss           | 30 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
index cd64899cdfb23..83e01d0947e9a 100644
--- a/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
+++ b/community/learn/graphql-tutorials/backend-services/homepage/src/components/Header.js
@@ -23,6 +23,8 @@ class TopBanner extends React.Component {
             <div id="navbar" className="navbar-collapse collapse">
               <ul className="nav navbar-nav navbar-right navBarWrapper">
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="frontend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">FRONTEND</a>
                   <div aria-labelledby="frontend" className="dropdown-menu dropdownMenu">
@@ -63,6 +65,8 @@ class TopBanner extends React.Component {
                   </div>
                 </li>
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="mobile" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MOBILE</a>
                   <div aria-labelledby="mobile" className="dropdown-menu dropdownMenu">
@@ -103,6 +107,8 @@ class TopBanner extends React.Component {
                   </div>
                 </li>
                 <li className="dropdown">
+                  <div className={'upArrow'}>
+                  </div>
                   {/* eslint-disable-next-line */}
                   <a id="backend" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BACKEND</a>
                   <div aria-labelledby="backend" className="dropdown-menu dropdownMenu">
diff --git a/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss b/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss
index 17b89f795f986..f3d57ed05fef2 100644
--- a/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss
+++ b/community/learn/graphql-tutorials/backend-services/homepage/src/styles/styles.scss
@@ -232,7 +232,15 @@ ul
 .notifyWrapper button:focus, .notifyWrapper input:focus {
   outline: none;
 }
-
+.upArrow
+{
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid #fff;
+  display: none;
+}
 .subscribe_form {
   input {
     background-color: #353535;
@@ -315,6 +323,14 @@ ul
     li
     {
       padding: 10px 20px;
+      position: relative;
+      .upArrow
+      {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: -2px;
+      }
       a
       {
         font-family: 'Raleway';
@@ -343,6 +359,7 @@ ul
         border-radius: 2px;
         top: 42px;
         padding: 15px 10px;
+        border: 0 !important;
         .dropdownMenuBgImg
         {
           position: absolute;
@@ -439,6 +456,17 @@ ul
         }
       }
     }
+    .open
+    {
+      a {
+        opacity: 1 !important;
+      }
+      .upArrow
+      {
+        display: block;
+      }
+    }
+
     .active
     {
       a, span