search bar updates

packages/fakeyou.com/src/components/common/Badge/Badge.scss

@@ -18,6 +18,12 @@
   &.shadow {
     box-shadow: 0 0 12px rgba($bg, 0.4);
   }
+
+  &.badge-small {
+    font-size: 11px;
+    padding: 1px 6px;
+    border-radius: 0.3rem;
+  }
 }
 
 @each $color, $value in $badge-colors {

packages/fakeyou.com/src/components/common/Badge/Badge.tsx

@@ -6,6 +6,7 @@ interface BadgeProps {
   color: string;
   overlay?: boolean;
   className?: string;
+  small?: boolean;
 }
 
 export default function Badge({
@@ -13,10 +14,11 @@ export default function Badge({
   color,
   overlay = false,
   className = "",
+  small = false,
 }: BadgeProps) {
   const badgeClass = `fy-badge badge-${color} ${
     overlay ? "shadow" : ""
-  } mb-0 ${className}`.trim();
+  } mb-0 ${className} ${small ? "badge-small" : ""}`.trim();
 
   return <span className={badgeClass}>{label}</span>;
 }

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss

@@ -0,0 +1,70 @@
+@import "scss/colours.scss";
+
+.search-bar-container {
+  display: flex;
+  justify-content: center;
+}
+
+.search-bar-group {
+  position: relative;
+  width: 580px;
+}
+
+.search-field {
+  .form-control {
+    padding-top: 7.25px !important;
+    padding-bottom: 7.25px !important;
+    border-radius: 0.5rem 0 0 0.5rem !important;
+    position: relative;
+    z-index: 3;
+
+    &::placeholder {
+      color: rgba($white, 0.3) !important;
+    }
+  }
+}
+
+.search-results-dropdown {
+  position: absolute;
+  border-color: lighten($panel-inner, 6%) !important;
+  border: 1px solid;
+  top: 46px;
+  width: 100%;
+  z-index: 4;
+  border-radius: 0.5rem;
+  overflow: hidden;
+
+  .search-results-dropdown-item {
+    background-color: $panel-inner;
+    border-bottom: 1px solid lighten($panel-inner, 6%);
+    transition: 0.05s;
+
+    &:hover {
+      background-color: lighten($panel-inner, 6%);
+      cursor: pointer;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .view-more {
+    display: flex;
+    justify-content: center;
+    color: $primary;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.search-bar-button {
+  border-radius: 0 0.5rem 0.5rem 0 !important;
+  border-color: lighten($secondary, 5%) !important;
+  background-color: lighten($secondary, 5%) !important;
+
+  &:hover {
+    border-color: lighten($secondary, 10%) !important;
+    background-color: lighten($secondary, 10%) !important;
+  }
+}

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from "react";
-import Input from "../Input";
 import Button from "../Button";
 import { faSearch } from "@fortawesome/pro-solid-svg-icons";
 import {
@@ -8,12 +7,14 @@ import {
 } from "@storyteller/components/src/api/tts/SearchTtsModels";
 import SearchResultsDropdown from "./SearchResultsDropdown";
 import SearchField from "./SearchField";
+import "./SearchBar.scss";
 
 interface SearchBarProps {}
 
 export default function SearchBar(props: SearchBarProps) {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
 
   const maybeSearch = useCallback(async (value: string) => {
     setSearchTerm(value);
@@ -41,11 +42,22 @@ export default function SearchBar(props: SearchBarProps) {
     doSearch(searchTerm);
   }, [doSearch, searchTerm]);
 
+  const onBlurHandler = () => {
+    setTimeout(() => {
+      setIsFocused(false);
+    }, 100);
+  };
+
   return (
     <div className="search-bar-container">
-      <div>
-        <SearchField value={searchTerm} onChange={maybeSearch} />
-        <SearchResultsDropdown data={foundTtsModels} />
+      <div className="search-bar-group">
+        <SearchField
+          value={searchTerm}
+          onChange={maybeSearch}
+          onFocus={() => setIsFocused(true)}
+          onBlur={onBlurHandler}
+        />
+        {isFocused && <SearchResultsDropdown data={foundTtsModels} />}
       </div>
 
       <Button

packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx

@@ -1,21 +1,28 @@
 import React from "react";
 import Input from "../Input";
-import { faSearch } from "@fortawesome/pro-solid-svg-icons";
 
 interface SearchFieldProps {
   value: string;
   onChange: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
-export default function SearchField({ value, onChange }: SearchFieldProps) {
+export default function SearchField({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+}: SearchFieldProps) {
   return (
     <Input
-      icon={faSearch}
       type="text"
       value={value}
       onChange={e => onChange(e.target.value)}
-      placeholder="Search..."
-      className="search-bar"
+      placeholder="Search for a model weight"
+      className="search-field"
+      onFocus={onFocus}
+      onBlur={onBlur}
     />
   );
 }

packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx

@@ -1,13 +1,7 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { TtsModel } from "@storyteller/components/src/api/tts/SearchTtsModels";
 import React from "react";
-import { Link } from "react-router-dom";
-import Button from "../Button";
-import {
-  faChartSimple,
-  faComment,
-  faHeart,
-} from "@fortawesome/pro-solid-svg-icons";
+import { Link, useHistory } from "react-router-dom";
+import Badge from "../Badge";
 
 interface SearchResultsDropdownProps {
   data: TtsModel[];
@@ -19,58 +13,56 @@ export default function SearchResultsDropdown({
   let likes = 1500;
   let uses = 25000;
   let comments = 25;
-  let model_type = "Tacotron2";
+  let modelCategory = "TTS";
+  let modelType = "Tacotron2";
+
+  const history = useHistory();
+
+  const handleResultClick = (item: TtsModel, event: React.MouseEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    history.push(`/weights/${item.model_token}`);
+  };
+
+  const handleInnerClick = (event: any) => {
+    event.stopPropagation();
+  };
 
   return (
-    <div className="row g-3">
-      {data.map(item => {
-        let modelPageLink = `/tts/${item.model_token}`;
+    <>
+      {data.length !== 0 && (
+        <div className="search-results-dropdown">
+          {data.map(item => {
+            // let modelPageLink = `/weight/${item.model_token}`;
 
-        return (
-          <div className="col-12 col-lg-6" key={item.model_token}>
-            <div className="model-search-results p-3">
-              <h5 className="fw-semibold mb-0">{item.title}</h5>
-              <p className="creator-name">
-                by{" "}
-                <Link
-                  className="fw-medium"
-                  to={`/profile/${item.creator_username}`}
-                >
-                  {item.creator_display_name}
-                </Link>
-              </p>
-              <div className="d-flex align-items-end">
-                <div className="flex-grow-1">
-                  <span
-                    className={`type-tag ${
-                      model_type === "Tacotron2" ? "tt2" : "tt2" // TODO
-                    }`}
-                  >
-                    TT2
-                  </span>
-                  <div className="d-flex gap-3 model-details fw-medium mt-3">
-                    <div>
-                      <FontAwesomeIcon icon={faHeart} className="me-2" />
-                      {likes && likes}
-                    </div>
-                    <div>
-                      <FontAwesomeIcon icon={faChartSimple} className="me-2" />
-                      {uses && uses}
-                    </div>
-                    <div>
-                      <FontAwesomeIcon icon={faComment} className="me-2" />
-                      {comments && comments}
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <Button label="Use Voice" small={true} to={modelPageLink} />
+            return (
+              <div
+                className="search-results-dropdown-item p-3"
+                key={item.model_token}
+                onClick={event => handleResultClick(item, event)}
+              >
+                <h6 className="fw-semibold mb-1">{item.title}</h6>
+                <div className="d-flex gap-2 align-items-center">
+                  <p className="fs-7">
+                    by{" "}
+                    <Link
+                      className="fw-medium"
+                      to={`/profile/${item.creator_username}`}
+                      onClick={handleInnerClick}
+                    >
+                      {item.creator_display_name}
+                    </Link>
+                  </p>
+                  <Badge label={"TTS"} color={"ultramarine"} small={true} />
                 </div>
               </div>
-            </div>
+            );
+          })}
+          <div className="search-results-dropdown-item view-more p-3">
+            View more results
           </div>
-        );
-      })}
-    </div>
+        </div>
+      )}
+    </>
   );
 }

packages/fakeyou.com/src/scss/nav.scss

@@ -176,35 +176,6 @@ $topbar-height: 66px;
   align-items: center;
 }
 
-.search-bar-container {
-  display: flex;
-  justify-content: center;
-}
-
-.search-bar {
-  width: 580px;
-  .form-control {
-    padding-top: 7.25px !important;
-    padding-bottom: 7.25px !important;
-    border-radius: 0.5rem 0 0 0.5rem !important;
-
-    &::placeholder {
-      color: rgba($white, 0.3) !important;
-    }
-  }
-}
-
-.search-bar-button {
-  border-radius: 0 0.5rem 0.5rem 0 !important;
-  border-color: lighten($secondary, 5%) !important;
-  background-color: lighten($secondary, 5%) !important;
-
-  &:hover {
-    border-color: lighten($secondary, 10%) !important;
-    background-color: lighten($secondary, 10%) !important;
-  }
-}
-
 @media (min-width: 992px) {
   #wrapper {
     padding-left: 260px;