Added Algolia PoweredBy component (#46)

Author: rostyk-kanafotskyy

src/Search.scss

@@ -8,10 +8,9 @@
   grid-gap: 50px;
   width: 1000px;
   grid-template-areas:
-          "title      title"
-          "facets     productlist"
-          "pagination pagination";
-
+    "title      title"
+    "facets     productlist"
+    "pagination pagination";
 
   #{$block}__title {
     text-align: center;
@@ -25,7 +24,7 @@
     grid-area: productlist;
   }
 
-  #{$block}__productlist .ais-Hits-list{
+  #{$block}__productlist .ais-Hits-list {
     grid-area: productlist;
     flex: 1 1 auto;
     display: flex;
@@ -72,7 +71,7 @@
     &:after {
       $size: 8px;
       $border: 2px;
-      content: '';
+      content: "";
       position: absolute;
       right: 15px;
       top: 12px;
@@ -95,7 +94,6 @@
     margin-bottom: 80px;
     margin-top: 20px;
 
-
     .ais-Pagination-item {
       display: inline-block;
       font-size: $sizeMediumLarger;
@@ -128,25 +126,25 @@
 
     grid-template-columns: 1fr;
     grid-template-areas:
-            "title"
-            "facets-toggle"
-            "facets"
-            "productlist"
-            "pagination";
+      "title"
+      "facets-toggle"
+      "facets"
+      "productlist"
+      "pagination";
     grid-gap: 0;
 
     #{$block}__title {
       margin-bottom: 10px;
     }
 
-    #{$block}__facetstoggle{
+    #{$block}__facetstoggle {
       display: block;
     }
-    #{$block}__facetstoggleinput:checked ~  #{$block}__facetstoggle:after {
+    #{$block}__facetstoggleinput:checked ~ #{$block}__facetstoggle:after {
       transform: rotate(225deg);
     }
 
-    #{$block}__facetstoggleinput:checked ~  #{$block}__facets {
+    #{$block}__facetstoggleinput:checked ~ #{$block}__facets {
       max-height: 100%;
       border: 1px solid $firstComplimentColor;
     }

src/SearchBar.scss

@@ -7,13 +7,30 @@
 
   #{$block}__hints {
     position: absolute;
-    max-height: 200px;
-    overflow: scroll;
     z-index: 2;
     background-color: $mainBackgroundColor;
     left: 0;
     width: 100%;
     border: 1px solid $secondComplimentTextColor;
+
+    .ais-Hits {
+      max-height: 200px;
+      overflow: scroll;
+    }
+
+    .ais-PoweredBy {
+      text-align: right;
+      padding: 4px 10px;
+      border-top: 1px solid $firstBorderColor;
+
+      &-text {
+        font-size: 13px;
+      }
+
+      &-logo {
+        width: 65px;
+      }
+    }
   }
 
   #{$block}__hint {
@@ -35,7 +52,8 @@
     background-color: $mainBackgroundColor;
   }
 
-  #{$block}__close, #{$block}__open {
+  #{$block}__close,
+  #{$block}__open {
     display: none;
   }
 
@@ -66,7 +84,8 @@
       position: relative;
     }
 
-    .ais-SearchBox-submit, .ais-SearchBox-reset {
+    .ais-SearchBox-submit,
+    .ais-SearchBox-reset {
       position: absolute;
       width: 30px;
       height: 40px;
@@ -106,7 +125,8 @@
       padding: 10px 5px;
     }
 
-    #{$block}__open, #{$block}__close {
+    #{$block}__open,
+    #{$block}__close {
       display: inline-block;
     }
 

src/SearchBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import useOnclickOutside from 'react-cool-onclickoutside';
-import { SearchBox, Hits } from 'react-instantsearch-dom';
+import { SearchBox, Hits, PoweredBy } from 'react-instantsearch-dom';
 import { useTranslation } from './app-state';
 import { createSearchUrl } from './routes';
 
@@ -98,6 +98,7 @@ export const SearchBar: React.FC<SearchBoxProps> = () => {
             <Hits
               hitComponent={Hit}
             />
+            <PoweredBy />
           </div>
         }
       </div>