From c9e622ffb2d5849c9146eaf53b2cd09744fd44a2 Mon Sep 17 00:00:00 2001
From: sezgi <sezgi.ulucam@gmail.com>
Date: Wed, 10 Jun 2020 18:55:07 -0700
Subject: [PATCH] docs: design & UI fixes (fix #5022)

---
 docs/_static/hasura-custom.css     | 46 +++++++++++++-------------
 docs/_theme/djangodocs/layout.html | 53 +++++++++++++++---------------
 2 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/docs/_static/hasura-custom.css b/docs/_static/hasura-custom.css
index d6350cb91ac..5bb92657807 100644
--- a/docs/_static/hasura-custom.css
+++ b/docs/_static/hasura-custom.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Khula:400,700');
+@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap');
 
 html {
   background-color: #f8f8f8 !important;
@@ -122,7 +123,7 @@ samp {
   margin: 0 0 !important;
   border-radius: 5px !important;
   border: solid 1px #001934 !important;
-  background-color: transparent !important;
+  background-color: #fff;
   color: #001934 !important;
   opacity: .8 !important;
   padding: 0 16px !important;
@@ -266,6 +267,7 @@ samp {
 }
 .bannerStripWrapper .bannerStrip .bodyTextSmall
 {
+  font-family: Poppins;
   text-align: left;
   padding-top: 0;
   letter-spacing: normal;
@@ -1285,7 +1287,7 @@ article ol ol {
 	 display: none;
 	 position: absolute;
 	 right: 0;
-	 top: 13px;
+	 top: 16px;
    cursor: pointer;
 }
  .navBarToggle .iconBar {
@@ -1381,7 +1383,7 @@ article ol ol {
    font-weight: 600;
    display: flex;
    align-items: center;
-   height: 18px;
+   height: 20px;
    text-decoration: none;
 }
  .headerWrapper .navLeft .gitHubBtn .gitHubStars {
@@ -1389,7 +1391,7 @@ article ol ol {
    align-items: center;
    padding-left: 4px;
    background-color: #f1f5f8;
-   height: 18px;
+   height: 20px;
  }
  .headerWrapper .navLeft .gitHubBtn .gitHubStars img {
    width: 12px;
@@ -1402,7 +1404,7 @@ article ol ol {
  }
  .headerWrapper .navLeft .gitHubBtn .gitHubCount {
    border-left: 1px solid #d1d2d3;
-   height: 10px;
+   height: 12px;
    padding: 4px;
    line-height: 8px;
    display: flex;
@@ -1415,7 +1417,7 @@ article ol ol {
  }
 .headerWrapper .navBlueBG .navBarUL {
   padding-left: 0;
-  margin: 0 0;
+  margin: 2px 0 0;
 }
  .headerWrapper .navBlueBG .navBarUL li, .headerWrapper .navWhiteBG .navBarUL li {
    font-size: 16px;
@@ -1426,8 +1428,12 @@ article ol ol {
    margin: 0 0;
    letter-spacing: -.48px;
 }
+.headerWrapper .navBlueBG .navBarUL li, .versionTxt {
+  color: #1CD3C6;
+}
 .versionTxt {
-  position: relative;
+  font-size: 13px;
+  vertical-align: top;
 }
 .versionTxt select {
   border-radius: 8px;
@@ -1503,20 +1509,17 @@ article ol ol {
 		 position: relative;
 		 display: block;
      z-index: 10;
-	}
-  .headerWrapper .navLeft .brand {
-    margin-top: 3px;
-    padding: 5px 0;
   }
-  .headerWrapper .navLeft .socialBtn {
-    margin-top: 4px;
+  .headerWrapper .navLeft {
+    padding-top: 5px;
   }
 	 .headerWrapper .topnav .visibleMobile .navBarULMobile {
 		 padding: 10px 15px;
 		 background-color: #001934;
-		 border-top: 1px solid rgba(255, 255, 255, .6);
 		 border-bottom: 1px solid rgba(255, 255, 255, .6);
      margin-top: 0;
+     position: relative;
+     bottom: 1px;
 	}
 	 .headerWrapper .topnav .visibleMobile .navBarULMobile li {
 		 list-style-type: none;
@@ -1555,19 +1558,18 @@ article ol ol {
     display: block;
     z-index: 10;
   }
-  .headerWrapper .navLeft .brand {
-    padding: 5px 0;
-    margin-top: 0px;
-    margin-right: 16px;
+  .headerWrapper .navLeft {
+    padding-top: 5px;
   }
-  .headerWrapper .navLeft .socialBtn {
-    margin-top: 4px;
+  .headerWrapper .navLeft .brand {
+    margin-right: 16px;
   }
 	.headerWrapper .topnav .visibleMobile .navBarULMobile {
 		 padding: 10px 15px;
 		 background-color: #001934;
-		 border-top: 1px solid rgba(255, 255, 255, .6);
-		 border-bottom: 1px solid rgba(255, 255, 255, .6);
+     border-bottom: 1px solid rgba(255, 255, 255, .6);
+     position: relative;
+     bottom: 11px;
 	}
 	 .headerWrapper .topnav .visibleMobile .navBarULMobile li {
 		 list-style-type: none;
diff --git a/docs/_theme/djangodocs/layout.html b/docs/_theme/djangodocs/layout.html
index 5d720d39b9d..49e8c9b4f32 100644
--- a/docs/_theme/djangodocs/layout.html
+++ b/docs/_theme/djangodocs/layout.html
@@ -42,7 +42,7 @@
                   <img src="{{ pathto('_images/layout/hasura-con.svg', 1) }}" alt="Hasura con 2020"/>
                 </div>
                 <div class="bodyTextSmall">
-                  Hasura Con: <span class='fontNormal'>Our free online conference on Pushing the boundaries of GraphQL<span class='mLeft15'>·</span></span><span class='underLine mLeft15'>Register now</span>
+                  Hasura Con: <span class='fontNormal'>Our free online conference on pushing the boundaries of GraphQL<span class='mLeft15'>·</span></span><span class='underLine mLeft15'>Register now</span>
                 </div>
               </div>
             </div>
@@ -89,16 +89,16 @@
             </div>
             <div class="navBlueBG">
               <ul class="navBarUL">
+                <!-- <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
+                  {%- if version == '1.0' %}
+                    <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
+                  {%- else -%}
+                    <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
+                  {% endif %}
+                </select> -->
+
+                <li>v1.x</li>
                 <li class='navListActive'>
-                  <span class="versionTxt">
-                    <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
-                      {%- if version == '1.0' %}
-                        <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
-                      {%- else -%}
-                        <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
-                      {% endif %}
-                    </select>
-                  </span>
                   <a href="/docs/">Docs</a>
                 </li>
                 <li>
@@ -146,7 +146,7 @@
             </div>
             <div class='navBlueBG'>
               <span class="navBarToggle"
-                onclick="openMenu()"
+                onclick="toggleMenu()"
               >
                 <span class="iconBar"></span>
                 <span class="iconBar"></span>
@@ -158,58 +158,57 @@
                 <ul class="navBarULMobile">
                   <li>
                     <a href="/docs/"
-                      onclick="openMenu()"
-                    >
-                      Docs
-                    </a>
+                      onclick="toggleMenu()"
+                    >Docs</a>
                     <span class="versionTxt">
-                      <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
+                      v1.x
+                      <!-- <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
                         {%- if version == '1.0' %}
                           <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
                         {%- else -%}
                           <option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
                         {% endif %}
-                      </select>
+                      </select> -->
                     </span>
                   </li>
                   <li>
                     <a href='https://hasura.io/blog/'
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       Blog
                     </a>
                   </li>
                   <li>
                     <a href='https://hasura.io/learn/'
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       Tutorials
                     </a>
                   </li>
                   <li>
                     <a href="https://hasura.io/enterprise/"
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       Enterprise
                     </a>
                   </li>
                   <li>
                     <a href="https://hasura.io/hasura-pro/"
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       Hasura Pro
                     </a>
                   </li>
                   <li>
                     <a href="https://hasura.io/pricing/"
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       Pricing
                     </a>
                   </li>
                   <li>
                     <a href='https://hasura.io/docs/1.0/graphql/manual/getting-started/index.html'
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       <button class='commonBtn navBtnHome'>
                         Get Started
@@ -218,7 +217,7 @@
                   </li>
                   <li>
                     <a href="https://calendly.com/hasura/prod-expert-call"
-                      onclick="openMenu()"
+                      onclick="toggleMenu()"
                     >
                       <button class="commonBtn navBtnContactHome">
                         Talk to a Product Expert
@@ -340,7 +339,7 @@
               <div class="subscribe-form-wrapper">
                 <div id="mc_embed_signup">
                   <div class="subscribe-form-content">
-                    Stay up to date with product & security updates
+                    Stay up to date with product & security news
                   </div>
                   <form action="https://hasura.us13.list-manage.com/subscribe/post?u=9b63e92a98ecdc99732456b0e&amp;id=f5c4f66bcf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mailchimp-form" target="_blank" rel="noopener" novalidate>
                       <div class="full-width">
@@ -438,8 +437,8 @@
 
   <!--Hamburger menu-->
   <script type="text/javascript">
-    function openMenu() {
-      var x = document.getElementById("navbar");
+    function toggleMenu() {
+      var x = document.getElementById("navbar")
       if (x.className === "topnav") {
         x.className += " responsive"
       } else {