💄 Redesign the Algolia search result display UI.

assets/css/_common/components/third-party/search.scss

@@ -55,12 +55,7 @@
     }
 
     .search-header {
-      background: $gainsboro;
+      background: var(--content-bg-color);      
-      @if $darkmode {
-        @media (prefers-color-scheme: dark) {
-          background: $grey-dim;
-        }
-      }
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       display: flex;
@@ -72,6 +67,7 @@
       border: 0;
       outline: 0;
       width: 100%;
+      color: var(--text-color);
 
       &::-webkit-search-cancel-button {
         display: none;
@@ -81,7 +77,7 @@
     .search-result-container {
       height: calc(100% - 55px);
       overflow: auto;
-      padding: 5px 25px;
+      padding: 0px 25px;
 
       hr {
         margin: 5px 0 10px;
@@ -92,6 +88,37 @@
       }
     }
 
+    .search-footer {
+      background: var(--content-bg-color);
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      display: flex;
+      padding: 0 5px;
+
+      div {
+        color: var(--text-color);
+        padding: 5px;
+      }
+
+      .search-hit-stats {
+        width: 65%;
+        font-size: $font-size-smaller;
+        
+      }
+      .search-vendor {
+        width: 35%;
+        text-align: right;
+        font-size: $font-size-small;
+        
+        img {
+          width: 68px;
+          margin: 5px;
+          vertical-align: middle;
+          display: inline;
+        }      
+      }
+    }
+
     .search-result-list {
       margin: 0 5px;
       padding: 0;
@@ -141,6 +168,10 @@
     opacity: 1;
     padding: 0;
 
+    .pagination {
+      visibility: visible;
+    }
+
     .pagination-item {
       display: inline-block;
     }

assets/js/third-party/search/algolia.js

@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const stats = NexT.CONFIG.i18n.hits_time
               .replace('${hits}', data.nbHits)
               .replace('${time}', data.processingTimeMS);
-            return `<span>${stats}</span><img src="/imgs/algolia-logo.svg" alt="Algolia">`;
+            return `${stats}`;
           }
         },
         cssClasses: {

layouts/partials/_thirdparty/search/algolia.html

@@ -8,7 +8,13 @@
   </span>
 </div>
 <div class="search-result-container">
-  <div class="algolia-stats"><hr></div>
   <div class="algolia-hits"></div>
   <div class="algolia-pagination"></div>
 </div>
+<div class="search-footer">
+  <div class="search-hit-stats algolia-stats"></div>
+  <div class="search-vendor">
+    <span>Search By</span>
+    <img src="/imgs/algolia-logo.svg"/>
+  </div>
+</div>