css changes and center docsearch migration

styles/_forms.scss

@@ -4,14 +4,14 @@
     color: $white;
     background-color: $gray-800;
     border-radius: $border-radius-sm 0 0 $border-radius-sm;
-    padding: .5rem .5rem .5rem 1rem;
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
     line-height: 1.5;
   }
 
   .ds-input {
     background-color: $gray-800;
     border-radius: 0 $border-radius-sm $border-radius-sm 0;
-    padding: .75rem 1rem .75rem .5rem;
+    padding: 0.75rem 1rem 0.75rem 0.5rem;
     width: 100%;
     border: 1px solid $gray-800;
 
@@ -27,12 +27,18 @@
 }
 
 #algolia-autocomplete-listbox-0 {
-    z-index: 1100 !important;
+  z-index: 1100 !important;
 }
 
 .xrp-ledger-dev-portal {
   // The extra specificity makes this override the default Algolia styles.
   // Algolia Search results --------------------------------------------------
+  .DocSearch-Modal {
+    top: 85px;
+  }
+  #centersearchboxcontainer {
+    justify-content: center;
+  }
   .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
     background-color: $dropdown-bg;
     border: 0;
@@ -70,7 +76,17 @@
     background-color: $gray-700;
   }
 
-  .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--category-header
+    .algolia-docsearch-suggestion--category-header-lvl0
+    .algolia-docsearch-suggestion--highlight,
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--category-header
+    .algolia-docsearch-suggestion--category-header-lvl1
+    .algolia-docsearch-suggestion--highlight,
+  .algolia-autocomplete
+    .algolia-docsearch-suggestion--text
+    .algolia-docsearch-suggestion--highlight {
     box-shadow: none;
     background-color: $gray-700;
   }

template/page-404.html.jinja

@@ -7,7 +7,7 @@
         <p>Sorry, this page does not exist. Try looking in the <a href="/docs.html#full-doc-index">Full Documentation Index</a>, or you can search the site:</p>
         <form role="search">
           <div class="form-group">
-            <div class="input-group">
+            <div class="input-group" id="centersearchboxcontainer">
               <label class="input-group-prepend" for="docsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
               <input id="docsearchbox" type="text" class="form-control searchinput" placeholder="{% trans %}Search for articles, training, and code samples...{% endtrans %}">
             </div><!--/.form-group-->

template/page-docs.html.jinja

@@ -14,7 +14,7 @@
       <div class="center-search search">
         <form role="search">
           <div class="form-group">
-            <div class="input-group">
+            <div class="input-group" id="centersearchboxcontainer">
               <label class="input-group-prepend" for="docsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
               <input id="docsearchbox" type="text" class="form-control searchinput" placeholder="{% trans %}Search for articles, training, and code samples...{% endtrans %}">
             </div><!--/.form-group-->
@@ -129,12 +129,13 @@
 
 {% block endbody %}
 <script type="text/javascript"> docsearch({
-apiKey: '70de5b9b8ef95460f3c6e04054b325b2',
-indexName: 'xrpl',
-inputSelector: '#docsearchbox',
-algoliaOptions: { 'facetFilters': ["lang:{{target.lang}}"] },
-debug: false
-});
+  apiKey: '3431349deec23b0bc3dcd3424beb9a6e',
+  indexName: 'xrpl',
+  container: '#centersearchboxcontainer',
+  appId: 'R39QY3MZC7',
+  algoliaOptions: { 'facetFilters': ["lang:en"] },
+  debug: false
+  });
 </script>
 {% endblock %}