search items styling for darkmode

packages/fakeyou/src/AppNew.scss

@@ -195,6 +195,21 @@ $headings-font-family: "Merriweather", serif;
         }
       }
 
+      .menu-item {
+        color: $white;
+        background-color: $input-dark;
+        border-bottom: 1px solid;
+        border-color: rgba($white, 0.05);
+
+        &:hover {
+          background-color: lighten($input-dark, 10%);
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
       .form-control::placeholder {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: rgba($white, 0.5) !important;

packages/fakeyou/src/scss/site-refresh.scss

@@ -252,6 +252,13 @@ styles with important tags:
     padding-left: 2.375rem;
     padding-right: 2.375rem;
     cursor: pointer;
+    background-color: $white;
+    border-bottom: 1px solid;
+    border-color: rgba(#000, 0.06);
+
+    &:hover {
+      background-color: darken($white, 10%);
+    }
   }
 
   .login-panel {

packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx

@@ -31,12 +31,14 @@ export function AutocompleteSearch(props: Props) {
 
   // NB: Hack to constrain number of matches.
   // It would be nice if the library stopped searching.
-  const maxMenuItems = 15;
+  const maxMenuItems = 14;
 
   return (
     <>
       <div>
-        <label className="sub-title">{t("tts.TtsModelListPage.form.searchLabel")}</label>
+        <label className="sub-title">
+          {t("tts.TtsModelListPage.form.searchLabel")}
+        </label>
         <div className="form-group input-icon">
           {/* NB: See note above about this library. */}
           <span className="form-control-feedback">
@@ -61,12 +63,7 @@ export function AutocompleteSearch(props: Props) {
               </div>
             )}
             renderItem={(item: TtsModelListItem, isHighlighted: boolean) => (
-              <div
-                className="menu-item"
-                style={{ background: isHighlighted ? "lightgray" : "white" }}
-              >
-                {item.title}
-              </div>
+              <div className="menu-item">{item.title}</div>
             )}
             value={searchValue}
             onChange={(e: any) => setSearchValue(e.target.value)}

packages/storyteller-stream/.env

@@ -0,0 +1,2 @@
+BROWSER=none
+HTTPS=true